"
Team:Manchester/css/team-overlay.css
From 2014.igem.org
(Style for the team overlay) |
|||
| Line 10: | Line 10: | ||
} | } | ||
| - | .grid { | + | #content .grid { |
overflow: hidden; | overflow: hidden; | ||
margin: 0; | margin: 0; | ||
| Line 20: | Line 20: | ||
/* Common style */ | /* Common style */ | ||
| - | .grid figure { | + | #content .grid figure { |
position: relative; | position: relative; | ||
z-index: 10; | z-index: 10; | ||
| Line 34: | Line 34: | ||
} | } | ||
| - | .grid figure img { | + | #content .grid figure img { |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
| Line 41: | Line 41: | ||
} | } | ||
| - | .grid figure figcaption { | + | #content .grid figure figcaption { |
padding: 2em; | padding: 2em; | ||
color: #fff; | color: #fff; | ||
| Line 50: | Line 50: | ||
} | } | ||
| - | .grid figure figcaption::before, | + | #content .grid figure figcaption::before, |
| - | .grid figure figcaption::after { | + | #content .grid figure figcaption::after { |
pointer-events: none; | pointer-events: none; | ||
} | } | ||
| - | .grid figure figcaption, | + | #content .grid figure figcaption, |
| - | .grid figure a { | + | #content .grid figure a { |
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
| Line 66: | Line 66: | ||
/* Anchor will cover the whole item by default */ | /* Anchor will cover the whole item by default */ | ||
/* For some effects it will show as a button */ | /* For some effects it will show as a button */ | ||
| - | .grid figure a { | + | #content .grid figure a { |
z-index: 1000; | z-index: 1000; | ||
text-indent: 200%; | text-indent: 200%; | ||
| Line 74: | Line 74: | ||
} | } | ||
| - | .grid figure h2 { | + | #content .grid figure h2 { |
word-spacing: -0.15em; | word-spacing: -0.15em; | ||
font-weight: 300; | font-weight: 300; | ||
} | } | ||
| - | .grid figure h2 span { | + | #content .grid figure h2 span { |
font-weight: 800; | font-weight: 800; | ||
} | } | ||
| - | .grid figure h2, | + | #content .grid figure h2, |
| - | .grid figure p { | + | #content .grid figure p { |
margin: 0; | margin: 0; | ||
} | } | ||
| - | .grid figure p { | + | #content .grid figure p { |
letter-spacing: 1px; | letter-spacing: 1px; | ||
font-size: 80.5%; | font-size: 80.5%; | ||
| Line 97: | Line 97: | ||
/*----------------------*/ | /*----------------------*/ | ||
| - | figure.effect-ruby { | + | #content figure.effect-ruby { |
background-color: #6600CC; | background-color: #6600CC; | ||
} | } | ||
| - | figure.effect-ruby img { | + | #content figure.effect-ruby img { |
opacity: 1; | opacity: 1; | ||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
| Line 109: | Line 109: | ||
} | } | ||
| - | figure.effect-ruby:hover img { | + | #content figure.effect-ruby:hover img { |
opacity: 0.7; | opacity: 0.7; | ||
-webkit-transform: scale(1); | -webkit-transform: scale(1); | ||
| Line 115: | Line 115: | ||
} | } | ||
| - | figure.effect-ruby h2 { | + | #content figure.effect-ruby h2 { |
margin-top: 5%; | margin-top: 5%; | ||
-webkit-transition: -webkit-transform 0.35s; | -webkit-transition: -webkit-transform 0.35s; | ||
| Line 123: | Line 123: | ||
} | } | ||
| - | figure.effect-ruby p { | + | #content figure.effect-ruby p { |
margin: 1em 0 0; | margin: 1em 0 0; | ||
padding: 5em; | padding: 5em; | ||
| Line 135: | Line 135: | ||
} | } | ||
| - | figure.effect-ruby:hover h2 { | + | #content figure.effect-ruby:hover h2 { |
-webkit-transform: translate3d(0,0,0); | -webkit-transform: translate3d(0,0,0); | ||
transform: translate3d(0,0,0); | transform: translate3d(0,0,0); | ||
} | } | ||
| - | figure.effect-ruby:hover p { | + | #content figure.effect-ruby:hover p { |
opacity: 1; | opacity: 1; | ||
-webkit-transform: translate3d(0,0,0) scale(1); | -webkit-transform: translate3d(0,0,0) scale(1); | ||
| Line 148: | Line 148: | ||
@media screen and (max-width: 69.5em) { | @media screen and (max-width: 69.5em) { | ||
| - | .grid figure { | + | #content .grid figure { |
width: 50%; | width: 50%; | ||
} | } | ||
| - | .grid figure figcaption { | + | #content .grid figure figcaption { |
font-size: 90%; | font-size: 90%; | ||
} | } | ||
| Line 160: | Line 160: | ||
@media screen and (max-width: 41.5em) { | @media screen and (max-width: 41.5em) { | ||
| - | .grid figure { | + | #content .grid figure { |
width: 100%; | width: 100%; | ||
} | } | ||
} | } | ||
Revision as of 23:24, 13 August 2014
@font-face { font-weight: normal; font-style: normal; font-family: 'feathericons'; src:url('../fonts/feathericons/feathericons.eot?-8is7zf'); src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'), url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'), url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'), url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg'); }
- content .grid {
overflow: hidden; margin: 0; padding: 3em 0 0 0; width: 100%; list-style: none; text-align: center; }
/* Common style */
- content .grid figure {
position: relative; z-index: 10; display: inline-block; overflow: hidden; margin: 10px; width: 30%; height: 400px; /*padding: px;*/ background: #3085a3; text-align: center; cursor: pointer; }
- content .grid figure img {
position: relative; display: block; min-height: 100%; opacity: 0.8; }
- content .grid figure figcaption {
padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
- content .grid figure figcaption::before,
- content .grid figure figcaption::after {
pointer-events: none; }
- content .grid figure figcaption,
- content .grid figure a {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Anchor will cover the whole item by default */ /* For some effects it will show as a button */
- content .grid figure a {
z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
- content .grid figure h2 {
word-spacing: -0.15em; font-weight: 300; }
- content .grid figure h2 span {
font-weight: 800; }
- content .grid figure h2,
- content .grid figure p {
margin: 0; }
- content .grid figure p {
letter-spacing: 1px; font-size: 80.5%; }
/*----------------------*/ /***** Ruby Effects *****/ /*----------------------*/
- content figure.effect-ruby {
background-color: #6600CC; }
- content figure.effect-ruby img {
opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.15); transform: scale(1.15); }
- content figure.effect-ruby:hover img {
opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); }
- content figure.effect-ruby h2 {
margin-top: 5%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); }
- content figure.effect-ruby p {
margin: 1em 0 0; padding: 5em; font-weight: bold; border: 2px solid #fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0) scale(1.1); transform: translate3d(0,20px,0) scale(1.1); }
- content figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
- content figure.effect-ruby:hover p {
opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); }
@media screen and (max-width: 69.5em) {
#content .grid figure {
width: 50%;
}
#content .grid figure figcaption { font-size: 90%; } }
@media screen and (max-width: 41.5em) {
#content .grid figure { width: 100%; } }
