|
|
| (85 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | </div></div></div></div></div>
| |
| − | <meta charset="utf-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
| |
| − | <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
| |
| − |
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <style type="text/css">
| |
| − | @media (max-width: 920px) {
| |
| − | .navbar-header {
| |
| − | float: none;
| |
| − | }
| |
| − | .navbar-left,.navbar-right {
| |
| − | float: none !important;
| |
| − | }
| |
| − | .navbar-toggle {
| |
| − | display: block;
| |
| − | }
| |
| − | .navbar-collapse {
| |
| − | box-shadow: inset 0 0 0 rgba(255,255,255,0.1);
| |
| − | }
| |
| − | .navbar-fixed-top {
| |
| − | top: 0;
| |
| − | border-width: 0 0 1px;
| |
| − | }
| |
| − | .navbar-collapse.collapse {
| |
| − | display: none!important;
| |
| − | }
| |
| − |
| |
| − | .navbar-nav {
| |
| − | float: none!important;
| |
| − | margin-top: 7.5px;
| |
| − | }
| |
| − | .navbar-nav>li {
| |
| − | float: none;
| |
| − | }
| |
| − | .navbar-nav>li>a {
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − | .collapse.in{
| |
| − | display:block !important;
| |
| − | }
| |
| − | }
| |
| − | #links{
| |
| − | color:#47BCC2;
| |
| − | font-size:20px;
| |
| − | line-height:0px;
| |
| − | padding-top:28px;
| |
| − | }
| |
| | | | |
| − | #links:hover{
| |
| − | color:#339499;
| |
| − | }
| |
| − | #links:active{
| |
| − | color:#339499;
| |
| − | }
| |
| − | .navbar{
| |
| − | background-color:#e8e8e8;
| |
| − | border-bottom:none;
| |
| − | min-height:54px;
| |
| − | margin:4px 0 0 0;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
| |
| − | background-color:#47BCC2;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
| |
| − | border:none;
| |
| − | background-color:#4e4e4e;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
| |
| − | border:none;
| |
| − | background-color:#4e4e4e;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
| |
| − | border:none;
| |
| − | background-color:#4e4e4e;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle:hover {
| |
| − | background-color:#4e4e4e;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
| |
| − | background-color:#4e4e4e;
| |
| − | }
| |
| − | .navbar-inverse .navbar-toggle:hover .icon-bar{
| |
| − | background-color:#eeeeee;
| |
| − | }
| |
| − | /*soc classes controll css for media icons*/
| |
| − | #soc{
| |
| − | margin-top:-12px;
| |
| − |
| |
| − | }
| |
| − | /****Social Media navbar icons****/
| |
| − | /*youtube*/
| |
| − | #soc_1{
| |
| − | margin-right:3px;
| |
| − | height:50px;
| |
| − | width:48px;
| |
| − | }
| |
| − | /*facebook*/
| |
| − | #soc_2{
| |
| − | margin-right:3px;
| |
| − | height:50px;
| |
| − | width:48px;
| |
| − | }
| |
| − | /*Twitter*/
| |
| − | #soc_3{
| |
| − | margin-right:3px;
| |
| − | margin-right:18px;
| |
| − | height:50px;
| |
| − | width:48px;
| |
| − | }
| |
| − | /*Navbar exgem logo styling*/
| |
| − | #logo{
| |
| − | margin-top:-12px;
| |
| − | vertical-align:middle;
| |
| − | width:48px;
| |
| − | height:48px;
| |
| − | }
| |
| − | /*Displays brand inline with ExGem*/
| |
| − | .navbar-brand > img {
| |
| − | display: inline;
| |
| − | }
| |
| − | .navbar-right a{
| |
| − | height:50px;
| |
| − | width:48px;
| |
| − | }
| |
| − | #Top_link.navbar-brand{/*Top link styling*/
| |
| − | color:#47BCC2;
| |
| − | font-size:25px;
| |
| − | margin-bottom:5px;
| |
| − | opacity:0.6
| |
| − | }
| |
| − | #topnav{
| |
| − | padding-bottom:0px;
| |
| − | position:fixed;
| |
| − | }
| |
| − | #topnav (max-width: 767px) {
| |
| − | display:none;
| |
| − | }
| |
| − | #text{/*Top link text*/
| |
| − | color:#47BCC2;
| |
| − | }
| |
| − | #myNavbar{
| |
| − | border: none;
| |
| − | }
| |
| − | /*sticky footer*/
| |
| − | .wrap {
| |
| − | min-height: 100%;
| |
| − | margin-bottom: -65px; /* equal to footer height */
| |
| − | }
| |
| − | .wrap:after {
| |
| − | content: "";
| |
| − | display: block;
| |
| − | }
| |
| − | .footer, .wrap:after {
| |
| − | height: 60px;
| |
| − | padding-top:5px;
| |
| − | }
| |
| − | .flare .wrap:after{
| |
| − | height:5px;
| |
| − | }
| |
| − | .flare{
| |
| − | background-color:#8cd5d9;
| |
| − | padding-top:3px;
| |
| − | position:relative;
| |
| − | bottom:0px;
| |
| − | width:100%;
| |
| − | }
| |
| − | .footer{
| |
| − | background-color:#e8e8e8;
| |
| − | }
| |
| − | /*Hides igm logo and team name*/
| |
| − | #sideMenu, #top_title {display:none;}
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
| |
| − | #top_title{visibility: hidden; background:#eeeeee;}
| |
| − | #bodyContent{background:#eeeeee;}
| |
| − | #mw-content-text{background:#eeeeee;}
| |
| − | #HQ_page{background:none; height:0px; width:0px;}
| |
| − | #content{background:none;}
| |
| − | #globalWrapper{height:0px;background:#eeeeee;}
| |
| − | /*end of hacky css :) */
| |
| − | /*There is a <p></p> at bottom of iGEM page. In order to keep footer*/
| |
| − | /*On bottom of page we have styled <p> tags to have no margin or border*/
| |
| − | /*Therefore on all of our paragraphs need to id "pp" to work properly*/
| |
| − | p{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | border-style:none;
| |
| − | }
| |
| − | #pp{
| |
| − | padding-top:3%;
| |
| − | padding-left:5%;
| |
| − | padding-right:5%;
| |
| − | padding-bottom:1%;
| |
| − | font-size:150%;
| |
| − | }
| |
| − | /**page content styling starts**/
| |
| − | body{
| |
| − | background-color:#eeeeee;
| |
| − | }
| |
| − | h1{
| |
| − | text-align:center;
| |
| − | border-style:none;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <nav id="Top" class="navbar navbar-inverse navbar-static-top">
| |
| − | <div class="container-fluid">
| |
| − | <div class="navbar-header">
| |
| − | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
| |
| − | <span class="icon-bar"></span>
| |
| − | <span class="icon-bar"></span>
| |
| − | <span class="icon-bar"></span>
| |
| − | </button>
| |
| − | <a class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
| |
| − | <img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
| |
| − | </a>
| |
| − |
| |
| − | </div>
| |
| − | <div>
| |
| − | <div class="collapse navbar-collapse" id="myNavbar">
| |
| − | <ul class="nav navbar-nav">
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter">Project</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
| |
| − | <li ><a id="links" href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
| |
| − | <li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
| |
| − | </ul>
| |
| − | <ul class="nav navbar-nav navbar-right" >
| |
| − | <li class="media_icon" id="soc_1">
| |
| − | <a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
| |
| − | <img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
| |
| − | </a>
| |
| − | </li>
| |
| − | <li class="media_icon" id="soc_2">
| |
| − | <a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
| |
| − | <img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
| |
| − | </a>
| |
| − | </li>
| |
| − | <li class="media_icon" id="soc_3">
| |
| − | <a href="https://twitter.com/exeter_igem">
| |
| − | <img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </nav>
| |
| − | <div style="height:3px; background-color:#8cd5d9; margin-top:0px;" ></div>
| |
| − | <!--div below contains a rolling counter for scrolling position-->
| |
| − | <div id="scrollPosition" style="display:none;">0</div>
| |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − | //topnav script
| |
| − | var width = document.documentElement.clientWidth;
| |
| − | console.log(width, "Hello, world!");
| |
| − | if (width > 539){
| |
| − | $( window ).scroll(function(){
| |
| − | //id scrollPosition links to a hidden div at top of html that
| |
| − | //constantly counts the pixels you have scrolled down.
| |
| − | //Any other solution only worked when page is refreshed.
| |
| − | $('#scrollPosition').html($( window ).scrollTop());
| |
| − | //Handles #topnav at bottom of page
| |
| − | var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight;
| |
| − | var boxHeight = $("#topnav").height();
| |
| − | var manualPaddingbot = 5;
| |
| − | var padding = boxHeight - distHeight + manualPaddingbot;
| |
| − | //Causes #topnav to be a variable height from bottom when
| |
| − | //footer is in view, and a fixed position on screen when
| |
| − | //footer is out of view
| |
| − | if (distHeight <= boxHeight){
| |
| − | $("#topnav").css("bottom",(padding + manualPaddingbot));
| |
| − | }
| |
| − | if (distHeight > boxHeight){
| |
| − | $("#topnav").css("bottom",manualPaddingbot);
| |
| − | }
| |
| − | })
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − | <!--Counter and topnav ends-->
| |
| − | <!--Content begins-->
| |
| − |
| |
| − |
| |
| − | <!--Content Ends-->
| |
| − | <nav id="topnav" class="nav-navbar" style="right:2px;">
| |
| − | <div class="container-fluid">
| |
| − | <div class="navbar-header">
| |
| − | <a class="navbar-brand" id="Top_link" href="#Top">
| |
| − | <span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
| |
| − | </a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </nav>
| |
| − | <div class="flare"></div>
| |
| − | <footer class="footer">
| |
| − | <a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
| |
| − | <img style="padding-left:3%" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
| |
| − | </a>
| |
| − | <a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
| |
| − | </a>
| |
| − | <a href="https://twitter.com/exeter_igem">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
| |
| − | </a>
| |
| − | </footer>
| |
| − | <!--numbr 1: i cant get your toplink to show number 2: weird grey bar on toggle menue-->
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
