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

Revision as of 14:20, 17 October 2021 (view source) Lanchai (Talk | contribs) ← Older edit		Latest revision as of 12:59, 12 December 2021 (view source) Lanchai (Talk | contribs)
(19 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");	+	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");	+	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");	+	format("woff"),
−	}	+	url("https://static.igem.org/mediawiki/2021/d/d2/T--CPU_CHINA--CABIN-REGULAR.TTF")
−		+	format("truetype"),
−	@font-face {	+	url("https://static.igem.org/mediawiki/2021/9/94/T--CPU_CHINA--CABIN-REGULAR.svg")
−	font-family: CABIN-ITALIC;	+	format("svg");
−	src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")	+
−	format("woff");	+
	}		}
	@font-face {		@font-face {
	font-family: BLACKITALIC;		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")		src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
−	format("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: #fafafa;	+	background-color: #ffffff;
	}		}
Line 41:		Line 54:
	padding: 0 3% 10%;		padding: 0 3% 10%;
	width: 100%;		width: 100%;
−	background-color: #fafafa;	+	background-color: #ffffff;
	z-index: 1;		z-index: 1;
	text-align: left;		text-align: left;
Line 62:		Line 75:
	font-weight: bolder;		font-weight: bolder;
	font-size: 8vw;		font-size: 8vw;
−	color: #fafafa;	+	color: #ffffff;
	z-index: -1;		z-index: -1;
	}		}
Line 111:		Line 124:
	right: 1vmin;		right: 1vmin;
	width: 15vmin;		width: 15vmin;
		+	cursor: pointer;
	z-index: 11;		z-index: 11;
	}		}
Line 128:		Line 142:
	font-size: 1.5em;		font-size: 1.5em;
	font-weight: bolder;		font-weight: bolder;
		+	cursor: pointer;
	}		}
Line 136:		Line 151:
	#header #menu #class-a li {		#header #menu #class-a li {
	width: 30vmin;		width: 30vmin;
−	background-color: #fafafa;	+	background-color: #ffffff;
−	border: #fafafa solid 3px;	+	border: #ffffff solid 3px;
	}		}
Line 147:		Line 162:
	background-color: #0072fe;		background-color: #0072fe;
	border: #0072fe solid 3px;		border: #0072fe solid 3px;
−	color: #fafafa;	+	color: #ffffff;
	}		}
Line 160:		Line 175:
	#header #menu #class-b li a {		#header #menu #class-b li a {
−	color: #fafafa;	+	color: #ffffff;
	}		}
Line 170:		Line 185:
	}		}
−	#bodyContent a[href ^="https://"], .link-https{	+	#bodyContent a[href ^="https://"], .link-https
		+	{
	padding: 0;		padding: 0;
	}		}
Line 177:		Line 193:
	position: -webkit-sticky;		position: -webkit-sticky;
	left: 0;		left: 0;
−	padding-bottom: 0.5vmin;	+	padding-bottom: 0;
	width: 100%;		width: 100%;
−	background-color: #424242;	+	background-color: #212121;
	}		}
Line 208:		Line 224:
	top: -8vmin;		top: -8vmin;
	width: 100%;		width: 100%;
−	background-color: #424242;	+	background-color: #212121;
	border-radius: 20px;		border-radius: 20px;
	z-index: 2;		z-index: 2;
Line 215:		Line 231:
	footer #connect #contact {		footer #connect #contact {
	display: flex;		display: flex;
		+	padding: 0;
	flex-wrap: wrap;		flex-wrap: wrap;
−	align-items: center;
	justify-content: center;		justify-content: center;
	}		}
	footer #connect h4 {		footer #connect h4 {
−	margin: 1% 0 5vmin;	+	margin: 2% 0;
	text-align: center;		text-align: center;
	color: #ffffff;		color: #ffffff;
Line 231:		Line 247:
	footer #connect #contact li {		footer #connect #contact li {
	width: 280px;		width: 280px;
		+	height: 120px;
	font-family: "CABIN-REGULAR";		font-family: "CABIN-REGULAR";
−	border: #424242 solid 10px;
	justify-content: center;		justify-content: center;
	flex-direction: column;		flex-direction: column;
	align-items: center;		align-items: center;
	text-align: center;		text-align: center;
		+	border-left: #212121 solid 10px;
		+	border-right: #212121 solid 10px;
		+	cursor: pointer;
	}		}
	footer #connect #contact li:hover {		footer #connect #contact li:hover {
−	border: none;	+	border: 0;
		+	}
		+
		+	footer #connect #contact li:hover p {
		+	font-weight: bolder;
	}		}
Line 251:		Line 274:
	font-size: 1.1em;		font-size: 1.1em;
	text-align: center;		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;
 }

}