Difference between revisions of "Template:CPU CHINA/common CSS"

Line 21: Line 21:
 
   src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
 
   src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
 
     format("woff");
 
     format("woff");
 +
}
 +
 +
@font-face {
 +
    font-family: BLACKITALIC;
 +
    src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff") format("woff");
 
}
 
}
  
Line 51: Line 56:
 
#header #title {
 
#header #title {
 
   position: fixed;
 
   position: fixed;
   top: 10%;
+
   top: 5vw;
 
   font-family: "MONTSERRAT-BLACKITALIC2";
 
   font-family: "MONTSERRAT-BLACKITALIC2";
 
   line-height: normal;
 
   line-height: normal;
 
   font-weight: bolder;
 
   font-weight: bolder;
   font-size: 800%;
+
   font-size: 8vw;
 
   color: #fafafa;
 
   color: #fafafa;
 
   z-index: -1;
 
   z-index: -1;
 
}
 
}
 +
  
 
#header #load {
 
#header #load {
Line 148: Line 154:
 
#header #menu #class-b li {
 
#header #menu #class-b li {
 
   border: #0072fe solid 2px;
 
   border: #0072fe solid 2px;
   width: 38vmin;
+
   width: 39vmin;
 
}
 
}
  

Revision as of 14:30, 27 September 2021

@font-face {

 font-family: MONTSERRAT-BLACK1;
 src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
   format("woff");

}

@font-face {

 font-family: MONTSERRAT-BLACKITALIC2;
 src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
   format("woff");

}

@font-face {

 font-family: CABIN-REGULAR;
 src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
   format("woff");

}

@font-face {

 font-family: CABIN-ITALIC;
 src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
   format("woff");

}

@font-face {

   font-family: BLACKITALIC;
   src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff") format("woff");

}

body {

 background-color: #fafafa;

}

  • {
 box-sizing: border-box;

}

  1. contain {
 margin-top: -12px;
 padding: 0 3% 10%;
 width: 100%;
 background-color: #fafafa;
 z-index: 1;
 text-align: left;
 box-sizing: border-box;

}

.background {

 position: fixed;
 width: 100%;
 top: 0;
 z-index: -1;
 box-sizing: border-box;

}

  1. header #title {
 position: fixed;
 top: 5vw;
 font-family: "MONTSERRAT-BLACKITALIC2";
 line-height: normal;
 font-weight: bolder;
 font-size: 8vw;
 color: #fafafa;
 z-index: -1;

}


  1. header #load {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: white;
   text-align: center;
   padding: 25vmin 0;
   z-index: 20;

}

  1. header #load img {
   width: 50vmin;

}

  1. header #menu {
 z-index: 10;

}

  1. header #menu #menuBack {
 position: fixed;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 z-index: 10;

}

  1. header #menu .menu {
 background: #000000ad;

}

  1. header #menu #logo {
 position: fixed;
 top: 3vmin;
 left: 1vmin;
 width: 25vmin;
 z-index: 11;

}

  1. header #menu #menuImg {
 position: fixed;
 top: 2vmin;
 right: 1vmin;
 width: 15vmin;
 z-index: 11;

}

  1. header #menu .class {
 position: fixed;
 top: 14vmin;
 z-index: 11;

}

  1. header #menu .class li {
 padding: 6% 0;
 margin: 2vmin;
 border-radius: 30px;
 text-align: center;
 font-family: "MONTSERRAT-BLACKITALIC2";
 font-size: 1.5em;
 font-weight: bolder;

}

  1. header #menu #class-a {
 right: 1vmin;

}

  1. header #menu #class-a li {
 width: 30vmin;
 background-color: #fafafa;
 border: #fafafa solid 3px;

}

  1. header #menu #class-a li:hover {
 border: #0072fe solid 3px;

}

  1. header #menu #class-a .class-a {
 background-color: #0072fe;
 border: #0072fe solid 3px;
 color: #fafafa;

}

  1. header #menu #class-b {
 right: 33vmin;

}

  1. header #menu #class-b li {
 border: #0072fe solid 2px;
 width: 39vmin;

}

  1. header #menu #class-b li a{
   color: #FAFAFA;

}

  1. header #menu #class-b li:active {
 background-color: #0000008f;

}

  1. header #menu #class-b .class-b {
 background-color: #00000047;

}

footer {

 position: -webkit-sticky;
 left: 0;
 width: 100%;
 background-color: black;

}

footer #sponsor {

 position: relative;
 top: -10px;
 width: 100%;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
   0 0 40px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
   0 0 40px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 z-index: 1;

}

footer #connect {

 position: relative;
 top: -30px;
 width: 100%;
 height: 150px;
 background-color: black;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
   0 0 40px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
   0 0 40px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 z-index: 2;

}