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

Revision as of 17:38, 18 October 2016

@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; }

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; }

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);}

.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;

} .page_content p { text-align: justify; }

.page_content b { color: #6db459 }

.page_content a { color: #6db459; border-bottom: dotted 1px #6db459; } .page_content a:visited { color: #87ce72; } .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: 'geomanistmedium', sans-serif;

font-size: medium;

       font-weight: normal;

font-style: normal;

       color: inherit;

background:none; margin:0; padding:0; border:0; }

h1 { /*font-weight: 500;*/ font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; 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: 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;

}

.headline h1 { display: none }

/* 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;

} header.first-page { height: 100vh; }

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; 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; }

.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; position: absolute; z-index: 3; 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) { /*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; }

}

@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; } }