Team:Toronto/css/style
From 2014.igem.org
Revision as of 21:11, 17 October 2014 by Samantha.chow (Talk | contribs)
/* Fonts
* font-family: 'Ropa Sans', sans-serif; * font-family: 'Contrail One', cursive; * font-family: 'Walter Turncoat', cursive; * font-family: 'Voltaire', sans-serif; * font-family: 'Bangers', cursive; * font-family: 'Oswald', sans-serif; */
- {
margin: 0; padding: 0; box-sizing: border-box; }
- globalWrapper {
height: 100%; top: -46px; }
- bg {
position: fixed; width: 100%; height: 100%; background-color: black; /*z-index: 1;*/
}
- top-section {
height: 25px; width: 100%; min-width: 820px; position: relative; background-color: black; top: 46px; left:0; border: 0; margin: 0; padding-left: 10px; padding-right: 10px;
}
- top-section #p-logo {
display: none;
}
- top-section:after {
clear: both;
}
- top-section #search-controls {
display:none;
}
- content {
padding:0; width:100%; height: 100%; }
- content h1.firstHeading {
display: none;
}
- bodyContent {
height: 100%; }
- menubar {
position: relative; top: 0;
}
- menubar ul {
margin: 0;
} .left-menu {
position: relative; top: 21px; float: left;
} .right-menu {
position: relative; top: 21px; float: right;
}
- navbar {
list-style-type: none; list-style-image: none; font-size: 0.5em;
}
h1, h2, h3, h4, h5, h6 {
border-bottom: 0;
}
.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
margin: 0; padding: 0; box-sizing: border-box; }
html {
position: relative; height: 100%; }
body {
position: relative; min-height: 100%; height: 100%; background-color: black;
}
body::-webkit-scrollbar { width: 12px; background: rgba(127, 140, 141, 0.4); opacity: 0; } body::-webkit-scrollbar-thumb { background: rgba(127, 140, 141, 0.8); }
h1, h2, h3, h4, h5, h6 {
overflow: hidden; margin-top: 10px; font-family: 'Bangers', cursive; text-align: center; } h1:before, h1:after, h2:before, h2:after, h3:before, h3:after, h4:before, h4:after, h5:before, h5:after, h6:before, h6:after { background-color: white; content: ""; display: inline-block; height: 2px; position: relative; vertical-align: middle; width: 50%; } h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { right: 0px; margin-left: -50%; } h1:after, h2:after, h3:after, h4:after, h5:after, h6:after { left: 0px; margin-right: -50%; } h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color: white; display: inline-block; padding: 0.5em; padding-top: 0.2em; padding-bottom: 0.2em; border: 2px solid white; }
h4:before, h4:after, h5:before, h5:after, h6:before, h6:after {
background-color: black; }
h4 span, h5 span, h6 span {
color: black; border-color: black; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
h5 span, h6 span { border-bottom-width: 3px; } }
canvas#canvas {
position: fixed; display: block; z-index: 1; }
div#splash-wrapper {
position: relative; height: 100%; margin-bottom: 100px; /*background-color: #a66bbe;*/ background-color: black; background-image: url('https://static.igem.org/mediawiki/2014/6/61/Toronto_igem_bg_4.jpg'); background-positon: top center; background-size: 100% auto; background-repeat: no-repeat; color: white; } div#splash-wrapper section#splash { position: absolute; width: 100%; z-index: 9999; } div#splash-wrapper section#splash::-webkit-scrollbar { width: 12px; background: black; } div#splash-wrapper section#splash::-webkit-scrollbar-thumb { background: green; } div#splash-wrapper nav { position: absolute; z-index: 9999; bottom: -100px; width: 100%; height: 100px; background-color: black; border-bottom: 2px solid whitesmoke; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } div#splash-wrapper nav.stuck { position: fixed; top: 0; } div#splash-wrapper nav.free { position: absolute; z-index: 9999; bottom: -42px; } div#splash-wrapper nav:hover { /*background-color: #3498db;*/ } div#splash-wrapper nav ul { margin: 0; } div#splash-wrapper nav ul li { float: left; list-style-type: none; font-family: 'Bangers', cursive; text-transform: capitalize; font-size: 2em; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } div#splash-wrapper nav ul li.active { background-color: whitesmoke; } div#splash-wrapper nav ul li.active a { color: black; } div#splash-wrapper nav ul li:hover { background-color: rgba(245, 245, 245, 0.5); } div#splash-wrapper nav ul li a { padding: 10px; color: white; height: 40px; line-height: 40px; } div#splash-wrapper nav ul li a .fa { font-size: 0.6em; vertical-align: middle; padding-right: 5px; } div#splash-wrapper nav ul li a:hover { text-decoration: none; }
section#main {
position: absolute; /*overflow: hidden;*/ width: 100%; z-index: 9998; } section#main #main-inner { position: absolute; width: 100%; } section#main .container-wrapper { background-color: whitesmoke; } section#main .container-wrapper.first { padding-top: 15px; } section#main footer { position: relative; padding-top: 10px; }
.blurb {
width: 600px; margin: 0 auto;
} .blurb p {
line-height: 1.8;
} .blurb .curve {
width: 33%; height: auto; min-width: 150px; margin-right:2rem; border-radius: 50%; -webkit-shape-outside:circle(); shape-outside:circle();
} .left {
float: left;
} .right {
float: right;
}