|
|
Line 1: |
Line 1: |
| + | |
| + | {{INSA-UPS_France/Links_new}} |
| + | {{INSA-UPS_France/Style_new}} |
| + | {{INSA-UPS_France/Header_new}} |
| <html> | | <html> |
− | <head>
| |
− | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
| |
− | <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Quicksand:300,400,500,700" rel="stylesheet">
| |
− | <script type="text/javascript" src="jquery.js"></script>
| |
− | </head>
| |
− | <body>
| |
| <style> | | <style> |
− | *{
| |
− | margin:0;
| |
− | padding:0;
| |
− | }
| |
− | html, body, .site{
| |
− | height:100%;
| |
− | position:relative;
| |
− | overflow: hidden;
| |
− | }
| |
− | body {
| |
− | margin: 0;
| |
− | font: 400 16px/1.5 'Open Sans', Roboto, Arial, sans-serif;
| |
− | }
| |
− | a {
| |
− | -webkit-transition: 0.2s ease-in-out;
| |
− | transition: 0.2s ease-in-out;
| |
− | }
| |
| | | |
− | .site-header {
| |
− | background: #323537;
| |
− | padding: 1.25em 0;
| |
− | z-index:100;
| |
− | }
| |
− | .site-header > .container {
| |
− | height:50px;
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-pack: justify;
| |
− | -ms-flex-pack: justify;
| |
− | justify-content: space-between;
| |
− | -webkit-box-align: center;
| |
− | -ms-flex-align: center;
| |
− | align-items: center;
| |
− | }
| |
− | .site-header > nav{
| |
− | }
| |
− | .site-header__title {
| |
− | vertical-align: middle;
| |
− | margin: 0;
| |
− | color: #eee;
| |
− | text-decoration: none;
| |
− | font: 700 1.5em/1.25 "Quicksand", sans-serif;
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | .site-header__title:hover,
| |
− | .site-header__title:focus {
| |
− | color: #99c18e;
| |
− | }
| |
− | .site-menu__item {
| |
− | color: #eee;
| |
− | text-decoration: none;
| |
− | font: 300 1.25em/1.25 "Quicksand", sans-serif;
| |
− | display:inline-block;
| |
− | }
| |
− | .cat_name{
| |
− | text-transform: uppercase;
| |
− | cursor: pointer;
| |
− | }
| |
− | .site-menu__item:hover,
| |
− | .site-menu__item:focus {
| |
− | color: #99c18e;
| |
− | }
| |
− | .site-menu__item + .site-menu__item {
| |
− | /*margin-left: 3em;*/
| |
− | }
| |
− | .site-menu__item{
| |
− | display:none;
| |
− | }
| |
− |
| |
− | .site-menu__item#scroll_down{
| |
− | display:inline-block;
| |
− | text-align: center;
| |
− | }
| |
− | .js-sticky.is-sticky .site-menu__item{
| |
− | display:inline-block;
| |
− | }
| |
− | .js-sticky.is-sticky .site-menu__item#scroll_down{
| |
− | display:none;
| |
− | }
| |
− |
| |
− | .js-sticky.is-sticky nav.site-menu{
| |
− | height:100%;
| |
− | width:60%;
| |
− | }
| |
− |
| |
− | div.site-menu__item{
| |
− | position:relative;
| |
− | width:17%;
| |
− | }
| |
− | div.cat_name{
| |
− | line-height: 50px;
| |
− | height:50px;
| |
− | }
| |
− | div.site-menu__item.no-subnav{
| |
− | width:auto;
| |
− | }
| |
− |
| |
− | ul.subnav{
| |
− | position:absolute;
| |
− | top:70px;
| |
− | right:0px;
| |
− | background:#323537;
| |
− | width:100%;
| |
− | max-height:0;
| |
− | overflow: hidden;
| |
− | transition: max-height 400ms ease;
| |
− | z-index:300;
| |
− | }
| |
− | ul.subnav li{
| |
− | list-style-type: none;
| |
− | padding:10px;
| |
− | }
| |
− | .site-menu__item a, .site-menu__item a:visited, .site-menu__item a:active{
| |
− | text-decoration: none;
| |
− | color:white;
| |
− | }
| |
− | .site-menu__item a:hover{
| |
− | color: #99c18e;
| |
− | }
| |
| main{ | | main{ |
| position:relative; | | position:relative; |
Line 133: |
Line 11: |
| height:100%; | | height:100%; |
| } | | } |
− | /*
| |
− | footer{
| |
− | background: #323537;
| |
− | width:100%;
| |
− | height:200px;
| |
− |
| |
− | }*/
| |
| | | |
| .main_content{ | | .main_content{ |
Line 182: |
Line 53: |
| | | |
| <!-- C O N T E N T --> | | <!-- C O N T E N T --> |
− |
| + | |
− | <div class="site">
| + | |
− | <header class="site-header js-sticky is-sticky">
| + | |
− | | + | |
− | <div class="container" style="position:relative; ">
| + | |
− | <a href="#" class="site-header__title">
| + | |
− | <img src="logo.png" alt="" style="width:70px;">
| + | |
− | </a>
| + | |
− | <div class="site-header__title">
| + | |
− | Croc'n Cholera <br/>
| + | |
− | <span style="font-size:12pt;">iGEM UPS-INSA Toulouse 2017</span>
| + | |
− | </div>
| + | |
− | | + | |
− | <nav class="site-menu" style="text-align: center;">
| + | |
− |
| + | |
− | <div class="site-menu__item no-subnav">
| + | |
− | <a href="index3.html"><i class="fa fa-home"></i></a>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item">
| + | |
− | <div class="cat_name">Team <i class="fa fa-caret-down"></i></div>
| + | |
− | <ul class="subnav">
| + | |
− | <li><a href="members.html">Members</a></li>
| + | |
− | <li><a href="supports.html">Supports</a></li>
| + | |
− | <li><a href="attributions.html">Attributions</a></li>
| + | |
− | <li><a href="funfacts.html">Fun facts</a></li>
| + | |
− | <li><a href="collaborations.html">Collaborations</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item">
| + | |
− | <div class="cat_name">Project <i class="fa fa-caret-down"></i></div>
| + | |
− | <ul class="subnav">
| + | |
− | <li><a href="description.html">Description</a></li>
| + | |
− | <li><a href="design.html">Design</a></li>
| + | |
− | <li><a href="results.html">Results</a></li>
| + | |
− | <li><a href="parts.html">Parts</a></li>
| + | |
− | <li><a href="entrepreneurship.html">Entrepreneurship</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item">
| + | |
− | <div class="cat_name">Model <i class="fa fa-caret-down"></i></div>
| + | |
− | <ul class="subnav">
| + | |
− | <li><a href="modeloverview.html">Overview</a></li>
| + | |
− | <li><a href="sbgnrepresentation.html">SBGN Representation</a></li>
| + | |
− | <li><a href="odesystem.html">ODE System</a></li>
| + | |
− | <li><a href="modelresults.html">Results</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item">
| + | |
− | <div class="cat_name">Notebook <i class="fa fa-caret-down"></i></div>
| + | |
− | <ul class="subnav">
| + | |
− | <li><a href="labbook.html">Lab Book</a></li>
| + | |
− | <li><a href="experiments.html">Experiments</a></li>
| + | |
− | <li><a href="safety.html">Safety</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item">
| + | |
− | <div class="cat_name">Outreach <i class="fa fa-caret-down"></i></div>
| + | |
− | <ul class="subnav">
| + | |
− | <li><a href="hpoverview.html">Overview</a></li>
| + | |
− | <li><a href="publicengagement.html">Public Engagements</a></li>
| + | |
− | <li><a href="hpsilver.html">Silver</a></li>
| + | |
− | <li><a href="ihp">Integrated Human Practices</a></li>
| + | |
− | <li><a href="press.html">Press</a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="site-menu__item no-subnav">
| + | |
− | <a href="achievements.html"><i class="fa fa-trophy"></i></a>
| + | |
− | </div>
| + | |
− | | + | |
− | </nav>
| + | |
− | </div>
| + | |
− | </header>
| + | |
− | | + | |
| | | |
| <style> | | <style> |
Line 365: |
Line 164: |
| } | | } |
| .pe_img img{ | | .pe_img img{ |
− | width:50px; | + | width:100px; |
− | height:50px; | + | height:100px; |
| } | | } |
| </style> | | </style> |
Line 553: |
Line 352: |
| </div> | | </div> |
| </main> | | </main> |
− |
| |
− | <!--
| |
− | -->
| |
− |
| |
− | </div>
| |
− |
| |
− |
| |
| | | |
| <!-- C O N T E N T --> | | <!-- C O N T E N T --> |
| + | </html> |
| | | |
− | | + | {{INSA-UPS_France/General_script}} |
− | <script type="text/javascript">
| + | {{INSA-UPS_France/Header_script}} |
− | | + | |
− | // NAV BAR SUBNAV CLICK
| + | |
− | | + | |
− | $(document).on("click",".cat_name", function(){
| + | |
− | if($(this).parent().children('.subnav').css("max-height")=="0px"){
| + | |
− | $('.subnav').css("max-height","0px");
| + | |
− | $(this).parent().children('.subnav').css("max-height","1000px");
| + | |
− | }
| + | |
− | else{
| + | |
− | $(this).parent().children('.subnav').css("max-height","0px");
| + | |
− | }
| + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | var contentSections = $('.article_offset'),
| + | |
− | navigationItems = $('.left_container .aside-nav__item:after');
| + | |
− | | + | |
− | updateNavigation();
| + | |
− | $('.main_content').on('scroll', function(){
| + | |
− | updateNavigation();
| + | |
− | });
| + | |
− | | + | |
− | | + | |
− | function updateNavigation() {
| + | |
− | contentSections.each(function(){
| + | |
− | $this = $(this);
| + | |
− | | + | |
− | var activeSection = $('.left_container a[href="#'+$this.attr('id')+'"]').data('number') - 1;
| + | |
− | /*if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
| + | |
− | navigationItems.eq(activeSection).addClass('is-selected');
| + | |
− | }else {
| + | |
− | navigationItems.eq(activeSection).removeClass('is-selected');
| + | |
− | }*/
| + | |
− | });
| + | |
− | }
| + | |
− | | + | |
− | function smoothScroll(target) {
| + | |
− | $('body,html').animate(
| + | |
− | {'scrollTop':target.offset().top},
| + | |
− | 600
| + | |
− | );
| + | |
− | }
| + | |
− | </script>
| + | |
− | | + | |
− | </body>
| + | |
− | </html>
| + | |