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

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 65: Line 63:
 
   <!--HEADER STYLE-->
 
   <!--HEADER STYLE-->
 
   <style>
 
   <style>
 +
 +
.nomouse
 +
{
 +
  pointer-events: none;
 +
}
 +
 +
.header-logo
 +
{
 +
margin: -12px;
 +
}
 +
 +
@media screen and (max-width: 800px) {
 +
  .header-logo{
 +
   
 +
  }
 +
}
 +
 +
.hamburger {
 +
  position: fixed;
 +
  top: 20px;
 +
  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
 +
{
 +
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(MaterialIcons-Regular.eot); /* For IE6-8 */
 +
    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*/
 +
 +
@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url('OpenSans-Bold.woff2') format('woff2'),
 +
        url('OpenSans-Bold.woff') format('woff');
 +
    font-weight: bold;
 +
    font-style: normal;
 +
}
 +
 +
@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url('OpenSans-Regular.woff2') format('woff2'),
 +
        url('OpenSans-Regular.woff') format('woff');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
 +
@font-face {
 +
    font-family: 'Arimo';
 +
    src: url('Arimo-Regular.woff2') format('woff2'),
 +
        url('Arimo-Regular.woff') format('woff');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
 +
@font-face {
 +
    font-family: 'Arimo';
 +
    src: url('Arimo-Bold.woff2') format('woff2'),
 +
        url('Arimo-Bold.woff') format('woff');
 +
    font-weight: bold;
 +
    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;
 +
}
 +
  
 
/*Main Vars*/
 
/*Main Vars*/

Revision as of 05:56, 13 October 2018

PLACEHOLDER