|
|
| (39 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
| | <script> | | <script> |
| | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
| Line 8: |
Line 8: |
| | $("#HQ_page").attr('id',''); | | $("#HQ_page").attr('id',''); |
| | | | |
| − |
| |
| | //highlight current page on the menu | | //highlight current page on the menu |
| | highlight_current_page_menu(); | | highlight_current_page_menu(); |
| Line 22: |
Line 21: |
| | $(this).next().toggleClass("displaying_menu"); | | $(this).next().toggleClass("displaying_menu"); |
| | }); | | }); |
| − |
| + | |
| | }); | | }); |
| | | | |
| Line 45: |
Line 44: |
| | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
| | | | |
| − | /// Smooth Scroll: ///
| |
| | | | |
| − | $(document).ready(function(){
| |
| − | // Add smooth scrolling to all links
| |
| − | $("a").on('click', function(event) {
| |
| | | | |
| − | // Make sure this.hash has a value before overriding default behavior
| |
| − | if (this.hash !== "") {
| |
| − | // Prevent default anchor click behavior
| |
| − | event.preventDefault();
| |
| | | | |
| − | // Store hash
| |
| − | var hash = this.hash;
| |
| | | | |
| − | // Using jQuery's animate() method to add smooth page scroll
| + | |
| − | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
| + | document.addEventListener('DOMContentLoaded', function() { |
| − | $('html, body').animate({
| + | var elems = document.querySelectorAll('.modal'); |
| − | scrollTop: $(hash).offset().top
| + | var instances = M.Modal.init(elems, options); |
| − | }, 1500, function(){
| + | }); |
| − |
| + | |
| − | // Add hash (#) to URL when done scrolling (default click behavior)
| + | // Or with jQuery |
| − | window.location.hash = hash;
| + | |
| − | });
| + | $(document).ready(function(){ |
| − | } // End if
| + | $('.modal').modal(); |
| | }); | | }); |
| − | });
| |
| | | | |
| | </script> | | </script> |
| Line 92: |
Line 80: |
| | | | |
| | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;} | | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;} |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − | /* MENU */
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | /*this wraps the whole of the menu*/
| |
| − | .igem_2018_team_menu {
| |
| − | background-color:#c4baba;
| |
| − | border-left: 1px solid #c4baba;
| |
| − | display:block;
| |
| − | float:right;
| |
| − | height:100vh;
| |
| − | max-width: 270px;
| |
| − | overflow-y: auto;
| |
| − | overflow-x: hidden;
| |
| − | padding:0px;
| |
| − | position:fixed;
| |
| − | right:0%;
| |
| − | text-align:left;
| |
| − | width: 15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu.displaying_menu{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu a {
| |
| − | color: #484848;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu img {
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item {
| |
| − | background-color: #c4baba;
| |
| − | border-bottom: 1px solid #928b8b;
| |
| − | clear: both;
| |
| − | color: #484848;
| |
| − | cursor: pointer;
| |
| − | float: left;
| |
| − | font-size: 120%;
| |
| − | font-weight: bold;
| |
| − | padding: 15px 0px 15px 5%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item.direct_link {
| |
| − | color: #484848;
| |
| − | padding-left: 15%;
| |
| − | }
| |
| − | .igem_2018_team_menu .menu_item:hover {
| |
| − | background-color: #ecb656;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon {
| |
| − | color: #484848;
| |
| − | float: left;
| |
| − | width: 10%;
| |
| − | }
| |
| − |
| |
| − | /* submenu icon "+" "-"*/
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon::before {
| |
| − | content: "+";
| |
| − | }
| |
| − |
| |
| − | /* submenu icon "+" "-"*/
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
| |
| − | content: "-";
| |
| − | }
| |
| − |
| |
| − | /*submenu wrapper*/
| |
| − | .igem_2018_team_menu .submenu{
| |
| − | background-color: #e4dede;
| |
| − | clear:both;
| |
| − | display:none;
| |
| − | float: left;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | /*styling for a submenu item*/
| |
| − | .igem_2018_team_menu .submenu .submenu_item {
| |
| − | border-bottom: 1px solid #c4baba;
| |
| − | color: #635d5d;
| |
| − | height: 30px;
| |
| − | float: left;
| |
| − | font-size: 110%;
| |
| − | font-weight: bold;
| |
| − | padding: 12px 0px 0px 15%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu .submenu .submenu_item:hover {
| |
| − | background-color: #f3bd5d;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .submenu .submenu_item.current_page,
| |
| − | .igem_2018_team_menu .menu_item.current_page,
| |
| − | .igem_2018_team_menu .menu_item.direct_link.current_page {
| |
| − | background-color:#7acbd8;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*mobile menu bar styling*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_mobile_bar {
| |
| − | background-color:#e4dede;
| |
| − | border-bottom: 1px solid #c4baba;
| |
| − | cursor:pointer;
| |
| − | display:none;
| |
| − | float:left;
| |
| − | margin-top: 0;
| |
| − | padding: 5px 0;
| |
| − | position:fixed;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | .igem_logo_mobile img {
| |
| − | width:70px;
| |
| − | }
| |
| − |
| |
| − | .igem_logo_mobile {
| |
| − | float:left;
| |
| − | padding-left: 5%;
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .igem_menu_control_mobile img {
| |
| − | width:25px;
| |
| − | }
| |
| − |
| |
| − | .igem_menu_control_mobile {
| |
| − | float:right;
| |
| − | padding-right:5%;
| |
| − | padding-top:5px;
| |
| − | text-align:right;
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| | /**************************************************************************************************************************************************************************************************/ | | /**************************************************************************************************************************************************************************************************/ |
| Line 250: |
Line 89: |
| | background-color:white; | | background-color:white; |
| | display:block; | | display:block; |
| − | width: 87%; | + | width: 100%; |
| | } | | } |
| | | | |
| Line 259: |
Line 98: |
| | width:65%; | | width:65%; |
| | } | | } |
| − |
| |
| | | | |
| | | | |
| Line 268: |
Line 106: |
| | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;} | | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;} |
| | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;} | | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;} |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 140%;} | + | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;} |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 120%;} | + | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;} |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 100%;} | + | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;} |
| | | | |
| | | | |
| Line 294: |
Line 132: |
| | /* text */ | | /* text */ |
| | .igem_2018_team_content .igem_2018_team_column_wrapper p { | | .igem_2018_team_content .igem_2018_team_column_wrapper p { |
| − | font-size: 100%;
| |
| | font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif; | | font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif; |
| | padding: 5px 0px; | | padding: 5px 0px; |
| Line 325: |
Line 162: |
| | border: 1px solid #928b8b; | | border: 1px solid #928b8b; |
| | border-collapse: collapse; | | border-collapse: collapse; |
| − | font-size: 130%;
| |
| | width: 100%; | | width: 100%; |
| | } | | } |
| Line 333: |
Line 169: |
| | border: 1px solid #c4baba; | | border: 1px solid #c4baba; |
| | border-collapse: collapse; | | border-collapse: collapse; |
| − | font-size: 105%; | + | font-size: 100%; |
| | padding: 10px; | | padding: 10px; |
| | vertical-align: text-top; | | vertical-align: text-top; |
| Line 339: |
Line 175: |
| | | | |
| | /* table headers */ | | /* table headers */ |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper th { | + | .igem_2018_team_content .igem_2018_team_column_wrapper th p { |
| | background-color:#c4baba; | | background-color:#c4baba; |
| | border: 1px solid #928b8b; | | border: 1px solid #928b8b; |
| | border-collapse: collapse; | | border-collapse: collapse; |
| − | font-size: 110%; | + | font-size: 100%; |
| | padding: 10px; | | padding: 10px; |
| | vertical-align: text-top; | | vertical-align: text-top; |
| Line 354: |
Line 190: |
| | | | |
| | /* non numbered lists */ | | /* non numbered lists */ |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol { | + | .igem_2018_team_content .igem_2018_team_column_wrapper ul p, .igem_2018_team_content .igem_2018_team_column_wrapper ol p { |
| | font-size: 100%; | | font-size: 100%; |
| | font-family: Arial, Helvetica, sans-serif; | | font-family: Arial, Helvetica, sans-serif; |
| | padding:0px 20px; | | padding:0px 20px; |
| | + | } |
| | + | |
| | + | .collapsible-header { |
| | + | font-size:130%; |
| | } | | } |
| | | | |
| Line 366: |
Line 206: |
| | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li, | | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li, |
| | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li, | | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li, |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; } | + | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 100%; } |
| | | | |
| | | | |
| Line 484: |
Line 324: |
| | | | |
| | | | |
| | + | |
| | + | |
| | + | img.portrait_photo { |
| | + | border-radius:50%; |
| | + | } |
| | | | |
| | | | |
| Line 493: |
Line 338: |
| | /************************************************/ | | /************************************************/ |
| | @media only screen and (max-width: 1800px) { | | @media only screen and (max-width: 1800px) { |
| − | .igem_2018_team_content { width: 100%;}
| + | |
| − | .igem_2018_team_menu {display:block;}
| + | |
| | } | | } |
| | | | |
| Line 500: |
Line 344: |
| | /************************************************/ | | /************************************************/ |
| | @media only screen and (max-width: 1400px) { | | @media only screen and (max-width: 1400px) { |
| − | .igem_2018_team_menu .menu_item { font-size:100%;}
| + | |
| − | .igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
| + | |
| − | .igem_2018_team_menu {display:block;}
| + | |
| | } | | } |
| | | | |
| | @media only screen and (max-width: 1001px) { | | @media only screen and (max-width: 1001px) { |
| − | .igem_2018_team_menu {display:block;}
| + | |
| | } | | } |
| | | | |
| Line 513: |
Line 355: |
| | @media only screen and (max-width: 1000px) { | | @media only screen and (max-width: 1000px) { |
| | .igem_2018_team_content {width:100%; margin-left:0px;} | | .igem_2018_team_content {width:100%; margin-left:0px;} |
| − | .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
| |
| | .igem_2018_team_mobile_bar {display:block;} | | .igem_2018_team_mobile_bar {display:block;} |
| | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; } | | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; } |
| Line 521: |
Line 362: |
| | | | |
| | @media only screen and (max-width: 500px) { | | @media only screen and (max-width: 500px) { |
| − | .igem_2018_team_menu {min-width:100%; width:100%; }
| + | |
| | } | | } |
| | | | |
| Line 527: |
Line 368: |
| | /**************************************************************************************************************************************************************************************************/ | | /**************************************************************************************************************************************************************************************************/ |
| | | | |
| − |
| |
| − |
| |
| − | /* NAVIGATION BAR */
| |
| − | #primary_nav_wrap
| |
| − | {
| |
| − | margin-top:10px;
| |
| − | overflow-x: visible;
| |
| − | /*position: relative;*/
| |
| − | /*overflow: hidden;*/
| |
| − | background-color: hidden;
| |
| − | position: absolute;
| |
| − | height: 45px;
| |
| − | width: 100%;
| |
| − | min-width: 1000px;
| |
| − |
| |
| − | }
| |
| − | #primary_nav_wrap ul
| |
| − | {
| |
| − | list-style:none;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | margin:0;
| |
| − | padding:0 0 0 20%;
| |
| − | }
| |
| − | #primary_nav_wrap ul a
| |
| − | {
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | color: white;/*#333;*/
| |
| − | text-decoration:none;
| |
| − | font-weight:700;
| |
| − | font-size:15px;
| |
| − | line-height:32px;
| |
| − | padding:0 15px;
| |
| − | z-index: 2000;
| |
| − | }
| |
| − | #primary_nav_wrap ul li
| |
| − | {
| |
| − | z-index: 2000;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | font-family: Helvetica;
| |
| − | }
| |
| − | #primary_nav_wrap ul li.current-menu-item
| |
| − | {
| |
| − | background:red;
| |
| − | }
| |
| − | #primary_nav_wrap ul li:hover
| |
| − | {
| |
| − | background-color:rgba(160, 192, 239, 0.25);
| |
| − | transition: all .1s ease-out;
| |
| − | cursor: pointer
| |
| − | }
| |
| − | #primary_nav_wrap ul ul
| |
| − | {
| |
| − | position:absolute;
| |
| − | top:100%;
| |
| − | left:0;
| |
| − | background-color:rgba(15, 19, 25, 0.7);
| |
| − | padding:0;
| |
| − | transition: all .2s ease-out;
| |
| − | opacity: 0; /* for anim display:none; -> display:block; */
| |
| − | visibility: hidden;
| |
| − | margin: -20px 0 0 0;
| |
| − | }
| |
| − | #primary_nav_wrap ul ul li
| |
| − | {
| |
| − | line-height:120%;
| |
| − | padding:10px 15px;
| |
| − | color: rgba(255,255,255,0.5);
| |
| − | }
| |
| − | #primary_nav_wrap ul ul a
| |
| − | {
| |
| − | line-height:120%;
| |
| − | padding:10px 15px;
| |
| − | }
| |
| − | #primary_nav_wrap ul li:hover > ul
| |
| − | {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | margin: 0;
| |
| − |
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| Line 650: |
Line 406: |
| | | | |
| | </head> | | </head> |
| − |
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Menu --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Content of the page --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <div class="navbar-fixed" id="navbar">
| |
| − | <nav class="row blue">
| |
| − | <div id="primary_nav_wrap" style="z-index: 2000">
| |
| − | <ul>
| |
| − | <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen">Home</a></li>
| |
| − | <li><a onclick="">Team</a>
| |
| − | <ul>
| |
| − | <li class="dir"><a href="https://2018.igem.org/Team:Groningen/Team">Team Members</a></li>
| |
| − | <li class="dir"><a href="">Collaborations</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a onclick="">Project</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/InterLab">InterLab</a></li>
| |
| − | <li class="dir">Description</li>
| |
| − | <li class="dir">Design</li>
| |
| − | <li class="dir">Experiments</li>
| |
| − | <li class="dir">Notebook</li>
| |
| − | <li class="dir">Model</li>
| |
| − | <li class="dir">Results</li>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Demonstrate">Demonstrate</a></li>
| |
| − | <li class="dir">Improve</li>
| |
| − | <li class="dir">Attributions</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a onclick="">Human Practices</a>
| |
| − | <ul>
| |
| − | <li class="dir">Human Practices</li>
| |
| − | <li class="dir">Education & Engagement</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a onclick="">Parts</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Parts Overview">Part Overview</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Basic Parts">Basic Parts</a></li>
| |
| − | <li class="dir">Composite Parts</li>
| |
| − | <li class="dir">Part Collection</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a onclick="">Awards</a>
| |
| − | <ul>
| |
| − | <li class="dir">Applied Design</li>
| |
| − | <li class="dir">Entrepeneurship</li>
| |
| − | <li class="dir">Hardware</li>
| |
| − | <li class="dir">Measurement</li>
| |
| − | <li class="dir">Model</li>
| |
| − | <li class="dir">Plant</li>
| |
| − | <li class="dir">Software</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a onclick="">Acknowledgements</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Attributions">Attributions</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:Groningen/Crowdfunding">Crowdfunding</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </nav>
| |
| − | <div>
| |
| − |
| |
| − | <!------------- toggle mobile menu ----------->
| |
| − | <script>
| |
| − | function mobnavtoggle() {
| |
| − | document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | <style>
| |
| − | .mobicon {display:none;}
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − | /// To the top button: ///
| |
| − |
| |
| − | // When the user scrolls down 20px from the top of the document, show the button
| |
| − | window.onscroll = function() {scrollFunction()};
| |
| − |
| |
| − | function scrollFunction() {
| |
| − | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
| |
| − | document.getElementById("scrollBtn").style.display = "block";
| |
| − | } else {
| |
| − | document.getElementById("scrollBtn").style.display = "none";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // When the user clicks on the button, scroll to the top of the document
| |
| − | function topFunction() {
| |
| − | document.body.scrollTop = 0;
| |
| − | document.documentElement.scrollTop = 0;
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!---
| |
| − | <div box-shadow="0 0 px 8px #10722B inset" visibility="hidden">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/5/5c/T--Groningen--WikiBackgroundImage.png" width="100%" height="auto">
| |
| − | </div>
| |
| − | --->
| |
| − |
| |
| − | <div box-shadow="0 0 px 8px #10722B inset" visibility="hidden">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/1/14/T--Groningen--construction.png" width="100%" height="auto">
| |
| − | </div>
| |
