|
|
| Line 1: |
Line 1: |
| | {{Humboldt_Berlin}} | | {{Humboldt_Berlin}} |
| | <html> | | <html> |
| − |
| |
| | | | |
| | <div class="has-animations description no-js" id="container"> | | <div class="has-animations description no-js" id="container"> |
| | <div class="container"> | | <div class="container"> |
| | | | |
| − | <!------------------------------------------ NAVIGATION --------------------------------------------------> | + | <!------------------------------------------ NAVIGATION --------------------------------------------------> |
| − | <!-- INFO: move the class="active" to the correct <a> Tag --> | + | <!-- INFO: move the class="active" to the correct <a> Tag --> |
| | | | |
| | <nav> | | <nav> |
| Line 42: |
Line 41: |
| | <a href="/Team:Humboldt_Berlin/Experiments">Experiments</a> | | <a href="/Team:Humboldt_Berlin/Experiments">Experiments</a> |
| | <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a> | | <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a> |
| − | <a href="/Team:Humboldt_Berlin/Contribution">Contribution</a> | + | <a href="/Team:Humboldt_Berlin/Contribution">Contributions</a> |
| | <a href="/Team:Humboldt_Berlin/Results">Results</a> | | <a href="/Team:Humboldt_Berlin/Results">Results</a> |
| | <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a> | | <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a> |
| Line 91: |
Line 90: |
| | </nav> | | </nav> |
| | | | |
| − | <!------------------------------------------ NAVIGATION END --------------------------------------------------> | + | <!------------------------------------------ NAVIGATION END --------------------------------------------------> |
| | | | |
| − | <!------------------------------------------ HEADER--------------------------------------------------> | + | <!------------------------------------------ HEADER--------------------------------------------------> |
| | <div class="fixed-header-container"> | | <div class="fixed-header-container"> |
| | <section class="fixed-image-header"> | | <section class="fixed-image-header"> |
| Line 99: |
Line 98: |
| | <img src="https://static.igem.org/mediawiki/2019/b/ba/T--Humboldt_Berlin--parts_8.jpeg" alt="Building Blocks" /> | | <img src="https://static.igem.org/mediawiki/2019/b/ba/T--Humboldt_Berlin--parts_8.jpeg" alt="Building Blocks" /> |
| | </section> | | </section> |
| − |
| + | |
| | <!-- HEADLINE TEXT --> | | <!-- HEADLINE TEXT --> |
| | <h1 class="page-headline description" style="color:#ffffff">Basic Part</h1> | | <h1 class="page-headline description" style="color:#ffffff">Basic Part</h1> |
| | </div> | | </div> |
| | | | |
| − | <!------------------------------------------ HEADER END --------------------------------------------------> | + | <!------------------------------------------ HEADER END --------------------------------------------------> |
| | | | |
| | <section class="page-content fixed-header-content expandable"> | | <section class="page-content fixed-header-content expandable"> |
| Line 112: |
Line 111: |
| | <div class="protocolls-buttons"> | | <div class="protocolls-buttons"> |
| | <div class="collapse-all"> | | <div class="collapse-all"> |
| − | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Collapse all |
| − | Collapse all
| + | |
| | </div> | | </div> |
| | <div class="expand-all"> | | <div class="expand-all"> |
| − | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Expand all |
| − | Expand all
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| Line 124: |
Line 121: |
| | <div class="expandable-preview"> | | <div class="expandable-preview"> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" /> | | <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" /> |
| Line 136: |
Line 129: |
| | <div> | | <div> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua.
| + | |
| | </p> | | </p> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame.
| + | |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
| + | |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | </div> | | </div> |
| | <div> | | <div> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | </div> | | </div> |
| Line 180: |
Line 154: |
| | <div class="expandable-preview"> | | <div class="expandable-preview"> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" /> | | <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" /> |
| Line 192: |
Line 162: |
| | <div> | | <div> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua.
| + | |
| | </p> | | </p> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame.
| + | |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
| + | |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | </div> | | </div> |
| | <div> | | <div> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | <p class="medium-sized"> | | <p class="medium-sized"> |
| − | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
| + | |
| − | erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
| + | |
| − | et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
| + | |
| − | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
| + | |
| | </p> | | </p> |
| | </div> | | </div> |
| Line 236: |
Line 187: |
| | </section> | | </section> |
| | | | |
| − | <!------------------------------------------ FOOTER ----------------------------------------> | + | <!------------------------------------------ FOOTER ----------------------------------------> |
| − | <div class="footer-container"> | + | <div class="footer-container"> |
| − | <footer class="width-limit">
| + | <footer class="width-limit"> |
| − | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> | + | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> |
| − | <div class="footer-right"> | + | <div class="footer-right"> |
| − | | + | |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin"> | + | <a href="/Team:Humboldt_Berlin"> |
| | Home | | Home |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin/Team"> | + | <a href="/Team:Humboldt_Berlin/Team"> |
| | Team | | Team |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin/Description"> | + | <a href="/Team:Humboldt_Berlin/Description"> |
| | Project | | Project |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | </ul>
| + | </ul> |
| − | | + | |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin/Parts"> | + | <a href="/Team:Humboldt_Berlin/Parts"> |
| | Parts | | Parts |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin/Safety"> | + | <a href="/Team:Humboldt_Berlin/Safety"> |
| | Safety | | Safety |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | <li>
| + | <li> |
| − | <a href="/Team:Humboldt_Berlin/Human_Practices"> | + | <a href="/Team:Humboldt_Berlin/Human_Practices"> |
| | Human Practices | | Human Practices |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | <li>
| + | <li> |
| − | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> | + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| | For Judges | | For Judges |
| | </a> | | </a> |
| − | </li>
| + | </li> |
| − | </ul>
| + | </ul> |
| − | </div>
| + | </div> |
| − | </footer>
| + | </footer> |
| | + | </div> |
| | </div> | | </div> |
| | | | |
| | + | <!------------------------------------------ FOOTER END ----------------------------------------> |
| | | | |
| − | <!------------------------------------------ FOOTER END ---------------------------------------->
| + | <script> |
| − | | + | (function () { |
| − | <script> | + | document.querySelector('.no-js').classList.add('js') |
| − | (function () { | + | document.querySelector('.no-js').classList.remove('no-js') |
| − | document.querySelector('.no-js').classList.add('js')
| + | }()) |
| − | document.querySelector('.no-js').classList.remove('no-js')
| + | |
| − | }()) | + | window.addEventListener("scroll", function () { |
| − | | + | const elements = document.querySelectorAll('.is-revealing'); |
| − | window.addEventListener("scroll", function () { | + | |
| − | const elements = document.querySelectorAll('.is-revealing');
| + | [].forEach.call(elements, function(el) { |
| − | | + | if (isElementVisible(el)) { |
| − | [].forEach.call(elements, function(el) {
| + | el.classList.add('is-revealing-visible') |
| − | if (isElementVisible(el)) {
| + | |
| − | el.classList.add('is-revealing-visible')
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | | + | |
| − | function isElementVisible(el) {
| + | |
| − | var top = el.offsetTop;
| + | |
| − | var height = el.offsetHeight;
| + | |
| − | | + | |
| − | while(el.offsetParent) {
| + | |
| − | el = el.offsetParent;
| + | |
| − | top += el.offsetTop;
| + | |
| − | }
| + | |
| − | | + | |
| − | return (
| + | |
| − | (top + height) <= (window.pageYOffset + window.innerHeight) + 100
| + | |
| − | );
| + | |
| − | }
| + | |
| − | | + | |
| − | var readMores = document.querySelectorAll('.expandable-readall');
| + | |
| − | var allContainers = document.querySelectorAll('.expandable-container');
| + | |
| − | | + | |
| − | for (var i = 0; i < readMores.length; i++) {
| + | |
| − | readMores[i].addEventListener('click', function(event) {
| + | |
| − | var container = this.closest('.expandable-container');
| + | |
| − | if (container.classList.contains('open')) {
| + | |
| − | container.classList.remove('open');
| + | |
| − | } else {
| + | |
| − | container.classList.add('open');
| + | |
| | } | | } |
| | + | }); |
| | }); | | }); |
| − | }
| + | |
| − | | + | function isElementVisible(el) { |
| − | document.querySelector('.collapse-all').addEventListener('click', function() {
| + | var top = el.offsetTop; |
| − | for (var i = 0; i < allContainers.length; i++) {
| + | var height = el.offsetHeight; |
| − | allContainers[i].classList.remove('open');
| + | |
| − | };
| + | while(el.offsetParent) { |
| − | });
| + | el = el.offsetParent; |
| − | | + | top += el.offsetTop; |
| − | document.querySelector('.expand-all').addEventListener('click', function() {
| + | } |
| − | for (var i = 0; i < allContainers.length; i++) {
| + | |
| − | allContainers[i].classList.add('open');
| + | return ( |
| − | };
| + | (top + height) <= (window.pageYOffset + window.innerHeight) + 100 |
| − | });
| + | ); |
| − | </script> | + | } |
| | + | |
| | + | var readMores = document.querySelectorAll('.expandable-readall'); |
| | + | var allContainers = document.querySelectorAll('.expandable-container'); |
| | + | |
| | + | for (var i = 0; i < readMores.length; i++) { |
| | + | readMores[i].addEventListener('click', function(event) { |
| | + | var container = this.closest('.expandable-container'); |
| | + | if (container.classList.contains('open')) { |
| | + | container.classList.remove('open'); |
| | + | } else { |
| | + | container.classList.add('open'); |
| | + | } |
| | + | }); |
| | + | } |
| | + | |
| | + | document.querySelector('.collapse-all').addEventListener('click', function() { |
| | + | for (var i = 0; i < allContainers.length; i++) { |
| | + | allContainers[i].classList.remove('open'); |
| | + | }; |
| | + | }); |
| | + | |
| | + | document.querySelector('.expand-all').addEventListener('click', function() { |
| | + | for (var i = 0; i < allContainers.length; i++) { |
| | + | allContainers[i].classList.add('open'); |
| | + | }; |
| | + | }); |
| | + | </script> |
| | | | |
| | </html> | | </html> |
Collapse all
