Difference between revisions of "Template:NYU Shanghai"

 
(654 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
 
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
 +
<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 {
 +
    background-color: black;
 +
    color: white;
 +
    border: 0;
 +
    margin: -6px auto;
 +
    padding: 0;
 +
    text-align: left;
 +
    font-size: 15px;
 +
    width: 982px;
 +
  }
 +
  h1 {
 +
    font-family: "bebas";
 +
    font-size: 23px;
 +
    text-transform: uppercase;
 +
    border: 0;
 +
    overflow: visible;
 +
    letter-spacing: 0.5px;
 +
  }
 +
  p, h3, h5 {
 +
    font-family: "helveticaNL", Helvetica, Arial, sans-serif;
 +
    overflow: visible;
 +
  }
 +
  .firstHeading {
 +
    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 {
 +
  }
  
−
<!-- Start of CSS-->
+
  #nav {
−
<style type="text/css">
+
    width: 982px;
−
 
+
    height: 110px;
−
/* PAGE LAYOUT */
+
    background-color: black;
−
 
+
    z-index: +100;
−
/* Change Background color*/
+
    position: fixed;
−
body {
+
    margin: -6px 0;
−
background-color: #fff;
+
    font-family: "bebas";
−
}
+
    font-size: 20px;
−
 
+
    text-align: center;
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
    overflow-x: hidden;
−
#mainContainer {
+
    overflow-y: hidden;
−
width: 978px;
+
    letter-spacing: 0.5px;
−
overflow:hidden;
+
−
float:left;
+
−
margin-left:20px;
+
−
margin-bottom: 10px;
+
−
background-color: #fff;  
+
−
border-bottom: 14px solid #57068c;
+
−
border-right: 2px solid #57068c;
+
−
border-left: 2px solid #57068c;
+
−
border-top: 2px solid #57068c;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
−
 
+
−
/* Creates the container for the menu */
+
−
#menuContainer  {
+
−
//float:left;
+
−
padding: 20px 0px;
+
−
border-top: 14px solid #57068c;
+
−
background-color: #E8E8E9;
+
−
}
+
−
 
+
−
/* Creates the container for the content */
+
−
#contentContainer {
+
−
padding-top:20px;
+
−
padding-right:10px;
+
−
margin-bottom: 20px;
+
−
//width: 814px;
+
−
padding-left: 20px;
+
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #57068c;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
−
 
+
−
/*Set up height place holder for the banner*/
+
−
#bannerContainer {
+
−
height:200px;
+
−
margin:auto;
+
−
text-align:center;
+
−
color: #24B694;
+
−
}
+
−
 
+
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
−
 
+
−
/*Change the styling of text for everything inside main container*/
+
−
#mainContainer p {
+
−
font-size: 13px;
+
−
color: #000000;
+
−
}
+
−
+
−
/*This changes the color and font family */
+
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
−
color: #565656;
+
−
border-bottom: none;
+
−
font-weight: bold;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
−
 
+
−
/*Style of the links - links are different inside the menu */
+
−
#contentContainer a {
+
−
font-weight: bold;
+
−
color: #23b593;
+
−
}
+
−
 
+
−
  /* Styling links on hover- links are different inside the menu */
+
−
#contentContainer a:hover {
+
−
color: #59bf92;
+
−
}
+
−
 
+
−
/*Change the styling of tables */
+
−
        #contentContainer table {
+
−
    border: 1px solid #57068c;
+
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
−
 
+
−
/*Change the styling of table cells*/
+
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #57068c;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
/*Change the styling of table headers */
+
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #57068c;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
 
+
−
 
+
−
/*MENU STYLING */
+
−
 
+
−
/*Styling for the links in the menu */
+
−
#menuContainer a {
+
−
color: #57068c;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
−
                                display: float;
+
−
                                width: 60px;
+
−
}
+
−
 
+
−
/* Sets the style for lists inside menuContainer  */
+
−
#menuContainer ul {
+
−
list-style-type: none;
+
−
margin-left:0px;
+
−
}
+
−
 
+
−
/*Styles the list items to become menu buttons */
+
−
#menuContainer ul li {
+
−
text-align: center;
+
−
display: float;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
−
 
+
−
/*For the menu buttons, changes the color when hovering*/
+
−
#menuContainer li:hover {
+
−
color:  #FFF;
+
−
background-color: #57068c;
+
−
}
+
−
 
+
−
/*Submenus are not displayed as default*/
+
−
#menuContainer li ul {
+
−
display: none;
+
−
padding-top:15px;
+
−
margin-left: -19px;
+
−
}
+
−
 
+
−
/*Submenus are displayed when hovering the menu button */
+
−
#menuContainer li:hover ul {
+
−
/*display: inline-block; */
+
−
display: block;
+
−
position: absolute;
+
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
−
 
+
−
/*Style the submenu buttons*/
+
−
#menuContainer li ul li{
+
−
background-color: #f0f0f0;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #57068c;
+
−
width: 150px;
+
−
}
+
−
 
+
−
/*CLASSES */
+
−
 
+
−
/*Clear class for all the pages, adds spacing too*/
+
−
.clear{
+
−
clear:both;
+
−
height: 10px;
+
−
}
+
−
 
+
−
 
+
−
/* highlight box for special messages */
+
−
    .highlightBox {
+
−
        width:500px;
+
−
        margin:auto;
+
−
        background-color: #E8E8E9;
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
 +
  }
 +
  #nav ul {
 +
    margin: 0 auto;
 +
    width: 100%;
 +
  }
 +
  #nav li {
 +
    display: inline-block;
 +
    text-decoration: none;
 +
    margin: 0px 30px;
 +
    padding: 0px 5px;
 +
    z-index: 2;
 +
    vertical-align: top;
 +
  }
 +
  #nav h1 {
 +
    margin: 0px;
 +
    margin-top: 0.25em;
 +
    margin-bottom: 0.25em;
 +
  }
 +
  #nav p {
 +
    margin: 0 auto;
 +
    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;
 +
    color: white;
 +
    padding: 3px 5px;
 +
  }
 +
  #nav ul li span {
 +
    height: 50px;
 +
    width: 100%;
 +
    position: absolute;
 +
    left: 0;
 +
    z-index: -2;
 +
    background-color: black;
 +
  }
  
−
</style>
+
  #project {
−
<!-- End of CSS -->
+
    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;
 +
  }
  
−
<!-- Start of the template html elements. -->
+
  #outreach {
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
    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;
 +
  }
  
−
<div id="bannerContainer">
+
</style>
−
<img id="banner" src="https://static.igem.org/mediawiki/2015/f/f8/Team_NYU_Shanghai_banner.jpg">
+
−
</div>
+
  
−
<!-- Start of menu -->
+
<script type="text/javascript">
−
<div id="menuContainer">
+
  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";
 +
    };
 +
  };
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
  }
−
                              <ul>
+
  function revealOutreach() {
−
<a href="https://2015.igem.org/Team:NYU_Shanghai"><li>HOME</li></a>
+
  if (document.getElementById("outreach").className === "resetting") {
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Team"><li>TEAM</li></a>
+
    document.getElementById("outreach").className = "inactive";
−
<a href="#"><li>PROJECT
+
  } else{
−
      <ul>
+
    document.getElementById("outreach-submenu").style.visibility = "visible";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Description"><li>Description</li></a>
+
    document.getElementById("outreach").style.borderWidth = "0px 1px 2px";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
    document.getElementById("outreach").style.borderColor = "black #3cb";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Results"><li>Results</li></a> 
+
    document.getElementById("outreach-span").style.display = "block";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Design"><li>Design</li></a>
+
    document.getElementById("outreach").className = "active";
−
              </ul>
+
    if (document.getElementsByClassName("resetting").length > 0) {
−
      </li></a>
+
      document.getElementsByClassName("resetting")[0].className = "inactive";
−
<a href="#"><li>PARTS
+
    };
−
                  <ul>
+
  };
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Parts"><li>Team Parts</li></a>
+
  }
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Basic_Part"><li>Basic Parts</li></a> 
+
  function revealNotebook() {
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Composite_Part"><li>Composite Parts</li></a>
+
  if (document.getElementById("notebook").className === "resetting") {
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Part_Collection"><li>Part Collection</li></a> 
+
    document.getElementById("notebook").className = "inactive";
−
      </ul>
+
  } else{
−
      </li></a>
+
  document.getElementById("notebook-submenu").style.visibility = "visible";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Notebook"><li>NOTEBOOK</li></a>
+
    document.getElementById("notebook").style.borderWidth = "0px 1px 2px";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Attributions"><li>ATTRIBUTIONS</li></a>
+
    document.getElementById("notebook").style.borderColor = "black #d66";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Collaborations"><li>COLLABORATIONS</li></a>
+
    document.getElementById("notebook-span").style.display = "block";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Practices"><li>HUMAN PRACTICES</li></a>
+
    document.getElementById("notebook").className = "active";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Safety"><li>SAFETY</li></a>
+
    if (document.getElementsByClassName("resetting").length > 0) {
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Modeling"><li>MODELING</li></a>
+
      document.getElementsByClassName("resetting")[0].className = "inactive";
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Measurement"><li>MEASUREMENT</li></a>
+
    };
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Software"><li>SOFTWARE</li></a>
+
  };
−
<a href="https://2015.igem.org/Team:NYU_Shanghai/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
  }
−
      </ul>
+
  function selectProject() {
−
</div>
+
  if (document.getElementById("project").className === "active") {
−
<!-- End of menu  -->
+
    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>
  
−
<!-- Start of content -->
+
<div id="nav" class="scrollable">
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
  <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">
 +
      <h1 id="project-title" class="noselect" onmouseenter="selectProject()" onmouseleave="deselectProject()" onclick="reset();revealProject()"><font color="white">Project</font></h1>
 +
      <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>
 +
  </ul>
 +
</div>
 +
<div style="width: 982px; height: 108px;"></div>
 +
</body>
 
</html>
 
</html>

Latest revision as of 01:22, 18 September 2015