Difference between revisions of "Template:KU Leuven/main/css"

 
(82 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
/* in this section the parts of the page are defined in space and background */
 
/* in this section the parts of the page are defined in space and background */
  
−
.main-nav {
+
 
−
    position:fixed;
+
−
    width:100%;
+
−
    height: 30px;
+
−
    top: 17px;
+
−
    left:0;
+
−
    display: block;
+
−
    background-color: #ddd1b8;
+
−
    z-index: 5;
+
−
}
+
  
 
#headimg {
 
#headimg {
Line 48: Line 39:
 
     opacity:0.95;
 
     opacity:0.95;
 
     background-color: #f3efe7;   
 
     background-color: #f3efe7;   
−
}
+
     z-index:2;
−
 
+
−
#footer {
+
−
     top:0;
+
−
    opacity:0.95;
+
−
    position:relative;
+
−
    display: block;
+
−
    height:240px;
+
−
    width:100%;
+
−
    background-color: #f3efe7;
+
−
    padding:0;
+
 
}
 
}
  
Line 70: Line 51:
 
     width: 100%;
 
     width: 100%;
 
     height:100%;
 
     height:100%;
−
     background: url(https://static.igem.org/mediawiki/2015/6/68/KULeuven2015Zebra_spots.png) no-repeat center center fixed;
+
      
−
    background-size: contain
+
−
  -webkit-background-size: cover;
+
−
  -moz-background-size: cover;
+
−
  -o-background-size: cover;
+
−
  background-size: cover;
+
 
}
 
}
  
Line 90: Line 66:
 
     display:block;
 
     display:block;
 
     position:relative;
 
     position:relative;
−
     left:0;
+
     left:10px;
 
     width:100%;
 
     width:100%;
 
     background-color: #f3efe7;     
 
     background-color: #f3efe7;     
Line 97: Line 73:
 
#scrolldown {
 
#scrolldown {
 
     position:relative;
 
     position:relative;
−
     width:10%;
+
    height:40px;
 +
     width:40px;
 
     display:block;
 
     display:block;
−
    height:20%;
 
 
     color: #FFFFFF;  
 
     color: #FFFFFF;  
−
     z-index:1;  
+
     z-index:1;   
−
    left: 46%;
+
−
    
+
 
}
 
}
  
Line 127: Line 101:
 
     z-index:1;
 
     z-index:1;
 
     position:relative;
 
     position:relative;
−
     top:-40px;
+
     top:-20px;
 
     left: -4.5%;
 
     left: -4.5%;
 
     display: inline-block;
 
     display: inline-block;
Line 146: Line 120:
 
     opacity: 0.95;
 
     opacity: 0.95;
 
     right:-10px;
 
     right:-10px;
−
     top:-40px;
+
     top:-20px;
 
     bottom:0;
 
     bottom:0;
 
     width:17%;
 
     width:17%;
Line 225: Line 199:
 
/* subsections references */
 
/* subsections references */
 
/*********************/
 
/*********************/
 +
 +
.subtext {
 +
    position:relative;
 +
    margin: 5% 5px 5% 0;
 +
}
  
 
.subsectionwrapper {
 
.subsectionwrapper {
−
     display:table;
+
     display:table;
 
     table-layout: fixed;
 
     table-layout: fixed;
 
     width:70%;
 
     width:70%;
Line 233: Line 212:
 
}
 
}
  
−
.subimgrow, .subtextrow, .subimgrowm {
+
.subtextrow {
 
     display: table-row;
 
     display: table-row;
 
     width:15%;
 
     width:15%;
Line 239: Line 218:
 
     wrap-text: normal;
 
     wrap-text: normal;
 
     color: #808080;
 
     color: #808080;
 +
    background: #ddd1b8;
 +
    border-radius: 30px 30px 0px 0px;
 +
}
 +
 +
.subimgrowm {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
}
 +
 +
.subimgreadmore {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    background-color: #ddd1b8;
 +
}
 +
 +
.subimgrow {
 +
    display: table-row;
 +
    width:15%;
 +
    background: linear-gradient(#f3efe7,#ddd1b8);
 +
    wrap-text: normal;
 
}
 
}
  
Line 248: Line 253:
 
.whitespace {
 
.whitespace {
 
     display: table-cell;
 
     display: table-cell;
 +
    background-color: #f3efe7;
 
     width:5%;
 
     width:5%;
 
}
 
}
  
 +
.subtext {
 +
    background-color: #ddd1b8;
 +
    border-radius: 20px 20px 0px 0px;
 +
}
 +
 +
.subtext h2 {
 +
    font-size: 2.0em;
 +
}
  
 
.subtext p {
 
.subtext p {
−
     margin:5% 0%;
+
     margin:5% 5% 5% 5%;
 +
    text-align: justify;
 +
    font-size: 1.0em;
 
}
 
}
  
Line 267: Line 283:
  
 
@media screen and (max-width: 1000px) {
 
@media screen and (max-width: 1000px) {
−
 
−
.nav-item {
 
−
    display: none;
 
−
    width: 80px;
 
−
    top:23px;
 
−
}
 
−
 
−
.nav-item:hover {  /* this is active when your mouse moves is over the item */
 
−
    border-style: solid;
 
−
    border-bottom: 5px transparent #8b7a57;
 
−
}
 
−
 
−
#smartphonebutton {
 
−
    display:inline-block;
 
−
}
 
−
 
−
#logoiGEM {
 
−
        left:50%;
 
−
-moz-transform:translateX(-50%);
 
−
-ms-transform:translateX(-50%);
 
−
-webkit-transform:translateX(-50%);
 
−
transform:translateX(-50%);
 
−
}
 
  
 
.summary {
 
.summary {
Line 311: Line 304:
 
}
 
}
  
−
.subtextrow, .subimgrow {
+
.subtextrow, .subimgrow, .subimgreadmore {
 
     display:none;
 
     display:none;
 
}
 
}
 +
  
 
.subimgrowm  {
 
.subimgrowm  {
Line 320: Line 314:
 
     wrap-text: normal;
 
     wrap-text: normal;
 
     color: #808080;
 
     color: #808080;
 +
}
 +
 +
.subtextm a {
 +
    margin: 5%;
 
}
 
}
  
 
.subimg {
 
.subimg {
 
     display: table-cell;
 
     display: table-cell;
−
     width:80px;
+
     width:50px;
−
     min-height:80px;
+
     min-height:50px;
 
}
 
}
  
−
.subtex {
+
.subtext {
 
     position:relative;
 
     position:relative;
 
     display: table-cell;
 
     display: table-cell;
 
     width:80%;
 
     width:80%;
 
     vertical-align:middle;
 
     vertical-align:middle;
 +
    background-color:transparent;
 
}
 
}
 +
  
  
Line 347: Line 347:
 
}
 
}
  
−
.subtext a:hover {
+
 
 +
.subtextm a:hover {
 
     text-decoration:none;
 
     text-decoration:none;
 
}
 
}
Line 353: Line 354:
  
 
}
 
}
−
</style>
 
  
−
<script>
+
#eppendorf, #bioke, #kuleuven, #lrd, #youreca, #sigma, #egilab, #kolo, #thermofisher, #solvay, #medicine, #bioscenter, #imec, #genzyme, #gips, #regensys, #gimv, #machery, #vwr, .logosmall{
−
$( "#smartphonebutton" ).click(function() {
+
    opacity: 0.4;
−
      $(".nav-item").css('display', 'block');
+
}
−
});
+
 
−
</script>
+
#eppendorf:hover, #bioke:hover, #kuleuven:hover, #lrd:hover, #youreca:hover, #sigma:hover, #egilab:hover, #kolo:hover, #thermofisher:hover, #solvay:hover, #medicine:hover, #bioscenter:hover, #imec:hover, #genzyme:hover, #gips:hover, #regensys:hover, #gimv:hover, #machery:hover, #vwr:hover, .logosmall:hover {
 +
    opacity: 1;
 +
}
 +
 
 +
 
 +
</style>
  
 
</html>
 
</html>

Latest revision as of 16:32, 10 September 2015