Difference between revisions of "Template:ECUST/CSS"

Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
 +
  
  
Line 9: Line 11:
  
 
@font-face {
 
@font-face {
−
     font-family: 'Orbitron';
+
     font-family: 'eras';
−
     src: url() format("truetype");
+
     src: url('./u/upload/eras.ttf') format("truetype");
 
}
 
}
 +
 
@font-face {
 
@font-face {
−
     font-family: 'mini';
+
     font-family: 'fzlt';
−
     src: url('https://static.igem.org/mediawiki/2018/d/d9/T--ECUST--mini.ttf') format("truetype");
+
     src: url('./u/upload/fzlt.ttf') format("truetype");
 
}
 
}
−
 
 
@font-face {
 
@font-face {
−
     font-family: 'Open Sans';
+
     font-family: 'sens';
−
     src: url() format("truetype");
+
     src: url('https://static.igem.org/mediawiki/2018/b/bb/T--ECUST--sens.ttf') format("truetype");
 
}
 
}
  
 +
@font-face {
 +
    font-family: 'fzjh';
 +
    src: url('./u/upload/fzjhjt.otf') format("opentype");
 +
}
 
:root {
 
:root {
 
     --logo-dark-blue: rgb(28, 20, 68);
 
     --logo-dark-blue: rgb(28, 20, 68);
Line 30: Line 36:
 
     --headfont: 'Orbitron', sans-serif;
 
     --headfont: 'Orbitron', sans-serif;
 
     --bodyfont: 'Open Sans', sans-serif;
 
     --bodyfont: 'Open Sans', sans-serif;
 +
 
}
 
}
  
Line 63: Line 70:
  
 
.stars {
 
.stars {
−
     background-color:#2f2f2f;
+
     background: #292929;
 
     z-index:-3;
 
     z-index:-3;
 
     position: fixed;
 
     position: fixed;
 
}
 
}
  
−
.twinkling{
 
−
 
 
−
    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 106: Line 102:
  
 
#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: 100% 200px;
 
     text-align: center;
 
     text-align: center;
−
     padding-top: 30px;
+
      
 
}
 
}
 
#bannerquote {
 
#bannerquote {
 
     padding-right: 5%;
 
     padding-right: 5%;
−
     font-family: 'mini';
+
padding-top:235px;
 +
     font-family: 'sens';
 +
text-align: right;
 
     font-size: 46px;
 
     font-size: 46px;
 
     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: 15px;
 +
    line-height: 170%;
 +
    color: #efcb31;
 +
    text-shadow: 0 0 3px rgb(28, 20, 68);
 +
}
 +
  
 
#projecttitle {
 
#projecttitle {
Line 132: Line 142:
  
 
#bannerquote:before {
 
#bannerquote:before {
−
     content: '>>\00a0';
+
     content: '';
 
}
 
}
 
#bannerquote:after {
 
#bannerquote:after {
−
     content: '\00a0<<';
+
     content: '';
 
}
 
}
  
Line 157: Line 167:
 
.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 167: Line 177:
 
     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 181: Line 200:
  
 
.box-heading {
 
.box-heading {
−
     background: var(--logo-pink);
+
     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 238: Line 259:
 
     padding-top: 10px;
 
     padding-top: 10px;
 
     padding-bottom: 10px;
 
     padding-bottom: 10px;
 +
}
 +
.contentbox p
 +
{
 +
color:white;
 
}
 
}
  
Line 425: Line 450:
 
figcaption {
 
figcaption {
 
     font-size: 80%;
 
     font-size: 80%;
 +
color:white;
 
     transition: .5s;
 
     transition: .5s;
−
}
+
co}
  
 
.linkfigure {
 
.linkfigure {
Line 473: Line 499:
  
 
h1 {
 
h1 {
−
     font-family: var(--headfont);
+
     font-family: 'eras';
 
}
 
}
  
Line 512: Line 538:
 
nav {
 
nav {
 
     height: 100px;
 
     height: 100px;
−
     background: linear-gradient(to right, black ,#ff4e4e);
+
     background: linear-gradient(to right, #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 569: Line 595:
  
 
.nav-text {
 
.nav-text {
−
     color: var(--bright-bg-color);
+
     color: white;
 
     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 679: Line 705:
  
 
#logo {
 
#logo {
−
     top: 10px;
+
     top: -10px;
−
     left: 50%;
+
     left: 80%;
 
     position: absolute;
 
     position: absolute;
 
     margin-left: -105px;
 
     margin-left: -105px;
 +
   
 +
   
 +
   
 +
   
 +
    z-index: 3;
 +
}
 +
#logonav {
 +
  top: 25px;
 +
    left: 40%;
 +
    position: absolute;
 +
    margin-left: -93px;
 +
    width: 110px;
 +
    height: 110px;
 +
    border-radius: 90px;
 +
   
 +
   
 +
    z-index: 3;
 +
    background: #ffc808;
 
      
 
      
 
      
 
      
Line 693: Line 737:
 
     width: 180px;
 
     width: 180px;
 
     margin: 15px;
 
     margin: 15px;
 +
}
 +
#logonav img {
 +
    width: 530px;
 +
    margin: 0px;
 
}
 
}
  
Line 701: Line 749:
 
     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 707: Line 755:
 
     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 736: Line 784:
 
     position: fixed;
 
     position: fixed;
 
     height: 253px;
 
     height: 253px;
−
     background-image: url(UFO.png);
+
     background-image: url(bacteria.png);
 
     background-size: contain;
 
     background-size: contain;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
Line 743: Line 791:
  
 
.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 751: Line 801:
 
.ufo-links a {
 
.ufo-links a {
 
     color: white;
 
     color: white;
 +
text-decoration:none;
 +
 
}
 
}
  
Line 924: Line 976:
 
         margin-right: 30px;
 
         margin-right: 30px;
 
         margin-left: 350px;         
 
         margin-left: 350px;         
 +
    }
 +
.contentbox p ,.contentbox h2 {
 +
        color:white;
 
     }
 
     }
 
     .sidebar, #ufo {
 
     .sidebar, #ufo {
Line 961: Line 1,016:
 
     .box-heading {
 
     .box-heading {
 
         top: -30px;
 
         top: -30px;
 +
    }
 +
 +
.contentbox p ,contentbox.h2 {
 +
        color:#FFFFFF;
 
     }
 
     }
  
Line 977: Line 1,036:
  
 
     #logo {
 
     #logo {
−
         top: 10px;
+
         top: -2px;
−
         left: 15px;
+
         left: 115px;
 
         position: absolute;
 
         position: absolute;
 
         margin: 0;
 
         margin: 0;
 
         width: 150px;
 
         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: 3;
 +
    background: #ffc808;
 +
   
 +
   
 +
   
 +
   
 +
    z-index: 3;
 +
}
 +
  
 
    
 
    
Line 1,013: Line 1,091:
 
         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,188: Line 1,266:
 
               #textblock1 {
 
               #textblock1 {
 
           position: absolute;
 
           position: absolute;
−
           top: 50px;
+
           top: 20px;
 
           left: 0px;
 
           left: 0px;
 
           width: 400px;
 
           width: 400px;
Line 1,211: Line 1,289:
 
       min-width: 980px !important;
 
       min-width: 980px !important;
 
     }
 
     }
−
.footerbar {
+
.footerbar {
 
     font: var(--bodyfont);
 
     font: var(--bodyfont);
 
     margin-top: 0px;
 
     margin-top: 0px;
Line 1,223: Line 1,301:
 
     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 1,240: Line 1,318:
 
       #textblock1 {
 
       #textblock1 {
 
           position: absolute;
 
           position: absolute;
−
           top: 100px;
+
           top: 290px;
 
           left: 20px;
 
           left: 20px;
 
           width:500px;
 
           width:500px;
 +
      }   
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 800px;
 +
          left: 500px;
 +
          width:500px;
 +
      }     
 +
#textblock3 {
 +
          position: absolute;
 +
          top: 1855px;
 +
          left: 50px;
 +
          width:325px;
 +
      }     
 +
#textblock4 {
 +
          position: absolute;
 +
          top: 3150px;
 +
          left: 50px;
 +
          width:900px;
 
       }       
 
       }       
 
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
 
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {

Revision as of 09:36, 1 October 2018