Line 512: | Line 512: | ||
.banner .banner-heading { | .banner .banner-heading { | ||
− | font-size: | + | font-size: 140%; |
} | } | ||
} | } |
Revision as of 16:03, 31 October 2017
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* VARIABLES */ body {
--tint-color: rgba(50, 71, 85, 1); background-color: white !important;
}
/* REMOVE IGEM STYLES */
- globalWrapper {
padding-bottom: 0;
}
.igem_2017_content_wrapper p:last-child {
margin: 0;
}
.igem_2017_content_wrapper {
margin: 100px 0 0 0 !important; width: 100vw !important;
}
.igem_2017_content_wrapper a {
text-decoration: none !important;
}
/* GENERAL STYLING */
- {
font-family: "Helvetica Neue", "Roboto", sans-serif; font-weight: 200; letter-spacing: 1.5px;
}
div .dark {
background-color: #333230; color: white;
}
div .dark h1, h2 {
color: inherit;
}
div.light, div .dark {
padding: 20px 10px;
}
.cd-section {
padding-top: 100px; margin-top: -100px;
}
/* main-navigation */
.navbar-default {
padding-top: 20px; background-color: rgba(255, 255, 255, 0.95); border: none;
}
.navbar > .container {
margin-left: 0;
}
.navbar-brand {
background-image: url(""); background-size: contain; width: 100px; height: 100px; margin-right: 20px;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: 0;
}
.nav li a {
position: relative; display: block; text-transform: uppercase; letter-spacing: 1.5px; margin-left: 10px; color: #fff; font-size: 70%; padding: 15px 10px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown-menu > li > .active > a, .dropdown-menu > li > .active > a:focus, .dropdown-menu > li > .actice > a:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #fff; text-decoration: none;
}
.navbar > .container {
width: 100%;
}
.navbar-toggle {
margin-top: 28px;
}
.navbar-default .navbar-toggle {
height: 50px; width: 50px; z-index: 1; border-color: var(--tint-color); background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
width: 28px; transition: .5s ease; background-color: var(--tint-color);
}
.navbar-toggle.collapsed .icon-bar:nth-child(2) {
transform: rotate(0) translateY(0) translateX(0);
}
.navbar-toggle.collapsed .icon-bar:nth-child(3) {
opacity: 1
}
.navbar-toggle.collapsed .icon-bar:nth-child(4) {
transform: rotate(0) translateY(0) translateX(0);
}
.navbar-toggle .icon-bar:nth-child(2) {
transform: rotate(-45deg) translateY(5px) translateX(-5px);
}
.navbar-toggle .icon-bar:nth-child(3) {
opacity: 0
}
.navbar-toggle .icon-bar:nth-child(4) {
transform: rotate(45deg) translateY(-4px) translateX(-3px);
}
@media (min-width: 768px) {
.navbar-nav { margin-top: 20px !important; float: right; }
}
.navbar-default, .navbar-brand {
transition: all 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.transparent {
background-color: rgba(0, 0, 0, 0);
}
.transparent .navbar-brand {
background-image: url('https://static.igem.org/mediawiki/2017/1/19/T--Erlangen_Nuremberg--Logo_inverted.png')
}
.nav > li > a {
padding: 10px 10px !important;
}
/* SIDE NAVIGATION */ /* --------------------------------
Modules - reusable parts of our design
*/
.cd-img-replace {
/* replace text with a background-image */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap;
}
/* --------------------------------
Main components
*/
/* No Touch devices */ .cd-nav-content-wrapper {
}
.cd-nav-trigger {
display: none;
}
.no-touch #cd-vertical-nav {
position: fixed; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; padding-left: 5px;
}
- cd-vertical-nav li {
text-align: left; list-style: none none;
}
.no-touch #cd-vertical-nav a {
display: inline-block; /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.no-touch #cd-vertical-nav a:after {
content: ""; display: table; clear: both;
}
.no-touch #cd-vertical-nav a span {
float: left; display: inline-block; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6);
}
.no-touch #cd-vertical-nav a:hover span {
-webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 1;
}
.no-touch #cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
opacity: 1;
}
.no-touch #cd-vertical-nav .cd-dot {
position: relative; /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ top: 8px; height: 20px; width: 20px; border-radius: 50%; background-color: var(--tint-color); opacity: 0.5; -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; -moz-transition: -moz-transform 0.2s, background-color 0.5s; transition: transform 0.2s, background-color 0.5s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; border: 2px solid white;
}
.no-touch #cd-vertical-nav .cd-label {
text-align: left; position: relative; font-size: 150%; color: white; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; opacity: 0; -webkit-transform-origin: 0; -moz-transform-origin: 0; -ms-transform-origin: 0; -o-transform-origin: 0; transform-origin: 0; background: var(--tint-color); border: 1px solid var(--tint-color); border-radius: 10px; padding: 3px; margin-left: 10px;
}
/* Touch devices */ .touch .cd-nav-trigger {
display: block; z-index: 2; position: fixed; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: 0.25em; background: rgba(240, 240, 240, 0.9); border: 1px solid var(--tint-color);
}
.touch .cd-nav-trigger span {
position: absolute; height: 4px; width: 4px; background-color: var(--tint-color); border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
content: ; height: 100%; width: 100%; position: absolute; left: 0; background-color: inherit; border-radius: inherit;
}
.touch .cd-nav-trigger span::before {
top: -9px;
}
.touch .cd-nav-trigger span::after {
bottom: -9px;
}
.touch #cd-vertical-nav {
position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border-radius: 0.25em; background-color: rgba(240, 240, 240, 0.9);
}
.touch #cd-vertical-nav a {
display: block; padding: 1em; border-bottom: 1px solid rgba(62, 57, 71, 0.1);
}
.touch #cd-vertical-nav a span:first-child {
display: none;
}
.touch #cd-vertical-nav a.is-selected span:last-child {
color: var(--tint-color); font-weight: bold;
}
.touch #cd-vertical-nav.open {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); max-height: 65vh; box-shadow: 3px 3px rgba(50,71,85,0.6)
}
.touch #cd-vertical-nav.open + .cd-nav-trigger {
background-color: transparent; border: none;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span {
background-color: rgba(62, 57, 71, 0);
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
background-color: #3e3947; height: 3px; width: 20px; border-radius: 0; left: -8px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px;
}
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0;
}
.touch #cd-vertical-nav li:last-child a {
border-bottom: none;
}
@media only screen and (min-width: 768px) {
.touch .cd-nav-trigger, .touch #cd-vertical-nav { bottom: 40px; }
}
/** TOP BANNER */
.banner {
box-shadow:inset 0 0 0 2000px rgba(50, 71, 85, 0.7); top: -3px; height: 60vh; width: 100vw; margin-top: -123px; background-color: var(--tint-color); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.middle-banner{
box-shadow:inset 0 0 0 2000px rgba(50, 71, 85, 0.7); height: 600px; width: 100vw; display: table-cell; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.banner .banner-heading {
text-align: center; position: absolute; top: 220px; width: 100%;
}
.middle-banner .banner-heading{
text-align: center; position: absolute; width: 100%; margin-top: 220px;
}
.igem_2017_content_wrapper .banner-heading h1 {
text-shadow: 2px 2px rgba(0, 0, 0, 0.2); color: white; font-size: 500%; font-weight: 200 !important; text-transform: uppercase; text-align: center; vertical-align: middle;
}
@media screen and (max-width: 1024px) {
.banner .banner-heading { font-size: 140%; }
}
@media screen and (max-width: 767px) {
.banner .banner-heading { top: 100px; font-size: 100%; }
.middle-banner h1 { font-size: 200% !important; }
}
/*CONTENT STYLING*/
.content {
margin-left: 10%; margin-right: 10%; text-align: justify;
}
.content h3 {
text-align: center; font-weight: 600; margin-bottom: 1.5% !important; margin-top: 3% !important;
}
.content img {
width: 80%; border-radius: 10% 100% 100% 100%; margin-top: 10%;
}
.center {
margin: 0 auto; width: 80%;
}
@media (max-width: 1024px) {
.igem_2017_content_wrapper .banner-heading h1 { font-size: 300%; }
}
/****************************
Navbar Styling ****************************/
/* This rule makes toplevel menu items clickable links
and also displays dropdown menus on hover - WHOA! */
ul.nav li.dropdown:hover ul.dropdown-menu {
/* display: block; */ margin:0;
} a.menu:after, .dropdown-toggle:after {
content: none;
}
/* navbar not fixed top */ .navbar-fixed-top {
position: absolute !important;
}
.navbar-nav > li > a {
font-size: 80%; font-weight: 400;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
text-decoration: none !important;
}
.open > a:hover, .open > a{
background-color: transparent !important;
}
.dropdown-menu > li:not(.beam):not(.pathomon) {
margin: 5% 0 5% 0; width: 100%;
}
.dropdown-menu > li > a {
color: var(--tint-color); font-weight: bold; /* transition: opacity .3s ease-in-out; */ opacity: 0.8;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:visited{
background-color: white; text-decoration: none; color: var(--tint-color); opacity: 1;
}
.navbar-nav > li > .dropdown-menu {
border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: white; opacity: 1; font-size: 100%; z-index: 1000; border-top: 4px solid var(--tint-color);
/*centers dropdown */ left: 50%; right: auto; text-align: left; transform: translate(-50%, 0);
}
.navbar-nav > li > .dropdown-menu.project-menu {
width: 450%; height: 500%;
}
.beam, .pathomon {
width: 50%; display: inline-block; text-align: center; height: 100%; padding-left: 2.5%;
}
.beam {
float: left;
}
.pathomon {
float:right;
}
.dropdown-logo {
border-radius: 50%; vertical-align: middle; margin-right: 10%; opacity: 1; transition: 0.3s ease;
}
.beam > ul, .pathomon > ul {
list-style: none; margin-left:0; height: 100%
}
.beam > ul > li:not(:first-child), .pathomon > ul > li:not(:first-child){
width: 60%; margin:0 auto;
}
.beam > ul > li > a, .pathomon > ul > li > a{
padding-top: 10%; padding-bottom: 10%; color: var(--tint-color); text-transform: capitalize; font-size: 80%; font-weight: bold; transition: opacity .3s ease-in-out; opacity: 0.8; text-align: left;
}
.beam > ul > li > a:hover, .pathomon > ul > li > a:hover, .beam > ul > li > a:focus, .pathomon > ul > li > a:focus, .beam > ul > li > a:visited, .pathomon > ul > li > a:visited, .beam > ul > li > a:active, .pathomon > ul > li > a:active {
opacity: 1; text-decoration: none !important; background-color: white !important;
}
- beam, #pathomon {
font-weight: bold; width: 80%; display: inline-block ; vertical-align: middle; text-align: left; font-size: 100%;
}
- collaborations {
width: 150%;
}
- collaborations > li {
margin: 10% 0% 10% 0%;
}
- collaborations > a {
margin-left: 0 !important;
}
/*main-menu responsive styling */ /* NAVIGATION */ @media (max-width: 1024px) {
/* Collapse Navbar earlier */ .navbar-header { float: none; }
/* fixed navbar on mobile */ .navbar-fixed-top { position: fixed !important; }
.navbar-left, .navbar-right { float: none !important; }
.navbar-default { background-color: white !important; border-bottom: 4px solid var(--tint-color) !important; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.caret { display: none; }
.navbar-toggle { display: block; }
.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.navbar-fixed-top { top: 0; border-width: 0 0 1px; }
.navbar-collapse.collapse { display: none !important; border-top: none !important; max-height: 500%; }
.navbar-collapse.collapsing { border-top: none !important; max-height: 500%; }
.navbar-nav { float: none !important; margin-top: 7.5px; }
.navbar-nav > li { float: none; margin: 0 auto; margin-top: 2.5%; margin-bottom: 2.55%; }
.navbar-nav > li > a { color: var(--tint-color) !important; text-align: center; font-size: 100% !important; font-weight: normal;
}
.navbar-nav > li:first-child { margin-top: 0; }
.collapse.in { display: block !important; }
.navbar-toggle.collapsed, .navbar-toggle { border: none; background: transparent !important; }
.navbar.navbar-default.navbar-fixed-top.transparent { background-color: white !important; }
.navbar-brand { background-image: url("") !important; }
/* hide all underpoints */ .dropdown-menu { display: none !important; }
.content { margin-left: 5%; margin-right: 5%; }
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin: 0 !important; }
}