Team:Aix-Marseille/Template-CSS
@import 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700%7CLato:400,700';
@import 'https://2016.igem.org/Team:Aix-Marseille/Template-CSS-fonts?action=raw&ctype=text/css';
- top_title, #sideMenu, .action-view #content { display: none; }
- top_menu_14{height:auto;}
- globalWrapper { padding: 0; }
- { box-sizing: border-box; }
- sideMenu, #sideMenu * { box-sizing: content-box; }
- sideMenu { position: fixed; }
a { text-decoration: none; } a:hover, a:focus { text-decoration: none; } body { font-size: medium; font-weight: 500; color: #333;
background: #fff;
margin: 0; padding: 0; }
.emph { padding: 0.5em; border : solid 2px #ff1919; }
- HQ_page p {
font-family: inherit; font-size: inherit; text-align: inherit;
}
li { margin-bottom: 0; }
- content {
width: 100%; padding: 0; border: none; color: black; margin: 0; background-color: transparent; position: static;
}
- amu-content {
font: medium 'Libre Baskerville', sans-serif;
font-weight: 500; color: #333;
line-height: normal;
display: flex; flex-direction: column; min-height: calc(100vh - 18px); }
- toc { position: absolute;
left: 65.5em; margin: 3em; padding: 1em; font: medium 'geomanist_regularregular', sans-serif; background: #fff; background: rgba(255, 255, 255, 0.94); border: 0; border-left: 1px solid #aaa; border-radius: 1em; }
img { max-width: 100%; height: auto; }
- toc #toctitle { text-align: left; margin-bottom: 0.5em; }
- toc h2 { font-family: 'geomanistmedium', sans-serif; }
- toc a { color: #61a04f; }
- toc a:visited { color: #87ce72; }
- toc a:hover, #toc a:focus { color:#fff; background-color: #61a04f; }
.content_wrapper { flex: 1; position: relative; }
- amu-content { background-repeat: no-repeat;
background-attachment: fixed; /*background-image: linear-gradient(#ccffcc, #ffffff);*/
background-image: linear-gradient(#7ac963, #ffffff); }
.page_content {
background: #fff;
}
.page_content p { text-align: justify; }
.page_content b { color: #6db459 }
.featurette a, .page_content a { color: #6db459; border-bottom: dotted 1px #6db459; } .featurette a:visited, .page_content a:visited { color: #87ce72; } .featurette a:hover, .featurette a:focus, .page_content a:hover, .page_content a:focus { color:#fff; background-color: #6db459; }
.page_content .mw-editsection a { border: none }
h1, h2, h3, h4, h5, h6 {
font-family: 'geomanistbook', sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
color: inherit;
background:none; margin:0; padding:0; border:0; }
h1 { font-family: 'geomanistbold', sans-serif; font-size: 2.5em; margin: 0.67em 0; } h2 { font-family: 'geomanistmedium', sans-serif; font-size: 1.66em; margin: 0.83em 0; } h3 { font-size: 1.33em; margin: 1em 0; } h4 { font-size: 1.07em; margin: 1.33em 0; } h5 { font-size: 0.89em; margin: 1.67em 0; } h6 { font-size: .67em; margin: 2.33em 0; }
.page_content h1, .page_content h2, .page_content h3, .page_content h4, .page_content h5, .page_content h6 { color:#61a04f; }
.page_content h2 { border-bottom: 2px solid #61a04f } .page_content h3 { border-bottom: 1px solid #61a04f }
p { line-height: 1.5; margin: 1em 0;}
table.wikitable > * > tr > td {
padding: 0.5em;
} @keyframes blink { 50% { border-color: transparent; } } .first-page{ background-color: #7ac963;} .first-page h1 { text-align: center; margin: 0 auto; padding: 0 0 1em; text-transform: uppercase; /*font-weight: bold;*/ } .first-page h1 a { color: #fff; border: 4px solid white; display: inline-block; padding: 0.2em; animation: blink 2s ease-in-out infinite alternate;
}
.first-page h1 a:hover, .first-page h1 a:focus { animation-iteration-count: 0; color: #7ac963; background-color: #fff; }
.headline { background: url(https://static.igem.org/mediawiki/2016/7/74/T--Aix-Marseille--logo-igem-amu-opti.svg) no-repeat center; background-size:contain; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 2em;
}
/* nav + * { margin-top: 3em; } */
/* sponsors */ header { height: calc(100vh - 3em); /* for fixed nav */ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
- sponsors { text-align: center; min-height: 20em; background-color: #fff; }
- sponsors ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0; padding: 0; }
- sponsors li { display: inline-block; }
- sponsors img { height: 90px; width: auto; 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; -webkit-transition: 200ms -webkit-transform ease-out; transition: 200ms -webkit-transform ease-out; transition: 200ms transform ease-out; transition: 200ms transform ease-out, 200ms -webkit-transform ease-out; -webkit-animation: heartbeat 1300ms ease 0s infinite normal; animation: heartbeat 1300ms ease 0s infinite normal; position: relative; top: -0.5em; /* align vertically */ } .arrow-down a:hover { -webkit-animation: none; animation: none; color: #999; }
- sponsors img {
-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
- sponsors img:hover {
filter: grayscale(0%); -webkit-filter: grayscale(0%); }
.featurette { font: medium 'Lato', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; min-width: 300px; min-height: calc(100vh - 3em); color: #eee; background-blend-mode: luminosity; -webkit-transition: 80ms ease-out; transition: 80ms ease-out; }
.featurette p { text-align: justify; }
/* .featurette:before { background-repeat: no-repeat; }
- /
.featurette:hover, .featurette:focus { -webkit-box-flex: 3; -ms-flex-positive: 3; 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; } .sec-col:hover > .featurette:not(:hover) p, .sec-col:focus > .featurette:not(:focus) p {
text-align: left;
}
.featurette .mw-editsection a { color: #ddf; }
.sec-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.featurette .lead { font-size: 1.2em; font-family: 'geomanistbook', sans-serif; }
.featurette h2 { font-size: 3em; font-family: 'geomanistextralight', sans-serif; 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;
}
.featurette .text-muted { font-family: 'geomanistbook', sans-serif; }
/* .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: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(
) no-repeat hsl(344.9,66.5%,58%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url() no-repeat hsl(344.9,66.5%,58%);
background-size: cover;
background-position: 50% 30%;
}
.featurette-mine:hover, .featurette-mine:focus {
background: url() no-repeat transparent;
background-size: cover;
background-position: 50% 30%; }
.featurette-road {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url(
) no-repeat hsl(135.1,66.5%,58%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.9)), url() no-repeat hsl(135.1,66.5%,58%);
background-size: cover;
background-position: 50% 0%;
}
.featurette-road:hover, .featurette-road:focus {
background: url() 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(
) no-repeat hsl(285.3,66.5%,58%);
background-position: 20% 0%;
color: #333;
background-size: cover;
}
/*
* Navigation */
footer { padding: 1em; } footer, nav { background-color: #7ac963; color: #fff; font-family: 'geomanistbook', sans-serif; } footer nav, nav li { color: #fff } footer a, nav a { color: #fff; } nav a { display: block; } footer a:visited, nav a:visited { color: #fff; } footer a:hover, footer a:focus, nav a:hover, nav a:focus { color: #fff; } nav li a { -webkit-transition: background 200ms ease-out; transition: background 200ms ease-out; }
.navbar-collapse, .nav, nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .navbar-header { margin: 1em; } .navbar-collapse { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } nav{z-index:2} .navbar-toggle { background: transparent; border: 0; color: #fff; font-size: inherit; font-family: "geomanistmedium", sans-serif; padding: 1em; }
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; background-color: #61a04f ; transition: 0.5s } .social, .social ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .menu_item > a { text-transform: uppercase; }
/*
* social icons and heartbeat */
@-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(1); transform: scale(1); }
14% { -webkit-transform: scale(1.5); transform: scale(1.5); }
28% { -webkit-transform: scale(1); transform: scale(1); }
42% { -webkit-transform: scale(1.5); transform: scale(1.5); }
70% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes heartbeat {
0% { -webkit-transform: scale(1); transform: scale(1); }
14% { -webkit-transform: scale(1.5); transform: scale(1.5); }
28% { -webkit-transform: scale(1); transform: scale(1); }
42% { -webkit-transform: scale(1.5); transform: scale(1.5); }
70% { -webkit-transform: scale(1); 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 {-webkit-animation: heartbeat 1300ms ease 0s infinite normal;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: 40em) { header.first-page { height: 100vh; }
/*nav { z-index: 2; top: 20px; }*/ nav a:hover, nav a:focus { color: #fff; } .menu_item:hover, .menu_item:focus { background-color: #579047; color: #fff; }
nav ul.submenu li a:hover, nav ul.submenu li a:focus { background-color: #579047; color: #fff; }
nav .menu_item:hover .submenu , nav .submenu:target { display: block; } .navbar-toggle { display: none; } .navbar-collapse { display : flex !important; } nav .submenu { position: absolute; z-index: 3; }
.page_content { flex: 1; max-width: 62.5em; margin: 3em; padding: 0em 2em 2em;
background: #fff; /*background: rgba(255, 255, 255, 0.94);*/ border: 3px solid #61a04f; border-radius: 1.5em;
}
}
@media all and (max-width: 39.99em) { /* small screens */
.sec-col, .sec-col > .featurette { display: block; }
.navbar-collapse, .nav, nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
nav, nav .submenu, .headline, header .headline, .headline h1 { position: static; }
nav { text-align: center; }
nav .submenu { border: 2px dashed white; border-width: 1px 0; }
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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .arrow-down { display: none } nav .menu_item:target .submenu { display: block; } .navbar-collapse { display: none; }
- toc { display: none }
}
