Team:Heidelberg/css/frontpage
From 2014.igem.org
(using an external editor) |
|||
(38 intermediate revisions not shown) | |||
Line 20: | Line 20: | ||
.grey { | .grey { | ||
background-color: #e0e0e0; | background-color: #e0e0e0; | ||
+ | } | ||
+ | |||
+ | .epic-background{ | ||
+ | background-color: #000000; | ||
+ | background-image: url("/wiki/images/6/6a/Heidelberg_epic_background.jpg"); | ||
+ | background-size: 100% auto; | ||
+ | background-repeat: no-repeat; | ||
+ | |||
} | } | ||
.red { | .red { | ||
- | background-color: # | + | background-color: #AE2726; |
color: white; | color: white; | ||
+ | } | ||
+ | |||
+ | .red-ring { | ||
+ | background-image: url("/wiki/images/8/85/Heidelberg_Firering_half.png"); | ||
+ | background-position-x: 90%; | ||
+ | background-position-y: 0%; | ||
+ | background-size: auto 300px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | .myDropdown { | ||
+ | list-style:none; | ||
+ | padding:0; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | .popover.fade.in { | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | .popover { | ||
+ | font-size: 12px; | ||
+ | background-color: #515151 !important; | ||
+ | text-align: center; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | .popover-title { | ||
+ | padding: 5px 0; | ||
+ | background-color: transparent; | ||
+ | border-bottom: 1px solid #DE4230; | ||
+ | color: #DE4230; | ||
+ | } | ||
+ | |||
+ | .popover.bottom > .arrow { | ||
+ | border-bottom-color: #515151; | ||
+ | border-bottom-color: rgba(0, 0, 0, 0.25); | ||
+ | } | ||
+ | |||
+ | .popover.bottom > .arrow:after { | ||
+ | border-bottom-color: #515151; | ||
+ | } | ||
+ | |||
+ | |||
+ | .myDropdown a { | ||
+ | text-decoration:none; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .myDropdown a:hover { | ||
+ | color: #AE2726; | ||
} | } | ||
Line 54: | Line 114: | ||
.red .arrow { | .red .arrow { | ||
background-image: url("/wiki/images/0/0b/Dreieck-red.png"); | background-image: url("/wiki/images/0/0b/Dreieck-red.png"); | ||
+ | } | ||
+ | |||
+ | .epic-background .arrow { | ||
+ | background-image: url("/wiki/images/0/05/Heidelberg_Dreieck-black.png"); | ||
} | } | ||
Line 66: | Line 130: | ||
display: inline-block; | display: inline-block; | ||
vertical-align: middle; | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .impressiv span { | ||
+ | color: #DE4230; | ||
+ | } | ||
+ | |||
+ | .impressiv h1 { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | .impressiv h2 { | ||
+ | margin-bottom: 0; | ||
} | } | ||
Line 100: | Line 176: | ||
} | } | ||
- | #front-nav > ul > li a { | + | #front-nav > ul > li > a { |
display:inline-block; | display:inline-block; | ||
- | width: | + | width:55px; |
text-align: center; | text-align: center; | ||
+ | background-size: auto 99.9%; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
} | } | ||
- | #front-nav > ul > li > a | + | #front-nav > ul > li > a img{ |
height: 40px; | height: 40px; | ||
} | } | ||
Line 112: | Line 191: | ||
#front-nav { | #front-nav { | ||
width: 100%; | width: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-color:#000; | ||
} | } | ||
Line 118: | Line 201: | ||
} | } | ||
- | + | #scrollNag { | |
- | background- | + | background-image: url(https://static.igem.org/mediawiki/2014/7/73/Scroll-down-nag.png); |
+ | opacity: 0; | ||
+ | top:0; | ||
} | } | ||
- | .tooltip-arrow { | + | .tooltip-inner { |
- | border-bottom-color: | + | background-color:#515151 !important; |
+ | } | ||
+ | |||
+ | .tooltip.bottom .tooltip-arrow { | ||
+ | border-bottom-color: #515151 !important; | ||
} | } | ||
Line 152: | Line 241: | ||
width: 1170px; | width: 1170px; | ||
} | } | ||
+ | } | ||
+ | |||
+ | .achievements_icon_red:hover { | ||
+ | background-image:url(/wiki/images/2/22/Heidelberg_Achievements_red.png); | ||
+ | } | ||
+ | |||
+ | .team_icon_red:hover { | ||
+ | background-image:url(/wiki/images/d/d3/Team_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .science_icon_red:hover { | ||
+ | background-image:url(/wiki/images/3/3f/Science_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .parts_icon_red:hover { | ||
+ | background-image:url(/wiki/images/1/1d/Parts_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .software_icon_red:hover { | ||
+ | background-image:url(/wiki/images/1/18/Software_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .modeling_icon_red:hover { | ||
+ | background-image:url(/wiki/images/1/13/Modeling_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .toolbox_icon_red:hover { | ||
+ | background-image:url(/wiki/images/3/32/Toolbox_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .humanpractice_icon_red:hover { | ||
+ | background-image:url(/wiki/images/3/3d/Humanpractice_icon_red.png); | ||
+ | } | ||
+ | |||
+ | .MD_icon_red:hover { | ||
+ | background-image:url(/wiki/images/0/03/MD_icon_red.png); | ||
+ | } | ||
+ | |||
+ | |||
+ | .title-wrapper-dnmt1{ | ||
+ | height:200px; | ||
+ | overflow-y:hidden; | ||
+ | margin-bottom:-48px; | ||
+ | color: white; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | .title-dnmt1 { | ||
+ | font-size: 200px; | ||
+ | line-height: 200px; | ||
+ | color: #DE4230; | ||
+ | } | ||
+ | |||
+ | .special-span-dnmt1{ | ||
+ | display:inline-block; | ||
+ | height: 200px; | ||
+ | } | ||
+ | |||
+ | .title-wrapper-xylanase{ | ||
+ | height:140px; | ||
+ | overflow-y:hidden; | ||
+ | margin-bottom:-48px; | ||
+ | margin-top: -30px; | ||
+ | } | ||
+ | |||
+ | .title-xylanase { | ||
+ | font-size: 140px; | ||
+ | line-height: 140px; | ||
+ | } | ||
+ | |||
+ | .special-span-xylanase{ | ||
+ | display:inline-block; | ||
+ | height: 140px; | ||
+ | } | ||
+ | |||
+ | /* Enlarge Icons on hover */ | ||
+ | a:hover .toolbox-icon { | ||
+ | transform: scale(1.15); | ||
+ | -webkit-transform: scale(1.15); | ||
+ | -moz-transform: scale(1.15); | ||
+ | -o-transform: scale(1.15); | ||
+ | -ms-transform: scale(1.15); | ||
+ | } | ||
+ | |||
+ | .toolbox-icon { | ||
+ | transition:transform 0.15s ease; | ||
+ | -webkit-transition:-webkit-transform 0.15s ease; | ||
+ | -moz-transition:-moz-transform 0.15s ease; | ||
+ | -o-transition:-o-transform 0.15s ease; | ||
+ | } | ||
+ | |||
+ | .toolbox-icon { | ||
+ | height: 70px; | ||
+ | } | ||
+ | |||
+ | .descr-box { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #circ-box { | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | #oligo-box { | ||
+ | top: 80px; | ||
+ | left: 75px; | ||
+ | } | ||
+ | |||
+ | #fusion-box { | ||
+ | top: 170px; | ||
+ | left: 100px; | ||
+ | } | ||
+ | |||
+ | #onoff-box { | ||
+ | top:260px; | ||
+ | left: 75px; | ||
+ | } | ||
+ | |||
+ | #purification-box { | ||
+ | top:340px; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | .jumbotron .very-large-text { | ||
+ | font-size:70px; | ||
+ | } | ||
+ | |||
+ | .jumbotron .large-text { | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | |||
+ | .jumbotron .medium-large-text { | ||
+ | font-size: 50px; | ||
+ | } | ||
+ | |||
+ | .jumbotron .medium-text { | ||
+ | font-size: 42px; | ||
+ | } | ||
+ | |||
+ | .jumbotron .normal-medium-text { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | |||
+ | .jumbotron .bold { | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | .jumbotron .larger { | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | |||
+ | .jumbotron .align-right{ | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | .jumbotron .align-center{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .jumbotron .light-red-text { | ||
+ | color: #FF7E25; | ||
+ | } | ||
+ | |||
+ | .jumbotron .red-text { | ||
+ | color: #DE4230; | ||
+ | } | ||
+ | |||
+ | .jumbotron .dark-red-text { | ||
+ | color: #AE2726; | ||
+ | } | ||
+ | |||
+ | .second { | ||
+ | background-image: url(/wiki/images/a/a5/Heidelberg_Xylanase_uni.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: auto 100%; | ||
+ | background-position-x: 90%; | ||
+ | } | ||
+ | |||
+ | .darker-background { | ||
+ | background-color:#262626; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .darker-background .arrow { | ||
+ | background-image:url("/wiki/images/5/58/Heidelberg_dreieck_dark.png"); | ||
+ | } | ||
+ | |||
+ | .modeling-image-bg { | ||
+ | background-image: url("/wiki/images/1/12/Heidelberg_Frontpage_trans_Enzymekinetics.png"); | ||
+ | background-size: auto 100%; | ||
+ | background-position-x: 90%; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | .red a { | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .red a:hover { | ||
+ | color: #e0e0e0; | ||
} | } |
Latest revision as of 18:37, 15 October 2014
- ring {
position: absolute; z-index: 1025;
}
.container {
position: relative; overflow: hidden;
}
.slide {
position: relative; margin-bottom: 0;
}
.dark-grey {
background-color: #515151;
}
.grey {
background-color: #e0e0e0;
}
.epic-background{
background-color: #000000; background-image: url("/wiki/images/6/6a/Heidelberg_epic_background.jpg"); background-size: 100% auto; background-repeat: no-repeat;
}
.red {
background-color: #AE2726; color: white;
}
.red-ring {
background-image: url("/wiki/images/8/85/Heidelberg_Firering_half.png"); background-position-x: 90%; background-position-y: 0%; background-size: auto 300px; background-repeat: no-repeat;
}
.myDropdown { list-style:none; padding:0; text-align: center;
}
.popover.fade.in { opacity: 0.9; }
.popover { font-size: 12px; background-color: #515151 !important; text-align: center; opacity: 0.9; }
.popover-title { padding: 5px 0; background-color: transparent; border-bottom: 1px solid #DE4230; color: #DE4230; }
.popover.bottom > .arrow {
border-bottom-color: #515151; border-bottom-color: rgba(0, 0, 0, 0.25);
}
.popover.bottom > .arrow:after {
border-bottom-color: #515151;
}
.myDropdown a {
text-decoration:none;
color: white;
}
.myDropdown a:hover { color: #AE2726; }
.arrow {
position: absolute; right: 0; background-repeat: no-repeat; z-index: 1020; height: 50px; bottom: -50px;
}
.arrow-right {
background-position: 85% 0;
}
.arrow-left {
background-position: 15% 0;
}
.grey .arrow {
background-image: url("/wiki/images/0/0b/Heidelberg_Dreieck-light.png");
}
.dark-grey .arrow {
background-image: url("/wiki/images/0/03/Heidelberg_Dreieck.png");
}
.red .arrow {
background-image: url("/wiki/images/0/0b/Dreieck-red.png");
}
.epic-background .arrow {
background-image: url("/wiki/images/0/05/Heidelberg_Dreieck-black.png");
}
.impressiv h1{
text-transform: uppercase; font-weight: bold;
}
.impressiv {
color:white; text-align: right; display: inline-block; vertical-align: middle;
}
.impressiv span {
color: #DE4230;
}
.impressiv h1 {
margin-top: 0;
}
.impressiv h2 {
margin-bottom: 0;
}
- nav-wrapper{
width:100%; position: fixed; z-index: 1030; height: 0; overflow: visible;
}
- front-nav {
overflow: visible; position:relative; margin-left: auto; margin-right: auto;
}
- front-nav > ul {
position:absolute; right:0; list-style-type: none; margin: 0; padding-right: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 10px; background: url('/wiki/images/2/20/Heidelberg_Navbg.png'); background: rgba(81, 81, 81, 0.75);
}
- front-nav > ul > li {
display: inline;
}
- front-nav > ul > li > a {
display:inline-block; width:55px; text-align: center; background-size: auto 99.9%; background-repeat: no-repeat; background-position: center;
}
- front-nav > ul > li > a img{
height: 40px;
}
- front-nav {
width: 100%;
}
body {
background-color:#000;
}
.arrow {
width: 100%;
}
- scrollNag {
background-image: url(); opacity: 0; top:0;
}
.tooltip-inner {
background-color:#515151 !important;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #515151 !important;
}
@media (min-width: 768px){
#front-nav { width: 750px; } .arrow { width: 750px; }
}
@media (min-width: 992px) {
#front-nav { width: 970px; } .arrow { width: 970px; }
}
@media (min-width: 1200px) {
#front-nav { width: 1170px; } .arrow { width: 1170px; }
}
.achievements_icon_red:hover {
background-image:url(/wiki/images/2/22/Heidelberg_Achievements_red.png);
}
.team_icon_red:hover {
background-image:url(/wiki/images/d/d3/Team_icon_red.png);
}
.science_icon_red:hover {
background-image:url(/wiki/images/3/3f/Science_icon_red.png);
}
.parts_icon_red:hover {
background-image:url(/wiki/images/1/1d/Parts_icon_red.png);
}
.software_icon_red:hover {
background-image:url(/wiki/images/1/18/Software_icon_red.png);
}
.modeling_icon_red:hover {
background-image:url(/wiki/images/1/13/Modeling_icon_red.png);
}
.toolbox_icon_red:hover {
background-image:url(/wiki/images/3/32/Toolbox_icon_red.png);
}
.humanpractice_icon_red:hover {
background-image:url(/wiki/images/3/3d/Humanpractice_icon_red.png);
}
.MD_icon_red:hover {
background-image:url(/wiki/images/0/03/MD_icon_red.png);
}
.title-wrapper-dnmt1{
height:200px; overflow-y:hidden; margin-bottom:-48px; color: white; font-weight:bold;
}
.title-dnmt1 {
font-size: 200px; line-height: 200px; color: #DE4230;
}
.special-span-dnmt1{
display:inline-block; height: 200px;
}
.title-wrapper-xylanase{
height:140px; overflow-y:hidden; margin-bottom:-48px; margin-top: -30px;
}
.title-xylanase {
font-size: 140px; line-height: 140px;
}
.special-span-xylanase{
display:inline-block; height: 140px;
}
/* Enlarge Icons on hover */ a:hover .toolbox-icon {
transform: scale(1.15); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15);
}
.toolbox-icon { transition:transform 0.15s ease; -webkit-transition:-webkit-transform 0.15s ease; -moz-transition:-moz-transform 0.15s ease; -o-transition:-o-transform 0.15s ease; }
.toolbox-icon { height: 70px; }
.descr-box {
position: absolute;
}
- circ-box {
top:0; left:0;
}
- oligo-box {
top: 80px; left: 75px;
}
- fusion-box {
top: 170px; left: 100px;
}
- onoff-box {
top:260px; left: 75px;
}
- purification-box {
top:340px; left: 0;
}
.jumbotron .very-large-text { font-size:70px; }
.jumbotron .large-text { font-size: 60px; }
.jumbotron .medium-large-text { font-size: 50px; }
.jumbotron .medium-text { font-size: 42px; }
.jumbotron .normal-medium-text { font-size: 30px; }
.jumbotron .bold { font-weight:bold; }
.jumbotron .larger { font-size: 1.2em; }
.jumbotron .align-right{ text-align: right; }
.jumbotron .align-center{ text-align: center; }
.jumbotron .light-red-text { color: #FF7E25; }
.jumbotron .red-text { color: #DE4230; }
.jumbotron .dark-red-text { color: #AE2726; }
.second { background-image: url(/wiki/images/a/a5/Heidelberg_Xylanase_uni.png); background-repeat: no-repeat; background-size: auto 100%; background-position-x: 90%; }
.darker-background { background-color:#262626; color: white; }
.darker-background .arrow { background-image:url("/wiki/images/5/58/Heidelberg_dreieck_dark.png"); }
.modeling-image-bg { background-image: url("/wiki/images/1/12/Heidelberg_Frontpage_trans_Enzymekinetics.png"); background-size: auto 100%; background-position-x: 90%; background-repeat: no-repeat; }
.red a { color:white; }
.red a:hover { color: #e0e0e0; }