Difference between revisions of "Template:WPI Worcester"

 
(67 intermediate revisions by the same user not shown)
Line 6: Line 6:
  
 
<style>
 
<style>
−
/*@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Nunito:800');*/
+
@font-face {
 +
    font-family: "Fredoka One";
 +
    src: url(https://static.igem.org/mediawiki/2018/9/93/T--WPI_Worcester--FredokaOne-Regular.ttf) format("truetype");
 +
}
  
−
#home_logo, #sideMenu { display:none; }
+
@font-face {
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
    font-family: "Nunito Bold";
 +
    src: url(https://static.igem.org/mediawiki/2018/f/fb/T--WPI_Worcester--Nunito.ttf) format("truetype");
 +
}
  
 +
 +
/* Important for overriding default! */
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content {background: none; width: 100%; margin: 0; padding:0;}
 +
a[href ^="https://"] {padding: 0;}
 
/* Important for overriding default! */
 
/* Important for overriding default! */
 +
  
 
:focus {
 
:focus {
Line 26: Line 38:
 
body {
 
body {
 
   font-family: Arial, sans-serif;
 
   font-family: Arial, sans-serif;
−
   font-size: 100%;
+
   font-size: 1rem;
 
   background-color: #10394e;  
 
   background-color: #10394e;  
 
   background-image: url(https://static.igem.org/mediawiki/2018/6/6f/T--WPI_Worcester--background.svg);
 
   background-image: url(https://static.igem.org/mediawiki/2018/6/6f/T--WPI_Worcester--background.svg);
Line 64: Line 76:
  
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
−
   font-family: "Fredoka One", Helvetica, sans-serif;
+
   font-family: "Nunito Bold", Helvetica, sans-serif !important;
 +
}
 +
 
 +
h1 {
 +
  text-align: center;
 +
  color: #609737;
 +
}
 +
 
 +
h2 {
 +
  color: #2f5668;
 +
  margin-bottom: 1rem;
 +
}
 +
 
 +
h3 {
 +
  color: #1687C2;
 +
  font-style: italic;
 +
  margin-bottom: 0;
 
}
 
}
  
 
/* All CLASSES defined here */
 
/* All CLASSES defined here */
 +
 +
.centered {
 +
  text-align: center;
 +
}
  
 
.greentext {
 
.greentext {
 
   color: #72b045;
 
   color: #72b045;
 +
}
 +
 +
.bluetext {
 +
  color: #86c6e7;
 +
}
 +
 +
.midbluetext {
 +
  color: #1687C2;
 
}
 
}
  
Line 95: Line 135:
  
 
.nav_submenu {
 
.nav_submenu {
 +
  list-style-position: inside;
 
   list-style-type: none;
 
   list-style-type: none;
 +
  list-style: none;
 
   display: none;
 
   display: none;
 
   background-color: #1687C2;
 
   background-color: #1687C2;
 
   text-align: left;
 
   text-align: left;
−
   margin: 0;
+
   font-family: "Nunito Bold", sans-serif;
 
   padding: 0;
 
   padding: 0;
 +
  top: 0;
 +
  left: 0;
 
}
 
}
  
 +
.nav_submenu > li {
 +
  padding: 0;
 +
  margin: 0;
 +
}
  
 
.nav_submenu > li > a:hover {
 
.nav_submenu > li > a:hover {
Line 134: Line 182:
 
}
 
}
  
−
.submenu_toggle:focus {
+
.nav_submenu_toggle:focus {
 
   outline: 0.2em solid #72b045;
 
   outline: 0.2em solid #72b045;
 
   outline-offset: -0.2em;   
 
   outline-offset: -0.2em;   
Line 149: Line 197:
 
   left: 0;
 
   left: 0;
 
   position: fixed;
 
   position: fixed;
−
  margin: 14px;
 
 
   background-color: white;
 
   background-color: white;
−
   background-image: linear-gradient(135deg, white 30%, #86c6e7 30%);
+
   background-image: linear-gradient(135deg, white 35%, #86c6e7 35%);
 
   font-family: "Fredoka One", Helvetica, sans-serif;
 
   font-family: "Fredoka One", Helvetica, sans-serif;
 
   font-size: 2em;
 
   font-size: 2em;
 
   line-height: 1em;
 
   line-height: 1em;
 +
  z-index: 100;
 
}
 
}
  
Line 175: Line 223:
 
#main_content {
 
#main_content {
 
   background-color: #2f5668;
 
   background-color: #2f5668;
−
   background-color: rgba(183, 243, 241, 0.3);
+
   background-color: rgba(255, 255, 255, 0.7);
 
   width: 70%;
 
   width: 70%;
−
   margin: 4em;
+
   margin: 4em auto;
−
   height: 100em;
+
   padding: 1em;
 +
  overflow: auto;
 
}
 
}
  
−
#main_content > div {
+
#main_content div {
 
   background-color: #2f5668;
 
   background-color: #2f5668;
−
   background-color: rgba(183, 243, 241, 0.3);
+
   background-color: rgba(255, 255, 255, 0.7);
 +
  margin: 1em;
 +
  padding: 1em;
 +
}
 +
 
 +
#main_content a {
 +
  color: #1687C2;
 +
}
 +
 
 +
#main_content a:hover {
 +
  color: #72b045;
 +
}
 +
 
 +
#main_content a:active {
 +
  color: #609737;
 +
}
 +
 
 +
#main_content a:visited {
 +
  color: #609737;
 +
}
 +
 
 +
#main_content img {
 +
  margin: 1em;
 +
}
 +
 
 +
#main_content ol {
 +
  list-style-type: disc;
 +
}
 +
 
 +
#main_content p {
 +
  font-size: .8em;
 +
  text-align: left;
 +
}
 +
 
 +
#main_content p.centered {
 +
  text-align: center;
 +
}
 +
 
 +
#main_content li {
 +
  font-size: .8em;
 
}
 
}
  
 
#menu_label_text {
 
#menu_label_text {
 
   top: 0;
 
   top: 0;
−
   height: 2em;
+
   height: 2.75em;
 
   padding: 0.5em;
 
   padding: 0.5em;
−
   background-color: #86c6e7;
+
   background: none;
−
   margin: 14px;
+
   margin-top: 15px;
 
}
 
}
  
Line 210: Line 298:
 
   border-color: #2f5668;
 
   border-color: #2f5668;
 
   border-color: rgba(183, 243, 241, 0.3);
 
   border-color: rgba(183, 243, 241, 0.3);
 +
  font-family: "Nunito Bold", sans-serif;
 +
}
 +
 +
#menu_list > li > a, #menu_list > li > button {
 +
  font-family: "Nunito Bold", sans-serif;
 +
}
 +
 +
#menu_list > li > ul {
 +
  margin: 0;
 
}
 
}
  
Line 215: Line 312:
 
   width: 15rem;
 
   width: 15rem;
 
   background: none;
 
   background: none;
−
   height: calc(100vh - 3em);
+
   height: calc(100vh - 3em - 30px);
 
   display: flex;
 
   display: flex;
 
   position: absolute;
 
   position: absolute;
Line 229: Line 326:
 
   text-align: right;
 
   text-align: right;
 
   letter-spacing: .15em;
 
   letter-spacing: .15em;
−
   font-family: "Nunito", sans-serif;
+
   font-family: "Nunito Bold", sans-serif;
−
  font-weight: bold;
+
 
}
 
}
  
Line 236: Line 332:
  
 
<script>
 
<script>
−
function detectSize(){
+
function pageSetup(){
 
   toggleButton = document.getElementById("menu_toggle_button");
 
   toggleButton = document.getElementById("menu_toggle_button");
−
   if (window.matchMedia("(max-width: 600px)").matches){
+
   if (window.matchMedia("(max-width: 940px)").matches){
 +
      toggleMenu();
 +
  } else {
 +
      toggleMenu();
 
       toggleMenu();
 
       toggleMenu();
 
   }
 
   }
−
    
+
 
 +
   $("#main_content").find("a").removeClass("text");
 +
  $("#main_content").find("a").removeClass("external");
 +
  // wasn't sure how else to remove the external link symbol
 
}
 
}
 +
 +
$( window ).load(pageSetup());
  
 
function toggleMenu(){
 
function toggleMenu(){
 
   toggleButton = document.getElementById("menu_toggle_button");
 
   toggleButton = document.getElementById("menu_toggle_button");
−
  menuList = document.getElementById("menu_list");
+
  menuList = document.getElementById("menu_list");
 +
  mainContent = document.getElementById("main_content");
 
   if (toggleButton.innerHTML == "HIDE" || toggleButton.value == "HIDE" ){
 
   if (toggleButton.innerHTML == "HIDE" || toggleButton.value == "HIDE" ){
 
     toggleButton.value="SHOW";
 
     toggleButton.value="SHOW";
Line 252: Line 357:
 
     toggleButton.setAttribute("aria-expanded", false);
 
     toggleButton.setAttribute("aria-expanded", false);
 
     menuList.style.display="none";
 
     menuList.style.display="none";
 +
    mainContent.style.margin = "4em auto";
 
   } else {
 
   } else {
 
     toggleButton.value="HIDE";
 
     toggleButton.value="HIDE";
Line 257: Line 363:
 
     toggleButton.setAttribute("aria-expanded", true);
 
     toggleButton.setAttribute("aria-expanded", true);
 
     menuList.style.display="block";
 
     menuList.style.display="block";
 +
    mainContent.style.marginRight = "17rem";
 
   }
 
   }
 
}
 
}
Line 274: Line 381:
  
  
−
<body onload="detectSize()">
+
<body>
 
<div id="header">
 
<div id="header">
 
   <a id="header_link" href="https://2018.igem.org/Team:WPI_Worcester"><img id="header_logo" src="https://static.igem.org/mediawiki/2018/e/ed/T--WPI_Worcester--logo.svg"/>
 
   <a id="header_link" href="https://2018.igem.org/Team:WPI_Worcester"><img id="header_logo" src="https://static.igem.org/mediawiki/2018/e/ed/T--WPI_Worcester--logo.svg"/>
Line 282: Line 389:
 
   <div id="menu_list_container">
 
   <div id="menu_list_container">
 
   <ul id="menu_list" role="menu">
 
   <ul id="menu_list" role="menu">
−
     <li class="nav_menuitem" role="menuitem"><a href="https://2018.igem.org/Team:WPI_Worcester" class="menulink">Home</a></li>
+
     <li class="nav_menuitem" role="menuitem"><a href="https://2018.igem.org/Team:WPI_Worcester" class="nav_menulink">Home</a></li>
−
       <li class="nav_menuitem " role="menuitem" aria-expanded="false" aria-labeledby="Menu Toggle"><button class="submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Project Plans Submenu Toggle">Project Plans</button>
+
       <li class="nav_menuitem " role="menuitem" aria-expanded="false" aria-labeledby="Menu Toggle"><button class="nav_submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Project Plans Submenu Toggle">Project Plans</button>
 
         <ul class="nav_submenu">
 
         <ul class="nav_submenu">
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Description" class="nav_menulink">Description</a></li>
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Description" class="nav_menulink">Description</a></li>
Line 290: Line 397:
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Safety" class="nav_menulink">Safety</a></li>
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Safety" class="nav_menulink">Safety</a></li>
 
       </ul></li>
 
       </ul></li>
−
       <li class="nav_menuitem" role="menuitem"><button class="submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Results Menu Toggle">Results</button>
+
       <li class="nav_menuitem" role="menuitem"><button class="nav_submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Results Menu Toggle">Results</button>
 
         <ul class="nav_submenu">
 
         <ul class="nav_submenu">
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Results" class="nav_menulink"> All Results</a></li>
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Results" class="nav_menulink"> All Results</a></li>
Line 299: Line 406:
 
           <li><a href="https://2018.igem.org/Team:WPI_Worcester/Plant" class="nav_menulink">Plant Synthetic Biology</a></li>
 
           <li><a href="https://2018.igem.org/Team:WPI_Worcester/Plant" class="nav_menulink">Plant Synthetic Biology</a></li>
 
       </ul></li>
 
       </ul></li>
−
     <li class="nav_menuitem" role="menuitem"><button class="submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Lab Work Submenu Toggle">Lab Work</button>
+
     <li class="nav_menuitem" role="menuitem"><button class="nav_submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Lab Work Submenu Toggle">Lab Work</button>
 
       <ul class="nav_submenu">
 
       <ul class="nav_submenu">
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Experiments" class="nav_menulink">Protocols</a></li>
 
         <li><a href="https://2018.igem.org/Team:WPI_Worcester/Experiments" class="nav_menulink">Protocols</a></li>
Line 306: Line 413:
 
       </ul>
 
       </ul>
 
         </li>
 
         </li>
−
     <li class="nav_menuitem" role="menuitem"><button class="submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="People Submenu Toggle">People</button>
+
     <li class="nav_menuitem" role="menuitem"><button class="nav_submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="People Submenu Toggle">People</button>
 
       <ul class="nav_submenu">
 
       <ul class="nav_submenu">
 
            
 
            
Line 323: Line 430:
 
</nav>
 
</nav>
 
</div>
 
</div>
−
 
 
−
<!--
 
−
<div id="main_content">
 
−
 
 
−
</div>
 
−
 
−
</body>
 
−
 
−
 
−
Due to the layout of the iGEM wiki editing, these tags are not closed.-->
 

Latest revision as of 02:08, 18 October 2018