diff --git a/static/style.css b/static/style.css
index 8a8a7317d5e25c1ba66c32979127da94705f46c3..fdfa49bcc97d69ee732b484b45871b9aa99d9248 100644
--- a/static/style.css
+++ b/static/style.css
@@ -95,10 +95,9 @@ footer a:hover { color: white; text-decoration: underline; }
}
#index-background {
- background-image: url('https://static.igem.wiki/teams/4296/wiki/images/wiki-home-page-background.png');
+ background-image: url('https://static.igem.wiki/teams/4296/wiki/images/index-page-background.png');
background-repeat: no-repeat;
background-size: cover;
- background-position: center 600px;
}
/* PROGRESS INDICATOR */
@@ -229,14 +228,15 @@ footer a:hover { color: white; text-decoration: underline; }
#index-content {
display: flex;
flex-direction: column;
- background-color: var(--header-footer);
+ background-color: #ffffff;
margin-bottom: 50px;
padding: 20px;
- color: #FFFFFF;
+ color: #000000;
position: sticky;
top: 80px;
align-self: flex-start;
font-size: 20px !important;
+ border-radius: 25px;
}
/* PRELOADER */
diff --git a/wiki/pages/index.html b/wiki/pages/index.html
index df4691d99aadf6b1da32c68480cb4649cd9dfb1c..af48fc83409f07a9d5526eea2df4d4c84abeb68f 100644
--- a/wiki/pages/index.html
+++ b/wiki/pages/index.html
@@ -84,21 +84,60 @@
#value1 {
font-size: 100px;
+ text-align:left;
}
#value2 {
font-size: 100px;
+ text-align: right;
}
#percentage {
font-size: 100px;
+ text-align: left;
+ }
+
+ #celsius{
+ font-size: 100px;
+ text-align: right;
+ }
+
+ /* TEXT BOX STYLING */
+ #left-box{
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 50px;
+ padding: 20px;
+ position: sticky;
+ top: 80px;
+ align-self: flex-start;
+ font-size: 20px !important;
+ background-color:#ffffff;
+ color: #000000;
+ text-align: left;
+ border-radius:25px;
+ }
+
+ #right-box{
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 50px;
+ padding: 20px;
+ position: sticky;
+ top: 80px;
+ align-self: flex-start;
+ font-size: 20px !important;
+ background-color:#ffffff;
+ color: #000000;
+ text-align: right;
+ border-radius:25px;
}
</style>
</head>
-<body id="index-background">
+<body>
<!-- Navigation -->
{% include 'menu.html' %}
@@ -111,7 +150,7 @@
</div>
-<div class="container">
+<div id="index-background">
<br><br>
@@ -122,14 +161,14 @@
<br><br>
<div class="row">
- <div class="col-6" id="index-content">
+ <div class="col-1"></div>
+ <div class="col-5" id="left-box">
<p>
- Wheat production in Canada was down approximately
+ In 2021 Canada had the lowest wheat crop yield since 2007<span id="highlight"><sup>[1]</sup></span>. The crop yield from 2021 compared to 2020 was down
<div class="flex-container">
<div class="flex-child" id="value1">0</div>
<div class="flex-child" id="percentage">%</div>
</div>
- in 2021 compared to 2020, the lowest wheat crop yield since 2007.
</p>
</div>
@@ -139,44 +178,28 @@
<div class="row">
<div class="col-6"></div>
- <div class="col-6" id="index-content">
+ <div class="col-5" id="right-box">
<p>
- This was likely due to drought and increased temperatures. <span id="highlight">The average annual temperature in Canada has increased almost</span>
+ This was likely due to drought and increased temperatures. <span id="highlight">The average annual temperature
+ <span id="highlight"><sup>[2]</sup></span> from 1948 to 2016 in Canada has increased</span>
<div class="flex-container">
- <div class="flex-child" id="value2">0</div>
- <div class="flex-child" id="percentage">°C</div>
+ <div class="flex-child" id="value2">1.7</div>
+ <div class="flex-child" id="celsius">°C</div>
</div>
- <span id="highlight">from 1948 to 2016.</span>
- </p>
- </div>
- </div>
-
- <div class="row">
- <div class="col-6" id="index-content">
- <p>
- Decreases in crop yield have the potential to lead to <span id="highlight">increased food prices</span> which would <span id="highlight">exacerbate pre-existing food insecurities</span>.
</p>
</div>
-
- <div class="col-6"></div>
+ <div class="col-1"></div>
</div>
<div class="row">
- <div class="col-6"></div>
-
- <div class="col-6" id="index-content">
- <p>Food security is a key determinant of people’s health.</p>
- </div>
- </div>
-
- <div class="row">
- <div class="col-6" id="index-content">
+ <div class="col-1"></div>
+ <div class="col-5" id="index-content">
<p>Our project aims to increase wheat plants’ tolerance to heat stress by introducing three enzymes to wheat plants that will:</p>
<ol>
- <li><span id="highlight">Increase the rate of photosynthesis</span> in plants, producing more carbohydrates (<span id="highlight">SBPase</span>),</li>
- <li><span id="highlight">Decrease the plant stress hormone ethylene</span> that reduces plant growth at increased temperatures (<span id="highlight">ACC deaminase</span>), and </li>
- <li><span id="highlight">Maintain high ionic strength</span> and <span id="highlight">maintain protein folding</span> at increased temperatures (<span id="highlight">choline monooxygenase</span>).</li>
- <li>All three enzymes are activated by a heat-inducible promoter and will <span id="highlight">only be expressed at increased temperatures</span>. </li>
+ <li>Increase the rate of photosynthesis (<span id="highlight">SBPase</span>)</li>
+ <li>Decrease the plant stress hormone ethylene (<span id="highlight">ACC deaminase</span>)</li>
+ <li>Maintain protein folding (<span id="highlight">choline monooxygenase</span>)</li>
+ <li>All three enzymes are activated by a <span id="highlight">heat-inducible promoter</span>.</li>
</ol>
</div>
@@ -186,14 +209,16 @@
<div class="row">
<div class="col-6"></div>
- <div class="col-6" id="index-content">
- <p>We built and tested 2 of our 3 enzyme constructs in <span id="highlight">wheat protoplasts</span> as a <span id="highlight">proof of concept</span>. Protoplasts are plant cells with their cell walls removed, and are thus easier to transform with foreign DNA. </p>
+ <div class="col-5" id="index-content">
+ <p>We built and tested 2 of our 3 enzyme constructs in <span id="highlight">wheat protoplasts</span> (plant cells without cell walls) as a <span id="highlight">proof of concept</span>. Our end goal is to engineer a <span id="highlight">strain of wheat</span> with increased heat tolerance for <span id="highlight">use by farmers</span> in agricultural land.</p>
</div>
+ <div class="col-1"></div>
</div>
<div class="row">
- <div class="col-6" id="index-content">
- Our end goal is to engineer a <span id="highlight">strain of wheat</span> with increased heat tolerance for <span id="highlight">use by farmers</span> in agricultural land.
+ <div class="col-1"></div>
+ <div class="col-5" id="index-content">
+ <p>We designed, built, and tested a <a href="https://2022.igem.wiki/ubc-vancouver/model#hardware">hardware device</a> that can detect fluorescence from plants. This portable device could be used in the field to <span id="highlight">measure the expression levels of our fluorescently-tagged genes of interest</span> and <span id="highlight">plant heat stress</span>. </p>
</div>
<div class="col-6"></div>
@@ -202,46 +227,36 @@
<div class="row">
<div class="col-6"></div>
- <div class="col-6" id="index-content">
- <p>We designed, built, and tested a <a href="https://2022.igem.wiki/ubc-vancouver/model">hardware device</a> that can detect fluorescence from plants. This portable device could be used in the field to <span id="highlight">measure the expression levels of our fluorescently-tagged genes of interest</span>. Our gene circuits only express the fluorescent proteins under heat stress, so this device could <span id="highlight">measure plant stress</span> of crops. </p>
+ <div class="col-5" id="index-content">
+ <p>Our team also <a href="https://2022.igem.wiki/ubc-vancouver/model#modelling">mathematically modelled</a> heat-inducible gene expression and enzyme kinetics, with a focus on the ACC deaminase pathway. Our Dry-Lab team also conducted a <a href="https://2022.igem.wiki/ubc-vancouver/model#bioinformatics">bioinformatics RNA-seq analysis</a> to identify differentially expressed genes and pathways in heat and drought-stressed wheat.</p>
</div>
+ <div class="col-1"></div>
</div>
<div class="row">
- <div class="col-6" id="index-content">
- <p>Our team also <a href="https://2022.igem.wiki/ubc-vancouver/model#modelling">mathematically modelled</a> heat-inducible gene expression and enzyme kinetics, with a focus on the ACC deaminase pathway. Our Dry-Lab team also conducted a <a href="https://2022.igem.wiki/ubc-vancouver/model#bioinformatics">bioinformatics RNA-seq analysis</a> to identify differentially expressed genes and pathways in heat and drought-stressed wheat.</p>
+ <div class="col-1"></div>
+ <div class="col-5" id="left-box">
+ <p>Our <a href="https://2022.igem.wiki/ubc-vancouver/human-practices">Integrated Human Practices</a> team <span id="highlight">interviewed farmers and visited wheat farms</span> to hear from our potential users about the problems they are facing with increasing temperatures. Our team took on initiatives to <a href="https://2022.igem.wiki/ubc-vancouver/communication">communicate</a> <span id="highlight">with the public about our project and synthetic biology</span> through <span id="highlight">expert panels</span>, a <span id="highlight">podcast</span> and <span id="highlight">volunteering in our community</span>.</p>
</div>
<div class="col-6"></div>
</div>
- <div class="row">
<div class="col-6"></div>
-
- <div class="col-6" id="index-content">
- Our <a href="https://2022.igem.wiki/ubc-vancouver/human-practices">Integrated Human Practices</a> team <span id="highlight">interviewed farmers and visited wheat farms</span> to hear from our potential users about the problems they are facing with increasing temperatures. We tried to <span id="highlight">incorporate the needs of our users</span> into the design of our project at every stage from ideation to implementation.
- </div>
</div>
- <div class="row">
- <div class="col-6" id="index-content">
- <p>Our team took on initiatives to <a href="https://2022.igem.wiki/ubc-vancouver/communication">communicate</a> <span id="highlight">with the public about our project and synthetic biology</span>:</p>
- <ul>
- <li><span id="highlight">Expert panels</span> discussing GMO ethics and the accessibility of synthetic biology research internationally.</li>
- <li>A <span id="highlight">podcast</span> about the UN’s sustainable development goals.</li>
- <li><span id="highlight">Volunteering in our community</span>, mentoring youth and helping with a community garden.</li>
- </ul>
- </div>
-
- <div class="col-6"></div>
- </div>
+<br><br>
+</div>
<br><br>
+<div class="container">
+
+
<section id="name">
<div class="content">
<h1 class="title"><b>Behind the Name</b></h1>
- <p>We chose to work with wheat for our project because it is a major crop in Canada, <span id="highlight">Canada is the fifth-largest wheat producer</span> in the world. Triticum aestivum is the scientific name for Common Wheat. Our project involves working with synthetic biology to genetically engineer wheat. </p>
+ <p>We chose to work with wheat for our project because it is a major crop in Canada, <span id="highlight">Canada is the fifth-largest wheat producer</span> in the world<span id="highlight"><sup>[3]</sup></span>. Triticum aestivum is the scientific name for Common Wheat. Our project involves working with synthetic biology to genetically engineer wheat. </p>
<p>Synthetic Biology + <i>T. aestivum</i> → <span id="highlight">Synaestivum</span></p>
</section>
@@ -455,7 +470,7 @@
}
animateValue("value1", 0, 39, 2500);
- animateValue("value2", 0, 2, 2000);
+ //animateValue("value2", 0, 2, 2000);
</script>
<!-- Preloader script TODO: move to separate file -->