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

Revision as of 13:34, 7 September 2016

@import 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700%7CLato:400,700%7CRaleway:100,200,300,400,500,600';

1. top_title, #sideMenu, .action-view #content { display: none; }
2. top_menu_14{height:auto;}
3. globalWrapper { padding: 0; }

• { box-sizing: border-box; }

a { outline: 0; 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; }

1. HQ_page p {

   font-family: inherit;
   font-size: inherit;
   text-align: inherit;

}

li { margin-bottom: 0; }

1. content {

   width: 100%;
   padding: 0;
   border: none;
   color: black;
   margin: 0;
   background-color: transparep default marginnt;
   position: static;

}

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

1. toc { position: absolute;

left: 50%; top:0; margin-left: 5em; margin-top: 2em; font: medium 'Raleway', sans-serif; background-color: #fff; border: 0; }

1. toc #toctitle { text-align: left; }

.content_wrapper, .first-page { flex: 1; position: relative; }

.page_content { width: 50%; margin: 0 2em; }

h1, h2, h3, h4, h5, h6 { font: medium 'Raleway', sans-serif; font-weight: 400; 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; }

p { line-height: 1.5; margin: 1em 0;}

.headline { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: url() no-repeat center; background-size: contain; } .headline h1 { position: absolute; top: 1em; left: 1em; text-align: center; font-size: 1em; margin: 0 auto; } .headline h1 a { display: block; font-weight: 500; font-size: 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: 300; }

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

}

1. sponsors { text-align: center; min-height: 20em; }
2. 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; }
3. sponsors li { display: inline-block; }
4. sponsors img { height: 90px; margin: 1em; }
5. fsdie { height: 127px !important; }
6. idt { height: auto !important; }
7. 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; }

1. sponsors img {

-webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; filter: grayscale(100%); -webkit-filter: grayscale(100%); }

1. 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: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; }

.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-weight: 700; }

.featurette h2 { font-size: 3em; font-weight: 300; 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: -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 
*/

target:before {

content:""; display:block; height:3em; margin:-3em 0 0; } footer { padding: 1em; } footer, nav { background-color: #333; color: #bbb; font-family: 'Raleway', sans-serif; } footer nav, nav li { color: #bbb } footer a, nav a { color: #eee; } nav a { display: block; } footer a:visited, nav a:visited { color: #eee; } 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-toggle { display: none; } .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.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: -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 { position: -webkit-sticky; position: sticky; z-index: 2; top: 20px; } 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: 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; } }