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

Revision as of 12:23, 21 October 2021 (view source) Lanchai (Talk | contribs) ← Older edit		Revision as of 12:24, 21 October 2021 (view source) Lanchai (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	// 菜单页	+	@font-face {
−	var header = new Vue({	+	font-family: MONTSERRAT-BLACK1;
−	el: "#header",	+	src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
−	data: {	+	format("woff");
−	loading: true,	+	}
−	menu: "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png", //菜单按钮	+
−	isOpen: false, //背景变化	+
−	classA: false, //一级菜单是否打开	+
−	classB: false, //二级菜单是否打开	+
−	isActive: "", //背景变色	+
−	isActiveA: -1, //一级菜单悬停效果	+
−	isActiveB: -1, //二级菜单悬停效果	+
−	status: // 菜单的状态	+
−	{	+
−	"open": "https://static.igem.org/mediawiki/2021/a/a4/T--CPU_CHINA--.png",	+
−	"close": "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png"	+
−	},	+
−	clickon: true, //鼠标是否位于菜单上	+
−	ifon: true, //离开是否会关闭按钮	+
−	// 一级菜单列表	+
−	classList: ["Project", "Parts", "Model", "Human Practices", "Team","Judging Form"],	+
−	// 二级菜单刘表	+
−	classList2: [	+
−	[{	+
−	text: "Design",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Design",	+
−	num: 0,	+
−	},	+
−	{	+
−	text: "Description",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Description",	+
−	num: 1,	+
−	},	+
−	{	+
−	text: "Proof of Concept",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Proof_Of_Concept",	+
−	num: 2,	+
−	},	+
−	{	+
−	text: "Proposed Implementation",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Implementation",	+
−	num: 3,	+
−	},	+
−	{	+
−	text: "Art Design",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Art",	+
−	num: 4,	+
−	},	+
−	{	+
−	text: "Lab",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Lab",	+
−	num: 5,	+
−	},	+
−	{	+
−	text: "General Safety",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Safety",	+
−	num: 6,	+
−	},	+
−	],	+
−	[{	+
−	text: "Parts Overview",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/partsOverview",	+
−	num: 0,	+
−	},	+
−	{	+
−	text: "Contributions",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Contribution",	+
−	num: 1,	+
−	},	+
−	{	+
−	text: "Engineering Success",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Engineering",	+
−	num: 2,	+
−	},	+
−	{	+
−	text: "Improvement",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Improve",	+
−	num: 3,	+
−	},	+
−	],	+
−	[{	+
−	text: "Summary",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Model",	+
−	num: 0,	+
−	},	+
−	{	+
−	text: "Mathematical Modeling",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/MathematicalModeling",	+
−	num: 1,	+
−	},	+
−	{	+
−	text: "Molecular Modeling",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/MolecularModeling",	+
−	num: 2,	+
−	},	+
−	],	+
−	[{	+
−	text: "Summary",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Human_Practices",	+
−	num: 0,	+
−	},	+
−	{	+
−	text: "Integrated Human Practices",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/IntegratedHumanPractices",	+
−	num: 1,	+
−	},	+
−	{	+
−	text: "Education and Public Engagement",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Communication",	+
−	num: 2,	+
−	},	+
−	{	+
−	text: "Entrepreneurship",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Entrepreneurship",	+
−	num: 3,	+
−	},	+
−	{	+
−	text: "Plasticase",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Plasticase",	+
−	num: 4,	+
−	},	+
−	{	+
−	text: "Meddy:Relight My Star",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/MeddyRelightMyStar",	+
−	num: 5,	+
−	}	+
−	],	+
−	[{	+
−	text: "Members",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Team",	+
−	num: 0,	+
−	},	+
−	{	+
−	text: "Attributions",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Attributions",	+
−	num: 1,	+
−	},	+
−	{	+
−	text: "Collaboration",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Collaborations",	+
−	num: 2,	+
−	},	+
−	{	+
−	text: "Partnership",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Partnership",	+
−	num: 3,	+
−	},	+
−	],	+
−	[	+
−	{	+
−	text: "Judging Form",	+
−	url: "https://2021.igem.org/Team:CPU_CHINA/Judging_Form",	+
−	num: 0	+
−	}	+
−	]	+
−	],	+
−	},	+
−	methods: {	+
−	// 鼠标悬停到菜单按钮上	+
−	mouseover() {	+
−	if (this.menu == this.status["close"]) {	+
−	this.menu =	+
−	"https://static.igem.org/mediawiki/2021/9/91/T--CPU_CHINA--zheng.gif";	+
−	this.isOpen = true;	+
−	this.isActive = "menu";	+
−	this.classA = true;	+
−	setTimeout(() => {	+
−	this.menu =	+
−	"https://static.igem.org/mediawiki/2021/a/a4/T--CPU_CHINA--.png";	+
−	}, 1100);	+	@font-face {
−	}	+	font-family: MONTSERRAT-BLACKITALIC2;
−	},	+	src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
−	// 关闭菜单	+	format("woff");
−	close() {	+	}
−	if (this.menu == this.status["open"]) {	+
−	this.menu =	+
−	"https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--fan.gif";	+
−	this.isActive = "";	+
−	this.classB = false;	+
−	this.classA = false;	+
−	this.isActiveA = -1;	+
−	setTimeout(() => {	+
−	this.isOpen = false;	+
−	this.menu =	+
−	"https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png";	+
−	}, 1100);	+	@font-face {
−	}	+	font-family: CABIN-REGULAR;
−	},	+	src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
−	// 点击菜单按钮	+	format("woff");
−	click() {	+	}
−	if (this.menu == this.status["open"]) {	+
−	this.close();	+
−	} else if (this.menu == this.status["close"]) {	+
−	this.mouseover();	+
−	} else {	+
−	return;	+
−	}	+
−	},	+
−	// 鼠标移动到菜单上	+
−	on() {	+
−	this.clickon = false;	+
−	this.ifon = false;	+
−	},	+
−	// 鼠标离开菜单	+
−	leave() {	+
−	setTimeout(() => {	+
−	if (this.clickon) {	+
−	this.ifon = true;	+
−	if (this.ifon && this.menu == this.status["open"]) {	+
−	this.close();	+
−	} else {	+
−	return;	+
−	}	+
−	}	+
−	}, 3000);	+
−	this.clickon = true;	+
−	},	+
−	// 鼠标点击空白关闭菜单	+
−	ifclick() {	+
−	if (this.clickon && this.menu == this.status["open"]) {	+
−	this.close();	+
−	} else {	+
−	return;	+
−	}	+
−	},	+
−	// 鼠标点击一级菜单	+
−	classAClick(index) {	+
−	this.isActiveB = -1;	+
−	this.isActiveA = index;	+
−	this.classB = true;	+
−	},	+
−	// 鼠标悬停到二级菜单	+
−	classBOver(num) {	+
−	this.isActiveB = num;	+
−	},	+
−	// 鼠标离开二级菜单	+
−	classBLeave(num) {	+
−	this.isActiveB = -1;	+
−	},	+
−	},	+
−	beforeCreate() {	+
−	this.loading = true;	+
−	},	+
−	mounted() {	+
−	this.$nextTick(function () {	+
−	this.mouseover();	+
−	setTimeout(() => {	+
−	this.close();	+
−	this.loading = false;	+
−	}, 1100)	+
−	})	+
−	}	+
−	});	+
−	// 页面滚动响应	+	@font-face {
−	var $navs = $("nav li"), // 导航	+	font-family: CABIN-ITALIC;
−	$sections = $(".section"), // 模块	+	src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
−	$window = $(window),	+	format("woff");
−	navLength = $navs.length - 1;	+	}
−	$window.scroll(function () {	+	@font-face {
−	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;	+	font-family: BLACKITALIC;
−	len = navLength;	+	src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
−	for (; len > -1; len--) {	+	format("woff");
−	var that = $sections.eq(len);	+	}
−	if (scrollTop >= that.offset().top) {	+
−	$navs.removeClass("current").eq(len).addClass("current");	+
−	break;	+
−	}	+
−	}	+
−	});	+
−	$navs.on("click", function (e) {	+	body {
−	e.preventDefault();	+	background-color: #FFFFFF;
−	$("html, body").animate({	+	}
−	scrollTop: $($(this).find("a").attr("href")).offset().top,	+
−	},	+	* {
−	400	+	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;
		+	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;
		+	}
		+
		+	#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;
		+	align-items: center;
		+	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;
		+	font-family: "CABIN-REGULAR";
		+	justify-content: center;
		+	flex-direction: column;
		+	align-items: center;
		+	text-align: center;
		+	}
		+
		+	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;
		+	}
		+	}

---

Revision as of 12:24, 21 October 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: #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;
 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: #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;
 align-items: center;
 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;
 font-family: "CABIN-REGULAR";
 justify-content: center;
 flex-direction: column;
 align-items: center;
 text-align: center;

}

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;
 }

}