|
|
| (38 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | + | <script> |
| | | | |
| | + | $(document).ready(function() { |
| | + | var HQ=document.getElementById("HQ_page"); |
| | + | HQ.id=""; |
| | + | |
| | + | }); |
| | | | |
| − | <style>
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| | | | |
| | + | function highlight_current_page_menu() { |
| | + | |
| | + | var page_url="https://2018.igem.org/"; |
| | + | page_url = page_url + wgPageName; |
| | + | $("a[href$='"+ page_url +"']").children().addClass("current_page"); |
| | + | |
| | + | //if the page is in a submenu, open the submenu and make the appropiate changes |
| | + | if( $( ".current_page" ).hasClass( "submenu_item" )){ |
| | + | |
| | + | $(".current_page").parent().parent().fadeToggle(400); |
| | + | $(".current_page").parent().parent().prev().addClass("current_page"); |
| | + | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open"); |
| | + | |
| | + | } |
| | + | } |
| | | | |
| − | /**************************************************************************************************************************************************************************************************/ | + | </script> |
| − | /* CONTENT OF THE PAGE */
| + | |
| − | /**************************************************************************************************************************************************************************************************/
| + | |
| | | | |
| − | /* general wrapper for the content */
| + | <head> |
| − | .igem_2018_team_content {
| + | |
| − | background-color:white;
| + | |
| − | display:block;
| + | |
| − | width: 87%;
| + | |
| − | }
| + | |
| | | | |
| − | /* subwrapper to center content */ | + | <meta charset="utf-8" /> |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper {
| + | |
| − | margin:auto;
| + | |
| − | max-width: 1400px;
| + | |
| − | width:90%;
| + | |
| − | }
| + | |
| | | | |
| − | /*mobile*/
| + | <!-- This tells the browser that your page is responsive --> |
| − | /**************************************************************************************************************************************************************************************************/
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | | | |
| | + | </head> |
| | | | |
| − | /* 1800px */
| + | <style> |
| − | /************************************************/
| + | /**************************************************************************************************************************************************************************************************/ |
| − | @media only screen and (max-width: 1800px) {
| + | /* DEFAULT WIKI SETTINGS */ |
| − | .igem_2018_team_content { width: 85%;}
| + | /**************************************************************************************************************************************************************************************************/ |
| − | .igem_2018_team_menu {display:block;}
| + | |
| − | }
| + | |
| | | | |
| − | /* 1400px */ | + | #home_logo, #sideMenu { display:none; } |
| − | /************************************************/ | + | #sideMenu, #top_title, .patrollink {display:none;} |
| − | @media only screen and (max-width: 1400px) { | + | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} |
| − | .igem_2018_team_menu .menu_item { font-size:100%;}
| + | body {background-color:white; text-align:justify;} |
| − | .igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
| + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { border-bottom: 0px; } |
| − | .igem_2018_team_menu {display:block;}
| + | html {font-size: 100%;} |
| − | } | + | |
| | | | |
| − | @media only screen and (max-width: 1001px) {
| |
| − | .igem_2018_team_menu {display:block;}
| |
| − | }
| |
| | | | |
| − | /* 1000px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1000px) {
| |
| − | .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_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%; }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width: 500px) {
| |
| − | .igem_2018_team_menu {min-width:100%; width:100%; }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| | </style> | | </style> |
| | | | |
| | | | |
| | <style> | | <style> |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − | /*STYLES FOR NAVIGATION BAR*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | body {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | a:hover {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | header {
| |
| − | z-index: 100;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | top: 0;
| |
| − | background: white;
| |
| − | box-shadow: 0 5px 5px #ecf0f1;
| |
| − | }
| |
| − | header nav {
| |
| − | margin: 0;
| |
| − | margin-right: 10%;
| |
| − | padding: 0;
| |
| − | float: right;
| |
| − | vertical-align: middle;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | header nav ul {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | list-style-type: none;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | header nav li {
| |
| − | display: inline-block;
| |
| − | margin: 0;
| |
| − | }
| |
| − | header nav li a {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | color: black;
| |
| − | text-decoration: none;
| |
| − | text-align: center;
| |
| − | padding: 16px 16px;
| |
| − | margin: 0;
| |
| − | width: 80px;
| |
| − | font-family: Tahoma, Arial;
| |
| − | }
| |
| − | header nav li a:before {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | width: 0;
| |
| − | left: 20%;
| |
| − | bottom: 0;
| |
| − | margin-left: 30%;
| |
| − | border-bottom: 4px solid #f3bd01;
| |
| − | -webkit-transition: all 0.3s ease-in-out;
| |
| − | -moz-transition: all 0.3s ease-in-out;
| |
| − | -ms-transition: all 0.3s ease-in-out;
| |
| − | }
| |
| − | header nav li a:hover:before {
| |
| − | margin: 0;
| |
| − | width: 60%;
| |
| − | }
| |
| − | header nav li a:hover:not(.active) {
| |
| − | background-color: #ecf0f1;
| |
| − | color: black;
| |
| − | }
| |
| − | header nav .active:before {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | left: 20%;
| |
| − | width: 60%;
| |
| − | margin: 0;
| |
| − | border-bottom: 4px solid #f3704b;
| |
| − | }
| |
| − | header .nav-logo {
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | margin-left: 5%;
| |
| − | margin-right: 20px;
| |
| − | margin-top: 0;
| |
| − | margin-bottom: 0;
| |
| − | padding: 0;
| |
| − | vertical-align: middle;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | header .nav-head {
| |
| − | display: inline-block;
| |
| − | margin-left: 20px;
| |
| − | margin-right: 20px;
| |
| − | margin-top: 0;
| |
| − | margin-bottom: 0;
| |
| − | padding: 0;
| |
| − | vertical-align: middle;
| |
| − | font-family: Tahoma, Arial;
| |
| − | }
| |
| | | | |
| | /**************************************************************************************************************************************************************************************************/ | | /**************************************************************************************************************************************************************************************************/ |
| − | | + | /*NOW START YOUR WON STYLINGS*/ |
| | /**************************************************************************************************************************************************************************************************/ | | /**************************************************************************************************************************************************************************************************/ |
| | </style> | | </style> |
| − |
| |
| − | <head>
| |
| − | <meta charset="utf-8" />
| |
| − | <!-- This tells the browser that your page is responsive -->
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − |
| |
| − | </head>
| |
