Difference between revisions of "Team:Queens Canada/CSS"

Revision as of 18:33, 24 May 2018 (view source) Declanr (Talk | contribs) (Created page with ":root { --whiteish: #F7F7F7; --blackish: #111; --main: #FFB375; --main_darker: #FFA666; --accent1: #456990; --accent2: #49BEAA; --accent3: #49DCB1; --backgroun...")		Latest revision as of 19:04, 24 May 2018 (view source) Declanr (Talk | contribs)
(5 intermediate revisions by the same user not shown)
Line 1:		Line 1:
−	:root {	+	/* Change it up */
−	--whiteish: #F7F7F7;	+
−	--blackish: #111;	+
−	--main: #FFB375;	+
−	--main_darker: #FFA666;	+
−	--accent1: #456990;	+
−	--accent2: #49BEAA;	+
−	--accent3: #49DCB1;	+
−	--background: #D3D1BE;	+
−	/* #B2B09B; */	+
−	}	+
−		+
−	/* Font things */	+
−		+
−	@font-face {	+
−	font-family: ProjectTitle;	+
−	src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf');	+
−	/* src: url('../webfonts/copperplatelightssilight.ttf'); */	+
−	}	+
−		+
−	@font-face {	+
−	font-family: UnderTitle;	+
−	src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');	+
−	/* src: url('../webfonts/yugothil.ttf'); */	+
−	}	+
−		+
−	@font-face {	+
−	font-family: Kopje;	+
−	src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf');	+
−	/* src: url('../webfonts/Roboto-Medium.ttf'); */	+
−	font-weight: bold;	+
−	}	+
−		+
−	@font-face {	+
−	font-family: Body;	+
−	src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf');	+
−	/* src: url('../webfonts/Roboto-Light.ttf'); */	+
−	}	+
−		+
−	@font-face {	+
−	font-family: Body;	+
−	src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf');	+
−	/* src: url('../webfonts/Roboto-LightItalic.ttf'); */	+
−	font-style: italic;	+
−	}	+
−		+
−	/* Correct iGEM shit... */	+
	#Global p, p {		#Global p, p {
Line 195:		Line 149:
	}		}
−	/* Header */	+	.container {
−		+	width: 80%;
−	.circles {	+
−	background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;	+
−	background-position: 50% 50%;	+
−	background-size: cover;	+
−	height: -webkit-max-content;	+
−	height: -moz-max-content;	+
−	height: max-content;	+
−	min-height: calc(70vh - 10px);	+
−	position: relative;	+
−	top: 0;	+
−	z-index: 3;	+
−	}	+
−		+
−	div#headercontent {	+
−	position: absolute;	+
−	display: -webkit-box;	+
−	display: -ms-flexbox;	+
−	display: flex;	+
−	-webkit-box-orient: vertical;	+
−	-webkit-box-direction: normal;	+
−	-ms-flex-direction: column;	+
−	flex-direction: column;	+
−	height: -webkit-max-content;	+
−	height: -moz-max-content;	+
−	height: max-content;	+
−	width: 100%;	+
−	top: 50%;	+
−	-webkit-transform: translateY(-50%);	+
−	transform: translateY(-50%);	+
−	/* border: 3px solid green; */	+
−	}	+
−		+
−	div.logo {	+
−	background: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png');	+
−	/* height: 50%; */	+
−	height: calc(0.9 * 50vw);	+
−	max-height: 300px;	+
−	width: 50%;	+
	margin: auto;		margin: auto;
−	background-size: contain;
−	background-repeat: no-repeat;
−	background-position: center bottom;
	}		}
−	div#Fsos {	+	.container-text {
−	color: var(--blackish);	+	width: 80%;
−	font-size: 50px;	+	max-width: 800px;
−	font-family: ProjectTitle;	+
−	display: block;	+
−	width: max-content;	+
	margin: auto;		margin: auto;
−	text-align: center;	+	padding: 60px 0 40px 0;
−	padding-top: 20px;	+
−	background: rgba(222, 217, 208, 0.7);	+
−	box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+
−	border-radius: 50px;	+
−	}	+
−		+
−	div#UnderTitle {	+
−	color: var(--blackish);	+
−	font-size: 21.62px;	+
−	font-family: UnderTitle;	+
−	display: block;	+
−	width: max-content;	+
−	margin: auto;	+
−	text-align: center;	+
−	padding-left: 2px;	+
−	background: rgba(222, 217, 208, 0.7);	+
−	box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);	+
−	border-radius: 20px;	+
−	}	+
−		+
−	/* Navbar */	+
−		+
−	nav {	+
−	position: -webkit-sticky;	+
−	position: sticky;	+
−	top: 18px;	+
−	background: var(--main);	+
−	height: 54px;	+
−	font-size: 18px;	+
−	-webkit-box-shadow: 0 2px 5px var(--main_darker);	+
−	box-shadow: 0 2px 5px var(--main_darker);	+
−	z-index: 3;	+
−	}	+
−		+
−	nav>div>ul {	+
−	float: right;	+
−	display: inline-block;	+
−	}	+
−		+
−	nav>div>ul .hasdropdown {	+
−	padding: 15px 30px;	+
−	float: left;	+
−	}	+
−		+
−	nav>#LogoSmall {	+
−	background: inherit;	+
−	display: block;	+
−	position: absolute;	+
−	left: 0;	+
−	top: 0;	+
−	width: 145px;	+
−	border-bottom-right-radius: 70%;	+
−	-webkit-box-shadow: 0 2px 5px var(--main);	+
−	box-shadow: 0 2px 5px var(--main);	+
−	z-index: 2;	+
−	}	+
−		+
−	nav>#LogoSmall>a {	+
−	display: inline-block;	+
−	}	+
−		+
−	nav img {	+
−	height: 80px;	+
−	width: auto;	+
−	margin: 10px;	+
−	z-index: 4;	+
−	position: relative;	+
−	}	+
−		+
−	.hasdropdown {	+
−	position: relative;	+
−	top: 100%	+
−	}	+
−		+
−	.dropdownContent {	+
−	position: absolute;	+
−	overflow: hidden;	+
−	top: 100%;	+
−	right: 0;	+
−	width: -webkit-max-content;	+
−	width: -moz-max-content;	+
−	width: max-content;	+
−	max-width: 250px;	+
−	font-size: 0.9em;	+
−	border-bottom-left-radius: 5px;	+
−	border-bottom-right-radius: 5px;	+
−	}	+
−		+
−	.dropdownContent li {	+
−	text-align: right;	+
−	display: none;	+
−	background-color: var(--main);	+
−	z-index: 3;	+
−	position: relative;	+
−	}	+
−		+
−	.dropdownContent a {	+
−	padding: 10px 20px;	+
−	display: block;	+
−	}	+
−		+
−	nav li:hover {	+
−	background: var(--main_darker);	+
−	}	+
−		+
−	.hasNoDropdown {	+
−	float: left;	+
−	}	+
−		+
−	.hasNoDropdown a {	+
−	padding: 15px 30px;	+
−	display: block;	+
−	}	+
−		+
−	.dropdownContentOpen li {	+
−	display: block;	+
−	overflow: visible;	+
−	opacity: 0;	+
−	-webkit-animation: dropdown 300ms forwards;	+
−	animation: dropdown 300ms forwards;	+
−	z-index: 2;	+
−	}	+
−		+
−	.dropdownContentOpen li:nth-child(1) {	+
−	-webkit-animation-delay: 0s;	+
−	animation-delay: 0s;	+
−	}	+
−		+
−	.dropdownContentOpen li:nth-child(2) {	+
−	-webkit-animation-delay: 50ms;	+
−	animation-delay: 50ms;	+
−	}	+
−		+
−	.dropdownContentOpen li:nth-child(3) {	+
−	-webkit-animation-delay: 100ms;	+
−	animation-delay: 100ms;	+
−	}	+
−		+
−	.dropdownContentOpen li:nth-child(4) {	+
−	-webkit-animation-delay: 150ms;	+
−	animation-delay: 150ms;	+
−	}	+
−		+
−	.dropdownContentOpen li:nth-child(5) {	+
−	-webkit-animation-delay: 200ms;	+
−	animation-delay: 200ms;	+
−	}	+
−		+
−	@-webkit-keyframes dropdown {	+
−	0% {	+
−	opacity: 0;	+
−	-webkit-transform: scale(0.6);	+
−	transform: scale(0.6);	+
−	}	+
−	100% {	+
−	opacity: 1;	+
−	-webkit-transform: scale(1);	+
−	transform: scale(1);	+
−	}	+
−	}	+
−		+
−	@keyframes dropdown {	+
−	0% {	+
−	opacity: 0;	+
−	-webkit-transform: scale(0.6);	+
−	transform: scale(0.6);	+
−	}	+
−	100% {	+
−	opacity: 1;	+
−	-webkit-transform: scale(1);	+
−	transform: scale(1);	+
−	}	+
−	}	+
−		+
−	#openSideMenu, #closeSideMenu {	+
−	position: absolute;	+
−	right: 0;	+
−	top: 0;	+
−	font-size: 30px;	+
−	padding: 12.2px 15px 12.2px;	+
−	display: none;	+
−	cursor: pointer;	+
−	}	+
−		+
−	#closeSideMenu {	+
−	color: var(--whiteish);	+
−	top: 10px;	+
−	right: 10px;	+
−	}	+
−		+
−	#closeSideMenu i {	+
−	padding: 10px 15px;	+
	}		}
Line 508:		Line 226:
	color: #7cbb00;		color: #7cbb00;
	}		}
−
−	/* References */
−
−	#references {
−	font-size: 0.75em;
−	}
−
−	/* Responsiveness */
	@media (max-width: 700px) {		@media (max-width: 700px) {
Line 535:		Line 245:
	body, #contentBox {		body, #contentBox {
	font-size: calc(100vw * 0.01 + 11px);		font-size: calc(100vw * 0.01 + 11px);
−	}
−	}
−
−	@media (max-width: 600px) {
−	#openSideMenu {
−	display: block;
−	color: var(--blackish);
−	}
−	#sideBar {
−	color: var(--whiteish);
−	max-width: 300px;
−	height: 100%;
−	position: fixed;
−	top: 0;
−	right: 0px;
−	background: var(--blackish);
−	opacity: 0.9;
−	padding-top: 100px;
−	display: none;
−	z-index: 1000;
−	}
−	nav>div>ul {
−	float: left;
−	padding-left: 20px;
−	width: 100%;
−	}
−	nav>div>ul .hasdropdown {
−	padding: 15px 30px;
−	float: none;
−	margin: auto;
−	}
−	.hasNoDropdown a {
−	padding: 15px 30px;
−	display: block;
−	}
−	.dropdownContentOpen {
−	-webkit-animation: none;
−	animation: none;
−	}
−	.dropdownContent {
−	position: relative;
−	top: 5px;
−	max-width: 250px;
−	}
−	.dropdownContent li {
−	text-align: left;
−	background-color: var(--blackish);
−	}
−	.dropdownContent a {
−	padding: 10px 10px 10px 15px;
−	max-width: 210px;
−	}
−	nav li:hover {
−	background: var(--blackish);
−	color: white;
−	font-size: 110%;
−	}
−	footer>div {
−	-webkit-box-orient: vertical;
−	-webkit-box-direction: normal;
−	-ms-flex-direction: column;
−	flex-direction: column;
−	-webkit-box-align: center;
−	-ms-flex-align: center;
−	align-items: center;
−	}
−	.countdown div#excessive {
−	display: none;
−	}
−	.countdown div {
−	font-size: 35px;
−	padding: 10px;
−	margin: 5px;
−	-webkit-box-shadow: 0 0 7px 2px white;
−	box-shadow: 0 0 7px 2px white;
−	}
−	.countdown span {
−	font-size: 25px;
−	}
−	}
−
−	@media (max-width: 470px) {
−	div#Fsos {
−	font-size: 35px;
−	width: 95%;
−	margin: auto;
−	}
−	div#UnderTitle {
−	font-size: 15px;
−	width: 95%;
−	margin: auto;
−	padding: 0;
−	}
−	@media (max-width: 400px) {
−	body, #contentBox {
−	font-size: 15px;
−	}
	}		}
	}		}

---

Latest revision as of 19:04, 24 May 2018

/* Change it up */

1. Global p, p {

 padding: 0;
 padding-bottom: 5px;
 margin: 0px;
 line-height: 1.4;

}

1. Global p.meta {

 padding: 0;
 margin: 0;

}

1. Global {

 top: -2px;
 width: 100%;
 position: absolute;
 background-color: var(--whiteish);
 color: var(--blackish);
 font-family: Body, sans-serif;

}

1. globalWrapper {

 font-size: 100%;
 padding: 0;

}

1. top_menu_under, #top_menu_14, #top_menu_inside {

 -webkit-box-sizing: content-box;
 box-sizing: content-box;

}

1. top_menu_under {

 height: 0px;

}

a[href ^="https://"] {

 padding: 0;

}

1. top_menu_inside ul a, #top_menu_inside ul li.has_submenu {

 line-height: 1.5em;

}

/* Global */

sup {

 font-size: 60%;

}

h1, h2, h3, h4, h5, h6 {

 font-family: Kopje, sans-serif;
 margin: 0;
 padding: 0;
 padding-top: 15px;
 border: none;
 font-weight: bold;

}

h1 {

 font-size: 2em;

}

h2 {

 font-size: 1.5em;

}

h3 {

 font-size: 1.17em;

}

h4 {

 font-size: 1.12em;

}

h5 {

 font-size: .83em;

}

h6 {

 font-size: .75em;

}

.submenu div {

 line-height: 1.5em;

}

body, #contentBox {

 width: 100%;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 padding: 0;
 margin: 0;
 line-height: normal;
 position: absolute;
 top: 10px;
 background: #C6c6c6;
 font-size: 18px;
 color: var(--blackish);
 font-family: Body, sans-serif;

}

1. body {

 background-color: var(--whiteish);

}

li, ul {

 margin: 0;
 line-height: normal;
 list-style-type: none;
 list-style-image: none;
 display: block;

}

• {

 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;
 line-height: normal;

}

.container {

 width: 80%;
 margin: auto;

}

.container-text {

 width: 80%;
 max-width: 800px;
 margin: auto;
 padding: 60px 0 40px 0;

}

1. content {

 width: 100%;
 position: relative;
 -webkit-box-shadow: 0px -2px 20px 0px #333;
 box-shadow: 0px -2px 20px 0px #333;
 z-index: 1;

}

a, a:active, a:visited, a:hover {

 color: inherit;
 text-decoration: none;

}

.container {

 width: 80%;
 margin: auto;

}

.container-text {

 width: 80%;
 max-width: 800px;
 margin: auto;
 padding: 60px 0 40px 0;

}

/* footer stuffs */

footer {

 background: var(--background);
 /* #C6C6C6; */
 padding: 30px 20px;
 min-height: -webkit-max-content;
 min-height: -moz-max-content;
 min-height: max-content;
 font-size: 14px;

}

footer>div {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;

}

footer #social_media, footer #contact {

 display: inline-block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 position: relative;
 margin: 30px;
 text-align: center;

}

footer h1 {

 padding-bottom: 25px;

}

footer i {

 font-size: 50px;
 padding: 5px;
 -webkit-transition: color 0.5s 0.1s;
 transition: color 0.5s 0.1s;

}

footer #social_media a {

 display: inline-block;

}

1. facebook:hover {

 color: #3B5998;

}

1. twitter:hover {

 color: #1da1f2;

}

1. linkedin:hover {

 color: #0077B5;

}

1. instagram:hover {

 color: #8a3ab9;

}

1. mail:hover {

 color: #7cbb00;

}

@media (max-width: 700px) {

 .container {
   width: 100%;
   padding: 0 20px;
 }
 div#Fsos {
   font-size: calc(100vw * 0.0667 + 3.3px);
   width: 90%;
   margin: auto;
 }
 div#UnderTitle {
   font-size: calc(100vw * 0.0288 + 1.437px);
   width: 90%;
   margin: auto;
   padding: 0;
 }
 body, #contentBox {
   font-size: calc(100vw * 0.01 + 11px);
 }

}