Difference between revisions of "Team:Aix-Marseille/Template-Menu"

 
(47 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
</p>
+
<script>
−
<head>
+
$(function() {
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
  $('.navbar-toggle').click(function() {
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    $('.navbar-collapse').toggle();
−
   
+
   });
−
    <!-- TODO uploader sur 2016.igem.org -->
+
})
−
    <script src="https://use.fontawesome.com/95aa9844e3.js"></script>
+
</script>
−
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,900|Raleway:500,700" rel="stylesheet">
+
−
 
+
−
    <style type="text/css">
+
−
#top_title, #sideMenu { display: none; }
+
−
#top_menu_under{height:16px;}
+
−
#globalWrapper{padding:0;background-color: #393939;}
+
−
#content {background-color: #fff;}
+
−
#top_menu_14{height:auto; border:0;}
+
−
* { box-sizing: border-box; }
+
−
a { outline: 0; text-decoration: none; }
+
−
a:hover, a:focus { text-decoration: none; }
+
−
body {
+
−
font: medium 'Raleway', sans-serif;
+
−
font-weight: 500;
+
−
color: #333;
+
−
        background: #fff;
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
 
+
−
#HQ_page p {
+
−
    font-family: inherit;
+
−
    font-size: inherit;
+
−
    text-align: inherit;
+
−
}
+
−
 
+
−
#content {
+
−
    width: 100%;
+
−
    padding: 0;
+
−
    border: none;
+
−
    color: black;
+
−
    margin: 0;
+
−
    background-color: transparent;
+
−
    position: static;
+
−
}
+
−
 
+
−
#amu-content {
+
−
        font: medium 'Raleway', sans-serif;
+
−
font-weight: 500;
+
−
color: #333;
+
−
        line-height: normal;
+
−
}
+
−
 
+
−
h1, h2, h3, h4, h5, h6 {
+
−
font: medium 'Lato', sans-serif;
+
−
font-weight: 300;
+
−
font-style: normal;
+
−
color:inherit;
+
−
background:none;
+
−
font-weight:normal;
+
−
margin:0;
+
−
padding:0;
+
−
border:0;
+
−
}
+
−
 
+
−
 
+
−
+
−
 
+
−
p { line-height: 1.4; }
+
−
 
+
−
.headline {
+
−
position: relative;
+
−
flex: 1;
+
−
background: url(https://static.igem.org/mediawiki/2016/7/7b/T--Aix-Marseille--banner-nain.jpg) no-repeat center;
+
−
background-size: contain;
+
−
}
+
−
.headline h1 {
+
−
position: absolute;
+
−
top: .3em;
+
−
left: .3em;
+
−
text-align: center;
+
−
}
+
−
.headline h1 a {
+
−
display: block;
+
−
font-weight: 900;
+
−
font-size: 2.5em;
+
−
background: rgba(0, 0, 0, 0.7);
+
−
color: #eee;
+
−
padding: 5px;
+
−
}
+
−
 
+
−
.headline h1 a:hover { background: rgba(0, 0, 0, 0.5); }
+
−
 
+
−
.headline h1 .text-muted { font-weight: 400; }
+
−
 
+
−
/* nav + * { margin-top: 3em; } */
+
−
 
+
−
/* sponsors */
+
−
header {
+
−
height: calc(100vh - 3em); /* for fixed nav */
+
−
display:flex; flex-direction: column;
+
−
+
−
}
+
−
 
+
−
#sponsors { text-align: center; min-height: 20em; }
+
−
#sponsors ul { display: flex; flex-flow: row wrap; justify-content: center; align-items: baseline; margin: 0; padding: 0; }
+
−
#sponsors li { display: inline-block; }
+
−
#sponsors img { height: 90px; margin: 1em; }
+
−
#fsdie { height: 127px !important; }
+
−
#idt { height: auto !important; }
+
−
#snapgene, #promega, #grosseron { height: 3em !important; }
+
−
 
+
−
.arrow-down { text-align: center; line-height: 0.5;  }
+
−
.arrow-down a { display: inline-block; text-decoration: none; font-size: 4em; color: #d33; transition: 200ms transform ease-out; animation: heartbeat 1300ms ease 0s infinite normal;
+
−
position: relative; top: -0.5em; /* align vertically */ }
+
−
.arrow-down a:hover { animation: none; color: #999; }
+
−
 
+
−
#sponsors img {
+
−
transition: all 400ms ease-in-out;
+
−
filter: grayscale(100%);
+
−
-webkit-filter: grayscale(100%);
+
−
}
+
−
#sponsors img:hover {
+
−
filter: grayscale(0%);
+
−
-webkit-filter: grayscale(0%);
+
−
}
+
−
 
+
−
.featurette {
+
−
display: flex;
+
−
flex: 1;
+
−
align-items: flex-end;
+
−
min-width: 300px;
+
−
min-height: calc(100vh - 3em);
+
−
color: #eee;
+
−
background-blend-mode: luminosity;
+
−
transition: 80ms ease-out;
+
−
}
+
−
/*
+
−
.featurette:before {
+
−
background-repeat: no-repeat;
+
−
}
+
−
*/
+
−
.featurette:hover, .featurette:focus {
+
−
flex-grow: 3;
+
−
background-color: transparent;
+
−
font-size: 1.2em;
+
−
}
+
−
 
+
−
.sec-col:hover > .featurette:not(:hover),
+
−
.sec-col:focus > .featurette:not(:focus) {
+
−
background-color: #000;
+
−
font-size: 0.8em;
+
−
}
+
−
 
+
−
.featurette .mw-editsection a { color: #ddf; }
+
−
 
+
−
.sec-col { display: flex; flex-direction: row;}
+
−
 
+
−
.featurette .lead {
+
−
font-size: 1.2em;
+
−
font-weight: 700;
+
−
}
+
−
 
+
−
.featurette h2 {
+
−
font-size: 3em;
+
−
margin: 0 auto;
+
−
display: inline;
+
−
}
+
−
 
+
−
.featurette h2 + div {
+
−
margin-top:1em;
+
−
}
+
−
 
+
−
.featurette h2, .featurette h2 + div {
+
−
background-color: rgba(0, 0, 0, 0.3);
+
−
padding: 5px;
+
−
}
+
−
 
+
−
.featurette-science h2, .featurette-science h2 + div {
+
−
background-color: rgba(255, 255, 255, 0.7);
+
−
}
+
−
 
+
−
 
+
−
.featurette > div {
+
−
/*background-color: rgba(255, 255, 255, 0.7);*/
+
−
padding: 2em;
+
−
}
+
−
 
+
−
.text-muted {
+
−
font-weight: 500;
+
−
}
+
−
 
+
−
/*
+
−
.featurette:before {
+
−
-webkit-filter: grayscale(0%);
+
−
filter: grayscale(0%);
+
−
transition: all 0.5s ease-out;
+
−
}
+
−
 
+
−
.featurette:hover:before {
+
−
-webkit-filter: grayscale(100%);
+
−
filter: grayscale(100%);
+
−
}
+
−
*/
+
−
 
+
−
.featurette h2, .featurette h2 + div {
+
−
padding: 5px;
+
−
}
+
−
 
+
−
.featurette h2 + div:first-child, .featurette h2 + div:last-child {
+
−
padding-top: 0;
+
−
padding-bottom: 0;
+
−
}
+
−
 
+
−
/*
+
−
.featurette-mine h2, .featurette-mine h2 + div {
+
−
color: hsl(344.9,76.5%,72%);
+
−
text-shadow: 1px 1px hsla(344.9,76.5%,78%, 0.3);
+
−
}
+
−
 
+
−
.featurette-road h2, .featurette-road h2 + div {
+
−
color: hsl(135.1,66.5%,68%);
+
−
text-shadow: 1px 1px hsla(135.1,66.5%,98%, 0.3);
+
−
}
+
−
 
+
−
.featurette-science h2, .featurette-science h2 + div {
+
−
color: hsl(285.3,66.5%,38%);
+
−
text-shadow: 1px 1px hsla(285.3,66.5%,88%, 0.3);
+
−
}*/
+
−
 
+
−
.featurette-mine:hover h2, .featurette-mine:hover h2 + div,
+
−
.featurette-mine:focus h2, .featurette-mine:focus h2 + div {
+
−
color: #eee;
+
−
text-shadow: none;
+
−
background-color: hsl(344.9,66.5%,58%);
+
−
}
+
−
 
+
−
.featurette-road:hover h2, .featurette-road:hover h2 + div,
+
−
.featurette-road:focus h2, .featurette-road:focus h2 + div {
+
−
color: #eee;
+
−
text-shadow: none;
+
−
background-color: hsl(135.1,66.5%,58%);
+
−
}
+
−
 
+
−
.featurette-science:hover h2, .featurette-science:hover h2 + div,
+
−
.featurette-science:focus h2, .featurette-science:focus h2 + div {
+
−
color: #eee;
+
−
text-shadow: none;
+
−
background-color: hsl(285.3,66.5%,58%);
+
−
}
+
−
 
+
−
.featurette-mine {
+
−
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(https://static.igem.org/mediawiki/2016/thumb/5/5b/T--Aix-Marseille--col-mine.jpg/1200px-T--Aix-Marseille--col-mine.jpg) no-repeat hsl(344.9,66.5%,58%);
+
−
background-size: cover;
+
−
        background-position: 50% 30%;
+
−
}
+
−
 
+
−
.featurette-mine:hover, .featurette-mine:focus {
+
−
background: url(https://static.igem.org/mediawiki/2016/thumb/5/5b/T--Aix-Marseille--col-mine.jpg/1200px-T--Aix-Marseille--col-mine.jpg) no-repeat transparent;
+
−
        background-size: cover;
+
−
background-position: 50% 30%;
+
−
}
+
−
 
+
−
.featurette-road {
+
−
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(https://static.igem.org/mediawiki/2016/thumb/6/6c/T--Aix-Marseille--col-road.jpg/1200px-T--Aix-Marseille--col-road.jpg) no-repeat hsl(135.1,66.5%,58%);
+
−
        background-size: cover;
+
−
        background-position: 50% 0%;
+
−
}
+
−
 
+
−
.featurette-road:hover, .featurette-road:focus {
+
−
background: url(https://static.igem.org/mediawiki/2016/thumb/6/6c/T--Aix-Marseille--col-road.jpg/1200px-T--Aix-Marseille--col-road.jpg) no-repeat transparent;
+
−
        background-size: cover;
+
−
background-position: 50% 0%;
+
−
}
+
−
 
+
−
.featurette-science {
+
−
background: /*linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)),*/ url(https://static.igem.org/mediawiki/2016/e/e5/T--Aix-Marseille--flagellin_hicrop.jpeg) no-repeat hsl(285.3,66.5%,58%);
+
−
background-position: 20% 0%;
+
−
color: #333;
+
−
        background-size: cover;
+
−
}
+
−
 
+
−
/*
+
−
* Navigation
+
−
*/
+
−
 
+
−
:target:before {
+
−
content:"";
+
−
display:block;
+
−
height:3em;
+
−
margin:-3em 0 0;
+
−
}
+
−
 
+
−
nav { background-color: #333; width: 100%; }
+
−
nav, nav li { color: #bbb }
+
−
nav a { color: #eee; display: block; }
+
−
nav a:visited { color: #eee; }
+
−
nav a:hover, nav a:focus { color: #fff; }
+
−
nav li a { transition: background 200ms ease-out; }
+
−
 
+
−
.navbar-toggle { display: none; }
+
−
.navbar-collapse, .nav, nav { display: flex; flex-flow: row wrap;  }
+
−
.navbar-header { margin: 1em; }
+
−
.navbar-collapse { flex-grow: 1; justify-content: space-between; }
+
−
 
+
−
nav.navbar ul { list-style-type: none; list-style-image: none; padding: 0; margin: 0; line-height: normal; }
+
−
.nav > li { cursor: default; }
+
−
.social li, .menu_item a { padding: 1em; }
+
−
 
+
−
nav .submenu { display: none; position: absolute; z-index: 3; background-color: rgba(51,51,51, 0.99) ;  }
+
−
.social, .social ul { display: flex; justify-content: flex-end; }
+
−
.menu_item > a { text-transform: uppercase; }
+
−
 
+
−
/*
+
−
* social icons and heartbeat
+
−
*/
+
−
 
+
−
@keyframes heartbeat {
+
−
  0%  { transform: scale(1); }
+
−
  14% { transform: scale(1.5);   }
+
−
  28% { transform: scale(1); }
+
−
  42% { transform: scale(1.5);  }
+
−
  70% { transform: scale(1); }
+
−
}
+
−
 
+
−
.fa-facebook-square { font-size: 1.5em; color: #3b579d; }
+
−
.fa-twitter-square  { font-size: 1.5em; color: #4099ff; }
+
−
 
+
−
 
+
−
.social a:hover i {animation: heartbeat 1300ms ease 0s infinite normal; color: #eee; }
+
−
 
+
−
.ss-hidden {
+
−
position: static;
+
−
width: auto;
+
−
height: auto;
+
−
padding: auto;
+
−
margin: auto;
+
−
overflow: auto;
+
−
clip: auto;
+
−
border: 0;
+
−
}
+
−
 
+
−
@media all and (min-width: 80em) {
+
−
nav { position: sticky; z-index: 2; top: 16px; }
+
−
nav a:hover, nav a:focus { color: #fff; }
+
−
.menu_item:hover, .menu_item:focus { background-color: #999; color: #fff; }
+
−
+
−
nav ul.submenu li a:hover, nav ul.submenu li a:focus
+
−
{ background-color: rgb(153,153,153); color: #eee; }
+
−
+
−
nav .menu_item:hover .submenu ,
+
−
nav .submenu:target  { display: block; }
+
−
}
+
−
 
+
−
 
+
−
@media all and (max-width: 80em) { /* small screens */
+
−
.sec-col, .sec-col > .featurette { display: block; }
+
−
.navbar-collapse, .nav, nav { flex-direction: column; }
+
−
nav, nav .submenu, .headline, header .headline, .headline h1 { position: static; }
+
−
nav { text-align: center; }
+
−
header { height: auto;  }
+
−
.headline { background-position: center top; padding-top: calc(100vw/3); }
+
−
body { margin-top: 0; }
+
−
.featurette { background-blend-mode: normal; }
+
−
.ss-hidden {
+
−
position: absolute;
+
−
width: 1px;
+
−
height: 1px;
+
−
padding: 0;
+
−
margin: -1px;
+
−
overflow: hidden;
+
−
clip: rect(0, 0, 0, 0);
+
−
border: 0;
+
−
}
+
−
.social, .social ul { flex-direction: column; text-align: center; }
+
−
.arrow-down { display: none  }
+
−
nav .menu_item:target .submenu  { display: block; }
+
−
}
+
−
 
+
−
</style>
+
−
<div id="amu-content">
+
 
     <nav class="navbar navbar-fixed-top">
 
     <nav class="navbar navbar-fixed-top">
 
             <div class="navbar-header"><!-- Brand and toggle get grouped for better mobile display -->
 
             <div class="navbar-header"><!-- Brand and toggle get grouped for better mobile display -->
 
                 <button type="button" class="navbar-toggle">
 
                 <button type="button" class="navbar-toggle">
−
                    <span class="sr-only">Toggle navigation ▤</span>
+
                  <!-- <span class="sr-only">-->
 +
Toggle navigation ▤
 +
<!--</span>-->
 
                 </button>
 
                 </button>
−
                 <a class="navbar-brand" href="#">iGEM Aix-Marseille Université</a>
+
                 <a class="navbar-brand" href="/Team:Aix-Marseille">iGEM Aix-Marseille Université</a>
 
             </div>
 
             </div>
 
             <div class="collapse navbar-collapse"><!-- This part is toggleable -->
 
             <div class="collapse navbar-collapse"><!-- This part is toggleable -->
Line 398: Line 29:
 
            <li> <a href="/Team:Aix-Marseille/Design"> ★ Design </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Design"> ★ Design </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Experiments"> Experiments </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Experiments"> Experiments </a></li>
−
            <li> <a href="/Team:Aix-Marseille/Proof"> ★ Proof of Concept </a></li>
+
            <!--<li> <a href="/Team:Aix-Marseille/Proof"> ★ Proof of Concept </a></li>
−
            <li> <a href="/Team:Aix-Marseille/Demonstrate"> ★ Demonstrate </a></li>
+
            <li> <a href="/Team:Aix-Marseille/Demonstrate"> ★ Demonstrate </a></li>-->
 
            <li> <a href="/Team:Aix-Marseille/Results"> Results </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Results"> Results </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Notebook"> Notebook </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Notebook"> Notebook </a></li>
Line 409: Line 40:
 
            <li> <a href="/Team:Aix-Marseille/Basic_Part"> ★ Basic Parts </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Basic_Part"> ★ Basic Parts </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Composite_Part"> ★ Composite Parts </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Composite_Part"> ★ Composite Parts </a></li>
−
            <li> <a href="/Team:Aix-Marseille/Part_Collection"> ★ Part Collection </a></li>
+
          <!-- <li> <a href="/Team:Aix-Marseille/Part_Collection"> ★ Part collection</a></li>-->
 
                     </ul>
 
                     </ul>
 
                     </li>
 
                     </li>
 
            <li class="menu_item"> <a href="/Team:Aix-Marseille/Safety"> Safety </a> </li>
 
            <li class="menu_item"> <a href="/Team:Aix-Marseille/Safety"> Safety </a> </li>
 +
                            <li class="menu_item"> <a href="/Team:Aix-Marseille/Medals"> Medals</a> </li>
 
            <li class="menu_item"> <a href="/Team:Aix-Marseille/Attributions">★  Attributions </a></li>
 
            <li class="menu_item"> <a href="/Team:Aix-Marseille/Attributions">★  Attributions </a></li>
 
            <li class="menu_item" id="menu-hp"><a href="#menu-hp"><span class="icon-plus"></span>Human Practices</a>
 
            <li class="menu_item" id="menu-hp"><a href="#menu-hp"><span class="icon-plus"></span>Human Practices</a>
 
            <ul class="submenu">
 
            <ul class="submenu">
 
            <li> <a href="/Team:Aix-Marseille/Human_Practices"> Human Practices </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Human_Practices"> Human Practices </a></li>
−
            <li> <a href="/Team:Aix-Marseille/HP/Silver">★ Silver </a></li>
+
            <!--<li> <a href="/Team:Aix-Marseille/HP/Silver">★ Silver </a></li>
−
            <li> <a href="/Team:Aix-Marseille/HP/Gold">★ Gold </a></li>
+
            <li> <a href="/Team:Aix-Marseille/HP/Gold">★ Gold </a></li>-->
 
            <li> <a href="/Team:Aix-Marseille/Integrated_Practices"> ★ Integrated Practices </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Integrated_Practices"> ★ Integrated Practices </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Engagement">★ Engagement </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Engagement">★ Engagement </a></li>
 
                     </ul>
 
                     </ul>
 
                     </li>
 
                     </li>
−
            <li class="menu_item" id="menu-awards"><a href="#menu-awards"><span class="icon-plus"></span>Awards</a>
+
                            <li class="menu_item"> <a href="/Team:Aix-Marseille/Model"> Model </a> </li>
 +
            <!--<li class="menu_item" id="menu-awards"><a href="#menu-awards"><span class="icon-plus"></span>Awards</a>
 
            <ul class="submenu">
 
            <ul class="submenu">
 
            <li><a href="/Team:Aix-Marseille/Entrepreneurship"> ★ Entrepreneurship </a></li>
 
            <li><a href="/Team:Aix-Marseille/Entrepreneurship"> ★ Entrepreneurship </a></li>
Line 429: Line 62:
 
            <li> <a href="/Team:Aix-Marseille/Software">★ Software </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Software">★ Software </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Measurement">★  Measurement </a></li>
 
            <li> <a href="/Team:Aix-Marseille/Measurement">★  Measurement </a></li>
−
            <li> <a href="/Team:Aix-Marseille/Model">★ Model </a></li>
+
            <li> <a href="/Team:Aix-Marseille/Model">★ Model </a></li>-->
 
                 </ul>
 
                 </ul>
 
                 </li>
 
                 </li>
 
    </ul>
 
    </ul>
 
             <div class="social">
 
             <div class="social">
−
                <ul class="ss-hidden">
 
−
                    <li>Follow us</li>
 
−
                    <li><i class="fa fa-arrow-right" aria-hidden="true"></i></li>
 
−
                </ul>
 
 
                 <ul>
 
                 <ul>
 
                     <li>
 
                     <li>
Line 446: Line 75:
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="https://twitter.com/iGEMteamAMU2016">
+
                         <a href="https://twitter.com/iGEMteamAMU">
 
                             <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
 
                             <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
 
                             twitter
 
                             twitter

Latest revision as of 14:52, 19 December 2016