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

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/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")format('woff');
 
}
 
}
  
−
@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/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")format('woff');
 
}
 
}
  
−
@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/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")format('woff');
 
}
 
}
  
−
@font-face{
+
@font-face {
 
     font-family: CABIN-ITALIC;
 
     font-family: CABIN-ITALIC;
 
     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/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")format('woff');
 
}
 
}
  
−
#contain{
+
body {
−
     margin-top:-12px;
+
    background-color: #FAFAFA;
−
     padding:0 3% 10%;  
+
}
 +
 
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 
 +
#contain {
 +
     margin-top: -12px;
 +
     padding: 0 3% 10%;
 
     width: 100%;
 
     width: 100%;
 
     background-color: #FAFAFA;
 
     background-color: #FAFAFA;
Line 29: Line 37:
 
}
 
}
  
−
.background{
+
.background {
−
        position: fixed;
+
    position: fixed;
−
        width: 100%;
+
    width: 100%;
−
        top: 0;
+
    top: 0;
−
        z-index: -1;
+
    z-index: -1;
−
        box-sizing: border-box;
+
    box-sizing: border-box;
−
    }
+
}
  
−
#header #title{
+
#header #title {
−
     position:fixed;
+
     position: fixed;
 
     top: 10%;
 
     top: 10%;
 
     font-family: "MONTSERRAT-BLACKITALIC2";
 
     font-family: "MONTSERRAT-BLACKITALIC2";
 
     line-height: normal;
 
     line-height: normal;
 
     font-weight: bolder;
 
     font-weight: bolder;
−
     font-size: 900%;
+
     font-size: 800%;
 
     color: #FAFAFA;
 
     color: #FAFAFA;
 
     z-index: -1;
 
     z-index: -1;
 +
}
 +
 +
#header #menu {
 +
    position: fixed;
 +
    width: 100%;
 +
    height: 100%;
 +
    box-sizing: border-box;
 +
    z-index: 4;
 +
}
 +
 +
#header .menu {
 +
    background-color: #000000ad;
 +
}
 +
 +
#header #menu #logo {
 +
    position: fixed;
 +
    top: 6vmin;
 +
    left: 1vmin;
 +
    width: 25vmin;
 +
}
 +
 +
#header #menu #menuImg {
 +
    position: fixed;
 +
    top: 6vmin;
 +
    right: 1vmin;
 +
    width: 15vmin;
 +
}
 +
 +
#header #menu .class {
 +
    margin-top: 22vmin;
 +
    float: right;
 +
    width: 35vmin;
 +
}
 +
 +
#header #menu .class li {
 +
    padding: 8% 0;
 +
    margin: 2vmin;
 +
    border-radius: 30px;
 +
    text-align: center;
 +
    font-family: "MONTSERRAT-BLACKITALIC2";
 +
    font-size: 1.5em;
 +
    font-weight: bolder;
 +
}
 +
 +
#header #menu #class-a li {
 +
    margin-right: 3vmin;
 +
    background-color: #FAFAFA;
 +
 +
}
 +
 +
#header #menu #class-a .class-a{
 +
    background-color: #0072FE;
 +
    color: #FAFAFA;
 +
}
 +
 +
#header #menu #class-b li {
 +
    border: #0072FE solid 2px;
 +
    color: #FAFAFA;
 +
}
 +
 +
#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;
 
}
 
}

Revision as of 15:25, 10 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');

}

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: 10%;
   font-family: "MONTSERRAT-BLACKITALIC2";
   line-height: normal;
   font-weight: bolder;
   font-size: 800%;
   color: #FAFAFA;
   z-index: -1;

}

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

}

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

}

  1. header #menu #logo {
   position: fixed;
   top: 6vmin;
   left: 1vmin;
   width: 25vmin;

}

  1. header #menu #menuImg {
   position: fixed;
   top: 6vmin;
   right: 1vmin;
   width: 15vmin;

}

  1. header #menu .class {
   margin-top: 22vmin;
   float: right;
   width: 35vmin;

}

  1. header #menu .class li {
   padding: 8% 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 li {
   margin-right: 3vmin;
   background-color: #FAFAFA;

}

  1. header #menu #class-a .class-a{
   background-color: #0072FE;
   color: #FAFAFA;

}

  1. header #menu #class-b li {
   border: #0072FE solid 2px;
   color: #FAFAFA;

}

  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;

}