|
|
Line 185: |
Line 185: |
| <div id="sidebar_and_texts"> | | <div id="sidebar_and_texts"> |
| | | |
− |
| |
− | <!------------------------------------SIDEBAR_START------------------------------------->
| |
− | <div id="sidebar">
| |
− |
| |
− | <ul class="section_guider" style="list-style: none !important;">
| |
− | <li><a href="#section1"><img src="https://static.igem.org/mediawiki/2021/a/a5/T--LINKS_China--sectionguider_purple1.png" id="section1_guider"></a></li>
| |
− | <li><a href="#section2"><img src="https://static.igem.org/mediawiki/2021/c/c0/T--LINKS_China--sectionguider_purple2.png
| |
− | " id="section2_guider"></a></li>
| |
− | <li><a href="#section3"><img src="https://static.igem.org/mediawiki/2021/1/1b/T--LINKS_China--sectionguider_purple3.png" id="section3_guider"></a></li>
| |
− | <li><a href="#section4"><img src="https://static.igem.org/mediawiki/2021/2/29/T--LINKS_China--sectionguider_purple4.png" id="section4_guider"></a></li>
| |
− | <li><a href="#section5"><img src="https://static.igem.org/mediawiki/2021/6/6c/T--LINKS_China--sectionguider_purple5.png" id="section5_guider"></a></li>
| |
− | <li><a href="#section6"><img src="https://static.igem.org/mediawiki/2021/e/e6/T--LINKS_China--sectionguider_purple6.png" id="section6_guider"></a></li>
| |
− | <li><a href="#section7"><img src="https://static.igem.org/mediawiki/2021/c/c2/T--LINKS_China--sectionguider_purple7.png" id="section7_guider"></a></li>
| |
− | <li><a href="#section8"><img src="https://static.igem.org/mediawiki/2021/c/ca/T--LINKS_China--sectionguider_purple8.png" id="section8_guider"></a></li>
| |
− | </ul>
| |
− |
| |
− |
| |
− |
| |
− | <ul class="section_header" style="list-style: none !important;">
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section1_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section2_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section3_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section4_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section5_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section6_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section7_header"></li>
| |
− | <li><img src="https://static.igem.org/mediawiki/2021/d/d6/T--LINKS_China--sectionguider_darkpurple.png" id="section8_header"></li>
| |
− | </ul>
| |
− |
| |
− | <a id="top_button" href="#"><img src="https://static.igem.org/mediawiki/2021/8/8e/T--LINKS_China--top_button.jpg"></a>
| |
− |
| |
− |
| |
− | <nav class="section-nav">
| |
− | <ul>
| |
− | <li><a href="#section1">section1</a></li>
| |
− | <li><a href="#section2">section2</a></li>
| |
− | <li><a href="#section3">section3</a></li>
| |
− | <li><a href="#section4">section4</a></li>
| |
− | <li><a href="#section5">section5</a></li>
| |
− | <li><a href="#section6">section6</a></li>
| |
− | <li><a href="#section7">section7</a></li>
| |
− | <li><a href="#section8">section8</a></li>
| |
− | </ul>
| |
− | </nav>
| |
− |
| |
− | </div>
| |
− | <!------------------------------------SIDEBAR_END------------------------------------->
| |
| | | |
| | | |
Line 520: |
Line 473: |
| width: 100vw; | | width: 100vw; |
| height: 49vw; | | height: 49vw; |
− | background: url(https://static.igem.org/mediawiki/2021/e/e1/T--LINKS_China--imgbackground_ihpv2.jpg); | + | background: url(https://static.igem.org/mediawiki/2021/7/70/T--LINKS_China--bigimg_ihps.png); |
| background-attachment:scroll; | | background-attachment:scroll; |
| background-repeat: no-repeat; | | background-repeat: no-repeat; |
Line 559: |
Line 512: |
| @media only screen and (min-device-width: 768px) { | | @media only screen and (min-device-width: 768px) { |
| #sidebar_and_texts { | | #sidebar_and_texts { |
− | display: grid;
| |
− | grid-template-columns: 0.27fr 1.63fr;
| |
− | gap: 0px 0px;
| |
− | align-items: baseline;
| |
| } | | } |
| | | |
Line 624: |
Line 573: |
| width: 11.2vw; | | width: 11.2vw; |
| top: -1.3vw; | | top: -1.3vw; |
− | padding: 1.63vw 0vw 0vw 0vw; | + | padding: 1.75vw 0vw 0vw 0vw; |
| right: 0.55vw; | | right: 0.55vw; |
| height: auto; | | height: auto; |
Line 637: |
Line 586: |
| position: relative; | | position: relative; |
| width: 5vw; | | width: 5vw; |
− | top: 1.5vw; | + | top: 0.5vw; |
| left: -0.525vw; | | left: -0.525vw; |
| } | | } |
Line 661: |
Line 610: |
| @media only screen and (max-device-width: 768px) { | | @media only screen and (max-device-width: 768px) { |
| #sidebar_and_texts { | | #sidebar_and_texts { |
− | display: grid;
| |
− | grid-template-columns: 0.31fr 1.59fr;
| |
− | gap: 0px 0px;
| |
− | align-items: baseline;
| |
| } | | } |
| | | |
| #sidebar { | | #sidebar { |
− | display: block; | + | display: none; |
| border: 0px solid #600136; | | border: 0px solid #600136; |
| } | | } |
Line 709: |
Line 654: |
| | | |
| .section-nav{ | | .section-nav{ |
− | display: block; | + | display: none; |
| background-color: #FFFFFF; | | background-color: #FFFFFF; |
| } | | } |
Line 773: |
Line 718: |
| letter-spacing: 0.6px; | | letter-spacing: 0.6px; |
| text-shadow: 2px 2px 5px #C0C0C0; | | text-shadow: 2px 2px 5px #C0C0C0; |
| + | margin-left: 4.5vw; |
| + | margin-right: 4.5vw; |
| } | | } |
| | | |
Line 791: |
Line 738: |
| border-radius: 24px; | | border-radius: 24px; |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
− | margin-left: 0.3vw; | + | margin-left: 4.5vw; |
− | margin-right: 3vw; | + | margin-right: 4.5vw; |
| } | | } |
| | | |
Line 900: |
Line 847: |
| border-radius: 24px; | | border-radius: 24px; |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
− | margin-left: 0.3vw; | + | margin-left: 4.5vw; |
− | margin-right: 3vw; | + | margin-right: 4.5vw; |
| font-family: "LatoLight"; | | font-family: "LatoLight"; |
| } | | } |
Line 915: |
Line 862: |
| margin: 1vw; | | margin: 1vw; |
| font-family: "LatoLight"; | | font-family: "LatoLight"; |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | #show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5, #show_on_click6{
| |
− | display:none;
| |
− | transition: all 0.5s !important;
| |
− | }
| |
− |
| |
− | .show{
| |
− | display:block !important;
| |
− | transition: all 0.5s !important;
| |
− | }
| |
− |
| |
− |
| |
− | .show_buttons{
| |
− | color: grey;
| |
− | font-family: "Lato";
| |
− | cursor: pointer;
| |
− | border: none;
| |
− | font-size: 1.5vw;
| |
| } | | } |
| | | |
Line 1,104: |
Line 1,027: |
| z-index: 100; | | z-index: 100; |
| transition: top 0.3s; /* Transition effect when sliding down (and up) */ | | transition: top 0.3s; /* Transition effect when sliding down (and up) */ |
| + | top:-100px; |
| } | | } |
| | | |
Line 1,187: |
Line 1,111: |
| | | |
| | | |
− | <!----------------------------SIDEBAR_EFFECT--------------------------->
| |
| <script> | | <script> |
− | $(document).ready( function() {
| |
− |
| |
− | $("#section1_guider").hover( function() {
| |
− | $("#section1_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section1_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− |
| |
− | $("#section2_guider").hover( function() {
| |
− | $("#section2_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section2_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− |
| |
− |
| |
− | $("#section3_guider").hover( function() {
| |
− | $("#section3_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section3_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− |
| |
− | $("#section4_guider").hover( function() {
| |
− | $("#section4_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section4_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− | $("#section5_guider").hover( function() {
| |
− | $("#section5_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section5_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− | $("#section6_guider").hover( function() {
| |
− | $("#section6_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section6_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− | $("#section7_guider").hover( function() {
| |
− | $("#section7_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section7_header").animate({opacity: 0}, 150);
| |
− | });
| |
− | $("#section8_guider").hover( function() {
| |
− | $("#section8_header").animate({opacity: 1}, 350);
| |
− | }, function() {
| |
− | $("#section8_header").animate({opacity: 0}, 150);
| |
− | });
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | });
| |
− |
| |
− | <!----------------------------NAVBAR_EFFECT--------------------------->
| |
| var prevScrollpos = window.pageYOffset; | | var prevScrollpos = window.pageYOffset; |
| window.onscroll = function() { | | window.onscroll = function() { |
Line 1,253: |
Line 1,117: |
| if (prevScrollpos > currentScrollPos) { | | if (prevScrollpos > currentScrollPos) { |
| document.getElementById("outnav").style.top = "17px"; | | document.getElementById("outnav").style.top = "17px"; |
− | document.getElementById("sidebar").style.top = "9.7vw";
| |
| } else { | | } else { |
| document.getElementById("outnav").style.top = "-100px"; | | document.getElementById("outnav").style.top = "-100px"; |
− | document.getElementById("sidebar").style.top = "5vw";
| |
| } | | } |
| prevScrollpos = currentScrollPos; | | prevScrollpos = currentScrollPos; |
| } | | } |
| + | </script> |
| | | |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | window.addEventListener('DOMContentLoaded', () => {
| |
− |
| |
− | const observer = new IntersectionObserver(entries => {
| |
− | entries.forEach(entry => {
| |
− | const id = entry.target.getAttribute('id');
| |
− | if (entry.intersectionRatio > 0) {
| |
− | document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
| |
− | } else {
| |
− | document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
| |
− | }
| |
− | });
| |
− | });
| |
− |
| |
− | // Track all sections that have an `id` applied
| |
− | document.querySelectorAll('section[id]').forEach((section) => {
| |
− | observer.observe(section);
| |
− | });
| |
− |
| |
− | });
| |
− |
| |
− |
| |
− |
| |
− | function myFunction1() {
| |
− | var element = document.getElementById("show_on_click1");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− | function myFunction2() {
| |
− | var element = document.getElementById("show_on_click2");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− | function myFunction3() {
| |
− | var element = document.getElementById("show_on_click3");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− | function myFunction4() {
| |
− | var element = document.getElementById("show_on_click4");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− | function myFunction5() {
| |
− | var element = document.getElementById("show_on_click5");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− | function myFunction6() {
| |
− | var element = document.getElementById("show_on_click6");
| |
− | element.classList.toggle("show");
| |
− | }
| |
− |
| |
− |
| |
− | </script>
| |
| </html> | | </html> |