Template:Team:HokkaidoU Japan/CSS

From 2014.igem.org

(Difference between revisions)
Line 243: Line 243:
}
}
-
/* bookblock*/
+
/* book block*/
 +
 
 +
/* General Demo Style */
 +
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 +
 
 +
@font-face {
 +
font-family: 'codropsicons';
 +
src:url('../fonts/codropsicons/codropsicons.eot');
 +
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
 +
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
 +
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
 +
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
 
 +
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 +
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
 +
 
 +
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 +
.clearfix:before, .clearfix:after { content: " "; display: table; }
 +
.clearfix:after { clear: both; }
 +
 
 +
body {
 +
font-family: 'Lato', Calibri, Arial, sans-serif;
 +
color: #777;
 +
background: #f6f6f6;
 +
}
 +
 
 +
a {
 +
color: #555;
 +
text-decoration: none;
 +
outline: none;
 +
}
 +
 
 +
a:hover,
 +
a:active {
 +
color: #777;
 +
}
 +
 
 +
a img {
 +
border: none;
 +
}
 +
 
 +
/* Header Style */
 +
.main,
 +
.container > header {
 +
margin: 0 auto;
 +
padding: 2em;
 +
}
 +
 
 +
.container {
 +
height: 100%;
 +
}
 +
 
 +
.container > header {
 +
text-align: center;
 +
background: rgba(0,0,0,0.01);
 +
}
 +
 
 +
.container > header h1 {
 +
font-size: 2.625em;
 +
line-height: 1.3;
 +
margin: 0;
 +
font-weight: 300;
 +
}
 +
 
 +
.container > header span {
 +
display: block;
 +
font-size: 60%;
 +
opacity: 0.3;
 +
padding: 0 0 0.6em 0.1em;
 +
}
 +
 
 +
/* Main Content */
 +
.main {
 +
max-width: 69em;
 +
}
 +
 
 +
.column {
 +
float: left;
 +
width: 50%;
 +
padding: 0 2em;
 +
min-height: 300px;
 +
position: relative;
 +
}
 +
 
 +
.column:nth-child(2) {
 +
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
 +
}
 +
 
 +
.column p {
 +
font-weight: 300;
 +
font-size: 2em;
 +
padding: 0;
 +
margin: 0;
 +
text-align: right;
 +
line-height: 1.5;
 +
}
 +
 
 +
/* To Navigation Style */
 +
.codrops-top {
 +
background: #fff;
 +
background: rgba(255, 255, 255, 0.6);
 +
text-transform: uppercase;
 +
width: 100%;
 +
font-size: 0.69em;
 +
line-height: 2.2;
 +
}
 +
 
 +
.codrops-top a {
 +
padding: 0 1em;
 +
letter-spacing: 0.1em;
 +
color: #888;
 +
display: inline-block;
 +
}
 +
 
 +
.codrops-top a:hover {
 +
background: rgba(255,255,255,0.95);
 +
color: #333;
 +
}
 +
 
 +
.codrops-top span.right {
 +
float: right;
 +
}
 +
 
 +
.codrops-top span.right a {
 +
float: left;
 +
display: block;
 +
}
 +
 
 +
.codrops-icon:before {
 +
font-family: 'codropsicons';
 +
margin: 0 4px;
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
line-height: 1;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
 
 +
.codrops-icon-drop:before {
 +
content: "\e001";
 +
}
 +
 
 +
.codrops-icon-prev:before {
 +
content: "\e004";
 +
}
 +
 
 +
.codrops-icon-archive:before {
 +
content: "\e002";
 +
}
 +
 
 +
.codrops-icon-next:before {
 +
content: "\e000";
 +
}
 +
 
 +
.codrops-icon-about:before {
 +
content: "\e003";
 +
}
 +
 
 +
/* Demo Buttons Style */
 +
.codrops-demos {
 +
padding-top: 1em;
 +
font-size: 0.9em;
 +
}
 +
 
 +
.codrops-demos a {
 +
display: inline-block;
 +
margin: 0.2em;
 +
padding: 0.45em 1em;
 +
background: #999;
 +
color: #fff;
 +
font-weight: 700;
 +
border-radius: 2px;
 +
}
 +
 
 +
.codrops-demos a:hover,
 +
.codrops-demos a.current-demo,
 +
.codrops-demos a.current-demo:hover {
 +
opacity: 0.6;
 +
}
 +
 
 +
.codrops-nav {
 +
text-align: center;
 +
}
 +
 
 +
.codrops-nav a {
 +
display: inline-block;
 +
margin: 20px auto;
 +
padding: 0.3em;
 +
}
 +
 
 +
/* Demo Styles */
 +
 
 +
.demo-1 body {
 +
color: #87968e;
 +
background: #fff2e3;
 +
}
 +
 
 +
.demo-1 a {
 +
color: #72b890;
 +
}
 +
 
 +
.demo-1 .codrops-demos a {
 +
background: #72b890;
 +
color: #fff;
 +
}
 +
 
 +
.demo-2 body {
 +
color: #fff;
 +
background: #c05d8e;
 +
}
 +
 
 +
.demo-2 a {
 +
color: #d38daf;
 +
}
 +
 
 +
.demo-2 a:hover,
 +
.demo-2 a:active {
 +
color: #fff;
 +
}
 +
 
 +
.demo-2 .codrops-demos a {
 +
background: #883b61;
 +
color: #fff;
 +
}
 +
 
 +
.demo-2 .codrops-top a:hover {
 +
background: rgba(255,255,255,0.3);
 +
color: #333;
 +
}
 +
 
 +
.demo-3 body {
 +
color: #87968e;
 +
background: #fff2e3;
 +
}
 +
 
 +
.demo-3 a {
 +
color: #ea5381;
 +
}
 +
 
 +
.demo-3 .codrops-demos a {
 +
background: #ea5381;
 +
color: #fff;
 +
}
 +
 
 +
.demo-4 body {
 +
color: #999;
 +
background: #fff2e3;
 +
overflow: hidden;
 +
}
 +
 
 +
.demo-4 a {
 +
color: #1baede;
 +
}
 +
 
 +
.demo-4 a:hover,
 +
.demo-4 a:active {
 +
opacity: 0.6;
 +
}
 +
 
 +
.demo-4 .codrops-demos a {
 +
background: #1baede;
 +
color: #fff;
 +
}
 +
 
 +
.demo-5 body {
 +
background: #fffbd6;
 +
}
 +
 
 +
 
 +
@media screen and (max-width: 46.0625em) {
 +
.column {
 +
width: 100%;
 +
min-width: auto;
 +
min-height: auto;
 +
padding: 1em;
 +
}
 +
 
 +
.column p {
 +
text-align: left;
 +
font-size: 1.5em;
 +
}
 +
 
 +
.column:nth-child(2) {
 +
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
 +
}
 +
}
 +
 
 +
@media screen and (max-width: 25em) {
 +
 
 +
.codrops-icon span {
 +
display: none;
 +
}
 +
 
 +
}
.bb-bookblock {
.bb-bookblock {

Revision as of 08:43, 10 September 2014

Retrieved from "http://2014.igem.org/Template:Team:HokkaidoU_Japan/CSS"