Team:UNIK Copenhagen
From 2014.igem.org
Line 1: | Line 1: | ||
- | + | /* https://2014.igem.org/Team:UNIK_Copenhagen/css/main.css */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* REMOVE IGEM STYLE */ | |
+ | #search-controls { | ||
+ | margin-top:30px; | ||
+ | } | ||
+ | #footer-box, #siteSub, #search-controls, .firstHeading, #contentSub, #catlinks, #p-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | #bodyContent a[href ^="mailto:"], | ||
+ | .link-mailto { | ||
+ | background: none; | ||
+ | padding-right: 0; | ||
+ | } | ||
+ | #bodyContent a[href ^="https://"], .link-https { | ||
+ | background: none; | ||
+ | padding-right: 0; | ||
+ | } | ||
+ | #menubar { | ||
+ | margin-left: 10px; | ||
+ | background-color: transparent; | ||
+ | color: black; | ||
+ | } | ||
- | + | .right-menu li a, .left-menu li a { | |
- | + | color: black; | |
+ | background-color: transparent; | ||
+ | font-size: 10px; | ||
+ | font-weight: bold; | ||
+ | } | ||
- | + | #top-section { | |
- | + | height: 15px; | |
+ | border: none !important; | ||
+ | } | ||
- | + | #content { | |
- | + | width: 100%; | |
- | + | background-color: #000 !important; | |
- | + | color: white !important; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | html { | |
- | + | height:100%; | |
- | + | } | |
- | + | body { | |
- | + | overflow-x: hidden; | |
- | + | height:100%; | |
- | + | overflow-y: scroll; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | /* Custom theme */ | |
- | + | body { | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; | |
- | + | color: #fff; | |
- | + | background-color: #000; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | html { | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | h1, | |
- | + | h2, | |
- | + | h3, | |
- | + | h4, | |
- | + | h5, | |
- | + | h6 { | |
- | + | margin: 0 0 35px; | |
- | + | text-transform: uppercase; | |
- | + | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; | |
- | + | font-weight: 700; | |
+ | letter-spacing: 1px; | ||
+ | } | ||
- | + | p { | |
- | + | margin: 0 0 25px; | |
- | + | font-size: 18px; | |
- | + | line-height: 1.5; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | @media(min-width:767px) { | |
- | + | p { | |
- | + | margin: 0 0 35px; | |
- | + | font-size: 20px; | |
- | + | line-height: 1.6; | |
- | + | } | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | a { | |
+ | color: #28c3ab; | ||
+ | -webkit-transition: all .2s ease-in-out; | ||
+ | -moz-transition: all .2s ease-in-out; | ||
+ | transition: all .2s ease-in-out; | ||
+ | } | ||
- | + | a:hover, | |
- | + | a:focus { | |
- | + | text-decoration: none; | |
- | + | color: #176e61; | |
- | + | } | |
- | + | ||
- | + | .light { | |
- | {{: | + | font-weight: 400; |
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | margin-bottom: 0; | ||
+ | border-bottom: 1px solid rgba(255,255,255,.3); | ||
+ | text-transform: uppercase; | ||
+ | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | .navbar-brand { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | .navbar-brand:focus { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | .navbar-custom a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .navbar-custom .nav li a { | ||
+ | -webkit-transition: background .3s ease-in-out; | ||
+ | -moz-transition: background .3s ease-in-out; | ||
+ | transition: background .3s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .navbar-custom .nav li a:hover, | ||
+ | .navbar-custom .nav li a:focus, | ||
+ | .navbar-custom .nav li.active { | ||
+ | outline: 0; | ||
+ | background-color: rgba(255,255,255,.2); | ||
+ | } | ||
+ | |||
+ | .navbar-toggle { | ||
+ | padding: 4px 6px; | ||
+ | font-size: 16px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .navbar-toggle:focus, | ||
+ | .navbar-toggle:active { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | @media(min-width:767px) { | ||
+ | .navbar { | ||
+ | padding: 20px 0; | ||
+ | border-bottom: 0; | ||
+ | letter-spacing: 1px; | ||
+ | background: 0 0; | ||
+ | -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
+ | -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
+ | transition: background .5s ease-in-out,padding .5s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .top-nav-collapse { | ||
+ | padding: 0; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | .navbar-custom.top-nav-collapse { | ||
+ | border-bottom: 1px solid rgba(255,255,255,.3); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .intro { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | padding: 100px 0; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/2/2d/Intro-bg.jpg) no-repeat bottom center scroll; | ||
+ | background-color: #000; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | } | ||
+ | |||
+ | .intro-body { | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .brand-heading { | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | |||
+ | .intro-text { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | @media(min-width:767px) { | ||
+ | .intro { | ||
+ | height: 100%; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .brand-heading { | ||
+ | font-size: 100px; | ||
+ | } | ||
+ | |||
+ | .intro-text { | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .btn-circle { | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | margin-top: 15px; | ||
+ | padding: 7px 16px; | ||
+ | border: 2px solid #fff; | ||
+ | border-radius: 35px; | ||
+ | font-size: 40px; | ||
+ | color: #fff; | ||
+ | background: 0 0; | ||
+ | -webkit-transition: background .3s ease-in-out; | ||
+ | -moz-transition: background .3s ease-in-out; | ||
+ | transition: background .3s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .btn-circle:hover, | ||
+ | .btn-circle:focus { | ||
+ | outline: 0; | ||
+ | color: #fff; | ||
+ | background: rgba(255,255,255,.1); | ||
+ | } | ||
+ | |||
+ | .page-scroll .btn-circle i.animated { | ||
+ | -webkit-transition-property: -webkit-transform; | ||
+ | -webkit-transition-duration: 1s; | ||
+ | -moz-transition-property: -moz-transform; | ||
+ | -moz-transition-duration: 1s; | ||
+ | } | ||
+ | |||
+ | .page-scroll .btn-circle:hover i.animated { | ||
+ | -webkit-animation-name: pulse; | ||
+ | -moz-animation-name: pulse; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | -moz-animation-duration: 1.5s; | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | -moz-animation-iteration-count: infinite; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | -moz-animation-timing-function: linear; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes pulse { | ||
+ | 0 { | ||
+ | -webkit-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | -webkit-transform: scale(1.2); | ||
+ | transform: scale(1.2); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | -webkit-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes pulse { | ||
+ | 0 { | ||
+ | -moz-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | -moz-transform: scale(1.2); | ||
+ | transform: scale(1.2); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | -moz-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .content-section { | ||
+ | padding-top: 100px; | ||
+ | } | ||
+ | |||
+ | .download-section { | ||
+ | width: 100%; | ||
+ | padding: 50px 0; | ||
+ | color: #fff; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/0/00/Downloads-bg.jpg) no-repeat center center scroll; | ||
+ | background-color: #000; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | } | ||
+ | |||
+ | #map { | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | |||
+ | @media(min-width:767px) { | ||
+ | .content-section { | ||
+ | padding-top: 250px; | ||
+ | } | ||
+ | |||
+ | .download-section { | ||
+ | padding: 100px 0; | ||
+ | } | ||
+ | |||
+ | #map { | ||
+ | height: 400px; | ||
+ | margin-top: 250px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .btn { | ||
+ | text-transform: uppercase; | ||
+ | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; | ||
+ | font-weight: 400; | ||
+ | -webkit-transition: all .3s ease-in-out; | ||
+ | -moz-transition: all .3s ease-in-out; | ||
+ | transition: all .3s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .btn-default { | ||
+ | border: 1px solid #28c3ab; | ||
+ | color: #28c3ab; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .btn-default:hover, | ||
+ | .btn-default:focus { | ||
+ | border: 1px solid #28c3ab; | ||
+ | outline: 0; | ||
+ | color: #000; | ||
+ | background-color: #28c3ab; | ||
+ | } | ||
+ | |||
+ | .btn-huge { | ||
+ | padding: 25px; | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | |||
+ | .banner-social-buttons { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | @media(max-width:1199px) { | ||
+ | ul.banner-social-buttons { | ||
+ | margin-top: 15px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:767px) { | ||
+ | ul.banner-social-buttons>li { | ||
+ | display: block; | ||
+ | margin-bottom: 20px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul.banner-social-buttons>li:last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ::-moz-selection { | ||
+ | text-shadow: none; | ||
+ | background: #fcfcfc; | ||
+ | background: rgba(255,255,255,.2); | ||
+ | } | ||
+ | |||
+ | ::selection { | ||
+ | text-shadow: none; | ||
+ | background: #fcfcfc; | ||
+ | background: rgba(255,255,255,.2); | ||
+ | } | ||
+ | |||
+ | img::selection { | ||
+ | background: 0 0; | ||
+ | } | ||
+ | |||
+ | img::-moz-selection { | ||
+ | background: 0 0; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | webkit-tap-highlight-color: rgba(255,255,255,.2); | ||
+ | } |
Revision as of 14:42, 10 July 2014
/* https://2014.igem.org/Team:UNIK_Copenhagen/css/main.css */
/* REMOVE IGEM STYLE */
- search-controls {
margin-top:30px;
}
- footer-box, #siteSub, #search-controls, .firstHeading, #contentSub, #catlinks, #p-logo {
display:none;
}
- bodyContent a[href ^="mailto:"],
.link-mailto {
background: none; padding-right: 0;
}
- bodyContent a[href ^="https://"], .link-https {
background: none; padding-right: 0;
}
- menubar {
margin-left: 10px; background-color: transparent; color: black; }
.right-menu li a, .left-menu li a { color: black; background-color: transparent; font-size: 10px; font-weight: bold; }
- top-section {
height: 15px; border: none !important;
}
- content {
width: 100%; background-color: #000 !important; color: white !important; }
html {
height:100%;
} body {
overflow-x: hidden; height:100%; overflow-y: scroll;
}
/* Custom theme */ body {
width: 100%; height: 100%; font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; color: #fff; background-color: #000;
}
html {
width: 100%; height: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 35px; text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; letter-spacing: 1px;
}
p {
margin: 0 0 25px; font-size: 18px; line-height: 1.5;
}
@media(min-width:767px) {
p { margin: 0 0 35px; font-size: 20px; line-height: 1.6; }
}
a {
color: #28c3ab; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
a:hover, a:focus {
text-decoration: none; color: #176e61;
}
.light {
font-weight: 400;
}
.navbar {
margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.3); text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color: #000;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus, .navbar-custom .nav li.active {
outline: 0; background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px; font-size: 16px; color: #fff;
}
.navbar-toggle:focus, .navbar-toggle:active {
outline: 0;
}
@media(min-width:767px) {
.navbar { padding: 20px 0; border-bottom: 0; letter-spacing: 1px; background: 0 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; }
.top-nav-collapse { padding: 0; background-color: #000; }
.navbar-custom.top-nav-collapse { border-bottom: 1px solid rgba(255,255,255,.3); }
}
.intro {
display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #fff; background: url() no-repeat bottom center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;
}
.intro-body {
display: table-cell; vertical-align: middle;
}
.brand-heading {
font-size: 40px;
}
.intro-text {
font-size: 18px;
}
@media(min-width:767px) {
.intro { height: 100%; padding: 0; }
.brand-heading { font-size: 100px; }
.intro-text { font-size: 25px; }
}
.btn-circle {
width: 70px; height: 70px; margin-top: 15px; padding: 7px 16px; border: 2px solid #fff; border-radius: 35px; font-size: 40px; color: #fff; background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
.btn-circle:hover, .btn-circle:focus {
outline: 0; color: #fff; background: rgba(255,255,255,.1);
}
.page-scroll .btn-circle i.animated {
-webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s;
}
.page-scroll .btn-circle:hover i.animated {
-webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
0 { -webkit-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes pulse {
0 { -moz-transform: scale(1); transform: scale(1); }
50% { -moz-transform: scale(1.2); transform: scale(1.2); }
100% { -moz-transform: scale(1); transform: scale(1); }
}
.content-section {
padding-top: 100px;
}
.download-section {
width: 100%; padding: 50px 0; color: #fff; background: url() no-repeat center center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;
}
- map {
width: 100%; height: 200px; margin-top: 100px;
}
@media(min-width:767px) {
.content-section { padding-top: 250px; }
.download-section { padding: 100px 0; }
#map { height: 400px; margin-top: 250px; }
}
.btn {
text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.btn-default {
border: 1px solid #28c3ab; color: #28c3ab; background-color: transparent;
}
.btn-default:hover, .btn-default:focus {
border: 1px solid #28c3ab; outline: 0; color: #000; background-color: #28c3ab;
}
.btn-huge {
padding: 25px; font-size: 26px;
}
.banner-social-buttons {
margin-top: 0;
}
@media(max-width:1199px) {
ul.banner-social-buttons { margin-top: 15px; }
}
@media(max-width:767px) {
ul.banner-social-buttons>li { display: block; margin-bottom: 20px; padding: 0; }
ul.banner-social-buttons>li:last-child { margin-bottom: 0; }
}
- -moz-selection {
text-shadow: none; background: #fcfcfc; background: rgba(255,255,255,.2);
}
- selection {
text-shadow: none; background: #fcfcfc; background: rgba(255,255,255,.2);
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
body {
webkit-tap-highlight-color: rgba(255,255,255,.2);
}