Difference between revisions of "Template:NYU Shanghai"

 
(424 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-family: "neon";
 +
    src: url("https://static.igem.org/mediawiki/2015/7/77/NYU_Shanghai_NeonLights.ttf") format("truetype");
 +
  }
 +
  @font-face {
 +
    font-family: "kabel";
 +
    src: url("https://static.igem.org/mediawiki/2015/4/4a/NYU_Shanghai_Kabel.ttf") format("truetype");
 +
  }
 +
  @font-face {
 +
    font-family: "bebas";
 +
    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 {
 +
    background-color: black;
 +
  }
 
   #content {
 
   #content {
−
     background-color: white;
+
     background-color: black;
 +
    color: white;
 
     border: 0;
 
     border: 0;
 
     margin: -6px auto;
 
     margin: -6px auto;
 
     padding: 0;
 
     padding: 0;
−
     text-align: center;
+
     text-align: left;
−
     font-family: "Helvetica Neue", Helvetica, sans-serif;
+
     font-size: 15px;
−
     width: 100%;
+
     width: 982px;
 
   }
 
   }
−
   h2 {
+
   h1 {
 +
    font-family: "bebas";
 +
    font-size: 23px;
 +
    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: 0 auto;
+
     margin: -6px 0;
−
     font-family: Kabel, Arial, Helvetica, sans-serif;
+
     font-family: "bebas";
−
     font-size: 24px;
+
     font-size: 20px;
−
     border-bottom: 1px solid black;
+
     text-align: center;
 +
    overflow-x: hidden;
 +
    overflow-y: hidden;
 +
    letter-spacing: 0.5px;
 +
 
 
   }
 
   }
 
   #nav ul {
 
   #nav ul {
 
     margin: 0 auto;
 
     margin: 0 auto;
 +
    width: 100%;
 
   }
 
   }
 
   #nav li {
 
   #nav li {
 
     display: inline-block;
 
     display: inline-block;
 
     text-decoration: none;
 
     text-decoration: none;
−
 
+
    margin: 0px 30px;
 +
    padding: 0px 5px;
 +
    z-index: 2;
 +
    vertical-align: top;
 
   }
 
   }
−
   #nav li span {
+
   #nav h1 {
−
     position: absolute;
+
     margin: 0px;
−
     width: 100%;
+
     margin-top: 0.25em;
−
    height: 36px;
+
     margin-bottom: 0.25em;
−
    z-index: -110;
+
−
     margin-left: -50%;
+
 
   }
 
   }
−
   #nav a {
+
   #nav p {
 +
    margin: 0 auto;
 
     display: block;
 
     display: block;
 +
    color: white;
 +
    padding: 10px 10px;
 +
  }
 +
  #nav ul ul {
 +
    visibility: hidden;
 +
    position: absolute;
 +
    margin: 0 auto;
 +
    width: 982px;
 +
    background: black;
 +
    left: 0px;
 +
    padding: 0px;
 +
    font-size: 18px;
 +
    z-index: -1;
 +
  }
 +
  #nav ul ul li {
 +
    margin: 4px 40px;
 +
    padding: 0px;
 +
  }
 +
  #nav ul ul a {
 +
    margin: 0 auto;
 
     text-decoration: none;
 
     text-decoration: none;
−
     padding: 8px 11px;
+
     color: white;
−
     color: #57068c;
+
     padding: 3px 5px;
 
   }
 
   }
−
   #nav a:hover {
+
   #nav ul li span {
−
     color: #6bb1b3;
+
     height: 50px;
 +
    width: 100%;
 +
    position: absolute;
 +
    left: 0;
 +
    z-index: -2;
 +
    background-color: black;
 
   }
 
   }
  
 +
  #project {
 +
    width: 100px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 0px 1px;
 +
  }
 +
  #project ul {
 +
    border-style: solid;
 +
    border-color: goldenrod;
 +
    border-width: 1px 0px;
 +
  }
 +
  #project a:hover {
 +
    color: goldenrod;
 +
  }
 +
 +
  #team {
 +
    width: 76px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 0px 1px;
 +
  }
 +
  #team ul {
 +
    border-style: solid;
 +
    border-color: #80f;
 +
    border-width: 1px 0px;
 +
  }
 +
  #team a:hover {
 +
    color: #80f;
 +
  }
 +
 +
  #outreach {
 +
    width: 114px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 0px 1px;
 +
  }
 +
  #outreach ul {
 +
    border-style: solid;
 +
    border-color: #3cb;
 +
    border-width: 1px 0px;
 +
  }
 +
  #outreach a:hover {
 +
    color: #3cb;
 +
  }
 +
 +
  #notebook {
 +
    width: 114px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 0px 1px;
 +
  }
 +
  #notebook ul {
 +
    border-style: solid;
 +
    border-color: #d66;
 +
    border-width: 1px 0px;
 +
  }
 +
  #notebook a:hover {
 +
    color: #d66;
 +
  }
  
 
</style>
 
</style>
  
−
<div id="nav">
+
<script type="text/javascript">
−
   <ul>
+
  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() {
 +
    document.getElementById("project").style.borderWidth = "0px 1px";
 +
    document.getElementById("team").style.borderWidth = "0px 1px";
 +
    document.getElementById("outreach").style.borderWidth = "0px 1px";
 +
    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("team-submenu").style.visibility = "hidden";
 +
    document.getElementById("outreach-submenu").style.visibility = "hidden";
 +
    document.getElementById("notebook-submenu").style.visibility = "hidden";
 +
    document.getElementById("project-span").style.display = "none";
 +
    document.getElementById("team-span").style.display = "none";
 +
    document.getElementById("outreach-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() {
 +
  if (document.getElementById("project").className === "resetting") {
 +
    document.getElementById("project").className = "inactive";
 +
  } else{
 +
    document.getElementById("project-submenu").style.visibility = "visible";
 +
    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").className = "active";
 +
    if (document.getElementsByClassName("resetting").length > 0) {
 +
      document.getElementsByClassName("resetting")[0].className = "inactive";
 +
    };
 +
  };
 +
  }
 +
  function revealTeam() {
 +
  if (document.getElementById("team").className === "resetting") {
 +
    document.getElementById("team").className = "inactive";
 +
  } else{
 +
    document.getElementById("team-submenu").style.visibility = "visible";
 +
    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").className = "active";
 +
    if (document.getElementsByClassName("resetting").length > 0) {
 +
      document.getElementsByClassName("resetting")[0].className = "inactive";
 +
    };
 +
  };
 +
 
 +
  }
 +
  function revealOutreach() {
 +
  if (document.getElementById("outreach").className === "resetting") {
 +
    document.getElementById("outreach").className = "inactive";
 +
  } else{
 +
    document.getElementById("outreach-submenu").style.visibility = "visible";
 +
    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").className = "active";
 +
    if (document.getElementsByClassName("resetting").length > 0) {
 +
      document.getElementsByClassName("resetting")[0].className = "inactive";
 +
    };
 +
  };
 +
  }
 +
  function revealNotebook() {
 +
  if (document.getElementById("notebook").className === "resetting") {
 +
    document.getElementById("notebook").className = "inactive";
 +
  } else{
 +
  document.getElementById("notebook-submenu").style.visibility = "visible";
 +
    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").className = "active";
 +
    if (document.getElementsByClassName("resetting").length > 0) {
 +
      document.getElementsByClassName("resetting")[0].className = "inactive";
 +
    };
 +
  };
 +
  }
 +
  function selectProject() {
 +
  if (document.getElementById("project").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("project").style.borderColor = "black goldenrod";
 +
  };
 +
  }
 +
  function selectTeam() {
 +
  if (document.getElementById("team").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("team").style.borderColor = "black #80f";
 +
  };
 +
  }
 +
  function selectOutreach() {
 +
  if (document.getElementById("outreach").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("outreach").style.borderColor = "black #3cb";
 +
  };
 +
  }
 +
  function selectNotebook() {
 +
  if (document.getElementById("notebook").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("notebook").style.borderColor = "black #d66";
 +
  };
 +
  }
 +
  function deselectProject() {
 +
  if (document.getElementById("project").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("project").style.borderColor = "black";
 +
  };
 +
  }
 +
  function deselectTeam() {
 +
  if (document.getElementById("team").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("team").style.borderColor = "black";
 +
  };
 +
  }
 +
  function deselectOutreach() {
 +
  if (document.getElementById("outreach").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("outreach").style.borderColor = "black";
 +
  };
 +
  }
 +
  function deselectNotebook() {
 +
  if (document.getElementById("notebook").className === "active") {
 +
    return;
 +
  } else{
 +
    document.getElementById("notebook").style.borderColor = "black";
 +
  };
 +
  }
 +
</script>
 +
 
 +
<div id="nav" class="scrollable">
 +
   <ul class="noselect">
 
     <li>
 
     <li>
−
       <a href="https://2015.igem.org/Team:NYU_Shanghai">Project</a>
+
       <a href="/Team:NYU_Shanghai">
−
     </li><li>
+
      <img src="https://static.igem.org/mediawiki/2015/5/57/NYU_Shanghai_flowerlogo.png" width="30" height="30" style="padding-top: 17px;">
−
       <a href="https://2015.igem.org/Team:NYU_Shanghai/Team">Team</a>
+
      </a>
−
     </li><li>
+
     </li>
−
       <a href="https://2015.igem.org/Team:NYU_Shanghai/Outreach">Outreach</a>
+
    <li id="project">
−
     </li><li>
+
       <h1 id="project-title" class="noselect" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()"><font color="white">Project</font></h1>
−
       <a href="https://2015.igem.org/Team:NYU_Shanghai/Notebook">Notebook</a>
+
      <ul class="noselect" id="project-submenu">
 +
        <li><a href="/Team:NYU_Shanghai/Design">Design</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Parts">Parts</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>
 +
      <span id="project-span"></span>
 +
    </li>
 +
    <li id="team">
 +
      <h1 id="team-title" class="noselect" onmouseenter="selectTeam()" onmouseleave="deselectTeam()" onclick="reset();revealTeam()"><font color="white">Team</font></h1>
 +
      <ul id="team-submenu" class="noselect">
 +
        <li><a href="/Team:NYU_Shanghai/Members">Members</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Partners">Partners</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Attributions">Attributions</a></li>
 +
      </ul>
 +
      <span id="team-span"></span>
 +
     </li>
 +
    <li id="outreach">
 +
       <h1 id="outreach-title" class="noselect" onmouseenter="selectOutreach()" onmouseleave="deselectOutreach()" onclick="reset();revealOutreach()"><font color="white">Outreach</font></h1>
 +
      <ul id="outreach-submenu" class="noselect">
 +
        <li><a href="/Team:NYU_Shanghai/Collaborations">Collaborations</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Practices">Practices</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/VirtualReality">Virtual Reality</a></li>
 +
      </ul>
 +
      <span id="outreach-span"></span>
 +
     </li>
 +
    <li id="notebook">
 +
       <h1 id="notebook-title" class="noselect" onmouseenter="selectNotebook()" onmouseleave="deselectNotebook()" onclick="reset();revealNotebook()"><font color="white">Notebook</font></h1>
 +
      <ul id="notebook-submenu" class="noselect">
 +
        <li><a href="/Team:NYU_Shanghai/DailyNotes">Daily Notes</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Protocols">Protocols</a></li>
 +
        <li><a href="/Team:NYU_Shanghai/Bibliography">Bibliography</a></li>
 +
      </ul>
 +
      <span id="notebook-span"></span>
 
     </li>
 
     </li>
 
   </ul>
 
   </ul>
 
</div>
 
</div>
−
<div style="width: 100%; height: 36px;"></div>
+
<div style="width: 982px; height: 108px;"></div>
−
<div style="width: 50%; height: 100px; margin: 0 auto; background-color: gray;"></div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:22, 18 September 2015