Difference between revisions of "Template:NYU Shanghai"
(192 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | @font-face { | ||
+ | font-family: "HelveticaNT"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/1/12/NYU_Shanghai_HelveticaNT.otf") format("opentype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "bebasbook"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/1/17/NYU_Shanghai_bebasbook.otf") format("opentype"); | ||
+ | } | ||
@font-face { | @font-face { | ||
font-family: "neon"; | font-family: "neon"; | ||
Line 13: | Line 21: | ||
src: url("https://static.igem.org/mediawiki/2015/a/a1/NYU_Shanghai_Bebas.ttf") format("truetype"); | src: url("https://static.igem.org/mediawiki/2015/a/a1/NYU_Shanghai_Bebas.ttf") format("truetype"); | ||
} | } | ||
− | + | @font-face { | |
+ | font-family: "bebasneue"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/5/59/NYU_Shanghai_Bebasneue.otf") format("opentype"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "helveticaNL"; | ||
+ | src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype"); | ||
+ | } | ||
body { | body { | ||
background-color: black; | background-color: black; | ||
Line 23: | Line 38: | ||
margin: -6px auto; | margin: -6px auto; | ||
padding: 0; | padding: 0; | ||
− | text-align: | + | text-align: left; |
− | + | font-size: 15px; | |
− | font-size: | + | |
width: 982px; | width: 982px; | ||
} | } | ||
h1 { | h1 { | ||
− | font-family: " | + | font-family: "bebas"; |
− | font-size: | + | font-size: 23px; |
text-transform: uppercase; | text-transform: uppercase; | ||
border: 0; | border: 0; | ||
+ | overflow: visible; | ||
+ | letter-spacing: 0.5px; | ||
+ | } | ||
+ | p, h3, h5 { | ||
+ | font-family: "helveticaNL", Helvetica, Arial, sans-serif; | ||
+ | overflow: visible; | ||
} | } | ||
.firstHeading { | .firstHeading { | ||
display: none; | display: none; | ||
} | } | ||
+ | .noselect { | ||
+ | -webkit-touch-callout: none; | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | .noselect:hover { | ||
+ | cursor: default; | ||
+ | } | ||
+ | .scrollable { | ||
+ | } | ||
#nav { | #nav { | ||
− | width: | + | width: 982px; |
+ | height: 110px; | ||
background-color: black; | background-color: black; | ||
z-index: +100; | z-index: +100; | ||
position: fixed; | position: fixed; | ||
− | margin: - | + | margin: -6px 0; |
font-family: "bebas"; | font-family: "bebas"; | ||
font-size: 20px; | font-size: 20px; | ||
text-align: center; | text-align: center; | ||
+ | overflow-x: hidden; | ||
+ | overflow-y: hidden; | ||
+ | letter-spacing: 0.5px; | ||
+ | |||
} | } | ||
#nav ul { | #nav ul { | ||
Line 55: | Line 93: | ||
display: inline-block; | display: inline-block; | ||
text-decoration: none; | text-decoration: none; | ||
− | margin: 0px | + | margin: 0px 30px; |
padding: 0px 5px; | padding: 0px 5px; | ||
z-index: 2; | z-index: 2; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | #nav h1 { | ||
+ | margin: 0px; | ||
+ | margin-top: 0.25em; | ||
+ | margin-bottom: 0.25em; | ||
} | } | ||
#nav p { | #nav p { | ||
Line 69: | Line 113: | ||
position: absolute; | position: absolute; | ||
margin: 0 auto; | margin: 0 auto; | ||
− | width: | + | width: 982px; |
background: black; | background: black; | ||
left: 0px; | left: 0px; | ||
Line 77: | Line 121: | ||
} | } | ||
#nav ul ul li { | #nav ul ul li { | ||
− | margin: | + | margin: 4px 40px; |
padding: 0px; | padding: 0px; | ||
} | } | ||
Line 87: | Line 131: | ||
} | } | ||
#nav ul li span { | #nav ul li span { | ||
− | + | height: 50px; | |
− | height: | + | |
width: 100%; | width: 100%; | ||
position: absolute; | position: absolute; | ||
Line 97: | Line 140: | ||
#project { | #project { | ||
+ | width: 100px; | ||
border-style: solid; | border-style: solid; | ||
− | border-color: | + | border-color: black; |
− | border-width: 0px | + | border-width: 0px 1px; |
− | + | ||
} | } | ||
#project ul { | #project ul { | ||
Line 112: | Line 155: | ||
#team { | #team { | ||
+ | width: 76px; | ||
border-style: solid; | border-style: solid; | ||
− | border-color: | + | border-color: black; |
− | border-width: 0px | + | border-width: 0px 1px; |
− | + | ||
} | } | ||
#team ul { | #team ul { | ||
Line 127: | Line 170: | ||
#outreach { | #outreach { | ||
+ | width: 114px; | ||
border-style: solid; | border-style: solid; | ||
− | border-color: | + | border-color: black; |
− | border-width: 0px | + | border-width: 0px 1px; |
− | + | ||
} | } | ||
#outreach ul { | #outreach ul { | ||
Line 142: | Line 185: | ||
#notebook { | #notebook { | ||
+ | width: 114px; | ||
border-style: solid; | border-style: solid; | ||
− | border-color: | + | border-color: black; |
− | border-width: 0px | + | border-width: 0px 1px; |
− | + | ||
} | } | ||
#notebook ul { | #notebook ul { | ||
Line 159: | Line 202: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | document.onscroll=function(){ | ||
+ | for (var i = document.getElementsByClassName("scrollable").length - 1; i >= 0; i--) { | ||
+ | document.getElementsByClassName("scrollable")[i].style.marginLeft = "-" + String(document.body.scrollLeft) + "px"; | ||
+ | }; | ||
+ | }; | ||
function reset() { | function reset() { | ||
− | document.getElementById("project").style.borderWidth = "0px"; | + | document.getElementById("project").style.borderWidth = "0px 1px"; |
− | document.getElementById("team").style.borderWidth = "0px"; | + | document.getElementById("team").style.borderWidth = "0px 1px"; |
− | document.getElementById("outreach").style.borderWidth = "0px"; | + | document.getElementById("outreach").style.borderWidth = "0px 1px"; |
− | document.getElementById("notebook").style.borderWidth = "0px"; | + | document.getElementById("notebook").style.borderWidth = "0px 1px"; |
+ | document.getElementById("project").style.borderColor = "black"; | ||
+ | document.getElementById("team").style.borderColor = "black"; | ||
+ | document.getElementById("outreach").style.borderColor = "black"; | ||
+ | document.getElementById("notebook").style.borderColor = "black"; | ||
document.getElementById("project-submenu").style.visibility = "hidden"; | document.getElementById("project-submenu").style.visibility = "hidden"; | ||
document.getElementById("team-submenu").style.visibility = "hidden"; | document.getElementById("team-submenu").style.visibility = "hidden"; | ||
Line 172: | Line 224: | ||
document.getElementById("outreach-span").style.display = "none"; | document.getElementById("outreach-span").style.display = "none"; | ||
document.getElementById("notebook-span").style.display = "none"; | document.getElementById("notebook-span").style.display = "none"; | ||
+ | if (document.getElementsByClassName("active").length > 0) { | ||
+ | document.getElementsByClassName("active")[0].className = "resetting"; | ||
+ | }; | ||
} | } | ||
function revealProject() { | function revealProject() { | ||
− | if (document.getElementById("project").className === " | + | if (document.getElementById("project").className === "resetting") { |
document.getElementById("project").className = "inactive"; | document.getElementById("project").className = "inactive"; | ||
} else{ | } else{ | ||
document.getElementById("project-submenu").style.visibility = "visible"; | document.getElementById("project-submenu").style.visibility = "visible"; | ||
− | document.getElementById("project").style.borderWidth = "0px 1px | + | document.getElementById("project").style.borderWidth = "0px 1px 2px"; |
+ | document.getElementById("project").style.borderColor = "black goldenrod"; | ||
document.getElementById("project-span").style.display = "block"; | document.getElementById("project-span").style.display = "block"; | ||
document.getElementById("project").className = "active"; | document.getElementById("project").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
}; | }; | ||
} | } | ||
function revealTeam() { | function revealTeam() { | ||
− | if (document.getElementById("team").className === " | + | if (document.getElementById("team").className === "resetting") { |
document.getElementById("team").className = "inactive"; | document.getElementById("team").className = "inactive"; | ||
} else{ | } else{ | ||
document.getElementById("team-submenu").style.visibility = "visible"; | document.getElementById("team-submenu").style.visibility = "visible"; | ||
− | document.getElementById("team").style.borderWidth = "0px 1px | + | document.getElementById("team").style.borderWidth = "0px 1px 2px"; |
+ | document.getElementById("team").style.borderColor = "black #80f"; | ||
document.getElementById("team-span").style.display = "block"; | document.getElementById("team-span").style.display = "block"; | ||
document.getElementById("team").className = "active"; | document.getElementById("team").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
}; | }; | ||
} | } | ||
function revealOutreach() { | function revealOutreach() { | ||
− | if (document.getElementById("outreach").className === " | + | if (document.getElementById("outreach").className === "resetting") { |
document.getElementById("outreach").className = "inactive"; | document.getElementById("outreach").className = "inactive"; | ||
} else{ | } else{ | ||
document.getElementById("outreach-submenu").style.visibility = "visible"; | document.getElementById("outreach-submenu").style.visibility = "visible"; | ||
− | document.getElementById("outreach").style.borderWidth = "0px 1px | + | document.getElementById("outreach").style.borderWidth = "0px 1px 2px"; |
+ | document.getElementById("outreach").style.borderColor = "black #3cb"; | ||
document.getElementById("outreach-span").style.display = "block"; | document.getElementById("outreach-span").style.display = "block"; | ||
document.getElementById("outreach").className = "active"; | document.getElementById("outreach").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
}; | }; | ||
} | } | ||
function revealNotebook() { | function revealNotebook() { | ||
− | if (document.getElementById("notebook").className === " | + | if (document.getElementById("notebook").className === "resetting") { |
document.getElementById("notebook").className = "inactive"; | document.getElementById("notebook").className = "inactive"; | ||
} else{ | } else{ | ||
document.getElementById("notebook-submenu").style.visibility = "visible"; | document.getElementById("notebook-submenu").style.visibility = "visible"; | ||
− | document.getElementById("notebook").style.borderWidth = "0px 1px | + | document.getElementById("notebook").style.borderWidth = "0px 1px 2px"; |
+ | document.getElementById("notebook").style.borderColor = "black #d66"; | ||
document.getElementById("notebook-span").style.display = "block"; | document.getElementById("notebook-span").style.display = "block"; | ||
document.getElementById("notebook").className = "active"; | document.getElementById("notebook").className = "active"; | ||
+ | if (document.getElementsByClassName("resetting").length > 0) { | ||
+ | document.getElementsByClassName("resetting")[0].className = "inactive"; | ||
+ | }; | ||
}; | }; | ||
} | } | ||
Line 218: | Line 289: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("project").style. | + | document.getElementById("project").style.borderColor = "black goldenrod"; |
}; | }; | ||
} | } | ||
Line 225: | Line 296: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("team").style. | + | document.getElementById("team").style.borderColor = "black #80f"; |
}; | }; | ||
} | } | ||
Line 232: | Line 303: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("outreach").style. | + | document.getElementById("outreach").style.borderColor = "black #3cb"; |
}; | }; | ||
} | } | ||
Line 239: | Line 310: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("notebook").style. | + | document.getElementById("notebook").style.borderColor = "black #d66"; |
}; | }; | ||
} | } | ||
Line 246: | Line 317: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("project").style. | + | document.getElementById("project").style.borderColor = "black"; |
}; | }; | ||
} | } | ||
Line 253: | Line 324: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("team").style. | + | document.getElementById("team").style.borderColor = "black"; |
}; | }; | ||
} | } | ||
Line 260: | Line 331: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("outreach").style. | + | document.getElementById("outreach").style.borderColor = "black"; |
}; | }; | ||
} | } | ||
Line 267: | Line 338: | ||
return; | return; | ||
} else{ | } else{ | ||
− | document.getElementById("notebook").style. | + | document.getElementById("notebook").style.borderColor = "black"; |
}; | }; | ||
} | } | ||
</script> | </script> | ||
− | <div id="nav"> | + | <div id="nav" class="scrollable"> |
− | <ul> | + | <ul class="noselect"> |
+ | <li> | ||
+ | <a href="/Team:NYU_Shanghai"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/5/57/NYU_Shanghai_flowerlogo.png" width="30" height="30" style="padding-top: 17px;"> | ||
+ | </a> | ||
+ | </li> | ||
<li id="project"> | <li id="project"> | ||
− | < | + | <h1 id="project-title" class="noselect" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()"><font color="white">Project</font></h1> |
− | <ul id="project-submenu"> | + | <ul class="noselect" id="project-submenu"> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Design">Design</a></li> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Parts">Parts</a></li> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Code">Code</a></li> |
+ | <li><a href="https://igem.org/2015_Judging_Form?id=1756">Judging</a></li> | ||
</ul> | </ul> | ||
<span id="project-span"></span> | <span id="project-span"></span> | ||
− | </li><li id="team"> | + | </li> |
− | < | + | <li id="team"> |
− | <ul id="team-submenu"> | + | <h1 id="team-title" class="noselect" onmouseenter="selectTeam()" onmouseleave="deselectTeam()" onclick="reset();revealTeam()"><font color="white">Team</font></h1> |
− | <li><a href=" | + | <ul id="team-submenu" class="noselect"> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Members">Members</a></li> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Partners">Partners</a></li> |
+ | <li><a href="/Team:NYU_Shanghai/Attributions">Attributions</a></li> | ||
</ul> | </ul> | ||
<span id="team-span"></span> | <span id="team-span"></span> | ||
− | </li><li id="outreach"> | + | </li> |
− | < | + | <li id="outreach"> |
− | <ul id="outreach-submenu"> | + | <h1 id="outreach-title" class="noselect" onmouseenter="selectOutreach()" onmouseleave="deselectOutreach()" onclick="reset();revealOutreach()"><font color="white">Outreach</font></h1> |
− | <li><a href=" | + | <ul id="outreach-submenu" class="noselect"> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Collaborations">Collaborations</a></li> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Practices">Practices</a></li> |
− | + | <li><a href="/Team:NYU_Shanghai/VirtualReality">Virtual Reality</a></li> | |
</ul> | </ul> | ||
<span id="outreach-span"></span> | <span id="outreach-span"></span> | ||
− | </li><li id="notebook"> | + | </li> |
− | < | + | <li id="notebook"> |
− | <ul id="notebook-submenu"> | + | <h1 id="notebook-title" class="noselect" onmouseenter="selectNotebook()" onmouseleave="deselectNotebook()" onclick="reset();revealNotebook()"><font color="white">Notebook</font></h1> |
− | <li><a href=" | + | <ul id="notebook-submenu" class="noselect"> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/DailyNotes">Daily Notes</a></li> |
− | <li><a href=" | + | <li><a href="/Team:NYU_Shanghai/Protocols">Protocols</a></li> |
− | + | <li><a href="/Team:NYU_Shanghai/Bibliography">Bibliography</a></li> | |
</ul> | </ul> | ||
<span id="notebook-span"></span> | <span id="notebook-span"></span> | ||
Line 311: | Line 389: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div style="width: | + | <div style="width: 982px; height: 108px;"></div> |
</body> | </body> | ||
</html> | </html> |
Latest revision as of 01:22, 18 September 2015