Difference between revisions of "Team:Calgary/Model"

Line 5: Line 5:
 
<script src="https://2019.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Calgary/DynamicSizeModelPage?action=raw&ctype=text/javascript"></script>
 
<style>
 
<style>
 +
html, body {
 +
height: 100%;
 +
}
 +
 +
.fixed .navbar {
 +
  transition: top 0.15s linear;
 +
  background-color: #00C2FF;
 +
}
 +
 +
.interface-group {
 +
padding: 0;
 +
}
 +
 +
/* --- [ HEADER PANEL ] --- */
 +
 +
.content-panel.header {
 +
width: 100%;
 +
position: relative;
 +
}
 +
 +
.content-panel.header > .header-photo {
 +
display: none;
 +
width: 100%;
 +
}
 +
 +
.intro-message {
 +
display: flex;
 +
flex-direction: row;
 +
position: absolute;
 +
top: 50%;
 +
transform: translateY(-50%);
 +
right: 20vh;
 +
margin-left: auto;
 +
margin-right: auto;
 +
justify-content: center;
 +
}
 +
 +
#HQ_page .intro-message .text-container {
 +
flex-direction: column;
 +
background-color: white;
 +
padding: 4vw;
 +
max-width: 40vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container h1 {
 +
 +
font-style: normal;
 +
font-weight: 500;
 +
font-size: 2vw;
 +
line-height: 2.3vw;
 +
 +
color: #444444;
 +
 +
margin-bottom: 1vw;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container h1 .emphasis {
 +
 +
color: #FEC605;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container p {
 +
 +
font-size: 1.4vw;
 +
line-height: 2vw;
 +
 +
color: #6E6E6E;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container p .emphasis {
 +
 +
font-weight: 600;
 +
 +
color: #2ADD3C;
 +
 +
}
 +
 +
@media only screen and (min-width: 1100px) {
 +
 +
#header-size-1 {
 +
display: inherit;
 +
}
 +
 +
}
 +
 +
@media only screen and (min-width: 800px) and (max-width: 1099px) {
 +
 +
#header-size-1 {
 +
display: none;
 +
}
 +
 +
#header-size-2 {
 +
display: inherit;
 +
}
 +
 +
#HQ_page .intro-message {
 +
right: 16vh;
 +
}
 +
 +
#HQ_page .intro-message .text-container {
 +
padding: 6vw;
 +
max-width: 55vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container h1 {
 +
 +
font-size: 2.8vw;
 +
line-height: 3.5vw;
 +
 +
color: #444444;
 +
 +
margin-bottom: 2vw;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container p {
 +
 +
font-size: 1.8vw;
 +
line-height: 2.8vw;
 +
 +
}
 +
 +
}
 +
 +
@media only screen and (min-width: 600px) and (max-width: 799px) {
 +
 +
#header-size-1 {
 +
display: none;
 +
}
 +
 +
#header-size-2 {
 +
display: none;
 +
}
 +
 +
#header-size-3 {
 +
display: inherit;
 +
}
 +
 +
#HQ_page .intro-message {
 +
right: auto;
 +
left: 10vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container {
 +
padding: 8vw;
 +
max-width: 80vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container h1 {
 +
 +
font-size: 5vw;
 +
line-height: 6.5vw;
 +
 +
color: #444444;
 +
 +
margin-bottom: 3vw;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container p {
 +
 +
font-size: 3.3vw;
 +
line-height: 5vw;
 +
 +
}
 +
 +
}
 +
 +
@media only screen and (max-width: 599px) {
 +
 +
#header-size-1 {
 +
display: none;
 +
}
 +
 +
#header-size-2 {
 +
display: none;
 +
}
 +
 +
#header-size-3 {
 +
display: none;
 +
}
 +
 +
#header-size-4 {
 +
display: inherit;
 +
}
 +
 +
#HQ_page .intro-message {
 +
right: auto;
 +
left: 12vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container {
 +
padding: 10vw;
 +
max-width: 76vw;
 +
}
 +
 +
#HQ_page .intro-message .text-container h1 {
 +
 +
font-size: 5.5vw;
 +
line-height: 7vw;
 +
 +
color: #444444;
 +
 +
margin-bottom: 4vw;
 +
 +
}
 +
 +
#HQ_page .intro-message .text-container p {
 +
 +
font-size: 4vw;
 +
line-height: 6.3vw;
 +
 +
}
 +
 +
}
 +
 +
 +
 +
/* ------ CHANGE THE MARGINS AND PADDINGS TO % UNITS TO MAKE THEM GOOD ACROSS DEVICES*/
 +
 +
/* --- [ PIPELINE PANELS ] --- */
 +
 +
.content-panel.pipeline {
 +
background-color: #f3f3f3;
 +
}
 +
 +
#bodyContent .content-panel.pipeline h1 {
 +
 +
font-weight: 600;
 +
font-size: 36px;
 +
 +
line-height: 50px;
 +
letter-spacing: 0.2em;
 +
 +
margin-bottom: 10px;
 +
 +
}
 +
 +
#bodyContent .content-panel.pipeline h2 {
 +
 +
font-weight: 400;
 +
font-size: 30px;
 +
 +
line-height: 40px;
 +
letter-spacing: 0.1em;
 +
 +
margin-bottom: 80px;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface {
 +
display: flex;
 +
flex-direction: row;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information {
 +
background-color: #ffffff;
 +
padding: 60px;
 +
flex: 1;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information .hidden {
 +
display: none;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information h3 {
 +
 +
display: inline;
 +
 +
font-family: Barlow Medium;
 +
font-style: normal;
 +
font-weight: 500;
 +
font-size: 36px;
 +
 +
line-height: 43px;
 +
align-items: center;
 +
 +
color: rgb(68, 68, 68);
 +
 +
margin-bottom: 20px;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information p {
 +
 +
display: flex;
 +
 +
font-family: Barlow;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-size: 18px;
 +
 +
line-height: 25px;
 +
 +
color: rgb(68, 68, 68);
 +
 +
margin-bottom: 20px;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information p:last-child {
 +
 +
margin-bottom: 0px;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information .ast {
 +
 +
font-weight: 600;
 +
 +
color: #F8B200;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-diagram {
 +
margin-right: 80px;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-diagram g:hover {
 +
cursor: pointer;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-diagram g .fixed {
 +
position: absolute;
 +
}
 +
 +
@media only screen and (max-width: 900px) {
 +
 +
#bodyContent .content-panel.pipeline h1 {
 +
 +
font-size: 36px;
 +
 +
line-height: 50px;
 +
letter-spacing: 0.2em;
 +
 +
}
 +
 +
#bodyContent .content-panel.pipeline h2 {
 +
 +
font-size: 30px;
 +
 +
line-height: 40px;
 +
letter-spacing: 0.1em;
 +
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface {
 +
flex-direction: column;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-diagram {
 +
margin-right: 0px;
 +
margin-bottom: 80px;
 +
text-align: center;
 +
}
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information {
 +
padding: 40px;
 +
}
 +
 +
#proposed-diagram {
 +
 +
max-width: 70vw;
 +
 +
}
 +
 +
}
 +
 +
@media only screen and (max-width: 600px) {
 +
 +
    .content-panel.pipeline .pipeline-interface .pipeline-information h3 {
 +
 +
        font-size: 30px;
 +
 +
        line-height: 40px;
 +
 +
    }
 +
 +
}
 +
 +
@media only screen and (max-width: 400px) {
 +
 +
.content-panel.pipeline .pipeline-interface .pipeline-information h3 {
 +
 +
        font-size: 24px;
 +
 +
        line-height: 30px;
 +
 +
    }
 +
 +
}
 +
 +
 +
 +
/* --- [ MAIN MESSAGE PANEL ] --- */
 +
 +
.content-panel.main-message {
 +
background-color: #00C2FF;
 +
padding: 80px;
 +
 +
text-align: left;
 +
justify-content: left;
 +
}
 +
 +
.content-panel.main-message > * {
 +
margin-bottom: 10px;
 +
}
 +
 +
.content-panel.main-message h2 {
 +
 +
font-weight: bold;
 +
font-size: 36px;
 +
line-height: 43px;
 +
letter-spacing: 0.05em;
 +
text-transform: uppercase;
 +
 +
color: rgba(255, 255, 255, 0.6);
 +
 +
}
 +
 +
.content-panel.main-message h1 {
 +
 +
font-size: 48px;
 +
line-height: 58px;
 +
font-weight: bold;
 +
letter-spacing: 0.05em;
 +
text-transform: uppercase;
 +
 +
color: rgba(255, 255, 255, 0.9);
 +
 +
}
 +
 +
.content-panel.main-message h1 .emphasis {
 +
 +
color: #FFE600;
 +
 +
}
 +
 +
.content-panel.main-message p {
 +
 +
font-weight: 500;
 +
font-size: 24px;
 +
line-height: 29px;
 +
 +
color: rgba(255, 255, 255, 0.9);
 +
 +
max-width: 700px;
 +
 +
}
 +
 +
@media only screen and (max-width: 900px) {
 +
 +
.content-panel.main-message h2 {
 +
font-size: 30px;
 +
}
 +
 +
.content-panel.main-message h1 {
 +
font-size: 36px;
 +
}
 +
 +
.content-panel.main-message p {
 +
font-size: 21px;
 +
}
 +
 +
}
 +
 +
 +
 +
/* --- [ HIGHLIGHTS STYLING ] --- */
 +
 +
.content-panel.highlights .article-holder {
 +
display: flex;
 +
flex-direction: row;
 +
margin-top: 80px;
 +
}
 +
 +
.content-panel.highlights .article-holder .emphasis-quote {
 +
 +
display: flex;
 +
flex-direction: column;
 +
 +
justify-content: center;
 +
 +
margin-right: 40px;
 +
 +
padding: 60px;
 +
 +
}
 +
 +
.content-panel.highlights .article-holder .emphasis-quote:hover {
 +
 +
cursor:pointer;
 +
 +
}
 +
 +
.content-panel.highlights .article-holder .emphasis-quote > * {
 +
 +
margin-bottom: 60px;
 +
 +
}
 +
 +
.content-panel.highlights .article-holder .emphasis-quote > *:last-child {
 +
 +
margin-bottom: 0px;
 +
 +
}
 +
 +
#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {
 +
 +
font-weight: 500;
 +
font-size: 36px;
 +
line-height: 43px;
 +
align-items: center;
 +
text-align: center;
 +
letter-spacing: 0.1em;
 +
text-transform: uppercase;
 +
margin-left: auto;
 +
margin-right: auto;
 +
 +
color: #444444;
 +
 +
max-width: 350px;
 +
 +
}
 +
 +
.content-panel.highlights .articles {
 +
display: flex;
 +
flex-direction: column;
 +
justify-content: center;
 +
}
 +
 +
.content-panel.highlights .article-row {
 +
display: flex;
 +
flex-direction: row;
 +
margin-bottom: 40px;
 +
}
 +
 +
.content-panel.highlights .article-row:last-child {
 +
margin-bottom: 0px;
 +
}
 +
 +
.content-panel.highlights .article-row .article {
 +
 +
text-align: left;
 +
justify-content: left;
 +
margin-right: 40px;
 +
 +
max-width: 350px;
 +
 +
}
 +
 +
.content-panel.highlights .article-row .article:hover {
 +
 +
cursor: pointer;
 +
 +
}
 +
 +
.content-panel.highlights .article-row .article:last-child {
 +
 +
text-align: left;
 +
justify-content: left;
 +
margin-right: 0px;
 +
 +
}
 +
 +
 +
.content-panel.highlights .article-row .article h2 {
 +
 +
font-weight: 700;
 +
font-size: 18px;
 +
line-height: 22px;
 +
letter-spacing: 0.1em;
 +
 +
color: #00C2FF;
 +
 +
}
 +
 +
.content-panel.highlights .article-row .article h1 {
 +
 +
font-weight: 600;
 +
font-size: 24px;
 +
line-height: 29px;
 +
letter-spacing: 0.1em;
 +
 +
color: #444444;
 +
 +
}
 +
 +
.content-panel.highlights .article-row .article p {
 +
 +
font-size: 18px;
 +
line-height: 22px;
 +
letter-spacing: 0.1em;
 +
 +
color: #444444;
 +
 +
}
 +
 +
@media only screen and (max-width: 1000px) {
 +
  .content-panel.highlights .article-holder {
 +
      flex-direction: column;
 +
  }
 +
 +
.content-panel.highlights .article-holder .emphasis-quote {
 +
 +
      margin-right: 0px;
 +
margin-bottom: 40px;
 +
padding: 30px;
 +
 +
  }
 +
 +
#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {
 +
 +
        max-width: 500px;
 +
 +
    }
 +
 +
}
 +
 +
@media only screen and (max-width: 600px) {
 +
 +
    .content-panel.highlights .article-row {
 +
      flex-direction: column;
 +
      margin-bottom: 40px;
 +
  }
 +
 +
.content-panel.highlights .article-row .article {
 +
 +
        margin-right: 0px;
 +
margin-bottom: 40px;
 +
 +
        max-width: 500px;
 +
 +
    }
 +
 +
.content-panel.highlights .article-row .article:last-child {
 +
 +
margin-bottom: 0px;
 +
 +
    }
 +
 +
}
 +
 +
@media only screen and (max-width: 400px) {
 +
 +
    .content-panel.highlights .article-holder .emphasis-quote {
 +
 +
padding: 0px;
 +
text-align: center;
 +
 +
  }
 +
 +
#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {
 +
 +
        font-size: 24px;
 +
        line-height: 30px;
 +
        letter-spacing: 0.1em;
 +
        text-transform: uppercase;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
 +
    }
 +
 +
#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quotation {
 +
 +
        max-width: 20px;
 +
margin-left: auto;
 +
        margin-right: auto;
 +
 +
    }
 +
 +
 +
    .content-panel.highlights .article-holder .emphasis-quote > * {
 +
 +
        margin-bottom: 20px;
 +
 +
    }
 +
 +
    .content-panel.highlights .article-holder .emphasis-quote > *:last-child {
 +
 +
        margin-bottom: 0px;
 +
 +
    }
 +
 +
}
 +
 +
 +
 
.content-panel.project-icons {
 
.content-panel.project-icons {
 
background-color: #f3f3f3;
 
background-color: #f3f3f3;

Revision as of 18:09, 19 October 2019

Modelling

Blurb about why modelling is so important

The workflow of iGEM's Calgary modelling team followed a natural progression to inform both the wetlab and the wetlab informing our modelling.

ICARUS - Pheophorbide Production

iGEM Calgary Augmented Repulsion Universal Spacer:
A spacer to his-purify proteins.

Emulsion Construction Prediction - Emulsified Proteins

Using machine learning to predict phase of an emulsion at any composition.

Directed Protein Structure Modification - modGIX

Using in silico dynamic simulations to perform informed modifications of amino acids in proteins.

In Silico Emulsion System Verification - 6GIX

Verifying emulsified protein function and structure stability in antagonistic solvents.

Project Highlights

Green is the different between profit and loss.

Chlorophyll Repurposing

An Anti-Fungal Treatment

Fungus growth has proven to be a destructive condition for canola plants and we may have found a solution.

Modelling

Understanding our protein in different environments

With the direction, knowledge, and tools supplied by Dr. Anderson we were off to design the experiments that would allow for the better understanding of the 6GIX protein in multiple systems.

Software

Optimizing the production and synthesis of DNA

Codon optimization is a standard problem in synthetic biology. We created a tool that removes repeats, hairpins, and keeps GC richness below a certain percentage.

Entrepreneurship

Commercializing our Project

Over the summer, we examined the entrepreneurial aspects of our project and navigated intellectual property regulations and market analysis techniques.

Project
Human Centered Design
Modelling
Parts
Journal
Team