Team:Heidelberg/css/frontpage

From 2014.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 31: Line 31:
.red {
.red {
-
   background-color: #ad342a;
+
   background-color: #AE2726;
 +
  color: white;
 +
}
 +
 
 +
.red-ring {
   background-image: url("/wiki/images/8/85/Heidelberg_Firering_half.png");
   background-image: url("/wiki/images/8/85/Heidelberg_Firering_half.png");
   background-position-x: 90%;
   background-position-x: 90%;
-
   background-position-y: 100%;
+
   background-position-y: 0%;
   background-size: auto 300px;
   background-size: auto 300px;
   background-repeat: no-repeat;
   background-repeat: no-repeat;
-
   color: white;
+
}
 +
 
 +
.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 83: 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 117: Line 176:
}
}
-
#front-nav > ul > li a {
+
#front-nav > ul > li > a {
   display:inline-block;
   display:inline-block;
   width:55px;
   width:55px;
Line 126: Line 185:
}
}
-
#front-nav > ul > li a img{
+
#front-nav > ul > li > a img{
   height: 40px;
   height: 40px;
}
}
Line 132: Line 191:
#front-nav {
#front-nav {
   width: 100%;
   width: 100%;
 +
}
 +
 +
body {
 +
  background-color:#000;
}
}
.arrow {
.arrow {
   width: 100%;
   width: 100%;
 +
}
 +
 +
#scrollNag {
 +
  background-image: url(https://static.igem.org/mediawiki/2014/7/73/Scroll-down-nag.png);
 +
  opacity: 0;
 +
  top:0;
}
}
Line 172: Line 241:
     width: 1170px;
     width: 1170px;
   }
   }
 +
}
 +
 +
.achievements_icon_red:hover {
 +
  background-image:url(/wiki/images/2/22/Heidelberg_Achievements_red.png);
}
}
Line 204: Line 277:
.MD_icon_red:hover {
.MD_icon_red:hover {
   background-image:url(/wiki/images/0/03/MD_icon_red.png);
   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

  1. 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;

}

  1. nav-wrapper{ 
 width:100%;
 position: fixed;
 z-index: 1030;
 height: 0;
 overflow: visible;

}

  1. front-nav { 
 overflow: visible;
 position:relative;
 margin-left: auto;
 margin-right: auto;

}

  1. 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);

}

  1. front-nav > ul > li { 
 display: inline;

}

  1. 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;

}

  1. front-nav > ul > li > a img{ 
 height: 40px;

}

  1. front-nav { 
 width: 100%;

}

body { 

 background-color:#000;

}

.arrow { 

 width: 100%;

}

  1. scrollNag { 
 background-image: url(Scroll-down-nag.png);
 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;

}

  1. circ-box { 
 top:0;
 left:0;

}

  1. oligo-box { 
 top: 80px;
 left: 75px;

}

  1. fusion-box { 
 top: 170px;
 left: 100px;

}

  1. onoff-box { 
 top:260px;
 left: 75px;

}

  1. 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; }

Retrieved from "http://2014.igem.org/Team:Heidelberg/css/frontpage"