Team:Manchester/css/team-overlay.css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
@font-face {
+
.grid {
-
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;
overflow: hidden;
margin: 0;
margin: 0;
Line 20: Line 9:
/* Common style */
/* Common style */
-
#content .grid figure {
+
.grid figure {
position: relative;
position: relative;
z-index: 10;
z-index: 10;
Line 34: Line 23:
}
}
-
#content .grid figure img {
+
.grid figure img {
position: relative;
position: relative;
display: block;
display: block;
Line 41: Line 30:
}
}
-
#content .grid figure figcaption {
+
.grid figure figcaption {
padding: 2em;
padding: 2em;
color: #fff;
color: #fff;
Line 50: Line 39:
}
}
-
#content .grid figure figcaption::before,
+
.grid figure figcaption::before,
-
#content .grid figure figcaption::after {
+
.grid figure figcaption::after {
pointer-events: none;
pointer-events: none;
}
}
-
#content .grid figure figcaption,
+
.grid figure figcaption,
-
#content .grid figure a {
+
.grid figure a {
position: absolute;
position: absolute;
top: 0;
top: 0;
Line 66: Line 55:
/* 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 */
-
#content .grid figure a {
+
.grid figure a {
z-index: 1000;
z-index: 1000;
text-indent: 200%;
text-indent: 200%;
Line 74: Line 63:
}
}
-
#content .grid figure h2 {
+
.grid figure h2 {
word-spacing: -0.15em;
word-spacing: -0.15em;
font-weight: 300;
font-weight: 300;
}
}
-
#content .grid figure h2 span {
+
.grid figure h2 span {
font-weight: 800;
font-weight: 800;
}
}
-
#content .grid figure h2,
+
.grid figure h2,
-
#content .grid figure p {
+
.grid figure p {
margin: 0;
margin: 0;
}
}
-
#content .grid figure p {
+
.grid figure p {
letter-spacing: 1px;
letter-spacing: 1px;
font-size: 80.5%;
font-size: 80.5%;
Line 97: Line 86:
/*----------------------*/
/*----------------------*/
-
#content figure.effect-ruby {
+
figure.effect-ruby {
background-color: #6600CC;
background-color: #6600CC;
}
}
-
#content figure.effect-ruby img {
+
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 98:
}
}
-
#content figure.effect-ruby:hover img {
+
figure.effect-ruby:hover img {
opacity: 0.7;
opacity: 0.7;
-webkit-transform: scale(1);
-webkit-transform: scale(1);
Line 115: Line 104:
}
}
-
#content figure.effect-ruby h2 {
+
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 112:
}
}
-
#content figure.effect-ruby p {
+
figure.effect-ruby p {
margin: 1em 0 0;
margin: 1em 0 0;
padding: 5em;
padding: 5em;
Line 135: Line 124:
}  
}  
-
#content figure.effect-ruby:hover h2 {
+
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);
}
}
-
#content figure.effect-ruby:hover p {
+
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 137:
@media screen and (max-width: 69.5em) {
@media screen and (max-width: 69.5em) {
-
#content .grid figure {
+
.grid figure {
width: 50%;
width: 50%;
}
}
-
#content .grid figure figcaption {
+
.grid figure figcaption {
font-size: 90%;
font-size: 90%;
}
}
Line 160: Line 149:
@media screen and (max-width: 41.5em) {
@media screen and (max-width: 41.5em) {
-
#content .grid figure {
+
.grid figure {
width: 100%;
width: 100%;
}
}
}
}

Revision as of 22:00, 14 August 2014

.grid { overflow: hidden; margin: 0; padding: 3em 0 0 0; width: 100%; list-style: none; text-align: center; }

/* Common style */ .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; }

.grid figure img { position: relative; display: block; min-height: 100%; opacity: 0.8; }

.grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }

.grid figure figcaption, .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 */ .grid figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }

.grid figure h2 { word-spacing: -0.15em; font-weight: 300; }

.grid figure h2 span { font-weight: 800; }

.grid figure h2, .grid figure p { margin: 0; }

.grid figure p { letter-spacing: 1px; font-size: 80.5%; }

/*----------------------*/ /***** Ruby Effects *****/ /*----------------------*/

figure.effect-ruby { background-color: #6600CC; }

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); }

figure.effect-ruby:hover img { opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); }

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); }

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); }

figure.effect-ruby:hover h2 { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

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) { .grid figure { width: 50%; }

.grid figure figcaption { font-size: 90%; } }


@media screen and (max-width: 41.5em) {

.grid figure { width: 100%; } }

Retrieved from "http://2014.igem.org/Team:Manchester/css/team-overlay.css"