Difference between revisions of "Template:WPI Worcester"

 
(84 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<script>
+
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
</head>
  
−
$(document).ready(function() {
+
<style>
 +
@font-face {
 +
    font-family: "Fredoka One";
 +
    src: url(https://static.igem.org/mediawiki/2018/9/93/T--WPI_Worcester--FredokaOne-Regular.ttf) format("truetype");
 +
}
  
−
$("#HQ_page").attr('id','');
+
@font-face {
−
+
    font-family: "Nunito Bold";
 +
    src: url(https://static.igem.org/mediawiki/2018/f/fb/T--WPI_Worcester--Nunito.ttf) format("truetype");
 +
}
  
−
//highlight current page on the menu
 
−
highlight_current_page_menu();
 
−
 
−
//accessing submenus
 
−
$(".menu_item").click(function(){
 
−
$(".submenu_control_icon", this).toggleClass("open");
 
−
$(this).next(".submenu").fadeToggle(400);
 
−
});
 
−
 
−
//mobile menu access
 
−
$(".igem_2018_team_mobile_bar").click(function(){
 
−
$(this).next().toggleClass("displaying_menu");
 
−
});
 
−
 
−
});
 
  
 +
/* 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! */
  
−
function highlight_current_page_menu() {
 
−
 
−
var page_url="https://2018.igem.org/";
 
−
page_url = page_url + wgPageName;
 
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
 
−
 
−
//if the page is in a submenu, open the submenu and make the appropriate changes
 
−
if( $( ".current_page" ).hasClass( "submenu_item" )){
 
−
 
−
$(".current_page").parent().parent().fadeToggle(400);
 
−
$(".current_page").parent().parent().prev().addClass("current_page");
 
−
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 
−
 
−
}
 
−
}
 
−
</script>
 
  
−
<style>
+
:focus {
−
@import url('https://fonts.googleapis.com/css?family=Patua+One');
+
  outline: 0.2rem solid #72b045;
 +
  outline-offset: 0.2rem;
 +
}
  
−
:root {
+
[hidden] {
−
    --darkgreen: #4aa70f;
+
  display: none;
−
    --midgreen: #93d100;
+
−
    --offwhite: #e8eecb;
+
−
    --accentcolor: #7644C0;
+
−
    --slategray: #8895c1;
+
−
    --frenchgray: #aa988c;
+
 
}
 
}
 +
 +
/* All ELEMENTS defined here. */
  
 
body {
 
body {
−
  color: #594d45;
+
  font-family: Arial, sans-serif;
−
  font-family: "Trebuchet MS", Helvetica, sans-serif;
+
  font-size: 1rem;
 +
  background-color: #10394e;  
 +
  background-image: url(https://static.igem.org/mediawiki/2018/6/6f/T--WPI_Worcester--background.svg);
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
  padding: 0;
 +
  min-width: 220px;
 +
}
 +
 
 +
button {
 +
  width: 6em;
 +
  border-radius: 0.5em;
 +
  border: 0.3em solid #1687C2;
 +
  background-color: #86c6e7;
 +
  padding:0.05em;
 +
  margin: 0;
 +
  color: #10394e;
 +
  font-size: .8em;
 +
  letter-spacing: .15em;
 +
  font-family: "Nunito", sans-serif;
 +
  font-weight: bold;
 +
}
 +
 
 +
button:hover {
 +
  border: 0.3em solid #10394e;
 +
  background-color: #1687C2;
 +
  padding:0.05em;
 +
  color: #86c6e7;
 +
}
 +
 
 +
button:active {
 +
  border: 0.3em solid #1687C2;
 +
  background-color: #10394e;
 +
  padding:0.05em;
 +
  color: #86c6e7;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
  font-family: "Nunito Bold", Helvetica, sans-serif !important;
 
}
 
}
  
 
h1 {
 
h1 {
−
  color: var(--midgreen);
+
  text-align: center;
−
  font-family: 'Patua One', sans-serif;
+
  color: #609737;
 
}
 
}
  
 
h2 {
 
h2 {
−
  color: var(--slategray);
+
  color: #2f5668;
−
  font-family: 'Patua One', sans-serif;
+
  margin-bottom: 1rem;
 
}
 
}
  
−
#banner {
+
h3 {
−
    top: 0;
+
  color: #1687C2;
−
    left: 0;
+
  font-style: italic;
−
    position: fixed;
+
  margin-bottom: 0;
−
    height: 50px;
+
−
    width: 100%;
+
−
    padding: 0px;
+
−
    background-color: var(--frenchgray);
+
 
}
 
}
  
−
#body {
+
/* All CLASSES defined here */
−
  margin-top: 75px;
+
 
 +
.centered {
 +
  text-align: center;
 
}
 
}
 +
 +
.greentext {
 +
  color: #72b045;
 +
}
 +
 +
.bluetext {
 +
  color: #86c6e7;
 +
}
 +
 +
.midbluetext {
 +
  color: #1687C2;
 +
}
 +
 +
.nav_menuitem {
 +
  /*height: 1.5em;*/
 +
}
 +
 +
.nav_menuitem:hover {
 +
  background-color: #609737;
 +
}
 +
 +
.nav_menulink {
 +
  text-decoration: none;
 +
  color: #b7f3f1;
 +
}
 +
 +
.nav_menulink:visited {
 +
  color: #86c6e7;
 +
}
 +
 +
.nav_menulink:hover, .nav_menulink:focus {
 +
  text-decoration: underline;
 +
}
 +
 +
.nav_submenu {
 +
  list-style-position: inside;
 +
  list-style-type: none;
 +
  list-style: none;
 +
  display: none;
 +
  background-color: #1687C2;
 +
  text-align: left;
 +
  font-family: "Nunito Bold", sans-serif;
 +
  padding: 0;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
 +
.nav_submenu > li {
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 +
.nav_submenu > li > a:hover {
 +
  background-color: #72b045;
 +
}
 +
 +
.nav_submenu > li > a {
 +
  background-color: #1687C2 ;
 +
  padding-left: 2em;
 +
  padding-top: 0.5em;
 +
  padding-bottom: 0.5em;
 +
  line-height: 1em;
 +
  color: white;
 +
  display: block;
 +
}
 +
 +
.nav_submenu_toggle {
 +
  border: none;
 +
  border-radius: 0px;
 +
  padding: 0;
 +
  margin: 0;
 +
  width: 100%;
 +
  height: 2em;
 +
  padding: 0.2em 1em;
 +
  font-size: 1em;
 +
}
 +
 +
.nav_submenu_toggle:hover, .nav_submenu_toggle:active {
 +
  border: none;
 +
  border-radius: 0px;
 +
}
 +
 +
.nav_submenu_toggle:focus {
 +
  outline: 0.2em solid #72b045;
 +
  outline-offset: -0.2em; 
 +
}
 +
 +
/* All IDs defined here and children / related elements. */
 +
 +
#header {
 +
  width: 100%;
 +
  height: 1em;
 +
  margin-top: 15px; /* height of iGEM login bar */
 +
  padding: .25em;
 +
  top: 0;
 +
  left: 0;
 +
  position: fixed;
 +
  background-color: white;
 +
  background-image: linear-gradient(135deg, white 35%, #86c6e7 35%);
 +
  font-family: "Fredoka One", Helvetica, sans-serif;
 +
  font-size: 2em;
 +
  line-height: 1em;
 +
  z-index: 100;
 +
}
 +
 +
#header_link {
 +
  text-decoration: none;
 +
}
 +
 +
#header_logo {
 +
  height: 1.4em;
 +
  position: relative;
 +
  top: -0.2em;
 +
  float: left;
 +
}
 +
 +
#header_text {
 +
  margin-left: 0.2em;
 +
  color: #86c6e7;
 +
}
 +
 +
#main_content {
 +
  background-color: #2f5668;
 +
  background-color: rgba(255, 255, 255, 0.7);
 +
  width: 70%;
 +
  margin: 4em auto;
 +
  padding: 1em;
 +
  overflow: auto;
 +
}
 +
 +
#main_content div {
 +
  background-color: #2f5668;
 +
  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 {
 +
  top: 0;
 +
  height: 2.75em;
 +
  padding: 0.5em;
 +
  background: none;
 +
  margin-top: 15px;
 +
}
 +
 +
#menu_list {
 +
  overflow: auto;
 +
  position: absolute;
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 +
#menu_list > li {
 +
  border-style: solid;
 +
  border-width: 3px 6px;
 +
  border-color: #2f5668;
 +
  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;
 +
}
 +
 +
#menu_list_container {
 +
  width: 15rem;
 +
  background: none;
 +
  height: calc(100vh - 3em - 30px);
 +
  display: flex;
 +
  position: absolute;
 +
}
 +
 +
#menu_nav {
 +
  width: 15rem;
 +
  font-size: 1rem;
 +
  color: #10394e;
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  text-align: right;
 +
  letter-spacing: .15em;
 +
  font-family: "Nunito Bold", sans-serif;
 +
}
 +
 
</style>
 
</style>
  
−
<head>  
+
<script>
 +
function pageSetup(){
 +
  toggleButton = document.getElementById("menu_toggle_button");
 +
  if (window.matchMedia("(max-width: 940px)").matches){
 +
      toggleMenu();
 +
  } else {
 +
      toggleMenu();
 +
      toggleMenu();
 +
  }
  
−
<!-- This tells the browser that your page is responsive -->
+
  $("#main_content").find("a").removeClass("text");
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  $("#main_content").find("a").removeClass("external");
 +
  // wasn't sure how else to remove the external link symbol
 +
}
  
−
<!--<link rel="icon" href="FBicon.gif" type="image/gif"/>-->
+
$( window ).load(pageSetup());
−
</head>
+
−
<body>
+
−
<div id="banner"></div>
+
−
<div id="body">
+
−
<h1>Sample Page (header 1)</h1>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus tincidunt sapien et efficitur. Nam a quam neque. Nam leo justo, molestie eu sapien ut, malesuada ultrices magna. Suspendisse pellentesque ipsum fringilla faucibus commodo. Integer eleifend porttitor vestibulum. Sed consequat quam arcu, semper cursus odio viverra ut. Aenean rutrum diam nisi, et consectetur mauris tristique sagittis. Duis ac magna velit. Phasellus sit amet iaculis libero. Cras ut ex ornare, ullamcorper ex eget, bibendum est.</p>
+
  
−
<p>Nulla tempus orci a pretium congue. Quisque at enim vitae elit laoreet malesuada. Sed convallis quis odio id hendrerit. Donec gravida, mauris vitae sollicitudin volutpat, sem orci aliquet tellus, vitae porttitor eros mauris ut lacus. Phasellus faucibus elementum mattis. Pellentesque convallis sollicitudin dictum. Vestibulum vehicula lectus dolor, bibendum vehicula ipsum egestas in. Ut nec luctus ex, a mollis arcu. Vestibulum luctus sollicitudin enim vitae euismod.</p>
+
function toggleMenu(){
 +
  toggleButton = document.getElementById("menu_toggle_button");
 +
  menuList = document.getElementById("menu_list");
 +
  mainContent = document.getElementById("main_content");
 +
  if (toggleButton.innerHTML == "HIDE" || toggleButton.value == "HIDE" ){
 +
    toggleButton.value="SHOW";
 +
    toggleButton.innerHTML="SHOW";
 +
    toggleButton.setAttribute("aria-expanded", false);
 +
    menuList.style.display="none";
 +
    mainContent.style.margin = "4em auto";
 +
  } else {
 +
    toggleButton.value="HIDE";
 +
    toggleButton.innerHTML="HIDE";
 +
    toggleButton.setAttribute("aria-expanded", true);
 +
    menuList.style.display="block";
 +
    mainContent.style.marginRight = "17rem";
 +
  }
 +
}
  
−
<h2>Some more text</h2>  
+
function toggleSubmenu(elem){
−
 
+
  activatedButton = elem;
−
<p>Vestibulum interdum justo non augue ultrices volutpat. Cras vestibulum ultricies augue eu aliquam. Praesent dolor erat, porttitor in viverra a, posuere feugiat risus. Aenean egestas vitae nulla sed commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tincidunt nec risus eget faucibus. Etiam quis massa quis purus tincidunt lacinia a ut ante.</p>
+
  correspondingSubmenu = activatedButton.parentElement.children[1];
 +
  if (correspondingSubmenu.style.display == "block"){
 +
      correspondingSubmenu.style.display = "none";
 +
      activatedButton.setAttribute("aria-expanded", false);
 +
  } else {
 +
      correspondingSubmenu.style.display = "block";
 +
      activatedButton.setAttribute("aria-expanded", true);
 +
  } 
 +
}
 +
</script>
 +
 
 +
 
 +
<body>
 +
<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"/>
 +
  <span id="header_text">ICE<span class="greentext">BERG</span></span></a>
 +
  <nav id="menu_nav" aria-label="main menu">
 +
  <div id="menu_label_text">MENU      <button id="menu_toggle_button" aria-expanded="true" aria-labeledby="Menu Toggle" onclick="toggleMenu()">HIDE</button></div>
 +
  <div id="menu_list_container">
 +
  <ul id="menu_list" role="menu">
 +
    <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="nav_submenu_toggle" onclick="toggleSubmenu(this)" aria-expanded="false" aria-labeledby="Project Plans Submenu Toggle">Project Plans</button>
 +
        <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/Background" class="nav_menulink">Background</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Design" class="nav_menulink">Design</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Safety" class="nav_menulink">Safety</a></li>
 +
      </ul></li>
 +
      <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">
 +
        <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/Parts" class="nav_menulink">iGEM Parts</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Improve" class="nav_menulink">Improvements</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Demonstrate" class="nav_menulink">Demonstration</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Hardware" class="nav_menulink">Hardware</a></li>
 +
          <li><a href="https://2018.igem.org/Team:WPI_Worcester/Plant" class="nav_menulink">Plant Synthetic Biology</a></li>
 +
      </ul></li>
 +
    <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">
 +
        <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/Notebook" class="nav_menulink">Notebooks</a></li>
 +
          <li><a href="https://2018.igem.org/Team:WPI_Worcester/InterLab" class="nav_menulink">InterLab</a></li>
 +
      </ul>
 +
        </li>
 +
    <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">
 +
         
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Human_Practices" class="nav_menulink">Human Practices</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Public_Engagement" class="nav_menulink">Public Engagement</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Collaborations" class="nav_menulink">Collaborations</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Attributions" class="nav_menulink">Attributions</a></li>
 +
        <li><a href="https://2018.igem.org/Team:WPI_Worcester/Team" class="nav_menulink">About Us</a></li>
 +
        </ul>
 +
      </li>
 +
      <!--<li>
 +
        <a>Sitemap</a>
 +
      </li>-->
 +
  </ul>
 +
  </div>
 +
</nav>
 
</div>
 
</div>
−
</body>
 
−
</html>
 

Latest revision as of 02:08, 18 October 2018