Difference between revisions of "Template:TecCEM/Style"

Revision as of 00:08, 9 October 2018 (view source) Joellara (Talk | contribs) ← Older edit		Latest revision as of 20:10, 17 October 2018 (view source) Joellara (Talk | contribs)
(46 intermediate revisions by the same user not shown)
Line 1:		Line 1:
	@font-face {		@font-face {
−	font-family: "TodaySHOP";	+	font-family: "TodaySHOP";
−	src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot");	+	src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot");
−	src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot?#iefix")	+	src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot?#iefix")
−	format("embedded-opentype"),	+	format("embedded-opentype"),
−	url("https://static.igem.org/mediawiki/2018/a/aa/T--TecCEM--TodaySHOP-Regular.woff")	+	url("https://static.igem.org/mediawiki/2018/a/aa/T--TecCEM--TodaySHOP-Regular.woff")
−	format("woff");	+	format("woff");
−	font-weight: normal;	+	font-weight: normal;
−	font-style: normal;	+	font-style: normal;
	}		}
	@font-face {		@font-face {
−	font-family: "Caecilia LT Std";	+	font-family: "Caecilia LT Std";
−	src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot");	+	src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot");
−	src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot?#iefix")	+	src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot?#iefix")
−	format("embedded-opentype"),	+	format("embedded-opentype"),
−	url("https://static.igem.org/mediawiki/2018/2/23/T--TecCEM--CaeciliaLTStd-Roman.woff")	+	url("https://static.igem.org/mediawiki/2018/2/23/T--TecCEM--CaeciliaLTStd-Roman.woff")
−	format("woff");	+	format("woff");
−	font-weight: normal;	+	font-weight: normal;
−	font-style: normal;	+	font-style: normal;
	}		}
	@font-face {		@font-face {
−	font-family: "Caecilia LT Std";	+	font-family: "Caecilia LT Std";
−	src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot");	+	src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot");
−	src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot?#iefix")	+	src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot?#iefix")
−	format("embedded-opentype"),	+	format("embedded-opentype"),
−	url("https://static.igem.org/mediawiki/2018/0/0f/T--TecCEM--CaeciliaLTStd-Italic.woff")	+	url("https://static.igem.org/mediawiki/2018/0/0f/T--TecCEM--CaeciliaLTStd-Italic.woff")
−	format("woff");	+	format("woff");
−	font-weight: normal;	+	font-weight: normal;
−	font-style: italic;	+	font-style: italic;
	}		}
	@font-face {		@font-face {
−	font-family: "Caecilia LT Std";	+	font-family: "Caecilia LT Std";
−	src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot");	+	src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot");
−	src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot?#iefix")	+	src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot?#iefix")
−	format("embedded-opentype"),	+	format("embedded-opentype"),
−	url("https://static.igem.org/mediawiki/2018/6/6f/T--TecCEM--CaeciliaLTStd-Bold.woff")	+	url("https://static.igem.org/mediawiki/2018/6/6f/T--TecCEM--CaeciliaLTStd-Bold.woff")
−	format("woff");	+	format("woff");
−	font-weight: bold;	+	font-weight: bold;
−	font-style: normal;	+	font-style: normal;
	}		}
	#HQ_page {		#HQ_page {
−	position: absolute;	+	position: absolute;
−	top: 4px;	+	top: 4px;
−	width: 100%;	+	width: 100%;
	}		}
Line 54:		Line 54:
	#HQ_page a,		#HQ_page a,
	#HQ_page li {		#HQ_page li {
−	font-family: "Caecilia LT Std", sans-serif;	+	font-family: "Caecilia LT Std", sans-serif;
	}		}
	body {		body {
−	font-size: 100%;	+	font-size: 100%;
	}		}
Line 76:		Line 76:
	h5,		h5,
	h6 {		h6 {
−	font-size-adjust: 0.5;	+	font-size-adjust: 0.5;
	}		}
	#HQ_page {		#HQ_page {
−	height: 100%;	+	height: 100%;
	}		}
−	#HQ_page,
	#HQ_page p {		#HQ_page p {
−	font-size: 1em;	+	font-size: 1rem;
−	line-height: 1.75;	+	line-height: 1.5;
−	letter-spacing: 1.5px;	+	letter-spacing: 1px;
−	color: #333333 !important;	+	color: #333333 !important;
		+	}
		+	#HQ_page .lead {
		+	font-size: 1.25rem;
		+	font-weight: 300;
		+	color: #555555;
	}		}
−
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	#HQ_page {	+	#HQ_page {
−	font-size: 1em;	+	font-size: 1rem;
−	line-height: 1.375;	+	line-height: 1.375;
−	}	+	}
	}		}
	h1 {		h1 {
−	font-size: 2em;	+	font-size: 2rem;
−	line-height: 1.25;	+	line-height: 1.25;
	}		}
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	h1 {	+	h1 {
−	font-size: 2.5em;	+	font-size: 2.5rem;
−	line-height: 1.125;	+	line-height: 1.125;
−	}	+	}
	}		}
	@media (min-width: 56.25em) {		@media (min-width: 56.25em) {
−	h1 {	+	h1 {
−	font-size: 3em;	+	font-size: 3rem;
−	line-height: 1.05;	+	line-height: 1.05;
−	}	+	}
	}		}
	h2 {		h2 {
−	font-size: 1.625em;	+	font-size: 1.625rem;
−	line-height: 1.15384615;	+	line-height: 1.15384615;
	}		}
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	h2 {	+	h2 {
−	font-size: 2em;	+	font-size: 2rem;
−	line-height: 1.25;	+	line-height: 1.25;
−	}	+	}
	}		}
	@media (min-width: 56.25em) {		@media (min-width: 56.25em) {
−	h2 {	+	h2 {
−	font-size: 2.25em;	+	font-size: 2.25rem;
−	line-height: 1.25;	+	line-height: 1.25;
−	}	+	}
	}		}
	h3 {		h3 {
−	font-size: 1.375em;	+	font-size: 1.375rem;
−	line-height: 1.13636364;	+	line-height: 1.13636364;
	}		}
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	h3 {	+	h3 {
−	font-size: 1.5em;	+	font-size: 1.5rem;
−	line-height: 1.25;	+	line-height: 1.25;
−	}	+	}
	}		}
	@media (min-width: 56.25em) {		@media (min-width: 56.25em) {
−	h3 {	+	h3 {
−	font-size: 1.75em;	+	font-size: 1.75rem;
−	line-height: 1.25;	+	line-height: 1.25;
−	}	+	}
	}		}
	h4 {		h4 {
−	font-size: 1.125em;	+	font-size: 1.125rem;
−	line-height: 1.11111111;	+	line-height: 1.11111111;
	}		}
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	h4 {	+	h4 {
−	line-height: 1.22222222;	+	font-size: 1.25rem;
−	}	+	line-height: 1.22222222;
		+	}
		+	}
		+	@media (min-width: 56.25em) {
		+	h4 {
		+	font-size: 1.375rem;
		+	line-height: 1.25;
		+	}
		+	}
		+
		+	h5 {
		+	font-size: 1rem;
		+	line-height: 1.11111111;
		+	}
		+
		+	@media (min-width: 43.75em) {
		+	h5 {
		+	font-size: 1.125rem;
		+	line-height: 1.22222222;
		+	}
		+	}
		+	@media (min-width: 56.25em) {
		+	h5 {
		+	font-size: 1.25rem;
		+	line-height: 1.25;
		+	}
	}		}
	blockquote {		blockquote {
−	font-size: 1.25em;	+	font-size: 1.25rem;
−	line-height: 1.25;	+	line-height: 1.25;
	}		}
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
−	blockquote {	+	blockquote {
−	font-size: 1.5em;	+	font-size: 1.5rem;
−	line-height: 1.45833333;	+	line-height: 1.45833333;
−	}	+	}
	}		}
	#HQ_page h1,		#HQ_page h1,
Line 180:		Line 208:
	#HQ_page h4,		#HQ_page h4,
	#HQ_page h5 {		#HQ_page h5 {
−	font-family: "TodaySHOP", sans-serif;	+	font-family: "TodaySHOP", sans-serif;
−	letter-spacing: 3px;	+	letter-spacing: 3px;
−	font-weight: normal;	+	font-weight: normal;
		+	padding: 1px;
	}		}
	#mw-content-text {		#mw-content-text {
−	min-height: 100vh;	+	min-height: 100vh;
	}		}
	#content {		#content {
−	width: 100% !important;	+	width: 100% !important;
−	height: 100% !important;	+	height: 100% !important;
−	margin-left: 0 !important;	+	margin-left: 0 !important;
−	padding-left: 0 !important;	+	padding-left: 0 !important;
		+	}
		+	.text-project > *,
		+	.text-project {
		+	color: #ff1558 !important;
		+	}
		+	.text-team > *,
		+	.text-team {
		+	color: #17cc46 !important;
		+	}
		+
		+	.text-safety > *,
		+	.text-safety {
		+	color: #ef6fca !important;
		+	}
		+
		+	.text-notebook > *,
		+	.text-notebook {
		+	color: #0000ff !important;
		+	}
		+
		+	.text-awards > *,
		+	.text-awards {
		+	color: #ffdb27 !important;
		+	}
		+
		+	.text-parts > *,
		+	.text-parts {
		+	color: #ff9d33 !important;
		+	}
		+
		+	.text-human-practices > *,
		+	.text-human-practices {
		+	color: #0aa38c !important;
	}		}
	div#gif-title h1 {		div#gif-title h1 {
−	color: #ff1558;	+	-webkit-text-stroke-width: 0;
−	-webkit-text-stroke-width: 0;	+	font-size: 3em;
−	font-size: 3em;	+	mix-blend-mode: multiply;
−	mix-blend-mode: multiply;	+
	}		}
	#parallax {		#parallax {
−	position: fixed;	+	position: fixed;
−	top: 0;	+	top: 0;
−	width: 100vw !important;	+	width: 100vw !important;
−	height: 100vh !important;	+	height: 100vh !important;
−	background: url("https://static.igem.org/mediawiki/2018/2/22/T--TecCEM--bgFire.jpg")	+	background: url("https://static.igem.org/mediawiki/2018/2/22/T--TecCEM--bgFire.jpg")
−	no-repeat center center;	+	no-repeat center center;
−	opacity: 0.08;	+	opacity: 0.08;
−	background-size: cover;	+	background-size: cover;
−	z-index: -1;	+	z-index: -1;
	}		}
	#main-container {		#main-container {
−	min-height: 100vh !important;	+	min-height: 100vh !important;
−	position: relative;	+	position: relative;
	}		}
	#main-container p,		#main-container p,
	#main-container strong {		#main-container strong {
−	color: white !important;	+	color: white !important;
	}		}
	#main-container #abstract {		#main-container #abstract {
−	position: absolute;	+	position: absolute;
−	left: 0;	+	left: 0;
−	width: 100%;	+	width: 100%;
−	right: 0;	+	right: 0;
−	margin: 0 auto;	+	margin: 0 auto;
−	bottom: 15%;	+	bottom: 15%;
	}		}
	.first-container {		.first-container {
−	margin-top: 1rem;	+	margin-top: 1rem;
	}		}
	div#gif-title {		div#gif-title {
−	position: relative;	+	position: relative;
−	height: 210px;	+	height: 210px;
−	max-width: 100% !important;	+	max-width: 100% !important;
−	overflow: hidden;	+	overflow: hidden;
	}		}
	div#gif-title * {		div#gif-title * {
−	position: absolute;	+	position: absolute;
−	top: 50%;	+	top: 50%;
−	left: 50%;	+	left: 50%;
−	transform: translate(-50%, -50%);	+	-webkit-transform: translate(-50%, -50%);
		+	-ms-transform: translate(-50%, -50%);
		+	transform: translate(-50%, -50%);
	}		}
	div#gif-title img {		div#gif-title img {
−	min-width: 100%;	+	min-width: 100%;
	}		}
	#content h1 {		#content h1 {
−	color: rgba(255, 255, 255, 0);	+	color: rgba(255, 255, 255, 0);
−	-webkit-text-stroke-width: 1.5px;	+	-webkit-text-stroke-width: 1.5px;
−	-webkit-text-stroke-color: black;	+	-webkit-text-stroke-color: black;
	}		}
	#content strong {		#content strong {
−	color: black;	+	color: black;
	}		}
Line 265:		Line 328:
	#top_title,		#top_title,
	.patrollink {		.patrollink {
−	display: none;	+	display: none;
	}		}
	#content {		#content {
−	margin-left: 0px;	+	margin-left: 0px;
−	margin-top: -20px;	+	margin-top: -20px;
−	padding: 0px;	+	padding: 0px;
−	width: 100%;	+	width: 100%;
	}		}
	body {		body {
−	background-color: white;	+	background-color: white;
	}		}
	.svgClass {		.svgClass {
−	display: block;	+	display: block;
	}		}
	.bottom {		.bottom {
−	mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")	+	mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
−	no-repeat;	+	no-repeat;
−	-webkit-mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")	+	-webkit-mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
−	no-repeat;	+	no-repeat;
−	background-size: contain;	+	background-size: contain;
−	display: inline-block;	+	display: inline-block;
−	height: 40px;	+	height: 40px;
−	width: 40px;	+	width: 40px;
−	margin: auto;	+	margin: auto;
	}		}
	.open {		.open {
−	mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")	+	mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
−	no-repeat;	+	no-repeat;
−	-webkit-mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")	+	-webkit-mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
−	no-repeat;	+	no-repeat;
−	background-size: contain;	+	background-size: contain;
−	display: inline-block;	+	display: inline-block;
−	height: 20px;	+	height: 20px;
−	width: 20px;	+	width: 20px;
−	margin: auto;	+	margin: auto;
	}		}
	.closed {		.closed {
−	mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")	+	mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
−	no-repeat;	+	no-repeat;
−	-webkit-mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")	+	-webkit-mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
−	no-repeat;	+	no-repeat;
−	background-size: contain;	+	background-size: contain;
−	display: inline-block;	+	display: inline-block;
−	height: 20px;	+	height: 20px;
−	width: 20px;	+	width: 20px;
−	margin: auto;	+	margin: auto;
	}		}
	.dropdown-menu.show {		.dropdown-menu.show {
−	background-color: rgba(250, 250, 250, 0.9);	+	background-color: rgba(250, 250, 250, 0.9);
−	border: 1px solid rgba(0, 0, 0, 0.1);	+	border: 1px solid rgba(0, 0, 0, 0.1);
−	border-radius: 5px;	+	border-radius: 5px;
−	left: 20%;	+	left: 20%;
	}		}
	a.dropdown-item,		a.dropdown-item,
	a.nav-link {		a.nav-link {
−	letter-spacing: 2px;	+	letter-spacing: 2px;
	}		}
	a.dropdown-item:active {		a.dropdown-item:active {
−	background-color: #f5e1e1;	+	background-color: #f5e1e1;
	}		}
	div#top_menu_14 {		div#top_menu_14 {
−	box-sizing: content-box;	+	-webkit-box-sizing: content-box;
		+	box-sizing: content-box;
	}		}
	#navbarContainer {		#navbarContainer {
−	background-color: rgba(250, 250, 250, 0.9);	+	background-color: rgba(250, 250, 250, 0.9);
−	border-bottom: 1px solid rgba(0, 0, 0, 0.1);	+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
−	border-radius: 0px 0px 5px 5px;	+	border-radius: 0px 0px 5px 5px;
	}		}
	#navbarContainer a {		#navbarContainer a {
−	font-family: "TodaySHOP", serif;	+	font-family: "TodaySHOP", serif;
	}		}
−	#navbarContainer a:visited,	+	#navbarContainer a:hover,
−	#navbarContainer a:hover {	+	#navbarContainer ul .dropdown-menu a:visited {
−	color: #333333 !important;	+	color: #333333 !important;
	}		}
−	.navbar {	+	.navbar#navbarContainer {
−	top: 18px;	+	top: 18px;
	}		}
	@media only screen and (max-width: 812px) {		@media only screen and (max-width: 812px) {
−	.navbar {	+	.navbar {
−	top: 20px;	+	top: 20px;
−	}	+	}
−	#navbarTecCEM .w-75.nav-fill {	+	#navbarTecCEM .w-75.nav-fill {
−	width: 100% !important;	+	width: 100% !important;
−	}	+	}
−	#navbarContainer {	+	#navbarContainer {
−	border-bottom: 1px solid rgba(0, 0, 0, 0.1);	+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
−	margin: 2px 2px 2px 2px;	+	margin: 2px 2px 2px 2px;
−	border-radius: 5px;	+	border-radius: 5px;
−	}	+	}
−	}	+
−	#bodyContent div.content div::before {	+
−	display: block;	+
−	content: " ";	+
−	height: 85px;	+
−	margin-top: -74px;	+
−	visibility: hidden;	+
	}		}
−	div.container-fluid {
−	padding-right: 2rem;
−	}
	#HQ_page .sidebar-index * {		#HQ_page .sidebar-index * {
−	font-family: "TodaySHOP", "HelveticaNeue-Light", "Helvetica Neue Light",	+	font-family: "TodaySHOP", "HelveticaNeue-Light", "Helvetica Neue Light",
−	"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	+	"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}		}
	#HQ_page .sidebar-index .sidebar-header {		#HQ_page .sidebar-index .sidebar-header {
−	text-align: center;	+	text-align: center;
	}		}
	#HQ_page .sidebar-index > a {		#HQ_page .sidebar-index > a {
−	font-size: 1.3em;	+	font-size: 1.3rem;
−	font-weight: 600;	+	font-weight: 600;
−	letter-spacing: 4px;	+	letter-spacing: 2px;
		+	cursor: pointer;
	}		}
	#HQ_page .sidebar-index ul li {		#HQ_page .sidebar-index ul li {
−	display: inline-block;	+	display: table;
		+	margin-bottom: 5px;
		+	cursor: pointer;
	}		}
	#HQ_page .sidebar-index ul li a {		#HQ_page .sidebar-index ul li a {
−	font-size: 1.1em;	+	font-size: 1.1rem;
		+	cursor: pointer;
	}		}
	#HQ_page .sidebar-index ul li ul li a {		#HQ_page .sidebar-index ul li ul li a {
−	font-size: 1em;	+	font-size: 1rem;
		+	cursor: pointer;
	}		}
	#HQ_page .sidebar-index ul li ul li ul li a {		#HQ_page .sidebar-index ul li ul li ul li a {
−	font-size: 0.9em;	+	font-size: 0.9rem;
		+	cursor: pointer;
	}		}
	.wrapper {		.wrapper {
−	display: flex;	+	display: -webkit-box;
−	align-items: stretch;	+	display: -ms-flexbox;
−	width: 100%;	+	display: flex;
		+	-webkit-box-align: stretch;
		+	-ms-flex-align: stretch;
		+	align-items: stretch;
		+	width: 100%;
	}		}
	.sidebar-index {		.sidebar-index {
−	width: 20%;	+	width: 20%;
−	background-color: #fafafa;	+	height: calc(100vh - 100px);
−	height: 100vh;	+	position: -webkit-sticky;
−	position: sticky;	+	position: sticky;
−	align-self: flex-start;	+	-ms-flex-item-align: start;
−	top: 70px;	+	align-self: flex-start;
−	z-index: 900;	+	top: 100px;
−	margin: 0;	+	z-index: 900;
−	padding: 1rem;	+	margin: 0;
		+	padding: 1rem;
	}		}
	.sidebar-index a:after {		.sidebar-index a:after {
−	content: "";	+	content: "";
−	width: 0;	+	width: 0;
−	height: 1px;	+	height: 1px;
−	display: block;	+	display: block;
−	background-color: #333;	+	background-color: #333;
−	-webkit-transition: width 0.3s ease-in-out 0s;	+	-webkit-transition: width 0.3s ease-in-out 0s;
−	transition: width 0.3s ease-in-out 0s;	+	-o-transition: width 0.3s ease-in-out 0s;
−	padding: 0;	+	transition: width 0.3s ease-in-out 0s;
−	margin: 0;	+	padding: 0;
		+	margin: 0;
	}		}
	.sidebar-index a:hover:after {		.sidebar-index a:hover:after {
−	width: 100%;	+	width: 100%;
	}		}
	.wrapper .content {		.wrapper .content {
−	width: 75%;	+	width: 80%;
		+	padding: 2% 5%;
		+	}
		+
		+	@media only screen and (max-width: 812px) {
		+	.wrapper .content {
		+	width: 100%;
		+	}
		+	.wrapper .sidebar-index {
		+	display: none;
		+	}
	}		}
	.sidebar-index .dropdown {		.sidebar-index .dropdown {
−	position: absolute;	+	position: absolute;
−	left: 0px;	+	left: 0px;
	}		}
	.sidebar-index a {		.sidebar-index a {
−	color: inherit;	+	color: inherit;
	}		}
	.sidebar-index a:hover {		.sidebar-index a:hover {
−	text-decoration: none;	+	text-decoration: none;
−	color: black !important;	+	color: black !important;
	}		}
	.sidebar-index a:hover p {		.sidebar-index a:hover p {
−	color: black !important;	+	color: black !important;
	}		}
	.sidebar-index a:visited,		.sidebar-index a:visited,
	.sidebar-index a:focus {		.sidebar-index a:focus {
−	color: inherit;	+	color: inherit;
−	text-decoration: none;	+	text-decoration: none;
	}		}
	.sidebar-index span.open,		.sidebar-index span.open,
	.sidebar-index span.closed {		.sidebar-index span.closed {
−	background-color: black;	+	background-color: black;
−	vertical-align: middle;	+	vertical-align: middle;
		+	}
		+	.navbar-expand-lg .navbar-nav .dropdown-menu {
		+	width: 100%;
		+	top: 56px;
		+	left: 0px;
	}		}

---

Latest revision as of 20:10, 17 October 2018

@font-face {

   font-family: "TodaySHOP";
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot");
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/a/aa/T--TecCEM--TodaySHOP-Regular.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot");
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/2/23/T--TecCEM--CaeciliaLTStd-Roman.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot");
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/0/0f/T--TecCEM--CaeciliaLTStd-Italic.woff")
           format("woff");
   font-weight: normal;
   font-style: italic;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot");
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/6/6f/T--TecCEM--CaeciliaLTStd-Bold.woff")
           format("woff");
   font-weight: bold;
   font-style: normal;

}

1. HQ_page {

   position: absolute;
   top: 4px;
   width: 100%;

}

1. HQ_page,
2. HQ_page p,
3. HQ_page strong,
4. HQ_page a,
5. HQ_page li {

   font-family: "Caecilia LT Std", sans-serif;

} body {

   font-size: 100%;

}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {

   font-size-adjust: 0.5;

}

1. HQ_page {

   height: 100%;

}

1. HQ_page p {

   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 1px;
   color: #333333 !important;

}

1. HQ_page .lead {

   font-size: 1.25rem;
   font-weight: 300;
   color: #555555;

} @media (min-width: 43.75em) {

   #HQ_page {
       font-size: 1rem;
       line-height: 1.375;
   }

}

h1 {

   font-size: 2rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) {

   h1 {
       font-size: 2.5rem;
       line-height: 1.125;
   }

}

@media (min-width: 56.25em) {

   h1 {
       font-size: 3rem;
       line-height: 1.05;
   }

}

h2 {

   font-size: 1.625rem;
   line-height: 1.15384615;

}

@media (min-width: 43.75em) {

   h2 {
       font-size: 2rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) {

   h2 {
       font-size: 2.25rem;
       line-height: 1.25;
   }

}

h3 {

   font-size: 1.375rem;
   line-height: 1.13636364;

}

@media (min-width: 43.75em) {

   h3 {
       font-size: 1.5rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) {

   h3 {
       font-size: 1.75rem;
       line-height: 1.25;
   }

}

h4 {

   font-size: 1.125rem;
   line-height: 1.11111111;

}

@media (min-width: 43.75em) {

   h4 {
       font-size: 1.25rem;
       line-height: 1.22222222;
   }

} @media (min-width: 56.25em) {

   h4 {
       font-size: 1.375rem;
       line-height: 1.25;
   }

}

h5 {

   font-size: 1rem;
   line-height: 1.11111111;

}

@media (min-width: 43.75em) {

   h5 {
       font-size: 1.125rem;
       line-height: 1.22222222;
   }

} @media (min-width: 56.25em) {

   h5 {
       font-size: 1.25rem;
       line-height: 1.25;
   }

}

blockquote {

   font-size: 1.25rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) {

   blockquote {
       font-size: 1.5rem;
       line-height: 1.45833333;
   }

}

1. HQ_page h1,
2. HQ_page h2,
3. HQ_page h3,
4. HQ_page h4,
5. HQ_page h5 {

   font-family: "TodaySHOP", sans-serif;
   letter-spacing: 3px;
   font-weight: normal;
   padding: 1px;

}

1. mw-content-text {

   min-height: 100vh;

}

1. content {

   width: 100% !important;
   height: 100% !important;
   margin-left: 0 !important;
   padding-left: 0 !important;

} .text-project > *, .text-project {

   color: #ff1558 !important;

} .text-team > *, .text-team {

   color: #17cc46 !important;

}

.text-safety > *, .text-safety {

   color: #ef6fca !important;

}

.text-notebook > *, .text-notebook {

   color: #0000ff !important;

}

.text-awards > *, .text-awards {

   color: #ffdb27 !important;

}

.text-parts > *, .text-parts {

   color: #ff9d33 !important;

}

.text-human-practices > *, .text-human-practices {

   color: #0aa38c !important;

} div#gif-title h1 {

   -webkit-text-stroke-width: 0;
   font-size: 3em;
   mix-blend-mode: multiply;

}

1. parallax {

   position: fixed;
   top: 0;
   width: 100vw !important;
   height: 100vh !important;
   background: url("")
       no-repeat center center;
   opacity: 0.08;
   background-size: cover;
   z-index: -1;

}

1. main-container {

   min-height: 100vh !important;
   position: relative;

}

1. main-container p,
2. main-container strong {

   color: white !important;

}

1. main-container #abstract {

   position: absolute;
   left: 0;
   width: 100%;
   right: 0;
   margin: 0 auto;
   bottom: 15%;

} .first-container {

   margin-top: 1rem;

} div#gif-title {

   position: relative;
   height: 210px;
   max-width: 100% !important;
   overflow: hidden;

}

div#gif-title * {

   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);

} div#gif-title img {

   min-width: 100%;

}

1. content h1 {

   color: rgba(255, 255, 255, 0);
   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: black;

}

1. content strong {

   color: black;

}

1. home_logo,
2. sideMenu,
3. top_title,

.patrollink {

   display: none;

}

1. content {

   margin-left: 0px;
   margin-top: -20px;
   padding: 0px;
   width: 100%;

}

body {

   background-color: white;

}

.svgClass {

   display: block;

} .bottom {

   mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 40px;
   width: 40px;
   margin: auto;

} .open {

   mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .closed {

   mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .dropdown-menu.show {

   background-color: rgba(250, 250, 250, 0.9);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   left: 20%;

}

a.dropdown-item, a.nav-link {

   letter-spacing: 2px;

}

a.dropdown-item:active {

   background-color: #f5e1e1;

}

div#top_menu_14 {

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

}

1. navbarContainer {

   background-color: rgba(250, 250, 250, 0.9);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 0px 0px 5px 5px;

}

1. navbarContainer a {

   font-family: "TodaySHOP", serif;

}

1. navbarContainer a:hover,
2. navbarContainer ul .dropdown-menu a:visited {

   color: #333333 !important;

} .navbar#navbarContainer {

   top: 18px;

}

@media only screen and (max-width: 812px) {

   .navbar {
       top: 20px;
   }
   #navbarTecCEM .w-75.nav-fill {
       width: 100% !important;
   }
   #navbarContainer {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       margin: 2px 2px 2px 2px;
       border-radius: 5px;
   }

}

1. HQ_page .sidebar-index * {

   font-family: "TodaySHOP", "HelveticaNeue-Light", "Helvetica Neue Light",
       "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

1. HQ_page .sidebar-index .sidebar-header {

   text-align: center;

}

1. HQ_page .sidebar-index > a {

   font-size: 1.3rem;
   font-weight: 600;
   letter-spacing: 2px;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li {

   display: table;
   margin-bottom: 5px;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li a {

   font-size: 1.1rem;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li ul li a {

   font-size: 1rem;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li ul li ul li a {

   font-size: 0.9rem;
   cursor: pointer;

} .wrapper {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   width: 100%;

}

.sidebar-index {

   width: 20%;
   height: calc(100vh - 100px);
   position: -webkit-sticky;
   position: sticky;
   -ms-flex-item-align: start;
   align-self: flex-start;
   top: 100px;
   z-index: 900;
   margin: 0;
   padding: 1rem;

}

.sidebar-index a:after {

   content: "";
   width: 0;
   height: 1px;
   display: block;
   background-color: #333;
   -webkit-transition: width 0.3s ease-in-out 0s;
   -o-transition: width 0.3s ease-in-out 0s;
   transition: width 0.3s ease-in-out 0s;
   padding: 0;
   margin: 0;

}

.sidebar-index a:hover:after {

   width: 100%;

}

.wrapper .content {

   width: 80%;
   padding: 2% 5%;

}

@media only screen and (max-width: 812px) {

   .wrapper .content {
       width: 100%;
   }
   .wrapper .sidebar-index {
       display: none;
   }

}

.sidebar-index .dropdown {

   position: absolute;
   left: 0px;

}

.sidebar-index a {

   color: inherit;

}

.sidebar-index a:hover {

   text-decoration: none;
   color: black !important;

}

.sidebar-index a:hover p {

   color: black !important;

}

.sidebar-index a:visited, .sidebar-index a:focus {

   color: inherit;
   text-decoration: none;

} .sidebar-index span.open, .sidebar-index span.closed {

   background-color: black;
   vertical-align: middle;

} .navbar-expand-lg .navbar-nav .dropdown-menu {

   width: 100%;
   top: 56px;
   left: 0px;

}