(39 intermediate revisions by the same user 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/d/d4/T--CPU_CHINA--MONTSERRAT-BLACK1.eot"); | ||
src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff") | 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/c/cd/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.eot"); | ||
src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff") | 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/5/5e/T--CPU_CHINA--CABIN-REGULAR.eot"); | ||
src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff") | 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: | + | font-family: BLACKITALIC; |
− | src: url("https://static.igem.org/mediawiki/2021/ | + | 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 { | body { | ||
− | background-color: # | + | background-color: #ffffff; |
} | } | ||
Line 35: | Line 54: | ||
padding: 0 3% 10%; | padding: 0 3% 10%; | ||
width: 100%; | width: 100%; | ||
− | background-color: # | + | background-color: #ffffff; |
z-index: 1; | z-index: 1; | ||
text-align: left; | text-align: left; | ||
Line 51: | Line 70: | ||
#header #title { | #header #title { | ||
position: fixed; | position: fixed; | ||
− | top: | + | top: 9vw; |
font-family: "MONTSERRAT-BLACKITALIC2"; | font-family: "MONTSERRAT-BLACKITALIC2"; | ||
line-height: normal; | line-height: normal; | ||
font-weight: bolder; | font-weight: bolder; | ||
− | font-size: | + | font-size: 8vw; |
− | color: # | + | color: #ffffff; |
z-index: -1; | z-index: -1; | ||
} | } | ||
#header #load { | #header #load { | ||
− | + | position: fixed; | |
− | + | display: flex; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | background-color: white; | |
− | + | align-items: center; | |
− | + | justify-content: center; | |
+ | z-index: 20; | ||
} | } | ||
#header #load img { | #header #load img { | ||
− | + | width: 50vmin; | |
} | } | ||
Line 87: | Line 107: | ||
#header #menu .menu { | #header #menu .menu { | ||
− | background: #000000ad; | + | background-color: #000000ad; |
+ | transition: background-color 2s; | ||
} | } | ||
Line 103: | Line 124: | ||
right: 1vmin; | right: 1vmin; | ||
width: 15vmin; | width: 15vmin; | ||
+ | cursor: pointer; | ||
z-index: 11; | z-index: 11; | ||
} | } | ||
Line 120: | Line 142: | ||
font-size: 1.5em; | font-size: 1.5em; | ||
font-weight: bolder; | font-weight: bolder; | ||
+ | cursor: pointer; | ||
} | } | ||
Line 128: | Line 151: | ||
#header #menu #class-a li { | #header #menu #class-a li { | ||
width: 30vmin; | width: 30vmin; | ||
− | background-color: # | + | background-color: #ffffff; |
− | border: # | + | border: #ffffff solid 3px; |
} | } | ||
Line 139: | Line 162: | ||
background-color: #0072fe; | background-color: #0072fe; | ||
border: #0072fe solid 3px; | border: #0072fe solid 3px; | ||
− | color: # | + | color: #ffffff; |
} | } | ||
Line 148: | Line 171: | ||
#header #menu #class-b li { | #header #menu #class-b li { | ||
border: #0072fe solid 2px; | border: #0072fe solid 2px; | ||
− | width: | + | width: 39vmin; |
} | } | ||
− | #header #menu #class-b li a{ | + | #header #menu #class-b li a { |
− | + | color: #ffffff; | |
} | } | ||
Line 160: | Line 183: | ||
#header #menu #class-b .class-b { | #header #menu #class-b .class-b { | ||
background-color: #00000047; | background-color: #00000047; | ||
+ | } | ||
+ | |||
+ | #bodyContent a[href ^="https://"], .link-https | ||
+ | { | ||
+ | padding: 0; | ||
} | } | ||
Line 165: | Line 193: | ||
position: -webkit-sticky; | position: -webkit-sticky; | ||
left: 0; | left: 0; | ||
+ | padding-bottom: 0; | ||
width: 100%; | width: 100%; | ||
− | background-color: | + | background-color: #212121; |
} | } | ||
footer #sponsor { | footer #sponsor { | ||
position: relative; | position: relative; | ||
− | top: - | + | display: flex; |
+ | justify-content: center; | ||
+ | margin: 0; | ||
+ | padding: 0.5vmin; | ||
+ | padding-bottom: 3vmin; | ||
+ | top: -3vmin; | ||
width: 100%; | width: 100%; | ||
− | border-radius: | + | border-radius: 20px; |
− | -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) | + | 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) | + | -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); |
− | + | 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); |
− | -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) | + | |
z-index: 1; | z-index: 1; | ||
} | } | ||
− | + | footer #sponsor img { | |
+ | width: 96%; | ||
+ | } | ||
footer #connect { | footer #connect { | ||
position: relative; | position: relative; | ||
− | top: - | + | margin: 0; |
+ | padding-top: 1vmin; | ||
+ | top: -8vmin; | ||
width: 100%; | width: 100%; | ||
− | + | background-color: #212121; | |
− | background-color: | + | border-radius: 20px; |
− | border-radius: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
z-index: 2; | 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;
}
- 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;
}
- header #title {
position: fixed; top: 9vw; font-family: "MONTSERRAT-BLACKITALIC2"; line-height: normal; font-weight: bolder; font-size: 8vw; color: #ffffff; z-index: -1;
}
- header #load {
position: fixed; display: flex; width: 100%; height: 100%; background-color: white; align-items: center; justify-content: center; z-index: 20;
}
- header #load img {
width: 50vmin;
}
- header #menu {
z-index: 10;
}
- header #menu #menuBack {
position: fixed; width: 100%; height: 100%; box-sizing: border-box; z-index: 10;
}
- header #menu .menu {
background-color: #000000ad; transition: background-color 2s;
}
- header #menu #logo {
position: fixed; top: 3vmin; left: 1vmin; width: 25vmin; z-index: 11;
}
- header #menu #menuImg {
position: fixed; top: 2vmin; right: 1vmin; width: 15vmin; cursor: pointer; z-index: 11;
}
- header #menu .class {
position: fixed; top: 14vmin; z-index: 11;
}
- 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;
}
- header #menu #class-a {
right: 1vmin;
}
- 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; }
}