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>
 
+
.expand-on-hover:hover {
 
+
 
+
 
+
/* --- [ 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;
+
 
+
}
+
 
+
.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 {
+
background-color: #f3f3f3;
+
}
+
 
+
.content-panel.project-icons .component-holder {
+
display: flex;
+
flex-direction: column;
+
margin-top: 120px;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row {
+
display: flex;
+
flex-direction: row;
+
margin-bottom: 40px;
+
margin-left: auto;
+
margin-right: auto;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row:last-child {
+
margin-bottom: 0px;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row > * {
+
margin-right: 40px;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row > *:last-child {
+
margin-right: 0px;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row .project-component {
+
text-align: center;
+
max-width: 260px;
+
padding: 30px;
+
transform: scale(1);
+
-webkit-transition: transform 1000ms linear;
+
    -ms-transition: transform 500ms linear;
+
    transition: transform 500ms linear;
+
cursor: pointer;
+
background-color: white;
+
}
+
 
+
.content-panel.project-icons .component-holder .component-row .project-component:hover {
+
 
transform: scale(1.1);
 
transform: scale(1.1);
 
-webkit-transition: transform 500ms linear;
 
-webkit-transition: transform 500ms linear;
Line 279: Line 13:
 
}
 
}
  
.content-panel.project-icons .component-holder .component-row .project-component:hover .icon svg > * {
+
.expand-on-hover:hover .icon svg > * {
 
stroke: #F8B200;
 
stroke: #F8B200;
 
     -webkit-transition: stroke 500ms linear;
 
     -webkit-transition: stroke 500ms linear;
Line 286: Line 20:
 
}
 
}
  
.content-panel.project-icons .component-holder .component-row .project-component:hover p {
+
.expand-on-hover:hover p {
 
color: #444444;
 
color: #444444;
 
     -webkit-transition: color 500ms linear;
 
     -webkit-transition: color 500ms linear;
 
     -ms-transition: color 500ms linear;
 
     -ms-transition: color 500ms linear;
 
     transition: color 500ms linear;
 
     transition: color 500ms linear;
}
 
 
.content-panel.project-icons .component-holder .component-row .project-component p {
 
text-align: center;
 
color: #AAAAAA;
 
-webkit-transition: color 500ms linear;
 
    -ms-transition: color 500ms linear;
 
    transition: color 500ms linear;
 
}
 
 
.content-panel.project-icons .component-holder .component-row .project-component h2 {
 
 
    font-weight: 600;
 
    font-size: 16px;
 
    line-height: 24px;
 
    text-transform: uppercase;
 
    font-variant: small-caps;
 
margin-bottom: 5px;
 
 
}
 
 
.content-panel.project-icons .component-holder .component-row .project-component .icon {
 
margin-bottom: 20px;
 
}
 
 
.content-panel.project-icons .component-holder .component-row .project-component .icon svg > * {
 
stroke: #00C2FF;
 
    -webkit-transition: stroke 1000ms linear;
 
    -ms-transition: stroke 1000ms linear;
 
    transition: stroke 1000ms linear;
 
}
 
 
@media only screen and (max-width: 750px) {
 
 
    .content-panel.project-icons .component-holder .component-row {
 
        flex-direction: column;
 
        margin-bottom: 40px;
 
        margin-left: auto;
 
        margin-right: auto;
 
    }
 
 
    .content-panel.project-icons .component-holder .component-row > * {
 
        margin-right: 0px;
 
margin-bottom: 40px;
 
    }
 
 
    .content-panel.project-icons .component-holder .component-row > *:last-child {
 
        margin-right: 0px;
 
margin-bottom: 0px;
 
    }
 
 
}
 
 
 
.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
 
 
display: flex;
 
 
font-family: Barlow SemiBold;
 
font-style: normal;
 
font-weight: 600;
 
font-size: 48px;
 
 
color: rgb(68, 68, 68);
 
 
line-height: 58px;
 
letter-spacing: 0.2em;
 
text-transform: uppercase;
 
justify-content: center;
 
text-align: center;
 
 
}
 
 
.content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {
 
 
display: flex;
 
 
font-family: Barlow Medium;
 
font-style: normal;
 
font-weight: 500;
 
font-size: 36px;
 
 
color: rgba(68, 68, 68, 0.5);
 
 
line-height: 43px;
 
justify-content: center;
 
letter-spacing: 0.1em;
 
text-align: center;
 
 
margin-bottom: 80px;
 
 
}
 
 
.content-panel.dynamic-padding {
 
padding: 80px;
 
}
 
 
@media only screen and (max-width: 900px) {
 
 
.content-panel.dynamic-padding {
 
padding: 50px;
 
}
 
 
}
 
 
@media only screen and (max-width: 600px) {
 
 
.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
 
 
        font-size: 36px;
 
 
        line-height: 50px;
 
 
    }
 
 
    .content-panel.pipeline > h2, .content-panel.highlights > h2. .content-panel.project-icons > h2 {
 
 
font-size: 30px;
 
 
        line-height: 45px;
 
 
    }
 
 
}
 
 
@media only screen and (max-width: 400px) {
 
 
#bodyContent .content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
 
 
        font-size: 30px;
 
 
        line-height: 40px;
 
 
    }
 
 
    #bodyContent .content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {
 
 
font-size: 24px;
 
 
        line-height: 35px;
 
 
    }
 
 
 
}
 
}
 
</style>
 
</style>
Line 501: Line 92:
  
  
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" > <a href="https://2019.igem.org/Team:Calgary/Model/EmulsionPrediction">
+
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 expand-on-hover" > <a href="https://2019.igem.org/Team:Calgary/Model/EmulsionPrediction">
 
                 <div class="container__sources">
 
                 <div class="container__sources">
 
                     <img src="https://static.igem.org/mediawiki/2019/3/31/T--Calgary--ternaryPhaseGIF.gif" width="25%"style="margin-left: auto; margin-right: auto; display: block;"/>
 
                     <img src="https://static.igem.org/mediawiki/2019/3/31/T--Calgary--ternaryPhaseGIF.gif" width="25%"style="margin-left: auto; margin-right: auto; display: block;"/>

Revision as of 18:17, 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.

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.