Team:UCL/Template:HomeMain.css
From 2014.igem.org
Adamdenyer (Talk | contribs) |
Adamdenyer (Talk | contribs) |
||
Line 131: | Line 131: | ||
padding-right:200px; | padding-right:200px; | ||
height:600px; | height:600px; | ||
+ | } | ||
+ | |||
+ | .og-grid { | ||
+ | list-style: none; | ||
+ | padding: 20px 0; | ||
+ | margin: 0 auto; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .og-grid li { | ||
+ | display: inline-block; | ||
+ | margin: 10px 5px 0 5px; | ||
+ | vertical-align: top; | ||
+ | height: 250px; | ||
+ | } | ||
+ | |||
+ | .og-grid li > a, | ||
+ | .og-grid li > a img { | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .og-grid li.og-expanded > a::after { | ||
+ | top: auto; | ||
+ | border: solid transparent; | ||
+ | content: " "; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | border-bottom-color: #ddd; | ||
+ | border-width: 15px; | ||
+ | left: 50%; | ||
+ | margin: -20px 0 0 -15px; | ||
+ | } | ||
+ | |||
+ | .og-expander { | ||
+ | position: absolute; | ||
+ | background: #ddd; | ||
+ | top: auto; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | margin-top: 10px; | ||
+ | text-align: left; | ||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .og-expander-inner { | ||
+ | padding: 50px 30px; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .og-close { | ||
+ | position: absolute; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | top: 20px; | ||
+ | right: 20px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .og-close::before, | ||
+ | .og-close::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | top: 50%; | ||
+ | height: 1px; | ||
+ | background: #888; | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | |||
+ | .og-close::after { | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | |||
+ | .og-close:hover::before, | ||
+ | .og-close:hover::after { | ||
+ | background: #333; | ||
+ | } | ||
+ | |||
+ | .og-fullimg, | ||
+ | .og-details { | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .og-details { | ||
+ | padding: 0 40px 0 20px; | ||
+ | } | ||
+ | |||
+ | .og-fullimg { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .og-fullimg img { | ||
+ | display: inline-block; | ||
+ | max-height: 100%; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | .og-details h3 { | ||
+ | font-weight: 300; | ||
+ | font-size: 52px; | ||
+ | padding: 40px 0 10px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .og-details p { | ||
+ | font-weight: 400; | ||
+ | font-size: 16px; | ||
+ | line-height: 22px; | ||
+ | color: #999; | ||
+ | } | ||
+ | |||
+ | .og-details a { | ||
+ | font-weight: 700; | ||
+ | font-size: 16px; | ||
+ | color: #333; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 2px; | ||
+ | padding: 10px 20px; | ||
+ | border: 3px solid #333; | ||
+ | display: inline-block; | ||
+ | margin: 30px 0 0; | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | .og-details a::before { | ||
+ | content: '\2192'; | ||
+ | display: inline-block; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | |||
+ | .og-details a:hover { | ||
+ | border-color: #999; | ||
+ | color: #999; | ||
+ | } | ||
+ | |||
+ | .og-loading { | ||
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | border-radius: 50%; | ||
+ | background: #ddd; | ||
+ | box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin: -25px 0 0 -25px; | ||
+ | animation: loader 0.5s infinite ease-in-out both; | ||
+ | } | ||
+ | |||
+ | @keyframes loader { | ||
+ | 0% { background: #ddd; } | ||
+ | 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } | ||
+ | 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } | ||
} | } | ||
Revision as of 09:15, 1 September 2014
/* =Header Banner */ .banner-image-background {
background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center; background-size: 150%; /*background-color: #e7e7e7;*/ position: relative; height: 700px;
z-index: 10; }
.banner-image-overlay {
background-color: rgba(0,0,0,0.5); width:100%; height:100%;
z-index: 11; }
.banner-image-logo {
top:150px; display: inline-block; vertical-align: middle; opacity:1;
}
/* =Profiles */ main {
z-index: 1; position: relative;
}
.slide {
color: #a7a0a2; font-weight: 200; font-size: 1em; font-family: 'Lato', Arial, sans-serif;
}
.slide .tellmemore {
color: #a7a0a2; font-family: 'Lato', Arial, sans-serif; font-size:0.75em;
}
.slide .tellmemore p {
text-align:left;
}
.slide h1 {
background-color:black; font-weight:bold; border-bottom:none; color: white;
}
.slide h2 {
font-weight:bold; border-bottom:none; color: #a7a0a2;
}
.slide .tellmemore img {
height:50%; width:50%;
}
.slide h1 {
padding-top:-10px; padding-left:30px; text-align:left;
}
.slide h1 span {
top:-10px;
}
.slide p, .slide h2 {
text-align:right;
}
.slidemore {
float:left;
}
- slideabout {
padding-left:200px; padding-right:200px; height:600px;
}
- slidescience {
background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat; background-position-y:-400px; background-size:100%; height:500px;
z-index: 10; }
- slidesciencecontent .experiments {
position:relative; top:50px; left:250px;
}
- slidesciencecontent .results {
position:relative; top:50px; left:-250px;
}
- slidesciencecontent .experiments p {
color:white; position:relative; left:-38px;
}
- slidesciencecontent .results p {
color:white; position:relative; left:-60px;
}
- slidehumans {
padding-left:200px; padding-right:200px; height:600px;
}
.og-grid {
list-style: none; padding: 20px 0; margin: 0 auto; text-align: center; width: 100%;
}
.og-grid li {
display: inline-block; margin: 10px 5px 0 5px; vertical-align: top; height: 250px;
}
.og-grid li > a, .og-grid li > a img {
border: none; outline: none; display: block; position: relative;
}
.og-grid li.og-expanded > a::after {
top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ddd; border-width: 15px; left: 50%; margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute; background: #ddd; top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0; overflow: hidden;
}
.og-expander-inner {
padding: 50px 30px; height: 100%;
}
.og-close {
position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer;
}
.og-close::before, .og-close::after {
content: ; position: absolute; width: 100%; top: 50%; height: 1px; background: #888; transform: rotate(45deg);
}
.og-close::after {
transform: rotate(-45deg);
}
.og-close:hover::before, .og-close:hover::after {
background: #333;
}
.og-fullimg, .og-details {
width: 50%; float: left; height: 100%; overflow: hidden; position: relative;
}
.og-details {
padding: 0 40px 0 20px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block; max-height: 100%; max-width: 100%;
}
.og-details h3 {
font-weight: 300; font-size: 52px; padding: 40px 0 10px; margin-bottom: 10px;
}
.og-details p {
font-weight: 400; font-size: 16px; line-height: 22px; color: #999;
}
.og-details a {
font-weight: 700; font-size: 16px; color: #333; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px; border: 3px solid #333; display: inline-block; margin: 30px 0 0; outline: none;
}
.og-details a::before {
content: '\2192'; display: inline-block; margin-right: 10px;
}
.og-details a:hover {
border-color: #999; color: #999;
}
.og-loading {
width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; animation: loader 0.5s infinite ease-in-out both;
}
@keyframes loader {
0% { background: #ddd; } 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@media only screen and (min-width: 768px) {
/* =Header Banner */
.banner-image-background { background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center; background-size:100%; position: relative; z-index:10; /* height: 1000px; */
}
.banner-image-overlay { background-color:rgba(0,0,0,0.5); width:100%; height:100%; z-index:11; }
.banner-image-logo { width: 727px; height: 503px; background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat center; background-size: 727px 503px; position: absolute; /* top: 25%; */ left: 50%; margin-left: -359px;
z-index:12;
}
}