Difference between revisions of "Template:ECUST/CSS"

 
(54 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
 +
  
 
@font-face {
 
@font-face {
     font-family: 'Orbitron';
+
     font-family: 'eras';
     src: url(https://static.igem.org/mediawiki/2017/0/06/T--TU_Dresden--Orbitron-Regular.ttf) format("truetype");
+
     src: url('https://static.igem.org/mediawiki/2018/a/a9/T--ECUST--eras.ttf') format("truetype");
 
}
 
}
  
 
@font-face {
 
@font-face {
     font-family: 'Open Sans';
+
     font-family: 'fzlt';
     src: url(https://static.igem.org/mediawiki/2017/6/62/T--TU_Dresden--OpenSans-Regular.ttf) format("truetype");
+
     src: url('https://static.igem.org/mediawiki/2018/9/9e/T--ECUST--fzlt.ttf') format("truetype");
 +
}
 +
@font-face {
 +
    font-family: 'sens';
 +
    src: url('https://static.igem.org/mediawiki/2018/b/bb/T--ECUST--sens.ttf') format("truetype");
 
}
 
}
  
 +
@font-face {
 +
    font-family: 'fzjh';
 +
    src: url('https://static.igem.org/mediawiki/2018/a/ab/T--ECUST--fzjhjt.otf') format("opentype");
 +
}
 
:root {
 
:root {
 
     --logo-dark-blue: rgb(28, 20, 68);
 
     --logo-dark-blue: rgb(28, 20, 68);
Line 20: Line 30:
 
     --headfont: 'Orbitron', sans-serif;
 
     --headfont: 'Orbitron', sans-serif;
 
     --bodyfont: 'Open Sans', sans-serif;
 
     --bodyfont: 'Open Sans', sans-serif;
 +
 
}
 
}
  
Line 53: Line 64:
  
 
.stars {
 
.stars {
     background:#000 url(https://static.igem.org/mediawiki/2017/f/fc/T--TU_Dresden--stars.png) repeat top center;
+
     background: #292929;
 
     z-index:-3;
 
     z-index:-3;
 
     position: fixed;
 
     position: fixed;
 
}
 
}
  
.twinkling{
 
    background:transparent url(https://static.igem.org/mediawiki/2017/7/7b/T--TU_Dresden--twinkling.png) repeat top center;
 
    z-index:-2;
 
    position: fixed;
 
 
    -moz-animation:move-twink-back 300s linear infinite;
 
    -ms-animation:move-twink-back 300s linear infinite;
 
    -o-animation:move-twink-back 300s linear infinite;
 
    -webkit-animation:move-twink-back 300s linear infinite;
 
    animation:move-twink-back 300s linear infinite;
 
}
 
  
 
/* Our styling */
 
/* Our styling */
Line 96: Line 96:
  
 
#pagebanner {
 
#pagebanner {
 +
position: relative;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
     background-position: center top;
+
      
     width: 100%;
+
     width:100%;
     background-size: contain;
+
     background-size:contain;
 
     text-align: center;
 
     text-align: center;
     padding-top: 30px;
+
      
 
}
 
}
 
#bannerquote {
 
#bannerquote {
 
     padding-right: 5%;
 
     padding-right: 5%;
     font-family: var(--headfont);
+
padding-top:235px;
     font-size: 46px;
+
     font-family: 'sens';
 +
text-align: right;
 +
     font-size: 56px;
 
     line-height: 170%;
 
     line-height: 170%;
     color: var(--bright-bg-color);
+
     color: #ff9c00;
     text-shadow: 0 0 3px var(--logo-dark-blue);
+
     text-shadow: 0 0 3px rgb(28, 20, 68);
 
}
 
}
 +
#subbanner {
 +
    padding-right: 5%;
 +
padding-top:2px;
 +
    font-family: 'sens';
 +
text-align: right;
 +
    font-size: 20px;
 +
    line-height: 170%;
 +
    color: #efcb31;
 +
    text-shadow: 0 0 3px rgb(28, 20, 68);
 +
}
 +
  
 
#projecttitle {
 
#projecttitle {
Line 122: Line 136:
  
 
#bannerquote:before {
 
#bannerquote:before {
     content: '>>\00a0';
+
     content: '';
 
}
 
}
 
#bannerquote:after {
 
#bannerquote:after {
     content: '\00a0<<';
+
     content: '';
 
}
 
}
  
Line 147: Line 161:
 
.contentbox {
 
.contentbox {
 
     text-align: justify;
 
     text-align: justify;
     background: var(--bright-bg-color);
+
     background: #333333;
 
     box-shadow: 0 12px 24px rgba(0,0,0,0.8),0 24px 64px rgba(0,0,0,0.3);
 
     box-shadow: 0 12px 24px rgba(0,0,0,0.8),0 24px 64px rgba(0,0,0,0.3);
     margin-top: 40px;
+
     margin-top: 10px;
 
     margin-bottom: 40px;
 
     margin-bottom: 40px;
 
     padding: 40px;
 
     padding: 40px;
Line 157: Line 171:
 
     text-align: left;
 
     text-align: left;
 
}
 
}
 
+
.boxheading h1
 +
{
 +
font-family:'eras';
 +
font-size: 40px;
 +
}
 +
.contentbox h2
 +
 +
font-family:'sens';
 +
color:white;
 +
}
 
.bronze{
 
.bronze{
 
background:#834433;
 
background:#834433;
Line 171: Line 194:
  
 
.box-heading {
 
.box-heading {
     background: var(--logo-dark-blue);
+
     background: #e89b25;
     color: var(--bright-bg-color);
+
     color: #070707;
 +
font-family:'sens';
 +
font-weight:bold;
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     display: table;
 
     display: table;
Line 228: Line 253:
 
     padding-top: 10px;
 
     padding-top: 10px;
 
     padding-bottom: 10px;
 
     padding-bottom: 10px;
 +
}
 +
.contentbox p
 +
{
 +
color:white;
 
}
 
}
  
Line 371: Line 400:
  
 
ul.leaf li:before {
 
ul.leaf li:before {
     background-image: url(https://static.igem.org/mediawiki/2017/6/6c/T--TU_Dresden--tick-leaf.png);
+
     background-image: url();
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 
     background-size: contain;  
 
     background-size: contain;  
Line 415: Line 444:
 
figcaption {
 
figcaption {
 
     font-size: 80%;
 
     font-size: 80%;
 +
color:white;
 
     transition: .5s;
 
     transition: .5s;
}
+
co}
  
 
.linkfigure {
 
.linkfigure {
Line 463: Line 493:
  
 
h1 {
 
h1 {
     font-family: var(--headfont);
+
     font-family: 'eras';
 
}
 
}
  
Line 502: Line 532:
 
nav {
 
nav {
 
     height: 100px;
 
     height: 100px;
     background: var(--logo-pink);
+
     background: linear-gradient(to right,#ffc808,#ffc808,#ff4e4e);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     position: fixed;
 
     position: fixed;
Line 526: Line 556:
 
     line-height: 42px;
 
     line-height: 42px;
 
     padding-top: 40px;
 
     padding-top: 40px;
     padding-left: 15px;
+
     padding-left: 3px;
     padding-right: 15px;
+
     padding-right: 3px;
 
     transition: height 0.5s;
 
     transition: height 0.5s;
 
}
 
}
  
 
nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 
nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
     background-color: var(--logo-pink);
+
     background-color: #ff4e4e;
 +
color:#4f1919;
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     height: 105px;
 
     height: 105px;
 
}
 
}
  
a.active, nav ul li.active .dropbtn{
+
 
    background-color: var(--logo-pink);
+
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
+
    height: 105px;
+
}
+
  
 
nav ul li:hover .nav-dropdown, .show .nav-dropdown {
 
nav ul li:hover .nav-dropdown, .show .nav-dropdown {
Line 552: Line 579:
 
}
 
}
  
nav a:visited, nav a:active, nav a:focus, footer a:visited, footer a:active, footer a:focus {
+
nav a:visited, nav a:active, nav a:focus{
     color: var(--bright-bg-color);
+
     color:#4f1919;
 
     text-decoration: none;
 
     text-decoration: none;
 
}
 
}
  
 
.nav-text {
 
.nav-text {
     color: var(--bright-bg-color);
+
     color: #4f1919;
 
     text-decoration: none;
 
     text-decoration: none;
     font-weight: medium;
+
     font-weight: bold;
 
     letter-spacing: .05em;
 
     letter-spacing: .05em;
     font-family: var(--headfont);
+
     font-family: sens;
 
}
 
}
  
Line 568: Line 595:
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
     background-color: var(--logo-bright-blue);
+
     background-color: #ff9e20;
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
Line 578: Line 605:
 
.nav-dropdown li a {
 
.nav-dropdown li a {
 
     display: block;
 
     display: block;
     color: var(--bright-bg-color);
+
     color: #4f1919;
 
     height: 45px;
 
     height: 45px;
 
     padding-top: 0px;
 
     padding-top: 0px;
Line 590: Line 617:
  
 
.nav-dropdown a:hover {
 
.nav-dropdown a:hover {
     background-color: var(--logo-dark-blue);
+
     background-color: #ff5b43;
     color: var(--bright-bg-color);
+
     color: white;
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     height: 45px;
 
     height: 45px;
Line 668: Line 695:
  
 
#logo {
 
#logo {
     top: 10px;
+
     top: -10px;
     left: 50%;
+
     left: 80%;
 
     position: absolute;
 
     position: absolute;
 
     margin-left: -105px;
 
     margin-left: -105px;
 
 
 
      
 
      
 
+
   
 +
   
 
      
 
      
 
     z-index: 3;
 
     z-index: 3;
 +
}
 +
#logonav {
 +
  top: 25px;
 +
    left: 40%;
 +
    position: absolute;
 +
    margin-left: -93px;
 +
    width: 120px;
 +
    height: 120px;
 +
    border-radius: 60px;
 +
   
 +
   
 +
    z-index: -1;
 +
    background: #ffc808;
 +
   
 +
   
 +
   
 +
   
 +
   
 
}
 
}
  
Line 682: Line 727:
 
     width: 180px;
 
     width: 180px;
 
     margin: 15px;
 
     margin: 15px;
 +
}
 +
#logonav img {
 +
    width: 120px;
 +
    margin: 3px;
 
}
 
}
  
 
.footerbar {
 
.footerbar {
 
     font: var(--bodyfont);
 
     font: var(--bodyfont);
     margin-top: 150px;
+
     margin-top: 0px;
     padding: 20px;
+
     padding: 0px;
 
     width: 100%;
 
     width: 100%;
 
     min-height: 150px;
 
     min-height: 150px;
     background: var(--logo-dark-blue);
+
     background: rgb(28, 20, 68);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     bottom: 0;
 
     bottom: 0;
Line 696: Line 745:
 
     right: 0;
 
     right: 0;
 
     z-index: 1;
 
     z-index: 1;
     color: var(--bright-bg-color);
+
     color: white;
 
     display: flex;
 
     display: flex;
 
     justify-content: space-around;
 
     justify-content: space-around;
Line 703: Line 752:
 
}
 
}
  
.footerbar a, .footerbar a:visited, footerbar a:hover, .footerbar a:focus, .footerbar a:active {
+
.footerbar a, .footerbar a:visited, footerbar a:dr, .footerbar a:focus, .footerbar a:active {
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: white;
 
     color: white;
Line 725: Line 774:
 
     position: fixed;
 
     position: fixed;
 
     height: 253px;
 
     height: 253px;
     background-image: url(https://static.igem.org/mediawiki/2017/e/e0/T--TU_Dresden--UFO.png);
+
     background-image: url(https://static.igem.org/mediawiki/2018/d/d8/T--ECUST--bacteria.png);
 
     background-size: contain;
 
     background-size: contain;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
Line 732: Line 781:
  
 
.ufo-links {
 
.ufo-links {
     font-size: .85em;
+
     font-size: .75em;
 
     text-align: center;
 
     text-align: center;
 +
font-family:'fzjh';
 +
text-height:10px;
 
     width: 100%;
 
     width: 100%;
 
     position: absolute;
 
     position: absolute;
Line 740: Line 791:
 
.ufo-links a {
 
.ufo-links a {
 
     color: white;
 
     color: white;
 +
text-decoration:none;
 +
 
}
 
}
  
Line 886: Line 939:
  
 
@media only screen and (min-width: 1200px) {
 
@media only screen and (min-width: 1200px) {
 +
#textblock1 {
 +
          position: absolute;
 +
          top: 300px;
 +
          left: 770px;
 +
          width:500px;
 +
      }   
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 980px;
 +
          left: 80px;
 +
          width:500px;
 +
      }     
 +
#textblock3 {
 +
          position: absolute;
 +
          top: 1879px;
 +
          left: 790px;
 +
          width:515px;
 +
      }     
 +
#textblock4 {
 +
          position: absolute;
 +
          top: 3250px;
 +
          left: 200px;
 +
          width:900px;
 +
      }
 +
#textblock5 {
 +
          position: absolute;
 +
          top: 3970px;
 +
          left: 770px;
 +
          width:500px;
 +
      }   
 
     main, .wrapper {
 
     main, .wrapper {
 
         margin-right: 5%;
 
         margin-right: 5%;
Line 905: Line 988:
 
}
 
}
  
@media screen and (min-width: 992px) and (max-width: 1199px){
+
@media screen and (min-width: 1000px) and (max-width: 1199px){
 +
    #textblock1 {
 +
          position: absolute;
 +
          top: 180px;
 +
          left: 490px;
 +
          width:500px;
 +
      }   
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 700px;
 +
          left: 20px;
 +
          width:500px;
 +
      }     
 +
#textblock3 {
 +
          position: absolute;
 +
          top: 1360px;
 +
          left: 500px;
 +
          width:510px;
 +
      }     
 +
#textblock4 {
 +
          position: absolute;
 +
          top: 2250px;
 +
          left: 50px;
 +
          width:900px;
 +
      }
 +
#textblock5 {
 +
          position: absolute;
 +
          top: 2800px;
 +
          left: 490px;
 +
          width:500px;
 +
      }   
 
     main {
 
     main {
 
         margin-right: 30px;
 
         margin-right: 30px;
Line 913: Line 1,026:
 
         margin-right: 30px;
 
         margin-right: 30px;
 
         margin-left: 350px;         
 
         margin-left: 350px;         
 +
    }
 +
.contentbox p ,.contentbox h2 {
 +
        color:white;
 
     }
 
     }
 
     .sidebar, #ufo {
 
     .sidebar, #ufo {
Line 920: Line 1,036:
 
     #bannerquote, #projecttitle {
 
     #bannerquote, #projecttitle {
 
         margin-left: 250px;
 
         margin-left: 250px;
         font-size: 40px;
+
         font-size: 50px;
 
     }
 
     }
  
Line 938: Line 1,054:
 
}
 
}
  
@media only screen and (max-width: 991px) {
+
@media only screen and (max-width: 1000px) {
 +
    #textblock1 {
 +
          position: absolute;
 +
          top: 180px;
 +
          left: 490px;
 +
          width:500px;
 +
      }   
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 700px;
 +
          left: 10px;
 +
          width:500px;
 +
      }     
 +
#textblock3 {
 +
          position: absolute;
 +
          top: 1360px;
 +
          left: 500px;
 +
          width:510px;
 +
      }     
 +
#textblock4 {
 +
          position: absolute;
 +
          top: 2250px;
 +
          left: 50px;
 +
          width:900px;
 +
      }
 +
#textblock5 {
 +
          position: absolute;
 +
          top: 2800px;
 +
          left: 490px;
 +
          width:500px;
 +
      }   
 
     .contentbox figure, .contentbox p, .contentbox .pdf-resources, .contentbox ul {
 
     .contentbox figure, .contentbox p, .contentbox .pdf-resources, .contentbox ul {
 
         padding: 10px !important;
 
         padding: 10px !important;
Line 950: Line 1,096:
 
     .box-heading {
 
     .box-heading {
 
         top: -30px;
 
         top: -30px;
 +
    }
 +
 +
.contentbox p ,contentbox.h2 {
 +
        color:#FFFFFF;
 
     }
 
     }
  
Line 966: Line 1,116:
  
 
     #logo {
 
     #logo {
         top: 10px;
+
         top: -2px;
         left: 15px;
+
         left: 115px;
 
         position: absolute;
 
         position: absolute;
 
         margin: 0;
 
         margin: 0;
         width: 80px;
+
         width: 150px;
 
         height: 80px;
 
         height: 80px;
         border-radius: 0px;
+
          
 
        
 
        
 
         box-shadow: none;
 
         box-shadow: none;
 
     }
 
     }
 +
#logonav {
 +
  top: 25px;
 +
    left: 120px;
 +
    position: absolute;
 +
 
 +
    width: 110px;
 +
    height: 110px;
 +
    border-radius: 90px;
 +
   
 +
   
 +
    z-index: -1;
 +
    background: #ffc808;
 +
   
 +
   
 +
   
 +
   
 +
   
 +
}
  
    #logo img {
+
 
        width: 75px;
+
 
        margin: 2px;
+
    }
+
  
 
     nav {
 
     nav {
Line 990: Line 1,156:
 
         width: 100%;
 
         width: 100%;
 
         display: block;
 
         display: block;
         background-color: var(--logo-pink);
+
         background-color: #c14141;
 
         position: relative;
 
         position: relative;
 
     }
 
     }
Line 1,002: Line 1,168:
 
         font-weight: medium;
 
         font-weight: medium;
 
         text-align: center;
 
         text-align: center;
         height: 70px;
+
         height: 50px;
 
         min-width: 130px;
 
         min-width: 130px;
 
         line-height: 42px;
 
         line-height: 42px;
         color: var(--bright-bg-color);
+
         color: white;
 
         text-decoration: none;
 
         text-decoration: none;
 
         padding-top: 15px;
 
         padding-top: 15px;
Line 1,014: Line 1,180:
  
 
     nav ul a:hover, nav ul li:hover .dropbtn{
 
     nav ul a:hover, nav ul li:hover .dropbtn{
         background-color: var(--logo-pink);
+
         background-color: #ff4e4e;
 +
color:#4f1919;
 
         width: 100%;
 
         width: 100%;
 
         box-shadow: none;
 
         box-shadow: none;
Line 1,025: Line 1,192:
 
     .nav-dropdown {
 
     .nav-dropdown {
 
         display: none;
 
         display: none;
         background-color: var(--logo-pink);
+
         background-color: #ff9e20;
 
         min-width: 130px;
 
         min-width: 130px;
 
         z-index: 1;
 
         z-index: 1;
Line 1,035: Line 1,202:
  
 
     nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 
     nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
         height: 70px;
+
         height: 50px;
 
     }
 
     }
  
Line 1,151: Line 1,318:
 
     55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 
     55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 
}
 
}
 +
 +
 +
.t-body {
 +
    margin: 0;
 +
}
 +
.landing-video {
 +
                            position: relative;
 +
                         
 +
                            width: 100%;
 +
                            height: auto;
 +
                            background-color: #20161c;
 +
                         
 +
 +
                        } 
 +
.phage-scroller {
 +
              width: 150px;
 +
              height: auto;
 +
}
 +
@media (max-width: 1200px) {
 +
          #overall-wrapper {
 +
        min-width: 1000px;
 +
  }
 +
          #wrapper {
 +
              padding-bottom: 0px;
 +
          }
 +
 +
           
 +
          #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
 +
    color: white !important;
 +
   
 +
 
 +
    font-size: 24px !important;
 +
    font-weight: 300 !important;
 +
}
 +
         
 +
    #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a      {
 +
    line-height: 50px !important;
 +
    font-size: 50px !Important;
 +
}
 +
}
 +
@media screen and (max-width: 960px) {
 +
    .t-container {
 +
      width: 1000px ! important;
 +
      max-width: 1200px !important;
 +
      min-width: 980px !important;
 +
    }
 +
.footerbar {
 +
    font: var(--bodyfont);
 +
    margin-top: 0px;
 +
    padding: 0px;
 +
    width: 1000px;
 +
    min-height: 150px;
 +
    background: var(--logo-dark-blue);
 +
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    z-index: 1;
 +
    color: white;
 +
    display: flex;
 +
    justify-content: space-around;
 +
    align-items: center;
 +
    flex-wrap: wrap;
 +
}
 +
  }
 +
 +
@media screen and (max-device-width: 1024px) {
 +
    .t-cover {
 +
       
 +
    }
 +
}
 +
.textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
 +
 +
     
 +
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
 +
    color: white !important;
 +
    text-align: center;
 +
    font-size: 26px !important;
 +
    font-weight: 300 !important;
 +
}
 +
 +
#textblock1 > a {
 +
    color: #F8991D;
 +
    font-size: 60px !important;
 +
    line-height: 60px !important;
 +
}
 +
#textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock9 > a:hover  {
 +
    text-decoration: underline;
 +
}
 +
@media screen and (max-width: 1040px){
 +
 +
#logo img {
 +
    width: 0px;
 +
    margin: 15px;
 +
}
 +
 +
}
 +
 +
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 11:34, 2 November 2018