Difference between revisions of "Template:Paris Bettencourt/header"

Line 5: Line 5:
 
          
 
          
 
         <!-- Home-made style! -->
 
         <!-- Home-made style! -->
−
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2015/2/2a/Paris_BettencourtStyleBase.css.txt" type="text/css">
+
/* iGEM Paris Bettencourt 2015 style
−
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2015/1/1e/Paris_BettencourtStyleFooter.css.txt" type="text/css">
+
* Design by Jérémy Ferrando & Ewen Corre
−
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2015/8/81/Paris_BettencourtStyleMenu.css.txt" type="text/css">
+
* It's FREE! But you can send us beer at
−
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2015/2/20/Paris_BettencourtStyleHome.css.txt" type="text/css">
+
* beer@corre.bio :-) */
−
<link rel="stylesheet" href="https://static.igem.org/mediawiki/2015/7/7a/Paris_BettencourtStyleManips.css.txt" type="text/css">
+
 
 +
/* 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;
 +
}
 +
 
 +
 
 +
 
 
<!-- End of style -->
 
<!-- End of style -->
 
 

Revision as of 12:47, 3 August 2015

/* iGEM Paris Bettencourt 2015 style * Design by Jérémy Ferrando & Ewen Corre * It's FREE! But you can send us beer at * beer@corre.bio :-) */ /* 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; } TEEEEEEST