|
|
| Line 5: |
Line 5: |
| | | | |
| | <!-- Home-made style! --> | | <!-- Home-made style! --> |
| − | <style>
| + | </html> |
| − | /* iGEM Paris Bettencourt 2015 style | + | {{Paris_Bettencourt/cssBase}} |
| − | * Design by Jérémy Ferrando & Ewen Corre
| + | {{Paris_Bettencourt/cssMenu}} |
| − | * It's FREE! But you can send us beer at
| + | {{Paris_Bettencourt/cssHome}} |
| − | * beer@corre.bio :-) */
| + | {{Paris_Bettencourt/cssFooter}} |
| − | | + | <html> |
| − | /* RESET STYLE
| + | |
| − | * http://meyerweb.com/eric/tools/css/reset/
| + | |
| − | * v2.0 | 20110126
| + | |
| − | * License: none (public domain) */
| + | |
| − | | + | |
| − | html, body, div, span, applet, object, iframe, | + | |
| − | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| + | |
| − | a, abbr, acronym, address, big, cite, code,
| + | |
| − | del, dfn, em, img, ins, kbd, q, s, samp,
| + | |
| − | small, strike, strong, sub, sup, tt, var,
| + | |
| − | b, u, i, center,
| + | |
| − | dl, dt, dd, ol, ul, li,
| + | |
| − | fieldset, form, label, legend,
| + | |
| − | table, caption, tbody, tfoot, thead, tr, th, td,
| + | |
| − | article, aside, canvas, details, embed,
| + | |
| − | figure, figcaption, footer, header, hgroup,
| + | |
| − | menu, nav, output, ruby, section, summary,
| + | |
| − | time, mark, audio, video {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | font: inherit;
| + | |
| − | vertical-align: baseline;
| + | |
| − | }
| + | |
| − | /* HTML5 display-role reset for older browsers */
| + | |
| − | article, aside, details, figcaption, figure,
| + | |
| − | footer, header, hgroup, menu, nav, section {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | line-height: 1;
| + | |
| − | }
| + | |
| − | ol, ul {
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | blockquote, q {
| + | |
| − | quotes: none;
| + | |
| − | }
| + | |
| − | blockquote:before, blockquote:after,
| + | |
| − | q:before, q:after {
| + | |
| − | content: '';
| + | |
| − | content: none;
| + | |
| − | }
| + | |
| − | table {
| + | |
| − | border-collapse: collapse;
| + | |
| − | border-spacing: 0;
| + | |
| − | }
| + | |
| − | /******************************/ | + | |
| − | | + | |
| − | /* FONTS */
| + | |
| − | @font-face {
| + | |
| − | font-family: Generica;
| + | |
| − | src: url("../fonts/Generica.otf");
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* TEMPLATE */
| + | |
| − | /* Whole page */
| + | |
| − | #mainContainer {
| + | |
| − | background-color: white;
| + | |
| − | font-family: 'GlacialIndifferenceRegular', serif;
| + | |
| − | font-size: 20px;
| + | |
| − | } | + | |
| − | | + | |
| − | #contentContainer {
| + | |
| − | margin-top: 700px;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /***************/
| + | |
| − | /* Menu */
| + | |
| − | /***************/
| + | |
| − | | + | |
| − | /* Things to remove in normal size */
| + | |
| − | .toggle-box,
| + | |
| − | #smallMenuTitle,
| + | |
| − | label {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* The block itself */ | + | |
| − | #menuContainer {
| + | |
| − | width: 100%;
| + | |
| − | position: fixed;
| + | |
| − | top: 0px;
| + | |
| − | text-align: center;
| + | |
| − | background-color: rgba(255,255,255,1);
| + | |
| − | z-index: 2;
| + | |
| − | margin: auto;
| + | |
| − | } | + | |
| − | | + | |
| − | | + | |
| − | /* Links (all the text in the menu) */
| + | |
| − | #menuContainer a {
| + | |
| − | display: inline-block;
| + | |
| − | text-decoration: none;
| + | |
| − | font-size: 23px;
| + | |
| − | color: black;
| + | |
| − | font-family: 'GenomeThin';
| + | |
| − | font-weight: bold;
| + | |
| − | padding-bottom: 10px;
| + | |
| − | padding-top: 10px;
| + | |
| − | } | + | |
| − | #menuContainer a:hover {
| + | |
| − | color: rgb(130,130,130);
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | #menuContainer li {
| + | |
| − | display: inline-block;
| + | |
| − | width: 200px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Submenu links */ | + | |
| − | #menuContainer li ul a {
| + | |
| − | text-align: left;
| + | |
| − | padding: 5px;
| + | |
| − | } | + | |
| − | | + | |
| − | /* Submenu blocks */
| + | |
| − | #menuContainer li ul {
| + | |
| − | position: absolute;
| + | |
| − | text-align: left;
| + | |
| − | background-color: rgba(255,255,255,0.9);
| + | |
| − | z-index: 2;
| + | |
| − | -webkit-border-bottom-left-radius: 5px;
| + | |
| − | -webkit-border-bottom-right-radius: 5px;
| + | |
| − | -moz-border-bottom-left-radius:5px;
| + | |
| − | -moz-border-bottom-right-radius:5px;
| + | |
| − | border-bottom-left-radius:5px;
| + | |
| − | border-bottom-right-radius:5px;
| + | |
| − | max-height: 0;
| + | |
| − | overflow: hidden;
| + | |
| − | } | + | |
| − | #menuContainer li:hover ul,
| + | |
| − | #menuContainer li:hover ul li {
| + | |
| − | display: block;
| + | |
| − | text-align: left;
| + | |
| − | max-height: 500px;
| + | |
| − | -webkit-transition: max-height 0.25s ease-in;
| + | |
| − | -moz-transition: max-height 0.25s ease-in;
| + | |
| − | transition: max-height 0.25s ease-in;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* FIY logo in the middle that should
| + | |
| − | * appear only after scrolling down a bit */
| + | |
| − | /* Top of the page */
| + | |
| − | /*li#menuCenter {
| + | |
| − | display: none;
| + | |
| − | float: left;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | width: 0px;
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: width 5s ease-out;
| + | |
| − | -moz-transition: width 5s ease-out;
| + | |
| − | -o-transition: width 5s ease-out;
| + | |
| − | transition: width 5s ease-out;
| + | |
| − | }
| + | |
| − | li#menuCenter a {
| + | |
| − | display: none;
| + | |
| − | float: left;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | height: 120px;
| + | |
| − | width: 150px;
| + | |
| − | background-image: url('../images/logos/logoFIYblack.png');
| + | |
| − | background-size: 120px;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: center;
| + | |
| − | -webkit-transition: all .5s ease-out;
| + | |
| − | -moz-transition: all .5s ease-out;
| + | |
| − | -o-transition: all .5s ease-out;
| + | |
| − | transition: all .5s ease-out;
| + | |
| − | }*/ | + | |
| − | | + | |
| − | /* *scroll scroll* */
| + | |
| − | li#menuCenter {
| + | |
| − | display: inline-block;
| + | |
| − | float: none;
| + | |
| − | width: 150px;
| + | |
| − | opacity: 1;
| + | |
| − | padding: 0;
| + | |
| − | background-color: white;
| + | |
| − | } | + | |
| − | | + | |
| − | li#menuCenter a {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | top: 0px;
| + | |
| − | background-color: white;
| + | |
| − | border-radius: 0 0 90px 90px;
| + | |
| − | height: 100px;
| + | |
| − | width: 150px;
| + | |
| − | background-image: url('../images/logos/logoFIYblack.png');
| + | |
| − | background-size: 120px;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: center;
| + | |
| − | }
| + | |
| − | li#menuCenter img {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Smartphones and screens < 640px */
| + | |
| − | @media only screen and (max-width: 640px),
| + | |
| − | only screen and (max-device-width: 640px) {
| + | |
| − | /* The top menu stays on top of the page */
| + | |
| − | #menuContainer {
| + | |
| − | width: 100%;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | height: auto;
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Displays the "menu" symbol to click on to show the links */
| + | |
| − | /* Displays a title */
| + | |
| − | #smallMenuTitle {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | font-weight: 0;
| + | |
| − | text-align: center;
| + | |
| − | padding-bottom: 5px;
| + | |
| − | border-bottom: 1px solid #9A9A9A;
| + | |
| − | }
| + | |
| − | #smallMenuTitle h3 {
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Apparence of the menu, when displayed */
| + | |
| − | #menuContainer li {
| + | |
| − | display: block;
| + | |
| − | text-align: left;
| + | |
| − | margin-left: 10px;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | width: 250px;
| + | |
| − | }
| + | |
| − | #menuContainer li ul {
| + | |
| − | display: block;
| + | |
| − | height: auto;
| + | |
| − | max-height: 800px;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | margin-left: 20px;
| + | |
| − | -webkit-border-radius: 0px;
| + | |
| − | -moz-border-radius:0px;
| + | |
| − | border-radius:0px;
| + | |
| − | position: static;
| + | |
| − | }
| + | |
| − | #menuContainer li ul li a {
| + | |
| − | font-size: 20px;
| + | |
| − | }
| + | |
| − | #menuContainer li ul li {
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | #menuContainer a {
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Let the magic happens: hide and show the menu! */
| + | |
| − | .toggle-box {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .toggle-box + label {
| + | |
| − | cursor: pointer;
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | top: 10px;
| + | |
| − | left: 10px;
| + | |
| − | }
| + | |
| − | .toggle-box + label + div + ul {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .toggle-box:checked + label + div + ul {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Background of the page */
| + | |
| − | .contentContainer#home {
| + | |
| − | background-image: url('../images/idli7_medium.jpg');
| + | |
| − | background-size: cover;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: left;
| + | |
| − | background-attachment: fixed;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Banner (FIY logo and name of the team) */
| + | |
| − | #banner {
| + | |
| − | height: 700px;
| + | |
| − | }
| + | |
| − | #banner h3 {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | top: 370px;
| + | |
| − | right: 0;
| + | |
| − | | + | |
| − | background-color: rgba(0,0,0,0.5);
| + | |
| − | padding: 10px 20px 10px 20px;
| + | |
| − | | + | |
| − | color: white;
| + | |
| − | font-size: 40px;
| + | |
| − | font-family: 'Generica';
| + | |
| − | letter-spacing: 7px;
| + | |
| − | text-shadow: 0px 0px 5px rgba(255,255,255,0.4);
| + | |
| − | }
| + | |
| − | #banner img {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | top: 200px;
| + | |
| − | left: 10%;
| + | |
| − | width: 400px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Text content */
| + | |
| − | #textContent {
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: 5px;
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Motivation block */
| + | |
| − | #motivation {
| + | |
| − | width: 100%;
| + | |
| − | height: 200px;
| + | |
| − | background-color: black;
| + | |
| − | position: relative;
| + | |
| − | background-image: url('../images/emptyPlateShade.jpg');
| + | |
| − | background-size: 100%;
| + | |
| − | border-top: 5px solid white;
| + | |
| − | }
| + | |
| − | #motivation h2 {
| + | |
| − | color: white;
| + | |
| − | font-size: 60px;
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | top: 20px;
| + | |
| − | left: 5%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Description block */
| + | |
| − | #description {
| + | |
| − | width: 100%;
| + | |
| − | height: 300px;
| + | |
| − | margin-top: 5px;
| + | |
| − | background-color: black;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Overview block */
| + | |
| − | #overview {
| + | |
| − | width: 50%;
| + | |
| − | height: 100%;
| + | |
| − | background-color: black;
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | #overview h2 {
| + | |
| − | color: white;
| + | |
| − | font-size: 60px;
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | top: 20px;
| + | |
| − | left: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Subprojects block */
| + | |
| − | #subprojects {
| + | |
| − | width:50%;
| + | |
| − | float: right;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | #subprojects a {
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | font: Helvetica, Verdana, Arial;
| + | |
| − | text-align: center;
| + | |
| − | text-transform: uppercase;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | display: block;
| + | |
| − | border: 1px solid green;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Each subproject */
| + | |
| − | #sub1,
| + | |
| − | #sub2,
| + | |
| − | #sub3,
| + | |
| − | #sub4,
| + | |
| − | #sub5,
| + | |
| − | #sub6 {
| + | |
| − | height: 150px;
| + | |
| − | width: 150px;
| + | |
| − | float: left;
| + | |
| − | -webkit-box-sizing: border-box;
| + | |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sub1 {
| + | |
| − | background-color: #00AEEF;
| + | |
| − | }
| + | |
| − | #sub2 {
| + | |
| − | background-color: #ED028C;
| + | |
| − | }
| + | |
| − | #sub3 {
| + | |
| − | background-color: #FFF101;
| + | |
| − | }
| + | |
| − | #sub4 {
| + | |
| − | background-color: #00AEEF;
| + | |
| − | }
| + | |
| − | #sub5 {
| + | |
| − | background-color: #ED028C;
| + | |
| − | }
| + | |
| − | #sub6 {
| + | |
| − | background-color: #00AEEF;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /*#block4 {
| + | |
| − | background-color: #00AEEF;
| + | |
| − | }
| + | |
| − | #block5 {
| + | |
| − | background-color: #ED028C;
| + | |
| − | }
| + | |
| − | #block6 {
| + | |
| − | background-color: #FFF101;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Very small screens: only one row */
| + | |
| − | @media all and (max-width: 480px) {
| + | |
| − | | + | |
| − | #blockDescription {
| + | |
| − | display: table;
| + | |
| − | border: 1px solid red;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Smartphones and screens < 768px */
| + | |
| − | @media only screen and (max-width: 640px),
| + | |
| − | only screen and (max-device-width: 640px) {
| + | |
| − | /* Banner is smaller */
| + | |
| − | #homeBanner {
| + | |
| − | height: 300px;
| + | |
| − | }
| + | |
| − | #homeBanner h1 {
| + | |
| − | font-size: 25px;
| + | |
| − | top: 40px;
| + | |
| − | letter-spacing: 5px;
| + | |
| − | }
| + | |
| − | #homeBanner h3 {
| + | |
| − | font-size: 20px;
| + | |
| − | top: 70px;
| + | |
| − | letter-spacing: 5px;
| + | |
| − | }
| + | |
| − | #projDescription p {
| + | |
| − | padding: 10px;
| + | |
| − | font-size: 18px;
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | #footer {
| + | |
| − | width: 100%;
| + | |
| − | background-color: black;
| + | |
| − | height: 250px;
| + | |
| − | margin: auto;
| + | |
| − | padding: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #a {
| + | |
| − | width: 20%;
| + | |
| − | float: left;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | #b {
| + | |
| − | width: 30%;
| + | |
| − | float: left;
| + | |
| − | margin: auto;
| + | |
| − | padding: 10px;
| + | |
| − | color: white;
| + | |
| − | line-height: 27px;
| + | |
| − | font-size: 15px;
| + | |
| − | margin-top: 15px;
| + | |
| − | }
| + | |
| − | #c {
| + | |
| − | width: 35%;
| + | |
| − | float: left;
| + | |
| − | margin: auto;
| + | |
| − | margin-top: 65px;
| + | |
| − | | + | |
| − | }
| + | |
| − | #d {
| + | |
| − | width: 10%;
| + | |
| − | float: left;
| + | |
| − | margin: auto;
| + | |
| − | margin-top: 80px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #a img {
| + | |
| − | display: block;
| + | |
| − | width: 230px;
| + | |
| − | height: 230px;
| + | |
| − | margin: auto;
| + | |
| − | padding: 10px;
| + | |
| − | }
| + | |
| − | #b a {
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | #b p a:hover {
| + | |
| − | color: white;
| + | |
| − | text-decoration: underline;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | </style>
| + | |
| | <!-- End of style --> | | <!-- End of style --> |
| | | | |