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

 
(48 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">
 
  
−
    <link href="https://static.igem.org/mediawiki/2018/e/e3/T--WLC-Milwaukee--header.css.txt" rel="stylesheet">
 
 
   <title>PLACEHOLDER</title>
 
   <title>PLACEHOLDER</title>
  
Line 37: Line 35:
 
     window.onscroll = function() {
 
     window.onscroll = function() {
 
       var currentScrollPos = window.pageYOffset;
 
       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) {
 
       if (prevScrollpos > currentScrollPos) {
−
         document.getElementById("navbar").style.top = "0";
+
         document.getElementById("navbar").style.top = "10px";
 
         $(".dropdown").removeClass("nomouse");
 
         $(".dropdown").removeClass("nomouse");
 
         if(!$(".dropdown").is(":visible"))
 
         if(!$(".dropdown").is(":visible"))
Line 46: Line 59:
 
         }
 
         }
 
         else { $(".navigation").css("display", "");}
 
         else { $(".navigation").css("display", "");}
−
       } else {
+
       }  
−
         if($(".navigation").hasClass("open") && !$(".dropdown").is(":visible")){return;}
+
      //If Scrolling Down
−
         document.getElementById("navbar").style.top = "-60px";
+
      else {
 +
         if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
 +
         document.getElementById("navbar").style.top = "-45px";
 
         $(".dropdown").addClass("nomouse");
 
         $(".dropdown").addClass("nomouse");
 
         $(".navigation").hide();
 
         $(".navigation").hide();
Line 61: Line 76:
 
     }     
 
     }     
 
});
 
});
 +
 +
 +
 
</script>
 
</script>
  
−
  <!--HEADER STYLE-->
+
<!--HEADER STYLE-->
−
  <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*/
 
/*Main Vars*/
Line 79: Line 365:
 
     height: 100%;
 
     height: 100%;
 
     min-width: 330px;
 
     min-width: 330px;
−
 
 
   }
 
   }
 
    
 
    
Line 86: Line 371:
 
     display: flex;
 
     display: flex;
 
     flex-direction: column;
 
     flex-direction: column;
−
     font-family: 'Open Sans'
+
     font-family: 'Open Sans', sans-serif !important;
 +
    font: initial !important;
 
   }
 
   }
 
   .content {
 
   .content {
Line 96: Line 382:
 
     flex-shrink: 0;
 
     flex-shrink: 0;
 
   }
 
   }
−
 
−
 
−
 
  
 
body{
 
body{
Line 109: Line 392:
 
   max-width: 55em;
 
   max-width: 55em;
 
   margin: 5vmax auto;
 
   margin: 5vmax auto;
 +
  margin-top: 10vmax;
 
   padding: 0 4vmax;
 
   padding: 0 4vmax;
 
}
 
}
Line 151: Line 435:
  
 
h1,h2,h3{
 
h1,h2,h3{
−
   font-family: sans-serif;
+
   font-family: 'Arimo', sans-serif !important;
−
   font-weight: lighter;
+
   font-weight: lighter !important;
 
}
 
}
  
 
p{
 
p{
−
 
+
  font-family: 'Open sans', sans-serif !important;
−
   line-height: 1.5em;
+
   line-height: 1.5em !important;
−
   font-size: 1.1em;
+
   font-size: 1.1em !important;
 
}
 
}
  
Line 209: Line 493:
  
 
       position: fixed;
 
       position: fixed;
−
       top: 0;
+
       top: 10px;
 
       width: 100%;
 
       width: 100%;
 
       transition: top 0.3s;
 
       transition: top 0.3s;
Line 256: 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 327: Line 611:
  
 
</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="https://static.igem.org/mediawiki/2018/7/7b/T--WLC-Milwaukee--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>
Line 336: Line 620:
 
    <!--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 349: 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 359: 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 370: 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 386: 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="https://static.igem.org/mediawiki/2018/7/7b/T--WLC-Milwaukee--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">
Line 403: 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 419: 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 432: 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 446: 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 462: Line 745:
 
</nav>
 
</nav>
 
</body>
 
</body>
−
<script>
 
−
/*
 
−
From: https://github.com/luster-io/prevent-overscroll/blob/master/index.html
 
−
Purpose: Disable elastic scrolling effect in mobile Safari
 
−
*/
 
  
−
var overscroll = function(el) {
 
−
  el.addEventListener('touchstart', function() {
 
−
    var top = el.scrollTop
 
−
      , totalScroll = el.scrollHeight
 
−
      , currentScroll = top + el.offsetHeight
 
−
    //If we're at the top or the bottom of the containers
 
−
    //scroll, push up or down one pixel.
 
−
    //
 
−
    //this prevents the scroll from "passing through" to
 
−
    //the body.
 
−
    if(top === 0) {
 
−
      el.scrollTop = 1
 
−
    } else if(currentScroll === totalScroll) {
 
−
      el.scrollTop = top - 1
 
−
    }
 
−
  })
 
−
  el.addEventListener('touchmove', function(evt) {
 
−
    //if the content is actually scrollable, i.e. the content is long enough
 
−
    //that scrolling can occur
 
−
    if(el.offsetHeight < el.scrollHeight)
 
−
      evt._isScroller = true
 
−
  })
 
−
}
 
−
overscroll(document.querySelector('.scroll'));
 
−
document.body.addEventListener('touchmove', function(evt) {
 
−
  //In this case, the default behavior is scrolling the body, which
 
−
  //would result in an overflow.  Since we don't want that, we preventDefault.
 
−
  if(!evt._isScroller) {
 
−
    evt.preventDefault()
 
−
  }
 
−
})
 
−
</script>
 
 
</html>
 
</html>

Latest revision as of 02:13, 18 October 2018

PLACEHOLDER