|
|
Line 1: |
Line 1: |
− | {{NAIT_Edmonton/CSS2}} | + | {{NAIT_Edmonton/CSS3}} |
− | | + | |
| <html> | | <html> |
| | | |
| <head> | | <head> |
| | | |
| + | |
| + | <title>Team NAIT 2015</title> |
| | | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> | | <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> |
| + | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
| + | <script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&ctype=text/javascript"></script> |
| | | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
Line 37: |
Line 40: |
| </script> | | </script> |
| | | |
− | </head>
| |
| | | |
− | <body> | + | <!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf-------------------> |
| | | |
− | <style type="text/css">
| |
| | | |
− | /* Modal */ | + | <script type="text/javascript"> |
− | .modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;z-index:999;} | + | $(document).ready(function() { |
− | .modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;} | + | // grab the initial top offset of the navigation |
− | .modal-state { display: none;}
| + | var stickyNavTop = $('.nav').offset().top; |
− | .modal-state:checked + .modal {opacity: 1;visibility: visible;} | + | |
− | .modal-state:checked + .modal .modal__inner {top: 0;}
| + | // our function that decides weather the navigation bar should have "fixed" css position or not. |
− | .modal__inner {transition: top .25s ease;position: absolute;top: -20%; right: 0;bottom: 0;left: 0;width: 750px;margin: auto;overflow: auto;background:#FFFFFF;border-radius: 0px;padding: 1em 2em;height: 458px;} | + | var stickyNav = function(){ |
− | .modal__close {position: absolute;right: 1em;top: 1em;width: 1.1em;height: 1.1em;cursor: pointer;}
| + | var scrollTop = $(window).scrollTop(); // our current vertical position from the top |
− | .modal__close:after,
| + | |
− | .modal__close:before {content: '';position: absolute;width: 2px;height: 1.5em;background: #ccc;display: block;transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
| + | // if we've scrolled more than the navigation, change its position to fixed to stick to top, |
− | .modal__close:hover:after, | + | // otherwise change it back to relative |
− | .modal__close:hover:before {background: #aaa;} | + | if (scrollTop > stickyNavTop) { |
− | .modal__close:before {transform: rotate(-45deg);}
| + | $('.nav').addClass('sticky'); |
| + | } else { |
| + | $('.nav').removeClass('sticky'); |
| + | } |
| + | }; |
| | | |
− | @media screen and (max-width: 750px) {
| + | stickyNav(); |
− |
| + | // and run it again every time you scroll |
− | .modal__inner {width: 90%;height: 90%;box-sizing: border-box;}
| + | $(window).scroll(function() { |
− | } | + | stickyNav(); |
| + | }); |
| + | }); |
| + | </script> |
| | | |
| + | <script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/StickyMenu?action=raw&ctype=text/javascript"></script> |
| | | |
− | /* Modal Mobile */ | + | <script type="text/javascript" charset="utf-8"> |
| | | |
− | .btn {cursor: pointer;background: none;display: inline-block;padding: none;color:none; border-radius: none;} | + | var $ = jQuery.noConflict(); |
− | .btn:hover, | + | $(window).load(function() { |
− | .btn:focus {background: none;} | + | $('.flexslider').flexslider({ |
− | .btn:active {background: none;}
| + | animation: "fade" |
− | p img {max-width: 200px;height: auto;float: left;margin: 0 1em 1em 0;}
| + | }); |
− | | + | }); |
− | </style> | + | </script> |
| | | |
| + | </head> |
| | | |
| + | <body> |
| | | |
| + | <div class="header"> |
| + | <center><a href="https://2015.igem.org/Team:NAIT_Edmonton"><img style="margin-top:10px;" src="https://static.igem.org/mediawiki/2015/c/c2/NAIT_Sample_Logo.png" height="75px"></a></center> |
| + | </div> |
| | | |
| | | |
− | <div id="header">
| + | <div class="nav"> |
− | <div class="header"> | + | |
| | | |
− | <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
| + | <div class="navigation"> |
− | <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
| + | <ul> |
− | </div>
| + | |
− | <div class="header_left">
| + | |
− | <ul>
| + | |
− |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a> |
| <ul> | | <ul> |
Line 93: |
Line 102: |
| </ul> | | </ul> |
| </li> | | </li> |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a> |
| <ul> | | <ul> |
Line 101: |
Line 111: |
| </ul> | | </ul> |
| </li> | | </li> |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="header_right">
| + | |
− | <ul>
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a> |
| <ul> | | <ul> |
Line 113: |
Line 120: |
| </ul> | | </ul> |
| </li> | | </li> |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a> |
| <ul> | | <ul> |
Line 120: |
Line 128: |
| </ul> | | </ul> |
| </li> | | </li> |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
| | | |
− | <div id="wrap"> | + | </ul> |
| | | |
| + | </div> |
| | | |
| + | </div> |
| | | |
− | <style type="text/css">
| |
| | | |
− | .header_mobile {
| |
− | display:none;
| |
− | position: absolute;
| |
− | background-color:transparent;
| |
− | width:65px;
| |
− | top: 90px;
| |
− | left:50px;
| |
− | height:65px;
| |
− | z-index:999;
| |
− | position:fixed;}
| |
| | | |
− | .header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
| + | </style> |
− | .header_mobile ul * {margin:0; padding:0;}
| + | |
− | .header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
| + | <div id="wrap"> |
− | .header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
| + | |
− | .header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
| + | |
− | .header_mobile li.current-menu-item {background:#5AB3E3}
| + | |
− | .header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
| + | |
− | .header_mobile ul ul li:hover{background:#159CD8}
| + | |
− | .header_mobile ul ul li{float:none; width:120px}
| + | |
− | .header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
| + | |
− | .header_mobile ul ul ul {top:0; left:200%}
| + | |
− | .header_mobile ul li.selected a{color:#8BC5EB}
| + | |
− | .header_mobile ul li:hover > ul{display:block;}
| + | |
| | | |
| | | |
− | @media screen and (max-width:1000px){
| |
| | | |
− | .header_left{display:none;}
| + | <style type="text/css"> |
− | .header_right{display:none;}
| + | |
− | .header_mobile{display:block;}
| + | |
| | | |
− | | + | .top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;} |
− | } | + | |
| | | |
| /*----- Accordion -----*/ | | /*----- Accordion -----*/ |
Line 223: |
Line 205: |
| | | |
| <div class="main_content"> | | <div class="main_content"> |
− |
| |
− | <!--------------------------MUST EDIT THIS PAGE, ALL CONTENT IS TAKEN FROM ETH ZURICH LAB SAFETY PAGE---------------->
| |
− |
| |
| | | |
| <div class="accordion"> | | <div class="accordion"> |
Line 336: |
Line 315: |
| </div> | | </div> |
| | | |
− |
| |
− | </div>
| |
| | | |
| + | |
| + | </div> |
| | | |
| | | |
| <div class="clear"></div> | | <div class="clear"></div> |
| | | |
− |
| |
− | <div class="header_mobile">
| |
− | <ul>
| |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/MobileMenu">menu</a>
| |
− | <ul>
| |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
| |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
| |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
| |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
| |
− | </ul>
| |
− | </li>
| |
− |
| |
− | </ul>
| |
− | </div>
| |
| | | |
| </div> | | </div> |
| | | |
− | <div class="footer">
| + | |
| + | |
| + | </div> |
| + | |
| + | <div class="clear"></div> |
| + | |
| + | |
| + | |
| + | <div class="footer"> |
| <div class="footer_content"> | | <div class="footer_content"> |
| <div class="footer_left"> | | <div class="footer_left"> |
Line 380: |
Line 353: |
| </div> | | </div> |
| <div class="clear"></div> | | <div class="clear"></div> |
− | | + | </div> |
− | </div> | + | </div> |
| | | |
| <style type="text/css"> | | <style type="text/css"> |
| | | |
| #footer {z-index:15;} | | #footer {z-index:15;} |
− | .footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;} | + | .footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;} |
| .footer_content {margin:auto;width:100%;} | | .footer_content {margin:auto;width:100%;} |
| .footer_left { float:left; padding:0 0 0 10%;} | | .footer_left { float:left; padding:0 0 0 10%;} |
Line 404: |
Line 377: |
| </style> | | </style> |
| | | |
− | </body>
| |
| | | |
| + | |
| + | </body> |
| | | |
| </html> | | </html> |