Difference between revisions of "Template:WLC-Milwaukee/header"

 
(65 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
   <meta http-equiv="x-ua-compatible" content="IE=edge; chrome=1"> <!-- Render Chrome if available or using latest version of Internet Explorer (Recommended). -->
 
   <meta http-equiv="x-ua-compatible" content="IE=edge; chrome=1"> <!-- Render Chrome if available or using latest version of Internet Explorer (Recommended). -->
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
  <link href="https://static.igem.org/mediawiki/2018/5/5b/T--WLC-Milwaukee--fonts.css.txt" rel="stylesheet">
+
 
−
{{WLC-Milwaukee/main-js}}
+
−
  <link href="https://static.igem.org/mediawiki/2018/e/e3/T--WLC-Milwaukee--header.css.txt" rel="stylesheet">
+
 
   <title>PLACEHOLDER</title>
 
   <title>PLACEHOLDER</title>
−
  <!--HEADER STYLE-->
+
 
−
  <style>
+
<script>
 +
$(function()
 +
{
 +
    $(".hamburger").click(function()
 +
    {
 +
        $(".navigation").toggleClass("open");
 +
    });
 +
 
 +
    $(".m-dropdown a").click(function(event)
 +
    {
 +
      var target = $(event.target);
 +
      if(!target.siblings().hasClass('show'))
 +
      {
 +
        $(".m-dropdown-content").removeClass('show');
 +
        target.siblings().addClass('show');
 +
      }
 +
      else
 +
      {
 +
        $(".m-dropdown-content").removeClass('show');
 +
      }
 +
     
 +
    });
 +
 
 +
    //Navbar Behavior
 +
    var prevScrollpos = window.pageYOffset;
 +
    window.onscroll = function() {
 +
      var currentScrollPos = window.pageYOffset;
 +
      //If At (or above @safari) the top
 +
      if(currentScrollPos <= 0 ) {
 +
 
 +
        document.getElementById("navbar").style.top = "10px";
 +
        $(".dropdown").removeClass("nomouse");
 +
        if(!$(".dropdown").is(":visible"))
 +
        {
 +
 
 +
          $(".navigation").show();
 +
        }
 +
        else { $(".navigation").css("display", "");}
 +
        return;       
 +
      }
 +
 
 +
      //If Scrolling Up
 +
      if (prevScrollpos > currentScrollPos) {
 +
        document.getElementById("navbar").style.top = "10px";
 +
        $(".dropdown").removeClass("nomouse");
 +
        if(!$(".dropdown").is(":visible"))
 +
        {
 +
 
 +
          $(".navigation").show();
 +
        }
 +
        else { $(".navigation").css("display", "");}
 +
      }
 +
      //If Scrolling Down
 +
      else {
 +
        if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
 +
        document.getElementById("navbar").style.top = "-45px";
 +
        $(".dropdown").addClass("nomouse");
 +
        $(".navigation").hide();
 +
 
 +
        if($(".dropdown").is(":visible"))
 +
        {
 +
          $(".navigation").css("display", "");
 +
        }
 +
 
 +
      }
 +
      prevScrollpos = currentScrollPos;
 +
    }   
 +
});
 +
 
 +
 
 +
 
 +
</script>
 +
 
 +
<!--HEADER STYLE-->
 +
 
 +
<style>
 +
 
 +
h1,h2,h3,h4,h5,h6{
 +
  font-family: 'Arimo',sans-serif;
 +
  font-weight: lighter;
 +
  overflow: visible;
 +
}
 +
 
 +
.container a:visited{
 +
color: #800080;
 +
}
 +
.nomouse
 +
{
 +
  pointer-events: none;
 +
}
 +
#globalWrapper {
 +
    font-size: 100% !important;
 +
}
 +
.header-logo
 +
{
 +
margin: -12px;
 +
}
 +
 
 +
@media screen and (max-width: 800px) {
 +
  .header-logo{
 +
   
 +
  }
 +
}
 +
 
 +
.hamburger {
 +
  position: fixed;
 +
  top: 2.25em;
 +
  right: 0;
 +
  cursor: pointer;
 +
  z-index: 1000;
 +
  padding: 10px 15px 5px;
 +
}
 +
  nav span {
 +
    vertical-align: middle;
 +
  }
 +
  .bars {
 +
    display: block;
 +
    position: relative;
 +
    width: 35px;
 +
    height: 5px;
 +
    background-color: white;
 +
    -webkit-transition: all .2s ease;
 +
    -moz-transition: all .2s ease;
 +
    -ms-transition: all .2s ease;
 +
    transition: all .2s ease;
 +
    }
 +
    .bars:before, .bars:after {
 +
      position: absolute;
 +
      content: " ";
 +
      width: 100%;
 +
      height: 5px;
 +
      background-color: white;
 +
    -webkit-transition: all .2s ease;
 +
    -moz-transition: all .2s ease;
 +
    -ms-transition: all .2s ease;
 +
    transition: all .2s ease;
 +
    }
 +
    .bars:before {
 +
      top: 10px;
 +
    }
 +
    .bars:after {
 +
      bottom: 10px;
 +
    }
 +
 +
 
 +
.open .hamburger .bars {
 +
  background-color: transparent;
 +
    -webkit-transition: all .2s ease;
 +
    -moz-transition: all .2s ease;
 +
    -ms-transition: all .2s ease;
 +
    transition: all .2s ease;
 +
  }
 +
  .open .hamburger .bars:before {
 +
    top: 0;
 +
  -webkit-transform: rotate(-45deg);
 +
  -moz-transform: rotate(-45deg);
 +
  -ms-transform: rotate(-45deg);
 +
  transform: rotate(-45deg);
 +
 
 +
  }
 +
  .open .hamburger .bars:after {
 +
    bottom: 0;
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
  }
 +
 
 +
 
 +
.menu {
 +
  width: 90%;
 +
  height: 100%;
 +
  font-family: 'Arimo';
 +
  font-style: normal;
 +
  font-weight: bold;
 +
  background-color: var(--gray);
 +
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
 +
  position: fixed;
 +
  right: -100%;
 +
  top: 0;
 +
  opacity: 0;
 +
  z-index: 999;
 +
  margin-top: 0;
 +
    -webkit-transition: all .2s ease;
 +
    -moz-transition: all .2s ease;
 +
    -ms-transition: all .2s ease;
 +
    transition: all .2s ease;
 +
  }
 +
 
 +
 
 +
.open .menu {
 +
  right: 0;
 +
  opacity: 1;
 +
    -webkit-transition: all .2s ease;
 +
    -moz-transition: all .2s ease;
 +
    -ms-transition: all .2s ease;
 +
    transition: all .2s ease;
 +
}
 +
 
 +
/* Content Style */
 +
 
 +
.menu-header
 +
{
 +
background-color: var(--primary-color);
 +
width: 100%;
 +
padding: 10%;
 +
color: white;
 +
 
 +
}
 +
 
 +
.menu-header p img
 +
{
 +
padding-right: 5px;
 +
}
 +
 
 +
.menu-header p
 +
{
 +
        font-size: 1.1em !important;
 +
display: flex;
 +
flex-direction: row;
 +
align-items: center;
 +
align-content: center;
 +
}
 +
.menu-header a:link, a:visited
 +
{
 +
color: white;
 +
text-decoration: none;
 +
}
 +
 
 +
.menu-header p
 +
{
 +
margin: 0;
 +
}
 +
 
 +
.menu-footer
 +
{
 +
background-color:var(--primary-color);
 +
width: 100%;
 +
padding: 1%;
 +
bottom: 0px;
 +
position: absolute;
 +
color: white;
 +
display: flex;
 +
flex-direction: row;
 +
align-items: center;
 +
}
 +
 
 +
.m-dropdown
 +
{
 +
  margin: inherit;
 +
 +
}
 +
 
 +
.menu-content a {
 +
text-decoration: none;
 +
display: block;
 +
text-align: left;
 +
  padding: 20px;
 +
  color: #0e0e0e;
 +
}
 +
 
 +
 
 +
.m-dropdown-content
 +
{
 +
  transition: max-height .5s ease-in-out, opacity .5s ease;
 +
  opacity: 0;
 +
  max-height: 0px;
 +
  background-color: var(--gray-dark);
 +
  display: block;
 +
  pointer-events: none;
 +
}
 +
 
 +
.show  {
 +
  transition: max-height .5s ease-in, opacity .9s ease;
 +
  opacity: 1; 
 +
  max-height: 1000px ;
 +
  pointer-events: all;
 +
}
 +
 
 +
/*Mobile Navbar Icons/Links Style*/
 +
 
 +
.menu-content
 +
{
 +
    display: flex;
 +
    flex-direction: row;
 +
    overflow-y: auto;
 +
    height: 71%;
 +
}
 +
 
 +
.menu-links
 +
{
 +
  display: flex;
 +
  flex-direction: column;
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 
 +
.menu-links i
 +
{
 +
  font-size: 2em;
 +
  position: relative;
 +
  top: 9px;
 +
}
 +
 
 +
/*ICONS*/
 +
@font-face {
 +
    font-family: 'Material Icons';
 +
    font-style: normal;
 +
    font-weight: 400;   
 +
    src: url('https://static.igem.org/mediawiki/2018/8/81/T--WLC-Milwaukee--MaterialIcons-Regular.woff') format('woff');
 +
  }
 +
/*END ICONS*/
 +
 
 +
@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url('https://static.igem.org/mediawiki/2018/4/4d/T--WLC-Milwaukee--OpenSans-Bold.woff') format('woff');
 +
    font-weight: bold;
 +
    font-style: normal;
 +
}
 +
 
 +
@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url('https://static.igem.org/mediawiki/2018/5/55/T--WLC-Milwaukee--OpenSans-Regular.woff') format('woff');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
 
 +
@font-face {
 +
    font-family: 'Arimo';
 +
    src:    url('https://static.igem.org/mediawiki/2018/d/d7/T--WLC-Milwaukee--Arimo-Regular.woff') format('woff');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
 
 +
@font-face {
 +
    font-family: 'Arimo';
 +
    src: url('https://static.igem.org/mediawiki/2018/b/bb/T--WLC-Milwaukee--Arimo-Bold.woff') format('woff');
 +
    font-weight: bold;
 +
    font-style: normal;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*Main Vars*/
 +
:root{
 +
  --primary-color: #654ea3;
 +
  --primary-dark: #4b3191;
 +
  --primary-light: #9981db;
 +
  --primary-test: #DAD3EE;
 +
  --gray: #F3F3F3;
 +
  --gray-dark: rgb(214, 214, 214);
 +
}
 +
 
 +
html, body {
 +
    height: 100%;
 +
    min-width: 330px;
 +
  }
 +
 
 +
 
 +
  body {
 +
    display: flex;
 +
    flex-direction: column;
 +
    font-family: 'Open Sans', sans-serif !important;
 +
    font: initial !important;
 +
  }
 +
  .content {
 +
    margin-top: 60px;
 +
    flex: 1 0 auto;
 +
    z-index: 0;
 +
  }
 +
  .footer {
 +
    flex-shrink: 0;
 +
  }
 +
 
 +
body{
 +
  margin: 0;
 +
}
 +
 
 +
/*Main content container*/
 +
/*keeps content centered*/
 +
div.container{
 +
  max-width: 55em;
 +
  margin: 5vmax auto;
 +
  margin-top: 10vmax;
 +
  padding: 0 4vmax;
 +
}
 +
 
 +
 
 +
div.row{
 +
    display: inline-block;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 
 +
/*full width container*/
 +
div.col-lg{
 +
color: #0e0e0e;
 +
  width: 100%;
 +
}
 +
 
 +
div.container img
 +
{
 +
  max-width: 100%;
 +
  display: block;
 +
  margin: 0 auto;
 +
}
 +
 
 +
 
 +
/*Half width container*/
 +
div.col-md{
 +
  color: #0e0e0e;
 +
  width: calc(50% - 1.5em);
 +
  float: left;
 +
  padding-right: 1.5em;
 +
}
 +
 
 +
/*one third width container*/
 +
div.col-sm{
 +
  color: #0e0e0e;
 +
  width: calc(33% - 1.5em);
 +
  float: left;
 +
  padding-right: 1.5em;
 +
}
 +
 
 +
h1,h2,h3{
 +
  font-family: 'Arimo', sans-serif !important;
 +
  font-weight: lighter !important;
 +
}
 +
 
 +
p{
 +
  font-family: 'Open sans', sans-serif !important;
 +
  line-height: 1.5em !important;
 +
  font-size: 1.1em !important;
 +
}
 +
 
 +
/* Use a media query to add a break point at 800px: */
 +
@media screen and (max-width: 800px) {
 +
  div.col-md, div.col-sm{
 +
    width: 100%;
 +
  }
 +
}
 +
 
 +
 
 +
/*ICONS*/
 +
.material-icons {
 +
  font-family: 'Material Icons';
 +
  font-weight: normal;
 +
  font-style: normal;
 +
  font-size: 24px;  /* Preferred icon size */
 +
  display: inline-block;
 +
  line-height: 1;
 +
  text-transform: none;
 +
  letter-spacing: normal;
 +
  word-wrap: normal;
 +
  white-space: nowrap;
 +
  direction: ltr;
 +
 
 +
  /* Support for all WebKit browsers. */
 +
  -webkit-font-smoothing: antialiased;
 +
  /* Support for Safari and Chrome. */
 +
  text-rendering: optimizeLegibility;
 +
 
 +
  /* Support for Firefox. */
 +
  -moz-osx-font-smoothing: grayscale;
 +
 
 +
  /* Support for IE. */
 +
  font-feature-settings: 'liga';
 +
}
 +
/*END ICONS*/
 +
 
 
#home_logo, #sideMenu, #top_title, .patrollink  {display:none;}
 
#home_logo, #sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
Line 24: Line 493:
  
 
       position: fixed;
 
       position: fixed;
−
       top: 0;
+
       top: 10px;
 
       width: 100%;
 
       width: 100%;
 
       transition: top 0.3s;
 
       transition: top 0.3s;
Line 71: Line 540:
 
       display: none;
 
       display: none;
 
       position: fixed;
 
       position: fixed;
−
       top: 4em;
+
       top: 5.1em;
 
       background-color: var(--primary-color);
 
       background-color: var(--primary-color);
 
       min-width: 160px;
 
       min-width: 160px;
Line 140: Line 609:
 
   <!--END HEADER STYLE-->
 
   <!--END HEADER STYLE-->
  
−
{{WLC-Milwaukee/main-js}}
+
 
 
</head>
 
</head>
−
<body>
+
<body class="scroll">
 
<!--Desktop Navbar-->
 
<!--Desktop Navbar-->
 
<div id="navbar" class="navbar unselectable shadow">
 
<div id="navbar" class="navbar unselectable shadow">
−
    <a href="index">
+
    <a href="/Team:WLC-Milwaukee">
−
    <img height="40" title="WLC-Milwaukee iGEM Home" class="header-logo" src="wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
+
    <img height="40" title="WLC-Milwaukee iGEM Home" class="header-logo" src="https://static.igem.org/mediawiki/2018/7/7b/T--WLC-Milwaukee--wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
 
    </a>
 
    </a>
  
 
    <!--PROJECT DROPDOWN-->
 
    <!--PROJECT DROPDOWN-->
 
    <div class="dropdown">
 
    <div class="dropdown">
−
      <a href="Description">PROJECT</a>
+
      <a href="/Team:WLC-Milwaukee/Description">PROJECT</a>
 
      <div class="dropdown-content">
 
      <div class="dropdown-content">
−
<a href="Description">Overview</a>
+
<a href="\Team:WLC-Milwaukee\Description">Overview</a>
−
<a href="Background">Background</a>
+
<a href="\Team:WLC-Milwaukee\Background">Background</a>
−
<a href="Applied_Design">System Design</a>
+
<a href="\Team:WLC-Milwaukee\Applied_Design">System Design</a>
−
<a href="Experiments">Wetlab</a>
+
<a href="\Team:WLC-Milwaukee\Experiments">Wet Lab</a>
−
<a href="Demonstrate">Results</a>
+
<a href="\Team:WLC-Milwaukee\Demonstrate">Results</a>
−
<a href="Improve">Parts</a>
+
<a href="\Team:WLC-Milwaukee\Improve">Parts</a>
 
      </div>
 
      </div>
 
    </div>
 
    </div>
Line 164: Line 633:
 
    <!--DOCUMENTATION DROPDOWN-->
 
    <!--DOCUMENTATION DROPDOWN-->
 
    <div class="dropdown">
 
    <div class="dropdown">
−
      <a href="Judging">DOCUMENTATION</a>
+
      <a href="\Team:WLC-Milwaukee\Judging">DOCUMENTATION</a>
 
      <div class="dropdown-content">
 
      <div class="dropdown-content">
−
<a href="Safety">Safety</a>
+
<a href="\Team:WLC-Milwaukee\Safety">Safety</a>
−
<a href="Notebook">Timeline</a>
+
<a href="\Team:WLC-Milwaukee\Notebook">Timeline</a>
−
<a href="Judging">Judging</a>
+
<a href="\Team:WLC-Milwaukee\Judging">Judging</a>
 
      </div>
 
      </div>
 
    </div>
 
    </div>
Line 174: Line 643:
 
    <!--HUMAN PRACTICES DROPDOWN-->
 
    <!--HUMAN PRACTICES DROPDOWN-->
 
    <div class="dropdown">
 
    <div class="dropdown">
−
      <a href="HP">HUMAN PRACTICES</a>
+
      <a href="\Team:WLC-Milwaukee\HP">HUMAN PRACTICES</a>
 
      <div class="dropdown-content">
 
      <div class="dropdown-content">
−
<a href="HP">Overview</a>
+
<a href="\Team:WLC-Milwaukee\HP">Overview</a>
−
<a href="Human_Practices">Investigations and Impact</a>
+
<a href="\Team:WLC-Milwaukee\Human_Practices">Investigations and Impact</a>
−
<a href="Public_Engagement">Outreach</a>
+
<a href="\Team:WLC-Milwaukee\Public_Engagement">Outreach</a>
−
<a href="Collaborations">Collaborations</a>
+
<a href="\Team:WLC-Milwaukee\Collaborations">Collaborations</a>
 
      </div>
 
      </div>
 
    </div>
 
    </div>
Line 185: Line 654:
 
    <!--TEAM DROPDOWN-->
 
    <!--TEAM DROPDOWN-->
 
    <div class="dropdown">
 
    <div class="dropdown">
−
      <a href="Team">TEAM</a>
+
      <a href="\Team:WLC-Milwaukee\Team">TEAM</a>
 
      <div class="dropdown-content">
 
      <div class="dropdown-content">
−
<a href="Team">Members</a>
+
<a href="\Team:WLC-Milwaukee\Team">Members</a>
−
<a href="Attributions">Attributions</a>
+
<a href="\Team:WLC-Milwaukee\Attributions">Attributions</a>
 
      </div>
 
      </div>
 
    </div>
 
    </div>
Line 201: Line 670:
 
    <div class="menu">
 
    <div class="menu">
 
    <div class="menu-header">
 
    <div class="menu-header">
−
    <a href="index">
+
    <a href="/Team:WLC-Milwaukee">
 
    <p>
 
    <p>
−
<img height="40" title="WLC-Milwaukee iGEM Home"  src="wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
+
<img height="40" title="WLC-Milwaukee iGEM Home"  src="https://static.igem.org/mediawiki/2018/7/7b/T--WLC-Milwaukee--wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
 
WLC-Milwaukee iGEM
 
WLC-Milwaukee iGEM
 
</p>
 
</p>
Line 218: Line 687:
 
               </a>
 
               </a>
 
               <div class="m-dropdown-content">
 
               <div class="m-dropdown-content">
−
<a href="Description">Overview</a>
+
<a href="\Team:WLC-Milwaukee\Description">Overview</a>
−
<a href="Background">Background</a>
+
<a href="\Team:WLC-Milwaukee\Background">Background</a>
−
<a href="Applied_Design">System Design</a>
+
<a href="\Team:WLC-Milwaukee\Applied_Design">System Design</a>
−
<a href="Experiments">Wetlab</a>
+
<a href="\Team:WLC-Milwaukee\Experiments">Wetlab</a>
−
<a href="Demonstrate">Results</a>
+
<a href="\Team:WLC-Milwaukee\Demonstrate">Results</a>
−
<a href="Improve">Parts</a>
+
<a href="\Team:WLC-Milwaukee\Improve">Parts</a>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
Line 234: Line 703:
 
                   </a>
 
                   </a>
 
                   <div class="m-dropdown-content">
 
                   <div class="m-dropdown-content">
−
<a href="">Overview</a>
+
<a href="\Team:WLC-Milwaukee\Safety">Safety</a>
−
<a href="Safety">Safety</a>
+
<a href="\Team:WLC-Milwaukee\Notebook">Timeline</a>
−
<a href="Notebook">Timeline</a>
+
<a href="\Team:WLC-Milwaukee\Judging">Judging</a>
−
<a href="Judging">Judging</a>
+
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
Line 247: Line 715:
 
                   </a>
 
                   </a>
 
                   <div class="m-dropdown-content">
 
                   <div class="m-dropdown-content">
−
<a href="HP">Overview</a>
+
<a href="\Team:WLC-Milwaukee\HP">Overview</a>
−
<a href="Human_Practices">Investigations and Impact</a>
+
<a href="\Team:WLC-Milwaukee\Human_Practices">Investigations and Impact</a>
−
<a href="Public_Engagement">Outreach</a>
+
<a href="\Team:WLC-Milwaukee\Public_Engagement">Outreach</a>
−
<a href="Collaborations">Collaborations</a>
+
<a href="\Team:WLC-Milwaukee\Collaborations">Collaborations</a>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
Line 261: Line 729:
 
                   </a>
 
                   </a>
 
                   <div class="m-dropdown-content">
 
                   <div class="m-dropdown-content">
−
<a href="Team">Members</a>
+
<a href="\Team:WLC-Milwaukee\Team">Members</a>
−
<a href="Attributions">Attributions</a>
+
<a href="\Team:WLC-Milwaukee\Attributions">Attributions</a>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
Line 269: Line 737:
 
               <div class="menu-footer">
 
               <div class="menu-footer">
 
               <a href="https://www.facebook.com/WLCiGEM">
 
               <a href="https://www.facebook.com/WLCiGEM">
−
                 <img class="m-facebook" alt="Facebook" src="facebook.png" width="30"/>
+
                 <img class="m-facebook" alt="Facebook" src="https://static.igem.org/mediawiki/2018/f/f5/T--WLC-Milwaukee--facebook.png" width="30"/>
 
               </a>
 
               </a>
 
               </div>    
 
               </div>    
Line 277: Line 745:
 
</nav>
 
</nav>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Latest revision as of 02:13, 18 October 2018

PLACEHOLDER