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

 
(39 intermediate revisions by the same user not shown)
Line 35: 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 44: Line 59:
 
         }
 
         }
 
         else { $(".navigation").css("display", "");}
 
         else { $(".navigation").css("display", "");}
−
       } else {
+
       }  
 +
      //If Scrolling Down
 +
      else {
 
         if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
 
         if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
−
         document.getElementById("navbar").style.top = "-60px";
+
         document.getElementById("navbar").style.top = "-45px";
 
         $(".dropdown").addClass("nomouse");
 
         $(".dropdown").addClass("nomouse");
 
         $(".navigation").hide();
 
         $(".navigation").hide();
Line 60: Line 77:
 
});
 
});
  
−
/////////////////////////////////////////////////////////////
 
  
−
//SCROLLING JS//
 
−
/*
 
−
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>
 
</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
 
.nomouse
 
{
 
{
 
   pointer-events: none;
 
   pointer-events: none;
 
}
 
}
−
 
+
#globalWrapper {
 +
    font-size: 100% !important;
 +
}
 
.header-logo
 
.header-logo
 
{
 
{
Line 122: Line 114:
 
.hamburger {
 
.hamburger {
 
   position: fixed;
 
   position: fixed;
−
   top: 30px;
+
   top: 2.25em;
 
   right: 0;
 
   right: 0;
 
   cursor: pointer;
 
   cursor: pointer;
Line 233: Line 225:
 
.menu-header p
 
.menu-header p
 
{
 
{
 +
        font-size: 1.1em !important;
 
display: flex;
 
display: flex;
 
flex-direction: row;
 
flex-direction: row;
Line 323: Line 316:
 
     font-family: 'Material Icons';
 
     font-family: 'Material Icons';
 
     font-style: normal;
 
     font-style: normal;
−
     font-weight: 400;
+
     font-weight: 400;  
−
     src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+
     src: url('https://static.igem.org/mediawiki/2018/8/81/T--WLC-Milwaukee--MaterialIcons-Regular.woff') format('woff');
−
    src: local('Material Icons'),
+
−
      local('MaterialIcons-Regular'),
+
−
      url(MaterialIcons-Regular.woff2) format('woff2'),
+
−
      url(MaterialIcons-Regular.woff) format('woff'),
+
−
      url(MaterialIcons-Regular.ttf) format('truetype');
+
 
   }
 
   }
 
/*END ICONS*/
 
/*END ICONS*/
Line 335: Line 323:
 
@font-face {
 
@font-face {
 
     font-family: 'Open Sans';
 
     font-family: 'Open Sans';
−
     src: url('OpenSans-Bold.woff2') format('woff2'),
+
     src: url('https://static.igem.org/mediawiki/2018/4/4d/T--WLC-Milwaukee--OpenSans-Bold.woff') format('woff');
−
        url('OpenSans-Bold.woff') format('woff');
+
 
     font-weight: bold;
 
     font-weight: bold;
 
     font-style: normal;
 
     font-style: normal;
Line 343: Line 330:
 
@font-face {
 
@font-face {
 
     font-family: 'Open Sans';
 
     font-family: 'Open Sans';
−
    src: url('OpenSans-Regular.woff2') format('woff2'),
+
    src: url('https://static.igem.org/mediawiki/2018/5/55/T--WLC-Milwaukee--OpenSans-Regular.woff') format('woff');
−
        url('OpenSans-Regular.woff') format('woff');
+
 
     font-weight: normal;
 
     font-weight: normal;
 
     font-style: normal;
 
     font-style: normal;
Line 351: Line 337:
 
@font-face {
 
@font-face {
 
     font-family: 'Arimo';
 
     font-family: 'Arimo';
−
     src: url('Arimo-Regular.woff2') format('woff2'),
+
     src:   url('https://static.igem.org/mediawiki/2018/d/d7/T--WLC-Milwaukee--Arimo-Regular.woff') format('woff');
−
        url('Arimo-Regular.woff') format('woff');
+
 
     font-weight: normal;
 
     font-weight: normal;
 
     font-style: normal;
 
     font-style: normal;
Line 359: Line 344:
 
@font-face {
 
@font-face {
 
     font-family: 'Arimo';
 
     font-family: 'Arimo';
−
     src: url('Arimo-Bold.woff2') format('woff2'),
+
     src: url('https://static.igem.org/mediawiki/2018/b/bb/T--WLC-Milwaukee--Arimo-Bold.woff') format('woff');
−
        url('Arimo-Bold.woff') format('woff');
+
 
     font-weight: bold;
 
     font-weight: bold;
 
     font-style: normal;
 
     font-style: normal;
 
}
 
}
  
−
@font-face {
 
−
    font-family: 'Open Sans';
 
−
    src: url('OpenSans-Italic.woff2') format('woff2'),
 
−
        url('OpenSans-Italic.woff') format('woff');
 
−
    font-weight: normal;
 
−
    font-style: italic;
 
−
}
 
  
−
@font-face {
 
−
    font-family: 'Arimo';
 
−
    src: url('Arimo-Italic.woff2') format('woff2'),
 
−
        url('Arimo-Italic.woff') format('woff');
 
−
    font-weight: normal;
 
−
    font-style: italic;
 
−
}
 
  
  
Line 395: Line 365:
 
     height: 100%;
 
     height: 100%;
 
     min-width: 330px;
 
     min-width: 330px;
−
 
 
   }
 
   }
 
    
 
    
Line 402: 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 412: Line 382:
 
     flex-shrink: 0;
 
     flex-shrink: 0;
 
   }
 
   }
−
 
−
 
−
 
  
 
body{
 
body{
Line 425: Line 392:
 
   max-width: 55em;
 
   max-width: 55em;
 
   margin: 5vmax auto;
 
   margin: 5vmax auto;
 +
  margin-top: 10vmax;
 
   padding: 0 4vmax;
 
   padding: 0 4vmax;
 
}
 
}
Line 467: 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 572: Line 540:
 
       display: none;
 
       display: none;
 
       position: fixed;
 
       position: fixed;
−
       top: calc(4em+10px);
+
       top: 5.1em;
 
       background-color: var(--primary-color);
 
       background-color: var(--primary-color);
 
       min-width: 160px;
 
       min-width: 160px;
Line 646: Line 614:
 
<!--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 652: 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 665: 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 675: 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 686: 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 702: 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 719: 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 735: 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 748: 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 762: 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>

Latest revision as of 02:13, 18 October 2018

PLACEHOLDER