|
|
| (21 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| + | {{Team:Utrecht/MainBody}} |
| − | <html>
| + | |
| − | <head>
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
| + | |
| − |
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'>
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'>
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'>
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #top_title { display: none !important; }
| + | |
| − | /*Override default CSS*/
| + | |
| − | #sideMenu, #top_title {display:none;}
| + | |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent;}
| + | |
| − | | + | |
| − | | + | |
| − | /* set all basic objects to neutral formatting*/
| + | |
| − | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | #globalWrapper {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* set page to fill window*/
| + | |
| − | html{
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | min-height: 100%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body, html {
| + | |
| − | height: 100%;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .container {
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | margin: 0 auto 0;
| + | |
| − | -webkit-perspective: 1000;
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button {
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | font-size: 2.5em;
| + | |
| − | font-weight: light;
| + | |
| − | font-family: 'Trebuchet MS', sans-serif;
| + | |
| − | text-transform: uppercase;
| + | |
| − | text-align: center;
| + | |
| − | line-height: 60px;
| + | |
| − | letter-spacing: -1px;
| + | |
| − | color: white;
| + | |
| − | border: none;
| + | |
| − | border-radius: 50%;
| + | |
| − | background: #ff8d00;
| + | |
| − | cursor: pointer;
| + | |
| − | border: 5px solid #ffb252;
| + | |
| − | filter: grayscale(100%);
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.selected {
| + | |
| − | filter: grayscale(0%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.pulsing {
| + | |
| − | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8);
| + | |
| − | -webkit-animation: pulse 2s infinite;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*.tutorial_button.pulsing:hover {
| + | |
| − | -webkit-animation: none;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | @-webkit-keyframes pulse {
| + | |
| − | 70% {
| + | |
| − | box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body {
| + | |
| − | color: white;
| + | |
| − | font-family: 'Nunito Sans', sans-serif;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | * {
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 50px;
| + | |
| − | background: #0096ff;
| + | |
| − | overflow: hidden;
| + | |
| − | z-index: 2;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .menu-underline { position: absolute; height: 3px; background: white; transition: all 0.3s ease; }
| + | |
| − |
| + | |
| − | .top-menu .quote { opacity: 0; }
| + | |
| − | .top-menu .sections { opacity: 0; pointer-events: none; }
| + | |
| − |
| + | |
| − | .top-menu.active {
| + | |
| − | height: 345px;
| + | |
| − | background: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu.active .quote { opacity: 1; }
| + | |
| − | /*.top-menu.active .sections { opacity: 1; display: block; }*/
| + | |
| − |
| + | |
| − | .top-menu .sections { position: absolute;
| + | |
| − | left: 0;
| + | |
| − | margin: 0;
| + | |
| − | margin-left: 25px;
| + | |
| − | margin-top: 75px;
| + | |
| − | width: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .section { width: 200px; display: inline-block; padding: 15px; vertical-align: top; cursor: pointer; }
| + | |
| − | /*.top-menu .section:last-of-type { margin-right: 0; }*/
| + | |
| − | .top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; }
| + | |
| − | .top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; color: white; }
| + | |
| − | .top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; }
| + | |
| − |
| + | |
| − | .top-menu .section.active { background: #0075c8; }
| + | |
| − |
| + | |
| − | .top-menu[data-key='home'] .sections[data-key='home'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='exp'] .sections[data-key='exp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='hp'] .sections[data-key='hp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='team'] .sections[data-key='team'] { opacity: 1; pointer-events: all; }
| + | |
| − |
| + | |
| − | .top-menu ul {
| + | |
| − | position: absolute;
| + | |
| − | left: calc(50% - 290px);
| + | |
| − | margin: 0;
| + | |
| − | margin-top: 15px;
| + | |
| − | list-style-image: none;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu li {
| + | |
| − | list-style-type: none;
| + | |
| − | float: left;
| + | |
| − | margin-right: 50px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu ul::after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container {
| + | |
| − | position: fixed;
| + | |
| − | top: 125px;
| + | |
| − | left: 25px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container.active {
| + | |
| − | top: 375px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container>div {
| + | |
| − | height: 25px;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | color: #a2a2a2;
| + | |
| − | font-size: 16px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active {
| + | |
| − | color: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .text {
| + | |
| − | float: left;
| + | |
| − | padding-left: 10px;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker {
| + | |
| − | float: left;
| + | |
| − | width: 27px;
| + | |
| − | height: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker div {
| + | |
| − | display: inline-block;
| + | |
| − | background: #0096ff;
| + | |
| − | width: 10px;
| + | |
| − | height: 10px;
| + | |
| − | border-radius: 50%;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active .marker div {
| + | |
| − | background: #005b9b;
| + | |
| − | width: 15px;
| + | |
| − | height: 15px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container {
| + | |
| − | position: absolute;
| + | |
| − | top: 120px;
| + | |
| − | left: 400px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container .page-heading {
| + | |
| − | font-size: 25px;
| + | |
| − | color: #005b9b;
| + | |
| − | margin-bottom: 25px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container .page-content {
| + | |
| − | color: black;
| + | |
| − | width: 750px;
| + | |
| − | text-align: justify;
| + | |
| − | line-height: 150%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*body[data-key='home'] .menu-container { display: none; }*/
| + | |
| − |
| + | |
| − | .tutorial { height: 511px; }
| + | |
| − |
| + | |
| − | h2 { font-size: 20px; color: #005b9b; margin-bottom: 10px; }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body data-key="home">
| + | |
| − | | + | |
| − | <div class="top-menu" data-key="home">
| + | |
| − | <div>
| + | |
| − | <ul class="top-menu-links">
| + | |
| − | <li data-key="home" class="active" data-url="home">Home</li>
| + | |
| − | <li data-key="exp">Experimental</li>
| + | |
| − | <li data-key="hp">Human practices</li>
| + | |
| − | <li data-key="team">Team & Sponsors</li>
| + | |
| − | </ul>
| + | |
| − |
| + | |
| − | <div class="menu-underline"></div>
| + | |
| − |
| + | |
| − | <div class="quote"></div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="home">
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − |
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="exp">
| + | |
| − | <div class="section" data-url="secretion">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Cas9 & Cpf1 secretion<br/>and activity</div>
| + | |
| − | <div class="desc">Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="mesa-replication">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/b/bc/MESA.png"></div>
| + | |
| − | <div class="text">MESA two-component system replication</div>
| + | |
| − | <div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="outcasst">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">OUTCASST system production</div>
| + | |
| − | <div class="desc">Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="modeling-and-mathematics">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/6b/Modelling.png"></div>
| + | |
| − | <div class="text">Modeling and<br />mathematics</div>
| + | |
| − | <div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="interlab-study">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/63/Interlab1.png"></div>
| + | |
| − | <div class="text">Interlab study participation</div>
| + | |
| − | <div class="desc">Results and details of our measurements for the iGEM 2017 Interlab Study.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="hp">
| + | |
| − | <div class="section" data-url="stakeholders">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Stakeholders & opinions</div>
| + | |
| − | <div class="desc">Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="safety">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/8/8d/Igemutrecht_safety.png"></div>
| + | |
| − | <div class="text">Risks & safety-issues</div>
| + | |
| − | <div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="product-design">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Design & integration</div>
| + | |
| − | <div class="desc">OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="team">
| + | |
| − | <div class="section" data-url="team">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5e/Team_comp.png"></div>
| + | |
| − | <div class="text">Meet our team</div>
| + | |
| − | <div class="desc">About us, our interests and roles in the team and our supervisors.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="sponsors">
| + | |
| − | <div class="thumb"></div>
| + | |
| − | <div class="text">Sponsors</div>
| + | |
| − | <div class="desc">A listing of our sponsors, how they assisted us and our gratitude for their assistance.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="achievements">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Achievements.png"></div>
| + | |
| − | <div class="text">Achievements</div>
| + | |
| − | <div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="menu-container">
| + | |
| − | <div style="position: absolute; left: 13px; top: 10px; height: 70px; width: 2px; background: #0096ff; z-index: -1;"></div>
| + | |
| − | <div class="item active" data-key="1">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">Intro</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="2">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The problem</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="3">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The system</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="page-container">
| + | |
| − | <div class="page-content">
| + | |
| − | <div class="page-heading">The OUTCASST two-component system</div>
| + | |
| − | This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies.
| + | |
| − |
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − | <h2 class="subhead" id="subhead-2">The problem</h2>
| + | |
| − | Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
| + | |
| − | | + | |
| − | <center>
| + | |
| − | <div class="tutorial" style="position: relative; width: 560px; display: inline-block;">
| + | |
| − | <img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png">
| + | |
| − | <img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png">
| + | |
| − | <img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png">
| + | |
| − | <img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png">
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 50px; left: 0; width: 75px;">
| + | |
| − | <span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 50px; left: 500px;">
| + | |
| − | <span id="link-2" class="tutorial_button">2</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 0;">
| + | |
| − | <span id="link-3" class="tutorial_button">3</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 500px;">
| + | |
| − | <span id="link-4" class="tutorial_button">4</span>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </center>
| + | |
| − |
| + | |
| − | <h2 class="subhead" id="subhead-3">The system</h2>
| + | |
| − | The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal.
| + | |
| − |
| + | |
| − | <div id="popover-1">
| + | |
| − | Binding of components with search-specific gRNA sequences.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-2">
| + | |
| − | DNA sample fragment binds to one of the components.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-3">
| + | |
| − | Fragment binding with both components induces co-localization.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-4">
| + | |
| − | Protease cleaves, transcription factor is released from complex.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script id="page-home" type="text/template">
| + | |
| − | home
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-secretion" type="text/template">
| + | |
| − | <div class="page-heading">Secretion</div>
| + | |
| − | ok
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-mesa-replication" type="text/template">
| + | |
| − | <div class="page-heading">MESA replication</div>
| + | |
| − | abc
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-outcasst" type="text/template">
| + | |
| − | <div class="page-heading">OUTCASST</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-modeling-and-mathematics" type="text/template">
| + | |
| − | <div class="page-heading">Modeling and Mathematics</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-interlab-study" type="text/template">
| + | |
| − | <div class="page-heading">Interlab study</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script>
| + | |
| − | | + | |
| − | <script id="page-stakeholders" type="text/template">
| + | |
| − | <!--
| + | |
| − | We interviewed a panel of world-renowned experts, aliquip inermis deseruisse at sed, populo oporteat efficiantur vim eu, pro prompta salutandi at. Scripta bonorum denique ei usu, inermis nominavi nec ad. Vis ea ignota habemus, numquam veritus antiopam id per. Ne mei posidonium complectitur, pri eu sint epicuri phaedrum, eu solum nullam eos. Pericula intellegam sed an, errem volumus repudiare no cum, vel paulo populo et. Principes dissentiet eos ne.
| + | |
| − | -->
| + | |
| − | We interviewed a panel of world-renowned experts. By listening carefully, our project's direction was shaped and refined.
| + | |
| − | <br>
| + | |
| − | <div class="shuffle-container" style="position: relative; margin-top: 30px; margin-bottom: 50px; width: 900px; margin-left: -75px;">
| + | |
| − | <div style="position: absolute; top: 200px; left: 350px; z-index: 1;">
| + | |
| − | <a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;" onclick="jQuery('html, body').animate({scrollTop: jQuery('.timeline').offset().top - 100}, 500)">Follow our journey</a>
| + | |
| − | </div>
| + | |
| − | <div class="js-grid my-shuffle shuffle" style="height: 520.262px; transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);">
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity; transform: translate(0px, 0px) scale(1);">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/f/fe/Marit_de_Wit.jpg"></div>
| + | |
| − | <div style="position: absolute; bottom: 5px; left: 5px; right: 5px; color: white; font-size: 13px; line-height: 100%;">
| + | |
| − | Marit de Wit<br>
| + | |
| − | <span style="font-style: italic;">Doctors without borders</span>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(450px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/f/fc/Bert_Gerrits_van_den_Ende.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/6/63/Hans_Bos.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--16x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/8/8e/Jaap_van_Hellemond.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/4/4b/Jet_and_Ruud.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 389px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/c/cd/Patrick_en_Pieter-Jaap.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/5/59/Hugo_Snippert_%282%29.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/d/d0/Titia_Sijen.JPG"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <div class="column my-sizer-element"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <section class="timeline" style="width: 1000px; margin-left: -100px;">
| + | |
| − | <div class="timeline-container" style="width: 100%;">
| + | |
| − | <div class="timeline-item">
| + | |
| − | | + | |
| − | <div class="timeline-img"></div>
| + | |
| − | | + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <h2>Westerdijk</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">10 OCT 2017</div>
| + | |
| − | <p>The first person we talked to came from the Westerdijk Fungal Biodiversity Institute in Utrecht. Here, they perform mycological research, wherein they focus on the determination and classification of fungi…</p>
| + | |
| − | <a class="bnt-more" href="javascript:void(0)">More</a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <div class="timeline-item">
| + | |
| − | | + | |
| − | <div class="timeline-img"></div>
| + | |
| − | | + | |
| − | <div class="timeline-content timeline-card js--fadeInRight">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <h2>UMCU</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">10 OCT 2017</div>
| + | |
| − | <p>We used this information and went to two DNA genome diagnostic labs, one in Utrecht and one in Amsterdam. At the University Medical Center of Utrecht we talked about the non-invasive prenatal testing and the use of our system to test for genetic conditions…</p>
| + | |
| − | <a class="bnt-more" href="javascript:void(0)">More</a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </section>
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | .shuffle-container .aspect:hover { opacity: 1; }
| + | |
| − | | + | |
| − | .timeline h1 {
| + | |
| − | font-size: 200%;
| + | |
| − | text-transform: uppercase;
| + | |
| − | letter-spacing: 3px;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline header {
| + | |
| − | background: #3F51B5;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 150px 0;
| + | |
| − | }
| + | |
| − | .timeline header p {
| + | |
| − | font-family: 'Allura';
| + | |
| − | color: rgba(255, 255, 255, 0.2);
| + | |
| − | margin-bottom: 0;
| + | |
| − | font-size: 60px;
| + | |
| − | margin-top: -30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | .timeline::before {
| + | |
| − | content: '';
| + | |
| − | background: #C5CAE9;
| + | |
| − | width: 5px;
| + | |
| − | height: 95%;
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | transform: translateX(-50%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-item {
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: 70px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| + | |
| − | float: right;
| + | |
| − | padding: 40px 30px 10px 30px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content .date {
| + | |
| − | right: auto;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | left: -15px;
| + | |
| − | border-width: 10px 15px 10px 0;
| + | |
| − | border-color: transparent #f5f5f5 transparent transparent;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item::after {
| + | |
| − | content: '';
| + | |
| − | display: block;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-content {
| + | |
| − | position: relative;
| + | |
| − | width: 45%;
| + | |
| − | padding: 10px 30px;
| + | |
| − | border-radius: 4px;
| + | |
| − | background: #f5f5f5;
| + | |
| − | box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
| + | |
| − | }
| + | |
| − | .timeline .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | right: -15px;
| + | |
| − | border-width: 10px 0 10px 15px;
| + | |
| − | border-color: transparent transparent transparent #f5f5f5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-img {
| + | |
| − | width: 30px;
| + | |
| − | height: 30px;
| + | |
| − | background: #3F51B5;
| + | |
| − | border-radius: 50%;
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | margin-top: 25px;
| + | |
| − | margin-left: -15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline a {
| + | |
| − | background: #3F51B5;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 8px 20px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 14px;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | margin-top: 10px;
| + | |
| − | display: inline-block;
| + | |
| − | border-radius: 2px;
| + | |
| − | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
| + | |
| − | }
| + | |
| − | .timeline a:hover, a:active, a:focus {
| + | |
| − | background: #32408f;
| + | |
| − | color: #FFFFFF;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-card {
| + | |
| − | padding: 0 !important;
| + | |
| − | }
| + | |
| − | .timeline-card p {
| + | |
| − | padding: 0 20px;
| + | |
| − | }
| + | |
| − | .timeline-card a {
| + | |
| − | margin-left: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-item .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(5) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(6) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(8) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(10) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(11) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-img-header {
| + | |
| − | height: 200px;
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | .timeline-img-header h2 {
| + | |
| − | color: #FFFFFF;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 5px;
| + | |
| − | left: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | blockquote {
| + | |
| − | margin-top: 30px;
| + | |
| − | color: #757575;
| + | |
| − | border-left-color: #3F51B5;
| + | |
| − | padding: 0 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .date {
| + | |
| − | background: #FF4081;
| + | |
| − | display: inline-block;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 10px;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 768px) {
| + | |
| − | .timeline::before {
| + | |
| − | left: 50px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-img {
| + | |
| − | left: 50px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-content {
| + | |
| − | max-width: 100%;
| + | |
| − | width: auto;
| + | |
| − | margin-left: 70px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| + | |
| − | float: none;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(odd) .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | left: -15px;
| + | |
| − | border-width: 10px 15px 10px 0;
| + | |
| − | border-color: transparent #f5f5f5 transparent transparent;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <script id="page-safety" type="text/template">
| + | |
| − | <div class="page-heading">Safety</div>
| + | |
| − | well important init
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-product-design" type="text/template">
| + | |
| − | <div class="page-heading">Product design</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-team" type="text/template">
| + | |
| − | <div class="page-heading">Team</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-sponsors" type="text/template">
| + | |
| − | <div class="page-heading">Sponsors</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-achievements" type="text/template">
| + | |
| − | <div class="page-heading">Achievements</div>
| + | |
| − | 1
| + | |
| − | </script>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | @import url(https://fonts.googleapis.com/css?family=Open+Sans);
| + | |
| − | | + | |
| − | /* set global font to Open Sans */
| + | |
| − | body {
| + | |
| − | font-family: 'Open Sans', 'sans-serif';
| + | |
| − | overflow: scroll;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn {
| + | |
| − | border-radius: 5px;
| + | |
| − | padding: 15px 25px;
| + | |
| − | font-size: 22px;
| + | |
| − | text-decoration: none;
| + | |
| − | margin: 20px;
| + | |
| − | color: #fff;
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn:active {
| + | |
| − | transform: translate(0px, 5px);
| + | |
| − | -webkit-transform: translate(0px, 5px);
| + | |
| − | box-shadow: 0px 1px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue {
| + | |
| − | background-color: #55acee;
| + | |
| − | box-shadow: 0px 5px 0px 0px #3C93D5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue:hover {
| + | |
| − | background-color: #6FC6FF;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
| + | |
| − | <script src='https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js'></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − | $.noConflict();
| + | |
| − | | + | |
| − | function getPos(el)
| + | |
| − | {
| + | |
| − | for (var lx=0, ly=0;
| + | |
| − | el != null;
| + | |
| − | lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
| + | |
| − | return {x: lx,y: ly};
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery( window ).scroll(function() {
| + | |
| − | var sel_subhead = 1;
| + | |
| − |
| + | |
| − | jQuery(".subhead").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.id.split("-")[1];
| + | |
| − |
| + | |
| − | var pos = getPos(v);
| + | |
| − |
| + | |
| − | if(jQuery(window).scrollTop() + 200 >= pos.y)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | else if(Math.ceil(jQuery(window).scrollTop() + jQuery(window).height()) >= jQuery(document).height())
| + | |
| − | {
| + | |
| − | if(key == 3)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery(".menu-container .item").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.getAttribute("data-key");
| + | |
| − |
| + | |
| − | if(key == sel_subhead)
| + | |
| − | jQuery(v).addClass("active");
| + | |
| − | else
| + | |
| − | jQuery(v).removeClass("active");
| + | |
| − | });
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery(function(){
| + | |
| − | for(var i = 1; i <= 4; i++)
| + | |
| − | {
| + | |
| − | var position = "left";
| + | |
| − | var showEvent = "";
| + | |
| − |
| + | |
| − | if(i == 2 || i == 4)
| + | |
| − | {
| + | |
| − | position = "right";
| + | |
| − | showEvent = "";
| + | |
| − | }
| + | |
| − |
| + | |
| − | var title;
| + | |
| − |
| + | |
| − | if(i == 1)
| + | |
| − | title = "Guide RNA";
| + | |
| − | else if(i == 2)
| + | |
| − | title = "DNA binding";
| + | |
| − | else if(i == 3)
| + | |
| − | title = "Signal transduction";
| + | |
| − | else if(i == 4)
| + | |
| − | title = "Signal transduction";
| + | |
| − |
| + | |
| − | jQuery("#popover-" + i).dxPopover({
| + | |
| − | target: "#link-" + i,
| + | |
| − | showEvent: showEvent,
| + | |
| − | hideEvent: "",
| + | |
| − | position: position,
| + | |
| − | width: 300,
| + | |
| − | showTitle: true,
| + | |
| − | title: title
| + | |
| − | }).dxPopover("instance");
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery("#link-1").click(function()
| + | |
| − | {
| + | |
| − | jQuery("#popover-1").dxPopover("show");
| + | |
| − | jQuery("#link-1").removeClass("pulsing");
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery('body').on('click', 'a', function(event) {
| + | |
| − | var id = event.target.id;
| + | |
| − |
| + | |
| − | if(id == "goto-2")
| + | |
| − | {
| + | |
| − | jQuery("#link-1").removeClass("selected");
| + | |
| − | jQuery("#popover-1").dxPopover("hide");
| + | |
| − | jQuery("#popover-2").dxPopover("show");
| + | |
| − | jQuery("#link-2").addClass("selected");
| + | |
| − | jQuery("#figure-1").fadeOut("5");
| + | |
| − | jQuery("#figure-2").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-3")
| + | |
| − | {
| + | |
| − | jQuery("#link-2").removeClass("selected");
| + | |
| − | jQuery("#popover-2").dxPopover("hide");
| + | |
| − | jQuery("#popover-3").dxPopover("show");
| + | |
| − | jQuery("#link-3").addClass("selected");
| + | |
| − | jQuery("#figure-2").fadeOut("5");
| + | |
| − | jQuery("#figure-3").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-4")
| + | |
| − | {
| + | |
| − | jQuery("#link-3").removeClass("selected");
| + | |
| − | jQuery("#popover-3").dxPopover("hide");
| + | |
| − | jQuery("#popover-4").dxPopover("show");
| + | |
| − | jQuery("#link-4").addClass("selected");
| + | |
| − | jQuery("#figure-3").fadeOut("5");
| + | |
| − | jQuery("#figure-4").fadeIn("5");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
| + | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
| + | |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | var page_menus = {
| + | |
| − | "home" : {
| + | |
| − | 1: "Intro",
| + | |
| − | 2: "The problem",
| + | |
| − | 3: "The system",
| + | |
| − | },
| + | |
| − | "secretion" : {
| + | |
| − | 1: "Secretion",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "mesa-replication" : {
| + | |
| − | 1: "MESA replication",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "outcasst" : {
| + | |
| − | 1: "OUTCASST",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "modeling-and-mathematics" : {
| + | |
| − | 1: "Modeling and Mathematics",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "interlab-study" : {
| + | |
| − | 1: "Interlab study",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "stakeholders" : {},
| + | |
| − | "safety" : {
| + | |
| − | 1: "Safety",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "product-design" : {
| + | |
| − | 1: "Product design",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "team" : {
| + | |
| − | 1: "Team",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "sponsors" : {
| + | |
| − | 1: "Sponsors",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | },
| + | |
| − | "achievements" : {
| + | |
| − | 1: "Achievements",
| + | |
| − | 2: "Hmmmm"
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | function move_underline(element)
| + | |
| − | {
| + | |
| − | var width = element.getWidth();
| + | |
| − | var height = element.getHeight();
| + | |
| − | var offset = element.cumulativeOffset();
| + | |
| − |
| + | |
| − | var line = $$(".menu-underline")[0];
| + | |
| − |
| + | |
| − | line.style.top = (offset.top + height - 19) + "px";
| + | |
| − | line.style.left = offset.left + "px";
| + | |
| − | line.style.width = width + "px";
| + | |
| − | }
| + | |
| − | | + | |
| − | function change_page(page)
| + | |
| − | {
| + | |
| − | if(typeof page_menus[page] !== "undefined")
| + | |
| − | {
| + | |
| − | var menu = page_menus[page];
| + | |
| − |
| + | |
| − | var menu_container = $$(".menu-container")[0];
| + | |
| − |
| + | |
| − | var new_html = "";
| + | |
| − |
| + | |
| − | if(Object.keys(menu).length > 0)
| + | |
| − | {
| + | |
| − | new_html = new_html + "<div style='position: absolute; left: 13px; top: 10px; height: " + (35 * (Object.keys(menu).length - 1)) + "px; width: 2px; background: #0096ff; z-index: -1;'></div>";
| + | |
| − |
| + | |
| − | $H(menu).each(function(pair)
| + | |
| − | {
| + | |
| − | new_html = new_html + "<div class='item' data-key='" + pair.key + "'><div class='marker'><div></div></div><div class='text'>" + pair.value + "</div></div>";
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | menu_container.update(new_html);
| + | |
| − | }
| + | |
| − |
| + | |
| − | var page_container = $$(".page-content")[0];
| + | |
| − | var page_content = $("page-" + page);
| + | |
| − |
| + | |
| − | page_container.update(page_content.innerHTML);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].removeClassName("active");
| + | |
| − | $$(".menu-container")[0].removeClassName("active");
| + | |
| − | }
| + | |
| − | | + | |
| − | document.observe("dom:loaded", function()
| + | |
| − | {
| + | |
| − | move_underline($$(".top-menu-links li")[0]);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseover", function()
| + | |
| − | {
| + | |
| − | this.addClassName("active");
| + | |
| − | $$(".menu-container")[0].addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseout", function()
| + | |
| − | {
| + | |
| − | this.removeClassName("active");
| + | |
| − | $$(".menu-container")[0].removeClassName("active");
| + | |
| − | });
| + | |
| − | | + | |
| − | $$(".top-menu")[0].on("click", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | var title = element.select(".text")[0].innerHTML;
| + | |
| − | var page = element.getAttribute("data-url");
| + | |
| − |
| + | |
| − | //history.pushState({}, title, page);
| + | |
| − |
| + | |
| − | change_page(page);
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseover", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseout", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu-links")[0].on("click", "li", function(event, element)
| + | |
| − | {
| + | |
| − | var page = element.getAttribute("data-url");
| + | |
| − |
| + | |
| − | if(page != "")
| + | |
| − | {
| + | |
| − | var title = page;
| + | |
| − |
| + | |
| − | change_page(page);
| + | |
| − |
| + | |
| − | if(page == "home")
| + | |
| − | page = "/";
| + | |
| − |
| + | |
| − | //history.pushState({}, title, page);
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu-links")[0].on("mouseover", "li", function(event, element)
| + | |
| − | {
| + | |
| − | move_underline(element);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].setAttribute("data-key", element.getAttribute("data-key"));
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseover", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseout", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | Event.observe(window, "scroll", function()
| + | |
| − | {
| + | |
| − | var pos_y = 125 - window.scrollY;
| + | |
| − |
| + | |
| − | if(pos_y < 75)
| + | |
| − | pos_y = 75;
| + | |
| − |
| + | |
| − | //$$(".menu-container")[0].style.top = pos_y + "px";
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style class="cp-pen-styles">/* quick grid */
| + | |
| − | .shuffle-container {
| + | |
| − | width: 93%;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Bootstrap-style columns */
| + | |
| − | .shuffle-container .column {
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | min-height: 1px;
| + | |
| − | width: 25%;
| + | |
| − | padding-left: 4px;
| + | |
| − | padding-right: 4px;
| + | |
| − |
| + | |
| − | /* Space between tiles */
| + | |
| − | margin-top: 8px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .col-span {
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .my-sizer-element {
| + | |
| − | width: 8.33333%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* default styles so shuffle doesn't have to set them (it will if they're missing) */
| + | |
| − | .shuffle-container .my-shuffle {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Ensure images take up the same space when they load */
| + | |
| − | /* https://vestride.github.io/Shuffle/images */
| + | |
| − | .shuffle-container .aspect {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | height: 0;
| + | |
| − | padding-bottom: 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect__inner {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--16x9 {
| + | |
| − | padding-bottom: 56.25%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--9x80 {
| + | |
| − | padding-bottom: calc(112.5% + 8px);
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--32x9 {
| + | |
| − | padding-bottom: calc(28.125% - 3px);
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container img {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − |
| + | |
| − | max-width: none;
| + | |
| − | height: 100%;
| + | |
| − | -o-object-fit: cover;
| + | |
| − | object-fit: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Small reset */
| + | |
| − | .shuffle-container *,
| + | |
| − | .shuffle-container ::before,
| + | |
| − | .shuffle-container ::after {
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container figure {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }</style>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.0.2/shuffle.min.js"></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − | /*var Shuffle = window.Shuffle;
| + | |
| − | | + | |
| − | var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), {
| + | |
| − | itemSelector: '.js-item',
| + | |
| − | sizer: '.my-sizer-element',
| + | |
| − | buffer: 1,
| + | |
| − | });*/
| + | |
| − | </script>
| + | |
| − | | + | |
| − | </body>
| + | |
| − | </html>
| + | |
