Team:TU-Eindhoven/Style

From 2014.igem.org

(Difference between revisions)
 
(156 intermediate revisions not shown)
Line 6: Line 6:
#content {
#content {
-
   height: 100%;
+
   height: 200px;
   width: 100%;
   width: 100%;
   border: none;
   border: none;
-
   background:transparant;
+
   padding: 0px;
}
}
Line 16: Line 16:
#top-section{
#top-section{
-
   height: 24px;
+
   height: 18px;
   width: 100%;
   width: 100%;
   border: none;
   border: none;
Line 72: Line 72:
body {
body {
   font-family: 'Noto Sans', sans-serif;
   font-family: 'Noto Sans', sans-serif;
 +
  background: #dfff9f;
}
}
Line 91: Line 92:
   margin-left:auto;
   margin-left:auto;
   margin-right:auto;
   margin-right:auto;
-
   margin-top: -9pt;
+
   margin-top: 0pt;
}
}
#header {
#header {
   height: 200px;
   height: 200px;
-
   width: 100%
+
   width: 100%;
-
   border: 2px solid black;
+
   border-bottom: 2px solid black;
   background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");
   background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");
}
}
Line 111: Line 112:
   background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
   background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
   float:left;
   float:left;
-
   transition:all .4s ease-in-out 0s;
+
   transition:all .2s ease-in-out 0s;
   border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-bottom-left-radius: 8px;
Line 128: Line 129:
   position:relative;
   position:relative;
   left:-15px;
   left:-15px;
-
   transition:all .4s ease-in-out 0s;
+
   transition:all .2s ease-in-out 0s;
   border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-bottom-left-radius: 8px;
Line 145: Line 146:
   position:relative;
   position:relative;
   left:-30px;
   left:-30px;
-
   transition:all .4s ease-in-out 0s;
+
   transition:all .2s ease-in-out 0s;
   border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-bottom-left-radius: 8px;
Line 162: Line 163:
   position:relative;
   position:relative;
   left:-45px;
   left:-45px;
-
   transition:all .4s ease-in-out 0s;
+
   transition:all .2s ease-in-out 0s;
   border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   border-bottom-left-radius: 8px;
}
}
-
.p1 {
+
a.p1 {
   font-size: 24px;
   font-size: 24px;
   font-weight:bold;
   font-weight:bold;
   color: rgba(255,255,255,.75);
   color: rgba(255,255,255,.75);
-
   position: relative;
+
   text-decoration:none;
-
   margin-left: 25px;
+
   position:relative;
-
   margin-top: 25px;
+
   top:30px;
-
   width: 100px;
+
   left:30px;
}
}
-
.p2 {
+
a.p2 {
   font-size:16px;
   font-size:16px;
   color: rgba(255,255,255,.75);
   color: rgba(255,255,255,.75);
-
   margin-left: 25px;
+
   text-decoration:none;
 +
  position:relative;
 +
  top:60px;
 +
  left:45px;
 +
}
 +
 
 +
#icons {
 +
  position:absolute;
 +
  bottom:10px;
 +
  left:10px;
}
}
Line 193: Line 203:
.menu3:hover {
.menu3:hover {
   width:300px;
   width:300px;
-
   height:auto;
+
   height:150px;
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
   background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
   background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
Line 215: Line 225:
}
}
-
.menu3:hover .p1 {
+
.menu3:hover a.p1 {
   color: white;
   color: white;
}
}
-
.menu4:hover .p1 {
+
.menu4:hover a.p1 {
   color: white;
   color: white;
}
}
Line 230: Line 240:
   display:inline;
   display:inline;
   list-style:none;
   list-style:none;
-
  position:relative;
 
}
}
-
.menu3 ul li:hover .p2{
+
.menu3 ul li a.p2:hover{
   color: white;
   color: white;
 +
}
 +
 +
#textcontent {
 +
  height:relative;
 +
  width:975px;
 +
  border-radius:10px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  margin-top:50px;
 +
  margin-bottom:75px;
 +
  box-shadow:10px 10px 10px #888888;
 +
  background:rgba(255,255,255,1);
 +
} 
 +
 +
p.text {
 +
  padding:0px 25px 25px 25px;
 +
  text-align:justify;
 +
}
 +
 +
p.title{
 +
  padding:25px 25px 10px 25px;
 +
  font-size:50px;
 +
  font-weight:900;
 +
  color:#003200;
 +
}
 +
 +
p.subtitle{
 +
  padding:5px 25px 5px 25px;
 +
  font-size:30px;
 +
  font-weight:900;
 +
  color:#006400;
 +
}
 +
 +
#footerbar {
 +
  height:15px;
 +
  width:115px;
 +
  background:transparant;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
}
 +
 +
.foot {
 +
  color:rgba(0,0,0,0.35);
 +
  font-size: 8pt;
 +
  margin-top:-1px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  position:fixed;
 +
  bottom:0px;
 +
}
 +
 +
.projectimage {
 +
  position:relative;
 +
  left:137px;
 +
  right:137px;
}
}

Latest revision as of 00:13, 5 July 2014

/* Removing iGEM style */

  1. searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
  display: none;

}

  1. content { 
  height: 200px;
  width: 100%;
  border: none;
  padding: 0px;

}


/* Customizing standard iGEM navigation panel */

  1. top-section{ 
  height: 18px;
  width: 100%;
  border: none;
  border-top: none;

}

  1. menubar { 
  display: table-cell;
  height: 30px;
  font-size: 12pt;
  position: fixed;
  background:black;

}

  1. menubar.left-menu { 
  width: 100%;
  margin-left:-12px;

}

  1. menubar.right-menu { 
  text-align: right;

}

  1. menubar.left-menu a { 
  border: none;
  color: #454545;

}

  1. menubar.right-menu a { 
  border: none;
  color: #454545;

}

  1. menubar * { 
  background: transparent;

}

  1. menubar * a:hover{ 
  color: green;
  text-decoration: none;

}

  1. menubar > ul > li:last-child { 
  display: none;

}


/* TU-Eindhoven Style */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

  display: none;

}

body { 

  font-family: 'Noto Sans', sans-serif;
  background: #dfff9f;

}

ol, ul { 

  list-style: none;

}

  1. navpanel { 
  height:75px;
  width:975px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);   
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 0pt;

}

  1. header { 
  height: 200px;
  width: 100%;
  border-bottom: 2px solid black;
  background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");

}

.menu1 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #00C800));
  background-image: -o-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
  float:left;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu2 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #009600));
  background-image: -o-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #009600 25%);
  float:left;
  position:relative;
  left:-15px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu3 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 25%);
  float:left;
  position:relative;
  left:-30px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu4 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);
  float:left;
  position:relative;
  left:-45px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

a.p1 { 

  font-size: 24px;
  font-weight:bold;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:30px;
  left:30px;

}

a.p2 { 

  font-size:16px;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:60px;
  left:45px;

}

  1. icons { 
  position:absolute;
  bottom:10px;
  left:10px;

}

.menu1:hover { 

  width:300px;

}

.menu2:hover { 

  width:300px;

}

.menu3:hover { 

  width:300px;
  height:150px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 13%);

}

.menu4:hover { 

  width:300px;
  border-bottom-right-radius: 8px;

}

.menu1:hover .p1 { 

  color: white;

}

.menu2:hover .p1 { 

  color: white;

}

.menu3:hover a.p1 { 

  color: white;

}

.menu4:hover a.p1 { 

  color: white;

}

.menu3 ul { 

  display:none;

}

.menu3:hover ul { 

  display:inline;
  list-style:none;

}

.menu3 ul li a.p2:hover{ 

  color: white;

}

  1. textcontent { 
  height:relative;
  width:975px;
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  margin-bottom:75px;
  box-shadow:10px 10px 10px #888888;								
  background:rgba(255,255,255,1);

}

p.text { 

  padding:0px 25px 25px 25px;
  text-align:justify;

}

p.title{ 

  padding:25px 25px 10px 25px;
  font-size:50px;
  font-weight:900;
  color:#003200;

}

p.subtitle{ 

  padding:5px 25px 5px 25px;
  font-size:30px;
  font-weight:900;
  color:#006400;

}

  1. footerbar { 
  height:15px;
  width:115px;
  background:transparant;
  margin-left:auto;
  margin-right:auto;

}

.foot { 

  color:rgba(0,0,0,0.35);
  font-size: 8pt;
  margin-top:-1px;
  margin-left:auto;
  margin-right:auto;
  position:fixed;
  bottom:0px;

}

.projectimage { 

  position:relative;
  left:137px;
  right:137px;

}

Retrieved from "http://2014.igem.org/Team:TU-Eindhoven/Style"