Patricia S (Talk | contribs) m |
Bec Schacht (Talk | contribs) |
||
(131 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<div id="navbar"> | <div id="navbar"> | ||
− | <a href="https://2018.igem.org/Team:UNSW_Australia"><img height="55px" width="55px" src="https://static.igem.org/mediawiki/2018/b/b6/T--UNSW_Australia--Logo.png"> | + | <div id="logo-navbar"> |
− | <div id="menu" | + | <a href="https://2018.igem.org/Team:UNSW_Australia"><img height="55px" width="55px" src="https://static.igem.org/mediawiki/2018/b/b6/T--UNSW_Australia--Logo.png"></a> |
− | + | </div> | |
+ | <div id="menu"> | ||
+ | <input type="checkbox" class="navToggle" id="navToggle"> | ||
+ | <div class="main-menu"> | ||
+ | <label for="navToggle" id="navigation">Navigation</label> | ||
+ | </div> | ||
<div class="main-menu first-menu"> | <div class="main-menu first-menu"> | ||
+ | <a href="https://2018.igem.org/Team:UNSW_Australia"><button id="home" class="dropbutton">Home</button></a> | ||
+ | </div> | ||
+ | <div class="main-menu"> | ||
<button id="project" class="dropbutton">Project</button> | <button id="project" class="dropbutton">Project</button> | ||
<div id="project-sub" class="sub-menu"> | <div id="project-sub" class="sub-menu"> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Description">Description</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Description">Description</a> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Design">Design</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Design">Design</a> | ||
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Experiments">Experimental Protocols</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab" class="submenu-header">Lab Overview</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Cloning" class="submenu-sub submenu-sub-first">Cloning</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Protein" class="submenu-sub">Protein Production</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Assembly" class="submenu-sub">Assembly</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/FRET" class="submenu-sub">FRET</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Assays" class="submenu-sub">Enzyme Assays</a> | |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Plants" class="submenu-sub submenu-sub-last">Plants</a> | |
<a href="https://2018.igem.org/Team:UNSW_Australia/Results">Results</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Results">Results</a> | ||
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/InterLab">Interlab</a> | |
</div> | </div> | ||
</div> | </div> | ||
Line 25: | Line 33: | ||
<div id="modelling-sub" class="sub-menu"> | <div id="modelling-sub" class="sub-menu"> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Model">Overview</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Model">Overview</a> | ||
− | <a href="https://2018.igem.org/Team:UNSW_Australia/Model/EKD">Enzyme Kinetics | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Model/EKD">Enzyme Kinetics & Diffusion</a> |
<a href="https://2018.igem.org/Team:UNSW_Australia/Model/MD">Molecular Dynamics</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Model/MD">Molecular Dynamics</a> | ||
</div> | </div> | ||
Line 42: | Line 50: | ||
<div id="hp-sub" class="sub-menu"> | <div id="hp-sub" class="sub-menu"> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices">Overview</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices">Overview</a> | ||
− | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/ | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Commercialisation">Commercialisation</a> |
− | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Public_Engagement">Education & Engagement</a> | |
− | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/ | + | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Law">Law & Regulation</a> |
− | + | ||
− | + | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Integrate">Integration</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Integrate">Integration</a> | ||
</div> | </div> | ||
Line 56: | Line 62: | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Collaborations">Collaborations</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Collaborations">Collaborations</a> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Attributions">Attributions</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Attributions">Attributions</a> | ||
+ | <a href="https://2018.igem.org/Team:UNSW_Australia/Journal">Experts</a> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 63: | Line 70: | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Notebook">Notebook</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Notebook">Notebook</a> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Safety">Safety</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Safety">Safety</a> | ||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 70: | Line 76: | ||
<div id="judging-sub" class="sub-menu"> | <div id="judging-sub" class="sub-menu"> | ||
<a href="https://2018.igem.org/Team:UNSW_Australia/Medals">Medals</a> | <a href="https://2018.igem.org/Team:UNSW_Australia/Medals">Medals</a> | ||
− | <a href="https:// | + | <a target="_blank" href="https://igem.org/2018_Judging_Form?id=2710">Judging Form</a> |
</div> | </div> | ||
+ | </div> | ||
+ | <label for="navToggle" class="navToggleLabel"> | ||
+ | <span></span> | ||
+ | </label> | ||
+ | <div id="mobile-background"></div> | ||
</div> | </div> | ||
− | |||
</div> | </div> | ||
+ | <div id="footer"> | ||
+ | <p>© 2018 UNSW Australia iGEM</p> | ||
+ | </div> | ||
<style> | <style> | ||
+ | @import url('https://fonts.googleapis.com/css?family=Lato'); | ||
/* iGEM format */ | /* iGEM format */ | ||
#content { | #content { | ||
width: 100%; | width: 100%; | ||
+ | min-height: 80vh; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
background-color: white; | background-color: white; | ||
− | |||
padding-top: 60px; | padding-top: 60px; | ||
+ | font-family: "Lato"; | ||
+ | padding-bottom: 30px; | ||
} | } | ||
#globalWrapper { | #globalWrapper { | ||
padding: 0; | padding: 0; | ||
+ | height: 100vh; | ||
} | } | ||
#mw-content-text { | #mw-content-text { | ||
− | |||
} | } | ||
Line 102: | Line 118: | ||
#bodyContent h1, #bodyContent h2 { | #bodyContent h1, #bodyContent h2 { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
+ | font-family: "Lato"; | ||
+ | } | ||
+ | |||
+ | #contentContainer h1, h2, h3, h4, h5, h6, p { | ||
+ | font-family: "Lato"; | ||
+ | } | ||
+ | |||
+ | #HQ_page p { | ||
+ | font-family: "Lato"; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | line-height: 1.2em; | ||
} | } | ||
/* NAVBAR */ | /* NAVBAR */ | ||
+ | |||
+ | html, body { | ||
+ | max-width: 100%; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
body { | body { | ||
margin: 0; | margin: 0; | ||
+ | } | ||
+ | |||
+ | button:hover { | ||
+ | color: #9C3132; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | display: none; | ||
} | } | ||
Line 122: | Line 165: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
+ | z-index: 11; | ||
} | } | ||
Line 128: | Line 172: | ||
.navToggleLabel span:after { | .navToggleLabel span:after { | ||
display: block; | display: block; | ||
− | background: | + | background: white; |
height: 2px; | height: 2px; | ||
width: 2em; | width: 2em; | ||
Line 137: | Line 181: | ||
.navToggleLabel span:before, | .navToggleLabel span:before, | ||
.navToggleLabel span:after { | .navToggleLabel span:after { | ||
− | content: ''; | + | content: ' '; |
position: absolute; | position: absolute; | ||
} | } | ||
Line 149: | Line 193: | ||
} | } | ||
− | .navToggle:checked ~ | + | .navToggle:checked ~ .main-menu button { |
− | + | transform: scale(1, 1); | |
+ | display: inline-block; | ||
} | } | ||
− | . | + | .main-menu button { |
− | + | color: white; | |
− | + | text-align: left; | |
+ | background: #1E1E1E; | ||
+ | text-decoration: none; | ||
+ | width: 230px; | ||
+ | font-size: 1.2rem; | ||
+ | text-transform: uppercase; | ||
+ | border: none; | ||
+ | padding: 5px 10px; | ||
+ | z-index: 3; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #mobile-background { | ||
+ | width: 230px; | ||
+ | height: 90vh; | ||
+ | background-color: #1E1E1E; | ||
+ | z-index: 2; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | transform: scale(0,0); | ||
} | } | ||
+ | a { | ||
+ | padding-right: 0px !important; | ||
+ | } | ||
#navbar { | #navbar { | ||
top: 18px; | top: 18px; | ||
− | + | background-color: #1E1E1E; | |
height: 60px; | height: 60px; | ||
color: white; | color: white; | ||
position: fixed; | position: fixed; | ||
width: 100%; | width: 100%; | ||
+ | z-index: 10; | ||
} | } | ||
− | + | #logo-navbar { | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | padding-top: 2px; | |
− | + | margin-bottom: 0; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .main-menu button { |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .main-menu button:hover { |
− | + | color: #d12e38; | |
} | } | ||
− | + | #project-sub a:hover ~ #project { | |
− | + | color: #d12e38; | |
− | + | ||
− | + | ||
} | } | ||
− | + | #navigation { | |
− | + | display: none; | |
− | + | ||
} | } | ||
− | . | + | .sub-menu { |
− | + | float: none; | |
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | text-align: left; | ||
} | } | ||
− | + | .sub-menu a { | |
− | + | padding: 5px 10px; | |
− | + | clear: both; | |
− | } | + | display: block; |
+ | background-color: #f0f0f0; | ||
+ | width: 210px; | ||
+ | margin: 0px; | ||
+ | text-decoration: none; | ||
+ | } | ||
− | + | @media screen and (min-width: 500px) { | |
− | + | .navToggleLabel span { | |
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
display: none; | display: none; | ||
} | } | ||
− | + | #navigation { | |
display: block; | display: block; | ||
+ | font-size: 1.35rem; | ||
+ | padding-top: 7px; | ||
+ | border: none; | ||
+ | width: 150px; | ||
} | } | ||
− | + | #logo-navbar { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | display: block | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 249: | Line 296: | ||
overflow: hidden; | overflow: hidden; | ||
font-family: 'Lato'; | font-family: 'Lato'; | ||
− | |||
} | } | ||
.main-menu { | .main-menu { | ||
+ | display: inline-block; | ||
float: left; | float: left; | ||
overflow: hidden; | overflow: hidden; | ||
Line 259: | Line 306: | ||
border: none; | border: none; | ||
outline: none; | outline: none; | ||
− | + | color: white; | |
padding: 2px 5px 12px 0px; | padding: 2px 5px 12px 0px; | ||
background-color: inherit; | background-color: inherit; | ||
Line 269: | Line 316: | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
− | color: | + | color: white; |
font: inherit; | font: inherit; | ||
font-size: inherit; | font-size: inherit; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
padding: 11px 5px; | padding: 11px 5px; | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | #navbar { | ||
+ | height: 43px; | ||
+ | } | ||
+ | |||
+ | #navbar img { | ||
+ | padding: 7px; | ||
+ | margin-left: 70px; | ||
+ | top: -3px; | ||
+ | border-radius: 100px; | ||
+ | position: absolute; | ||
+ | background-color: #1E1E1E; | ||
+ | } | ||
+ | |||
+ | .main-menu:hover { | ||
+ | color: #9C3132; | ||
} | } | ||
} | } | ||
+ | @media screen and (min-width: 1020px) { | ||
+ | #people:hover ~ #people-sub, | ||
+ | #project:hover ~ #project-sub, | ||
+ | #parts:hover ~ #parts-sub, | ||
+ | #modelling:hover ~ #modelling-sub, | ||
+ | #doc:hover ~ #doc-sub, | ||
+ | #hp:hover ~ #hp-sub, | ||
+ | #judging:hover ~ #judging-sub { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #menu { | ||
+ | margin-right: 50px; | ||
+ | } | ||
+ | |||
+ | .navToggleLabel { | ||
+ | display: hide; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | top: 43px; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .sub-menu:hover { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #navigation { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .main-menu button { | ||
+ | display: inline-block; | ||
+ | width: auto; | ||
+ | font-size: 1rem; | ||
+ | padding: 11px 5px; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 8; | ||
+ | font-size: 0.9rem; | ||
+ | } | ||
+ | |||
+ | .sub-menu a { | ||
+ | float: none; | ||
+ | color: black; | ||
+ | padding: 8px 10px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .sub-menu a:hover { | ||
+ | background-color: #DBDBDB; | ||
+ | } | ||
+ | |||
+ | .submenu-sub { | ||
+ | font-size: 0.8rem; | ||
+ | padding: 4px 0px 2px 20px !important; | ||
+ | text-transform: none; | ||
+ | width: 200px !important; | ||
+ | } | ||
+ | |||
+ | .submenu-header { | ||
+ | border-top: 1px solid grey; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | .submenu-sub-last { | ||
+ | border-bottom: 1px solid grey; | ||
+ | } | ||
+ | } | ||
/* END NAVBAR */ | /* END NAVBAR */ | ||
+ | |||
+ | |||
+ | #footer { | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | width: 100%; | ||
+ | height: 20px; | ||
+ | background-color: #333; | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | |||
+ | #footer p { | ||
+ | color: #dbdbdb; | ||
+ | text-align: right !important; | ||
+ | font-size: 10px; | ||
+ | margin-right: 10%; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | <script src="https://code.jquery.com/jquery-3.2.1.js"></script> | ||
+ | <script> | ||
+ | var isEven = function(number) { | ||
+ | return (number % 2 === 0) ? true : false; | ||
+ | }; | ||
+ | |||
+ | var clickProject=0; | ||
+ | var clickModelling=0; | ||
+ | var clickParts=0; | ||
+ | var clickHP=0; | ||
+ | var clickPeople=0; | ||
+ | var clickDoc=0; | ||
+ | var clickJudging=0; | ||
+ | |||
+ | function setZero() { | ||
+ | clickProject=0; | ||
+ | clickModelling=0; | ||
+ | clickParts=0; | ||
+ | clickHP=0; | ||
+ | clickPeople=0; | ||
+ | clickDoc=0; | ||
+ | clickJudging=0; | ||
+ | } | ||
+ | |||
+ | $('#project').click(function() { | ||
+ | clickProject++; | ||
+ | if (isEven(clickProject) === true) { | ||
+ | $('#project-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickProject++; | ||
+ | $('#project-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#modelling').click(function() { | ||
+ | clickModelling++; | ||
+ | if (isEven(clickModelling) === true) { | ||
+ | $('#modelling-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickModelling++; | ||
+ | $('#modelling-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#parts').click(function() { | ||
+ | clickParts++; | ||
+ | if (isEven(clickParts) === true) { | ||
+ | $('#parts-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickParts++; | ||
+ | $('#parts-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#hp').click(function() { | ||
+ | clickHP++; | ||
+ | if (isEven(clickHP) === true) { | ||
+ | $('#hp-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickHP++; | ||
+ | $('#hp-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#people').click(function() { | ||
+ | clickPeople++; | ||
+ | if (isEven(clickPeople) === true) { | ||
+ | $('#people-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickPeople++; | ||
+ | $('#people-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#doc').click(function() { | ||
+ | clickDoc++; | ||
+ | if (isEven(clickDoc) === true) { | ||
+ | $('#doc-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickDoc++; | ||
+ | $('#doc-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | |||
+ | $('#judging').click(function() { | ||
+ | clickJudging++; | ||
+ | if (isEven(clickJudging) === true) { | ||
+ | $('#judging-sub').css({"display": "none"}); | ||
+ | } else { | ||
+ | $('.sub-menu').css({"display": "none"}); | ||
+ | setZero(); | ||
+ | clickJudging++; | ||
+ | $('#judging-sub').css({"display": "block"}); | ||
+ | }}); | ||
+ | </script> | ||
</html> | </html> |
Latest revision as of 19:08, 17 October 2018