Difference between revisions of "Team:TUDelft/HeaderGrnbl"

 
(14 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
     <!-- Mobile Specific Metas
 
     <!-- Mobile Specific Metas
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
−
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
<!--    <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
 +
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 +
 
  
 
     <!-- FONT
 
     <!-- FONT
Line 22: Line 24:
 
     <!-- CSS
 
     <!-- CSS
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
−
 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
Line 32: Line 33:
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
     <script src="https://use.fontawesome.com/b31c04f526.js"></script>
 
     <script src="https://use.fontawesome.com/b31c04f526.js"></script>
 +
  
 
     <!-- KATEX
 
     <!-- KATEX
Line 85: Line 87:
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/7/75/T--TUDelft--2018_adope_logo.png" />
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/7/75/T--TUDelft--2018_adope_logo.png" />
 +
   
 +
        <style>
 +
    @media screen and (min-width: 768px){
 +
    CSS
 +
}
 +
    #custom-nav {
 +
    background-color: rgba(0,108,132,1);
 +
    border: 0;
 +
    box-shadow: none;
 +
    z-index: 999;
 +
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
 +
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
 +
    transition: background .5s ease-in-out, opacity .5s ease;
 +
    margin-right: -15px;
 +
}
 +
    #custom-nav .dropdown-menu {
 +
    border-radius: 0;
 +
    border: none;
 +
    border-top: 5px solid transparent;
 +
    background-color: rgba(0,108,132,1);
 +
    -webkit-box-shadow: none;
 +
    box-shadow: none;
 +
    padding-top: 0;
 +
}
 +
    #custom-nav .container {
 +
    padding-top: 25px;
 +
    padding-bottom: 25px;
 +
    -webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
 +
    -moz-transition: padding-top .5s ease, padding-bottom .5s ease;
 +
    transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;
 +
}
 +
    #custom-nav.affix {
 +
    top: 0;
 +
    min-width: 100%;
 +
    background-color: rgba(0,108,132,0.7);
 +
  /* opacity: 0.9; */
 +
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
 +
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
 +
    transition: background .5s ease-in-out, opacity .5s ease;
 +
margin-right: 15px;
 +
}
 +
    @media screen and (max-width: 767px){
 +
    #wrapwrap {
 +
        padding-top: 50px;
 +
    }
 +
    .navbar-fixed-top {
 +
        z-index: 999;
 +
    }
 +
}
 +
  
−
    <style>
 
 
      
 
      
−
    /* navbar */
+
/* navbar  
 
.navbar-default {
 
.navbar-default {
−
     background-color: #00B4C7;
+
     background-color: #006C84;
−
     border-color: #F8F8F8;
+
     border-color: #E7E7E7;
−
}
+
}*/
 +
 
 
/* Title */
 
/* Title */
 
.navbar-default .navbar-brand {
 
.navbar-default .navbar-brand {
−
     color: #0092CB;
+
     color: #FFFFFF;
 
}
 
}
 
.navbar-default .navbar-brand:hover,
 
.navbar-default .navbar-brand:hover,
 
.navbar-default .navbar-brand:focus {
 
.navbar-default .navbar-brand:focus {
−
     color: #777777;
+
     color: #5E5E5E;
 
}
 
}
 
/* Link */
 
/* Link */
Line 107: Line 159:
 
.navbar-default .navbar-nav > li > a:hover,
 
.navbar-default .navbar-nav > li > a:hover,
 
.navbar-default .navbar-nav > li > a:focus {
 
.navbar-default .navbar-nav > li > a:focus {
−
     color: #777777;
+
     color: #D3D3D3;
 
}
 
}
 
.navbar-default .navbar-nav > .active > a,
 
.navbar-default .navbar-nav > .active > a,
 
.navbar-default .navbar-nav > .active > a:hover,
 
.navbar-default .navbar-nav > .active > a:hover,
 
.navbar-default .navbar-nav > .active > a:focus {
 
.navbar-default .navbar-nav > .active > a:focus {
−
     color: #777777;
+
     color: #D3D3D3;
 
     background-color: #E7E7E7;
 
     background-color: #E7E7E7;
 
}
 
}
Line 118: Line 170:
 
.navbar-default .navbar-nav > .open > a:hover,
 
.navbar-default .navbar-nav > .open > a:hover,
 
.navbar-default .navbar-nav > .open > a:focus {
 
.navbar-default .navbar-nav > .open > a:focus {
−
     color: #777777;
+
     color: #D3D3D3;
−
     background-color: #00B4C7;
+
     background-color: #005467;
 
}
 
}
 
/* Caret */
 
/* Caret */
Line 128: Line 180:
 
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
 
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
 
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
 
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
−
     border-top-color: #777777;
+
     border-top-color: #D3D3D3;
−
     border-bottom-color: #777777;
+
     border-bottom-color: #D3D3D3;
 
}
 
}
 
.navbar-default .navbar-nav > .open > a .caret,
 
.navbar-default .navbar-nav > .open > a .caret,
 
.navbar-default .navbar-nav > .open > a:hover .caret,
 
.navbar-default .navbar-nav > .open > a:hover .caret,
 
.navbar-default .navbar-nav > .open > a:focus .caret {
 
.navbar-default .navbar-nav > .open > a:focus .caret {
−
     border-top-color: #777777;
+
     border-top-color: #D3D3D3;
−
     border-bottom-color: #777777;
+
     border-bottom-color: #D3D3D3;
 
}
 
}
 
/* Mobile version */
 
/* Mobile version */
 
.navbar-default .navbar-toggle {
 
.navbar-default .navbar-toggle {
−
     border-color: #FFFFFF;
+
     border-color: #FFF;
 
}
 
}
 
.navbar-default .navbar-toggle:hover,
 
.navbar-default .navbar-toggle:hover,
Line 146: Line 198:
 
}
 
}
 
.navbar-default .navbar-toggle .icon-bar {
 
.navbar-default .navbar-toggle .icon-bar {
−
     background-color: #FFFFFF;
+
     background-color: #FFF;
 
}
 
}
 
@media (max-width: 767px) {
 
@media (max-width: 767px) {
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
−
         color: #777;
+
         color: #FFFFFF;
 
     }
 
     }
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
−
           color: #333;
+
           color: #FFFFFF;
 
     }
 
     }
 
}
 
}
 +
 +
 
      
 
      
 
     </style>
 
     </style>
−
      
+
<script>
−
      
+
$(window).scroll(function() {
 +
     if ($(".navbar").offset().top > 50) {
 +
        $('#custom-nav').addClass('affix');
 +
        $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
     } else {
 +
        $('#custom-nav').removeClass('affix');
 +
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
    } 
 +
});
 +
</script>
 +
 
 
</head>
 
</head>
 
<body>
 
<body>
  
 
<header>
 
<header>
−
<nav id="mynavi" class="navbar navbar-default navbar-fixed-top" >
+
 
 +
<nav class="navbar navbar-default navbar-fixed-top" id="custom-nav" style="margin:15px;">
 
<div class="container-fluid">
 
<div class="container-fluid">
  
Line 197: Line 262:
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Design">Design</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Design">Design</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Results">Results</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Results">Results</a></li>
−
     <li><a href="https://2018.igem.org/Team:TUDelft/Demonstration">Demonstration</a></li>
+
     <li><a href="https://2018.igem.org/Team:TUDelft/Demonstrate">Demonstration</a></li>
 +
    <!-- <li><a href="https://2018.igem.org/Team:TUDelft/Medals">Medal Requirements</a></li>
 +
    <li><a href="https://igem.org/2018_Judging_Form?team=TUDelft">Judging form</a></li>  -->
 
     </ul>
 
     </ul>
 
</li>
 
</li>
Line 208: Line 275:
 
     <li><a href="https://2018.igem.org/Team:TUDelft/InterLab">InterLab</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/InterLab">InterLab</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Safety">Safety</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Safety">Safety</a></li>
−
  </ul>
+
    <li><a href="https://2018.igem.org/Team:TUDelft/Measurement">Measurement</a></li>
 +
</ul>
 
</li>
 
</li>
 
<!-- Parts -->
 
<!-- Parts -->
Line 218: Line 286:
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Composite_Parts">Composite Parts</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Composite_Parts">Composite Parts</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Part_Collection">Part Collection</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Part_Collection">Part Collection</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Primers">Sequences</a></li>
 
   </ul>
 
   </ul>
 
</li>   
 
</li>   
Line 246: Line 315:
 
   <ul class="dropdown-menu">
 
   <ul class="dropdown-menu">
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Team">Team Members</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Team">Team Members</a></li>
−
    <li><a href="https://2018.igem.org/Team:TUDelft/Supervisors">Supervisors</a></li>
 
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Collaborations">Collaborations</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Collaborations">Collaborations</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Contributions">Contributions</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Team_Building">Team Building</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Team_Building">Team Building</a></li>
 
   </ul>
 
   </ul>
Line 257: Line 326:
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Attributions">Attributions</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Attributions">Attributions</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Sponsors">Sponsors</a></li>
 
     <li><a href="https://2018.igem.org/Team:TUDelft/Sponsors">Sponsors</a></li>
−
    <li><a href="https://2018.igem.org/Team:TUDelft/Crowdfunding">Crowdfunding</a></li>
 
 
   </ul>
 
   </ul>
 
</li>
 
</li>
 +
    <!-- awards -->
 +
<li class="dropdown">
 +
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-trophy"></i><span class="caret"></span></a>
 +
  <ul class="dropdown-menu">
 +
    <li><a href="https://igem.org/2018_Judging_Form?team=TUDelft">Judging form</a></li> 
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Medals">Medal Requirements</a></li>
 +
    <li><a href="https://2018.igem.org/Team:TUDelft/Awards">Awards</a></li>
 +
  </ul>
 +
</li>
 
</ul>
 
</ul>
 
</div><!-- /.navbar-collapse -->
 
</div><!-- /.navbar-collapse -->

Latest revision as of 11:54, 28 November 2018

ADOPE