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

 
(75 intermediate revisions by 2 users not shown)
Line 1: Line 1:
@font-face{
+
@font-face {
    font-family: MONTSERRAT-BLACK1;
+
  font-family: MONTSERRAT-BLACK1;
    src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")format('woff');
+
  src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACK1.eot");
 +
  src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
 +
      format("woff"),
 +
    url("https://static.igem.org/mediawiki/2021/0/01/T--CPU_CHINA--Team--MONTSERRAT-BLACK1.TTF")
 +
      format("truetype"),
 +
    url("https://static.igem.org/mediawiki/2021/3/38/T--CPU_CHINA--MONTSERRAT-BLACK1.svg")
 +
      format("svg");
 
}
 
}
  
@font-face{
+
@font-face {
    font-family: MONTSERRAT-BLACKITALIC2;
+
  font-family: MONTSERRAT-BLACKITALIC2;
    src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")format('woff');
+
  src: url("https://static.igem.org/mediawiki/2021/c/cd/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.eot");
 +
  src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
 +
      format("woff"),
 +
    url("https://static.igem.org/mediawiki/2021/4/43/T--CPU_CHINA--Team--MONTSERRAT-BLACKITALIC2.TTF")
 +
      format("truetype"),
 +
    url("https://static.igem.org/mediawiki/2021/1/16/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.svg")
 +
      format("svg");
 
}
 
}
  
@font-face{
+
@font-face {
    font-family: CABIN-REGULAR;
+
  font-family: CABIN-REGULAR;
    src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")format('woff');
+
  src: url("https://static.igem.org/mediawiki/2021/5/5e/T--CPU_CHINA--CABIN-REGULAR.eot");
 +
  src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
 +
      format("woff"),
 +
    url("https://static.igem.org/mediawiki/2021/d/d2/T--CPU_CHINA--CABIN-REGULAR.TTF")
 +
      format("truetype"),
 +
    url("https://static.igem.org/mediawiki/2021/9/94/T--CPU_CHINA--CABIN-REGULAR.svg")
 +
      format("svg");
 
}
 
}
  
@font-face{
+
@font-face {
    font-family: CABIN-ITALIC;
+
  font-family: BLACKITALIC;
    src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")format('woff');
+
  src: url("https://static.igem.org/mediawiki/2021/d/d8/T--CPU_CHINA--BLACKITALIC.eot");
 +
  src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
 +
      format("woff"),
 +
    url("https://static.igem.org/mediawiki/2021/2/28/T--CPU_CHINA--BLACKITALIC.ttf")
 +
      format("truetype"),
 +
      url("https://static.igem.org/mediawiki/2021/4/49/T--CPU_CHINA--BLACKITALIC.svg")
 +
      format("svg");
 +
}
 +
body {
 +
  background-color: #ffffff;
 
}
 
}
  
 +
* {
 +
  box-sizing: border-box;
 +
}
  
body{
+
#contain {
    width: 100%;
+
  margin-top: -12px;
    font-family:"CABIN-REGULAR","Arial","Microsoft YaHei","黑体","宋体",sans-serif;
+
  padding: 0 3% 10%;
 +
  width: 100%;
 +
  background-color: #ffffff;
 +
  z-index: 1;
 +
  text-align: left;
 +
  box-sizing: border-box;
 
}
 
}
#contain{
+
 
    margin-top:-12px;
+
.background {
    padding:0 3% 10%;
+
  position: fixed;
    width: 100%;
+
  width: 100%;
    background-color: rgb(250,250,250);
+
  top: 0;
    z-index: 1;
+
  z-index: -1;
    box-sizing: border-box;
+
  box-sizing: border-box;
 
}
 
}
  
.background{
+
#header #title {
        position: fixed;
+
  position: fixed;
        width: 100%;
+
  top: 9vw;
        top: 0;
+
  font-family: "MONTSERRAT-BLACKITALIC2";
        z-index: -1;
+
  line-height: normal;
    }
+
  font-weight: bolder;
 +
  font-size: 8vw;
 +
  color: #ffffff;
 +
  z-index: -1;
 +
}
  
#title{
+
#header #load {
    position:fixed;
+
  position: fixed;
    top: 15%;
+
  display: flex;
    left: 18%;
+
  width: 100%;
    line-height: normal;
+
  height: 100%;
    font-weight: bold;
+
  background-color: white;
    font-size: 800%;
+
  align-items: center;
    color: #FAFAFA;
+
  justify-content: center;
    z-index: -1;
+
  z-index: 20;
 
}
 
}
  
@media screen and (max-width:1030px) {
+
#header #load img {
    #title{
+
  width: 50vmin;
        top:10%;
+
        font-size: 700%;
+
    }
+
   
+
 
}
 
}
@media screen and (max-width:930px){
+
 
    #title{
+
#header #menu {
        top:10%;
+
  z-index: 10;
        font-size: 600%;
+
    }
+
   
+
 
}
 
}
@media screen and (max-width:830px) {
+
 
    #title{
+
#header #menu #menuBack {
        top:10%;
+
  position: fixed;
        font-size: 500%;
+
  width: 100%;
    }
+
  height: 100%;
   
+
  box-sizing: border-box;
 +
  z-index: 10;
 
}
 
}
@media screen and (max-width:730px) {
+
 
    #title{
+
#header #menu .menu {
        top:10%;
+
  background-color: #000000ad;
        font-size: 450%;
+
  transition: background-color 2s;
    }
+
 
}
 
}
@media screen and (max-width:630px) {
+
 
    #title{
+
#header #menu #logo {
        top:5%;
+
  position: fixed;
        font-size: 400%;
+
  top: 3vmin;
    }
+
  left: 1vmin;
   
+
  width: 25vmin;
 +
  z-index: 11;
 
}
 
}
@media screen and (max-width:530px) {
+
 
    #title{
+
#header #menu #menuImg {
        top:4%;
+
  position: fixed;
        font-size: 350%;
+
  top: 2vmin;
    }
+
  right: 1vmin;
   
+
  width: 15vmin;
 +
  cursor: pointer;
 +
  z-index: 11;
 
}
 
}
@media screen and (max-width:450px) {
+
 
    #title{
+
#header #menu .class {
        font-size: 300%;
+
  position: fixed;
    }
+
  top: 14vmin;
   
+
  z-index: 11;
 
}
 
}
@media screen and (max-width:400px){
+
 
    #title{
+
#header #menu .class li {
        font-size: 250%;
+
  padding: 6% 0;
    }
+
  margin: 2vmin;
 +
  border-radius: 30px;
 +
  text-align: center;
 +
  font-family: "MONTSERRAT-BLACKITALIC2";
 +
  font-size: 1.5em;
 +
  font-weight: bolder;
 +
  cursor: pointer;
 
}
 
}
  
@media screen and (max-width:350px){
+
#header #menu #class-a {
     #title{
+
  right: 1vmin;
        font-size: 200%;
+
}
    }
+
 
 +
#header #menu #class-a li {
 +
  width: 30vmin;
 +
  background-color: #ffffff;
 +
  border: #ffffff solid 3px;
 +
}
 +
 
 +
#header #menu #class-a li:hover {
 +
  border: #0072fe solid 3px;
 +
}
 +
 
 +
#header #menu #class-a .class-a {
 +
  background-color: #0072fe;
 +
  border: #0072fe solid 3px;
 +
  color: #ffffff;
 +
}
 +
 
 +
#header #menu #class-b {
 +
  right: 33vmin;
 +
}
 +
 
 +
#header #menu #class-b li {
 +
  border: #0072fe solid 2px;
 +
  width: 39vmin;
 +
}
 +
 
 +
#header #menu #class-b li a {
 +
  color: #ffffff;
 +
}
 +
 
 +
#header #menu #class-b li:active {
 +
  background-color: #0000008f;
 +
}
 +
#header #menu #class-b .class-b {
 +
  background-color: #00000047;
 +
}
 +
 
 +
#bodyContent a[href ^="https://"], .link-https
 +
{
 +
  padding: 0;
 +
}
 +
 
 +
footer {
 +
  position: -webkit-sticky;
 +
  left: 0;
 +
  padding-bottom: 0;
 +
  width: 100%;
 +
  background-color: #212121;
 +
}
 +
 
 +
footer #sponsor {
 +
  position: relative;
 +
  display: flex;
 +
  justify-content: center;
 +
  margin: 0;
 +
  padding: 0.5vmin;
 +
  padding-bottom: 3vmin;
 +
  top: -3vmin;
 +
  width: 100%;
 +
  border-radius: 20px;
 +
  background-color: #ffffff;
 +
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  z-index: 1;
 +
}
 +
footer #sponsor img {
 +
  width: 96%;
 +
}
 +
footer #connect {
 +
  position: relative;
 +
  margin: 0;
 +
  padding-top: 1vmin;
 +
  top: -8vmin;
 +
  width: 100%;
 +
  background-color: #212121;
 +
  border-radius: 20px;
 +
  z-index: 2;
 +
}
 +
 
 +
footer #connect #contact {
 +
  display: flex;
 +
  padding: 0;
 +
  flex-wrap: wrap;
 +
  justify-content: center;
 +
}
 +
 
 +
footer #connect h4 {
 +
  margin: 2% 0;
 +
  text-align: center;
 +
  color: #ffffff;
 +
  font-size: 1.5em;
 +
  font-weight: bold;
 +
  font-family: "MONTSERRAT-BLACK1";
 +
}
 +
 
 +
footer #connect #contact li {
 +
  width: 280px;
 +
  height: 120px;
 +
  font-family: "CABIN-REGULAR";
 +
  justify-content: center;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  text-align: center;
 +
  border-left: #212121 solid 10px;
 +
  border-right: #212121 solid 10px;
 +
  cursor: pointer;
 +
}
 +
 
 +
footer #connect #contact li:hover {
 +
  border: 0;
 +
}
 +
 
 +
footer #connect #contact li:hover p {
 +
  font-weight: bolder;
 +
}
 +
 
 +
footer #connect li img {
 +
  margin-bottom: 2vw;
 +
  width: 20%;
 +
}
 +
footer #connect li p {
 +
  color: #ffffff;
 +
  font-size: 1.1em;
 +
  text-align: center;
 +
}
 +
@media screen and (max-width: 1200px) {
 +
  footer #connect #contact li {
 +
    width: 350px;
 +
  }
 +
}
 +
@media screen and (max-width: 450px) {
 +
  footer #connect #contact li {
 +
     width: 160px;
 +
  }
 +
  footer #connect li p {
 +
    font-size: 0.8em;
 +
  }
 
}
 
}

Latest revision as of 12:59, 12 December 2021

@font-face {

 font-family: MONTSERRAT-BLACK1;
 src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACK1.eot");
 src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
     format("woff"),
   url("https://static.igem.org/mediawiki/2021/0/01/T--CPU_CHINA--Team--MONTSERRAT-BLACK1.TTF")
     format("truetype"),
   url("https://static.igem.org/mediawiki/2021/3/38/T--CPU_CHINA--MONTSERRAT-BLACK1.svg")
     format("svg");

}

@font-face {

 font-family: MONTSERRAT-BLACKITALIC2;
 src: url("https://static.igem.org/mediawiki/2021/c/cd/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.eot");
 src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
     format("woff"),
   url("https://static.igem.org/mediawiki/2021/4/43/T--CPU_CHINA--Team--MONTSERRAT-BLACKITALIC2.TTF")
     format("truetype"),
   url("https://static.igem.org/mediawiki/2021/1/16/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.svg")
     format("svg");

}

@font-face {

 font-family: CABIN-REGULAR;
 src: url("https://static.igem.org/mediawiki/2021/5/5e/T--CPU_CHINA--CABIN-REGULAR.eot");
 src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
     format("woff"),
   url("https://static.igem.org/mediawiki/2021/d/d2/T--CPU_CHINA--CABIN-REGULAR.TTF")
     format("truetype"),
   url("https://static.igem.org/mediawiki/2021/9/94/T--CPU_CHINA--CABIN-REGULAR.svg")
     format("svg");

}

@font-face {

 font-family: BLACKITALIC;
 src: url("https://static.igem.org/mediawiki/2021/d/d8/T--CPU_CHINA--BLACKITALIC.eot");
 src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
     format("woff"),
   url("https://static.igem.org/mediawiki/2021/2/28/T--CPU_CHINA--BLACKITALIC.ttf")
     format("truetype"),
     url("https://static.igem.org/mediawiki/2021/4/49/T--CPU_CHINA--BLACKITALIC.svg")
     format("svg");

} body {

 background-color: #ffffff;

}

  • {
 box-sizing: border-box;

}

  1. contain {
 margin-top: -12px;
 padding: 0 3% 10%;
 width: 100%;
 background-color: #ffffff;
 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: 9vw;
 font-family: "MONTSERRAT-BLACKITALIC2";
 line-height: normal;
 font-weight: bolder;
 font-size: 8vw;
 color: #ffffff;
 z-index: -1;

}

  1. header #load {
 position: fixed;
 display: flex;
 width: 100%;
 height: 100%;
 background-color: white;
 align-items: center;
 justify-content: center;
 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-color: #000000ad;
 transition: background-color 2s;

}

  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;
 cursor: pointer;
 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;
 cursor: pointer;

}

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

}

  1. header #menu #class-a li {
 width: 30vmin;
 background-color: #ffffff;
 border: #ffffff 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: #ffffff;

}

  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: #ffffff;

}

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

}

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

}

  1. bodyContent a[href ^="https://"], .link-https

{

 padding: 0;

}

footer {

 position: -webkit-sticky;
 left: 0;
 padding-bottom: 0;
 width: 100%;
 background-color: #212121;

}

footer #sponsor {

 position: relative;
 display: flex;
 justify-content: center;
 margin: 0;
 padding: 0.5vmin;
 padding-bottom: 3vmin;
 top: -3vmin;
 width: 100%;
 border-radius: 20px;
 background-color: #ffffff;
 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 z-index: 1;

} footer #sponsor img {

 width: 96%;

} footer #connect {

 position: relative;
 margin: 0;
 padding-top: 1vmin;
 top: -8vmin;
 width: 100%;
 background-color: #212121;
 border-radius: 20px;
 z-index: 2;

}

footer #connect #contact {

 display: flex;
 padding: 0;
 flex-wrap: wrap;
 justify-content: center;

}

footer #connect h4 {

 margin: 2% 0;
 text-align: center;
 color: #ffffff;
 font-size: 1.5em;
 font-weight: bold;
 font-family: "MONTSERRAT-BLACK1";

}

footer #connect #contact li {

 width: 280px;
 height: 120px;
 font-family: "CABIN-REGULAR";
 justify-content: center;
 flex-direction: column;
 align-items: center;
 text-align: center;
 border-left: #212121 solid 10px;
 border-right: #212121 solid 10px;
 cursor: pointer;

}

footer #connect #contact li:hover {

 border: 0;

}

footer #connect #contact li:hover p {

 font-weight: bolder;

}

footer #connect li img {

 margin-bottom: 2vw;
 width: 20%;

} footer #connect li p {

 color: #ffffff;
 font-size: 1.1em;
 text-align: center;

} @media screen and (max-width: 1200px) {

 footer #connect #contact li {
   width: 350px;
 }

} @media screen and (max-width: 450px) {

 footer #connect #contact li {
   width: 160px;
 }
 footer #connect li p {
   font-size: 0.8em;
 }

}