|
|
Line 1: |
Line 1: |
| + | |
| <!DOCTYPE html> | | <!DOCTYPE html> |
| <html> | | <html> |
Line 194: |
Line 195: |
| | | |
| .menu-container.active { | | .menu-container.active { |
− | top: 360px; | + | top: 375px; |
| } | | } |
| | | |
Line 268: |
Line 269: |
| <div> | | <div> |
| <ul class="top-menu-links"> | | <ul class="top-menu-links"> |
− | <li data-key="home" class="active">Home</li> | + | <li data-key="home" class="active" data-url="home">Home</li> |
| <li data-key="exp">Experimental</li> | | <li data-key="exp">Experimental</li> |
| <li data-key="hp">Human practices</li> | | <li data-key="hp">Human practices</li> |
Line 365: |
Line 366: |
| </div> | | </div> |
| <div class="page-container"> | | <div class="page-container"> |
− | <div class="page-heading">The OUTCASST two-component system</div>
| |
| <div class="page-content"> | | <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. | | 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. |
| | | |
Line 429: |
Line 429: |
| <br> | | <br> |
| </div> | | </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="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="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="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="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="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="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="Hugo Snippert (2).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="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"> | | <style type="text/css"> |
Line 436: |
Line 796: |
| body { | | body { |
| font-family: 'Open Sans', 'sans-serif'; | | font-family: 'Open Sans', 'sans-serif'; |
| + | overflow: scroll; |
| } | | } |
| | | |
Line 487: |
Line 848: |
| var pos = getPos(v); | | var pos = getPos(v); |
| | | |
− | if(document.body.scrollTop + 200 >= pos.y) | + | if(jQuery(window).scrollTop() + 200 >= pos.y) |
| { | | { |
| sel_subhead = key; | | sel_subhead = key; |
| } | | } |
− | else if(document.body.scrollTop + document.body.getHeight() == document.body.scrollHeight) | + | else if(Math.ceil(jQuery(window).scrollTop() + jQuery(window).height()) >= jQuery(document).height()) |
| { | | { |
| if(key == 3) | | if(key == 3) |
Line 583: |
Line 944: |
| }); | | }); |
| }); | | }); |
− | </script>
| + | </script> |
− | | + | |
− | </div>
| + | |
− | </div>
| + | |
| | | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> | | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> |
Line 592: |
Line 950: |
| | | |
| <script type="text/javascript"> | | <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) | | function move_underline(element) |
| { | | { |
Line 603: |
Line 1,010: |
| line.style.left = offset.left + "px"; | | line.style.left = offset.left + "px"; |
| line.style.width = width + "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"); |
| } | | } |
| | | |
Line 626: |
Line 1,065: |
| var page = element.getAttribute("data-url"); | | var page = element.getAttribute("data-url"); |
| | | |
− | history.pushState({}, title, page); | + | //history.pushState({}, title, page); |
| + | |
| + | change_page(page); |
| }); | | }); |
| | | |
Line 637: |
Line 1,078: |
| { | | { |
| element.removeClassName("active"); | | 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); |
| + | } |
| }); | | }); |
| | | |
Line 666: |
Line 1,124: |
| }); | | }); |
| }); | | }); |
| + | </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> | | </script> |
| | | |
| </body> | | </body> |
| </html> | | </html> |