Difference between revisions of "Template:ECUST/CSS"

 
(43 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 12: Line 6:
 
@font-face {
 
@font-face {
 
     font-family: 'eras';
 
     font-family: 'eras';
−
     src: url('./u/upload/eras.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: 'fzlt';
 
     font-family: 'fzlt';
−
     src: url('./u/upload/fzlt.ttf') format("truetype");
+
     src: url('https://static.igem.org/mediawiki/2018/9/9e/T--ECUST--fzlt.ttf') format("truetype");
 
}
 
}
 
@font-face {
 
@font-face {
Line 26: Line 20:
 
@font-face {
 
@font-face {
 
     font-family: 'fzjh';
 
     font-family: 'fzjh';
−
     src: url('./u/upload/fzjhjt.otf') format("opentype");
+
     src: url('https://static.igem.org/mediawiki/2018/a/ab/T--ECUST--fzjhjt.otf') format("opentype");
 
}
 
}
 
:root {
 
:root {
Line 106: Line 100:
 
      
 
      
 
     width:100%;
 
     width:100%;
−
     background-size: 100% 200px;
+
     background-size:contain;
 
     text-align: center;
 
     text-align: center;
 
      
 
      
Line 115: Line 109:
 
     font-family: 'sens';
 
     font-family: 'sens';
 
text-align: right;
 
text-align: right;
−
     font-size: 46px;
+
     font-size: 56px;
 
     line-height: 170%;
 
     line-height: 170%;
 
     color: #ff9c00;
 
     color: #ff9c00;
Line 125: Line 119:
 
     font-family: 'sens';
 
     font-family: 'sens';
 
text-align: right;
 
text-align: right;
−
     font-size: 15px;
+
     font-size: 20px;
 
     line-height: 170%;
 
     line-height: 170%;
 
     color: #efcb31;
 
     color: #efcb31;
Line 538: Line 532:
 
nav {
 
nav {
 
     height: 100px;
 
     height: 100px;
−
     background: linear-gradient(to right, #ffc808 ,#ff4e4e);
+
     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 562: Line 556:
 
     line-height: 42px;
 
     line-height: 42px;
 
     padding-top: 40px;
 
     padding-top: 40px;
−
     padding-left: 10px;
+
     padding-left: 3px;
−
     padding-right: 10px;
+
     padding-right: 3px;
 
     transition: height 0.5s;
 
     transition: height 0.5s;
 
}
 
}
Line 574: Line 568:
 
}
 
}
  
−
a.active, nav ul li.active .dropbtn{
+
 
−
    background-color: #ff4e4e;
+
−
    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 589: 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: white;
+
     color: #4f1919;
 
     text-decoration: none;
 
     text-decoration: none;
 
     font-weight: bold;
 
     font-weight: bold;
Line 605: Line 595:
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
−
     background-color: #4f1919;
+
     background-color: #ff9e20;
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
Line 615: 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 627: Line 617:
  
 
.nav-dropdown a:hover {
 
.nav-dropdown a:hover {
−
     background-color: #c14141;
+
     background-color: #ff5b43;
−
     color: #4f1919;
+
     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 720: Line 710:
 
     position: absolute;
 
     position: absolute;
 
     margin-left: -93px;
 
     margin-left: -93px;
−
     width: 110px;
+
     width: 120px;
−
     height: 110px;
+
     height: 120px;
−
     border-radius: 90px;
+
     border-radius: 60px;
 
      
 
      
 
      
 
      
−
     z-index: 3;
+
     z-index: -1;
 
     background: #ffc808;
 
     background: #ffc808;
 
      
 
      
Line 731: Line 721:
 
      
 
      
 
      
 
      
−
     z-index: 3;
+
      
 
}
 
}
  
Line 739: Line 729:
 
}
 
}
 
#logonav img {
 
#logonav img {
−
     width: 530px;
+
     width: 120px;
−
     margin: 0px;
+
     margin: 3px;
 
}
 
}
  
Line 784: Line 774:
 
     position: fixed;
 
     position: fixed;
 
     height: 253px;
 
     height: 253px;
−
     background-image: url(bacteria.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 949: 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 969: Line 989:
  
 
@media screen and (min-width: 1000px) 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 986: Line 1,036:
 
     #bannerquote, #projecttitle {
 
     #bannerquote, #projecttitle {
 
         margin-left: 250px;
 
         margin-left: 250px;
−
         font-size: 40px;
+
         font-size: 50px;
 
     }
 
     }
  
Line 1,005: Line 1,055:
  
 
@media only screen and (max-width: 1000px) {
 
@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 1,056: Line 1,136:
 
      
 
      
 
      
 
      
−
     z-index: 3;
+
     z-index: -1;
 
     background: #ffc808;
 
     background: #ffc808;
 
      
 
      
Line 1,062: Line 1,142:
 
      
 
      
 
      
 
      
−
     z-index: 3;
+
      
 
}
 
}
  
Line 1,112: Line 1,192:
 
     .nav-dropdown {
 
     .nav-dropdown {
 
         display: none;
 
         display: none;
−
         background-color: #4f1919;
+
         background-color: #ff9e20;
 
         min-width: 130px;
 
         min-width: 130px;
 
         z-index: 1;
 
         z-index: 1;
Line 1,248: Line 1,328:
 
                             width: 100%;
 
                             width: 100%;
 
                             height: auto;
 
                             height: auto;
−
                             background-color: #974c4c;
+
                             background-color: #20161c;
 
                            
 
                            
  
Line 1,264: Line 1,344:
 
           }
 
           }
 
 
−
              #textblock1 {
+
           
−
          position: absolute;
+
−
          top: 20px;
+
−
          left: 0px;
+
−
          width: 400px;
+
−
      }     
+
 
           #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
 
           #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
 
     color: white !important;
 
     color: white !important;
Line 1,311: Line 1,386:
 
@media screen and (max-device-width: 1024px) {
 
@media screen and (max-device-width: 1024px) {
 
     .t-cover {
 
     .t-cover {
−
         background-attachment: fixed
+
          
 
     }
 
     }
 
}
 
}
 
.textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
 
.textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
  
−
      #textblock1 {
+
        
−
          position: absolute;
+
−
          top: 290px;
+
−
          left: 20px;
+
−
          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 {
 
     color: white !important;
 
     color: white !important;
Line 1,355: Line 1,407:
 
     text-decoration: underline;
 
     text-decoration: underline;
 
}
 
}
 +
@media screen and (max-width: 1040px){
  
 +
#logo img {
 +
    width: 0px;
 +
    margin: 15px;
 +
}
  
−
 
+
}
−
 
+
  
  

Latest revision as of 11:34, 2 November 2018