Template:Team:HokkaidoU Japan/CSS
From 2014.igem.org
(Difference between revisions)
Line 243: | Line 243: | ||
} | } | ||
- | /* | + | /* 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