Difference between revisions of "Template:NYU Shanghai"

 
(193 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: justify;
+
     text-align: left;
−
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
     font-size: 15px;
−
     font-size: 14px;
+
     width: 982px;
−
     width: 100%;
+
 
   }
 
   }
 
   h1 {
 
   h1 {
−
     font-family: "neon";
+
     font-family: "bebas";
−
     font-size: 36px;
+
     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: 100%;
+
     width: 982px;
 +
    height: 110px;
 
     background-color: black;
 
     background-color: black;
 
     z-index: +100;
 
     z-index: +100;
 
     position: fixed;
 
     position: fixed;
−
     margin: -3px auto;
+
     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 3%;
+
     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: 100%;
+
     width: 982px;
 
     background: black;
 
     background: black;
 
     left: 0px;
 
     left: 0px;
Line 77: Line 121:
 
   }
 
   }
 
   #nav ul ul li {
 
   #nav ul ul li {
−
     margin: 0px 2%;
+
     margin: 4px 40px;
 
     padding: 0px;
 
     padding: 0px;
 
   }
 
   }
Line 87: Line 131:
 
   }
 
   }
 
   #nav ul li span {
 
   #nav ul li span {
−
    display: none;
+
     height: 50px;
−
     height: 30px;
+
 
     width: 100%;
 
     width: 100%;
 
     position: absolute;
 
     position: absolute;
Line 97: Line 140:
  
 
   #project {
 
   #project {
 +
    width: 100px;
 
     border-style: solid;
 
     border-style: solid;
−
     border-color: goldenrod;
+
     border-color: black;
−
     border-width: 0px;
+
     border-width: 0px 1px;
−
    border-bottom-color: black;
+
 
   }
 
   }
 
   #project ul {
 
   #project ul {
Line 112: Line 155:
  
 
   #team {
 
   #team {
 +
    width: 76px;
 
     border-style: solid;
 
     border-style: solid;
−
     border-color: #80f;
+
     border-color: black;
−
     border-width: 0px;
+
     border-width: 0px 1px;
−
    border-bottom-color: black;
+
 
   }
 
   }
 
   #team ul {
 
   #team ul {
Line 127: Line 170:
  
 
   #outreach {
 
   #outreach {
 +
    width: 114px;
 
     border-style: solid;
 
     border-style: solid;
−
     border-color: #3cb;
+
     border-color: black;
−
     border-width: 0px;
+
     border-width: 0px 1px;
−
    border-bottom-color: black;
+
 
   }
 
   }
 
   #outreach ul {
 
   #outreach ul {
Line 142: Line 185:
  
 
   #notebook {
 
   #notebook {
 +
    width: 114px;
 
     border-style: solid;
 
     border-style: solid;
−
     border-color: #d66;
+
     border-color: black;
−
     border-width: 0px;
+
     border-width: 0px 1px;
−
    border-bottom-color: black;
+
 
   }
 
   }
 
   #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 === "active") {
+
   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 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 === "active") {
+
   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 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 === "active") {
+
   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 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 === "active") {
+
   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 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.borderWidth = "0px 1px";
+
     document.getElementById("project").style.borderColor = "black goldenrod";
 
   };
 
   };
 
   }
 
   }
Line 225: Line 296:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("team").style.borderWidth = "0px 1px";
+
     document.getElementById("team").style.borderColor = "black #80f";
 
   };
 
   };
 
   }
 
   }
Line 232: Line 303:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("outreach").style.borderWidth = "0px 1px";
+
     document.getElementById("outreach").style.borderColor = "black #3cb";
 
   };
 
   };
 
   }
 
   }
Line 239: Line 310:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("notebook").style.borderWidth = "0px 1px";
+
     document.getElementById("notebook").style.borderColor = "black #d66";
 
   };
 
   };
 
   }
 
   }
Line 246: Line 317:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("project").style.borderWidth = "0px";
+
     document.getElementById("project").style.borderColor = "black";
 
   };
 
   };
 
   }
 
   }
Line 253: Line 324:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("team").style.borderWidth = "0px";
+
     document.getElementById("team").style.borderColor = "black";
 
   };
 
   };
 
   }
 
   }
Line 260: Line 331:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("outreach").style.borderWidth = "0px";
+
     document.getElementById("outreach").style.borderColor = "black";
 
   };
 
   };
 
   }
 
   }
Line 267: Line 338:
 
     return;
 
     return;
 
   } else{
 
   } else{
−
     document.getElementById("notebook").style.borderWidth = "0px";
+
     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">
−
       <p id="project-title" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()">Project</p>
+
       <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="#">Design</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Design">Design</a></li>
−
         <li><a href="#">Parts</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Parts">Parts</a></li>
−
         <li><a href="#">Judging</a></li>
+
         <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>
−
       <p id="team-title" onmouseenter="selectTeam()" onmouseleave="deselectTeam()" onclick="reset();revealTeam()">Team</p>
+
    <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="#">Members</a></li>
+
       <ul id="team-submenu" class="noselect">
−
         <li><a href="#">Partners</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Members">Members</a></li>
−
         <li><a href="#">Attributions</a></li>
+
         <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>
−
       <p id="outreach-title" onmouseenter="selectOutreach()" onmouseleave="deselectOutreach()" onclick="reset();revealOutreach()">Outreach</p>
+
    <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="#">Collaborations</a></li>
+
       <ul id="outreach-submenu" class="noselect">
−
         <li><a href="#">Practices</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Collaborations">Collaborations</a></li>
−
         <li><a href="#">Virtual Reality</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Practices">Practices</a></li>
−
        <li><a href="#">Social Media</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>
−
       <p id="notebook-title" onmouseenter="selectNotebook()" onmouseleave="deselectNotebook()" onclick="reset();revealNotebook()">Notebook</p>
+
    <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="#">Daily Notes</a></li>
+
       <ul id="notebook-submenu" class="noselect">
−
         <li><a href="#">Protocols</a></li>
+
         <li><a href="/Team:NYU_Shanghai/DailyNotes">Daily Notes</a></li>
−
         <li><a href="#">Bibliography</a></li>
+
         <li><a href="/Team:NYU_Shanghai/Protocols">Protocols</a></li>
−
        <li><a href="#">Safety</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: 100%; height: 40px;"></div>
+
<div style="width: 982px; height: 108px;"></div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:22, 18 September 2015