Difference between revisions of "Template:Vilnius-Lithuania/CSS/ContentPage"

Revision as of 11:17, 27 October 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Revision as of 17:12, 27 October 2020 (view source) Kvainiute (Talk | contribs) Newer edit →
Line 1:		Line 1:
−		+	@charset "UTF-8";
−	body,	+	body, html {
−	html {	+	margin: 0;
−	margin: 0;	+	padding: 0;
−	padding: 0;	+	color: #222222;
−	color: #222222;	+	font-family: "lato-regular";
−	font-family: "lato-regular";	+
	}		}
−	.igem_column_wrapper>p {	+	.igem_column_wrapper > p {
−	margin: 0;	+	margin: 0;
	}		}
Line 16:		Line 15:
	#HQ_page main .content .content-paragraph,		#HQ_page main .content .content-paragraph,
	#HQ_page main .content .reference {		#HQ_page main .content .reference {
−	font-family: "lato-light";	+	font-family: "lato-light";
−	margin: 0;	+	margin: 0;
−	font-size: 1.2rem;	+	font-size: 1.2rem;
−	line-height: 1.5;	+	line-height: 1.5;
−	margin-top: 20px;	+	margin-top: 20px;
−	margin-bottom: 40px;	+	margin-bottom: 40px;
−	text-align: left;	+	text-align: left;
	}		}
−
	@media (max-width: 480px) {		@media (max-width: 480px) {
−	main .content .content-paragraph,	+	main .content .content-paragraph,
−	main .content .reference,	+	main .content .reference,
−	#HQ_page main .content .content-paragraph,	+	#HQ_page main .content .content-paragraph,
−	#HQ_page main .content .reference {	+	#HQ_page main .content .reference {
−	font-size: 1rem;	+	font-size: 1rem;
−	}	+	}
		+	}
		+	main .content .quote,
		+	#HQ_page main .content .quote {
		+	padding: 20px;
		+	box-shadow: 0 0 10px lightgray;
		+	margin: 40px;
		+	}
		+	main .content .quote p,
		+	main .content .quote p.content-paragraph,
		+	#HQ_page main .content .quote p,
		+	#HQ_page main .content .quote p.content-paragraph {
		+	text-align: center;
		+	font-size: 0.8em;
		+	}
		+	main .content .quote .beforeWave,
		+	#HQ_page main .content .quote .beforeWave {
		+	align-self: center;
	}		}
−
	main .content .reference,		main .content .reference,
	#HQ_page main .content .reference {		#HQ_page main .content .reference {
−	word-break: break-word;	+	word-break: break-word;
	}		}
−
	main .content .h3,		main .content .h3,
	#HQ_page main .content .h3 {		#HQ_page main .content .h3 {
−	font-size: 2rem;	+	font-size: 2rem;
	}		}
−
	main .content .beforeWave::before,		main .content .beforeWave::before,
	#HQ_page main .content .beforeWave::before {		#HQ_page main .content .beforeWave::before {
−	background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);	+	background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
−	background-size: contain;	+	background-size: contain;
−	background-repeat: no-repeat;	+	background-repeat: no-repeat;
−	content: "";	+	content: "";
−	margin-bottom: 16px;	+	margin-bottom: 16px;
−	display: block;	+	display: block;
−	width: 100px;	+	width: 100px;
−	height: 18px;	+	height: 18px;
	}		}
−
	main .content .afterWave::after,		main .content .afterWave::after,
	#HQ_page main .content .afterWave::after {		#HQ_page main .content .afterWave::after {
−	background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);	+	background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
−	background-size: contain;	+	background-size: contain;
−	background-repeat: no-repeat;	+	background-repeat: no-repeat;
−	content: "";	+	content: "";
−	margin-top: 16px;	+	margin-top: 16px;
−	display: block;	+	display: block;
−	width: 100px;	+	width: 100px;
−	height: 18px;	+	height: 18px;
	}		}
	main {		main {
−	font-size: initial;	+	font-size: initial;
	}		}
Line 78:		Line 89:
	div.h5,		div.h5,
	div.h6 {		div.h6 {
−	font-family: "montserrat-bold";	+	font-family: "montserrat-bold";
−	font-weight: 800;	+	font-weight: 800;
−	margin-bottom: 0.4em;	+	margin-bottom: 0.4em;
−	margin-top: 1rem;	+	margin-top: 1rem;
	}		}
−
	div.h1.larger,		div.h1.larger,
	div.h2.larger,		div.h2.larger,
Line 90:		Line 100:
	div.h5.larger,		div.h5.larger,
	div.h6.larger {		div.h6.larger {
−	font-size: 2.5rem;	+	font-size: 2.5rem;
	}		}
	.introContainer {		.introContainer {
−	width: 100%;	+	width: 100%;
−	height: calc(100vh - 18px);	+	height: calc(100vh - 18px);
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
−	background-color: #121212;	+	background-color: #121212;
−	background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png);	+	background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png);
−	background-size: cover;	+	background-size: cover;
	}		}
−		+	.introContainer > span {
−	.introContainer>span {	+	width: 80vw;
−	width: 80vw;	+	height: 80vw;
−	height: 80vw;	+	border-radius: 1000px;
−	border-radius: 1000px;	+	position: relative;
−	position: relative;	+	background-size: cover;
−	background-size: cover;	+	background-position: 0px 0px;
−	background-position: 0px 0px;	+	background-attachment: fixed;
−	background-attachment: fixed;	+	overflow: hidden;
−	overflow: hidden;	+
	}		}
−
	@media (min-aspect-ratio: 1/1) {		@media (min-aspect-ratio: 1/1) {
−	.introContainer>span {	+	.introContainer > span {
−	width: 80vh;	+	width: 80vh;
−	height: 80vh;	+	height: 80vh;
−	}	+	}
	}		}
−		+	.introContainer > span #image-overlay {
−	.introContainer>span #image-overlay {	+	width: 100%;
−	width: 100%;	+	height: 100%;
−	height: 100%;	+	position: absolute;
−	position: absolute;	+	background-color: #6281EF;
−	background-color: #6281EF;	+	mix-blend-mode: multiply;
−	mix-blend-mode: multiply;	+
	}		}
−
	.introContainer .heading {		.introContainer .heading {
−	z-index: 3;	+	z-index: 3;
−	position: absolute;	+	position: absolute;
−	font-size: 5.7vh;	+	font-size: 5.7vh;
−	font-size: calc(2.5vh + 2vw);	+	font-size: calc(2.5vh + 2vw);
−	color: #FAFAFC;	+	color: #FAFAFC;
−	text-transform: uppercase;	+	text-transform: uppercase;
−	text-align: center;	+	text-align: center;
−	font-family: "montserrat-black";	+	font-family: "montserrat-black";
	}		}
−
	.introContainer .heading.other {		.introContainer .heading.other {
−	padding-top: 0.3em;	+	padding-top: 0.3em;
−	pointer-events: none;	+	pointer-events: none;
−	color: transparent;	+	color: transparent;
−	-webkit-text-stroke-width: 1px;	+	-webkit-text-stroke-width: 1px;
−	-webkit-text-stroke-color: #FAFAFC;	+	-webkit-text-stroke-color: #FAFAFC;
	}		}
−
	@media (min-aspect-ratio: 1/1) {		@media (min-aspect-ratio: 1/1) {
−	.introContainer .heading {	+	.introContainer .heading {
−	font-size: 6.5vw;	+	font-size: 6.5vw;
−	}	+	}
	}		}
	.milkWaveContentPage {		.milkWaveContentPage {
−	z-index: 2;	+	z-index: 2;
−	width: 100%;	+	width: 100%;
−	top: 0;	+	top: 0;
−	height: calc(100vh - 18px);	+	height: calc(100vh - 18px);
−	position: absolute;	+	position: absolute;
−	content: "";	+	content: "";
−	pointer-events: none;	+	pointer-events: none;
−	background-position: bottom;	+	background-position: bottom;
−	background-origin: border-box;	+	background-origin: border-box;
−	background-size: 100%;	+	background-size: 100%;
−	background-repeat: no-repeat;	+	background-repeat: no-repeat;
−	background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);	+	background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
	}		}
	main {		main {
−	margin-top: -5px;	+	margin-top: -5px;
−	width: 100%;	+	width: 100%;
−	background-color: #FAFAFC;	+	background-color: #FAFAFC;
−	z-index: 10;	+	z-index: 10;
−	position: relative;	+	position: relative;
−	padding-bottom: 50px;	+	padding-bottom: 50px;
−	display: flex;	+	display: flex;
−	flex-direction: row;	+	flex-direction: row;
−	align-items: flex-start;	+	align-items: flex-start;
−	justify-content: space-evenly;	+	justify-content: space-evenly;
	}		}
−
	main::after {		main::after {
−	content: "";	+	content: "";
−	clear: both;	+	clear: both;
−	display: table;	+	display: table;
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	main {	+	main {
−	justify-content: center;	+	justify-content: center;
−	}	+	}
	}		}
	.indexbutton {		.indexbutton {
−	display: none;	+	display: none;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	text-transform: capitalize;	+	text-transform: capitalize;
−	font-size: 1.4rem;	+	font-size: 1.4rem;
−	width: 100%;	+	width: 100%;
−	text-align: center;	+	text-align: center;
−	font-weight: bold;	+	font-weight: bold;
−	padding: 16px 0;	+	padding: 16px 0;
−	height: 62px;	+	height: 62px;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	cursor: pointer;	+	cursor: pointer;
−	background-color: #6281EF;	+	background-color: #6281EF;
−	z-index: 21;	+	z-index: 21;
−	transition: 0.5s;	+	transition: 0.5s;
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.indexbutton {	+	.indexbutton {
−	display: block;	+	display: block;
−	}	+	}
	}		}
	.sideBlock {		.sideBlock {
−	text-transform: uppercase;	+	text-transform: uppercase;
−	float: left;	+	float: left;
−	margin-left: 10vw;	+	margin-left: 10vw;
−	position: -webkit-sticky;	+	position: -webkit-sticky;
−	position: sticky;	+	position: sticky;
−	top: 50%;	+	top: 50%;
−	margin: 200px 32px 0 4vw;	+	margin: 200px 32px 0 4vw;
−	transform: translateY(-50%);	+	transform: translateY(-50%);
−	min-width: 220px;	+	min-width: 220px;
−	max-width: 350px;	+	max-width: 350px;
	}		}
−
	@media (max-width: 1024px) {		@media (max-width: 1024px) {
−	.sideBlock {	+	.sideBlock {
−	margin: 200px 32px 0 4vw;	+	margin: 200px 32px 0 4vw;
−	}	+	}
	}		}
−
	.sideBlock b {		.sideBlock b {
−	font-family: "montserrat-bold";	+	font-family: "montserrat-bold";
−	font-size: 1.4rem;	+	font-size: 1.4rem;
−	font-weight: bold;	+	font-weight: bold;
−	margin-left: 0.25em;	+	margin-left: 0.25em;
−	display: block;	+	display: block;
	}		}
−
	.sideBlock ul {		.sideBlock ul {
−	margin: 1em 0;	+	margin: 1em 0;
−	padding: 0;	+	padding: 0;
	}		}
−
	.sideBlock a {		.sideBlock a {
−	color: #121212;	+	color: #121212;
−	text-decoration: none;	+	text-decoration: none;
−	font-family: "lato-light", sans-serif;	+	font-family: "lato-light", sans-serif;
	}		}
−
	.sideBlock li {		.sideBlock li {
−	margin: 24px;	+	margin: 24px;
−	list-style: none;	+	list-style: none;
−	color: #121212;	+	color: #121212;
−	font-size: 1.1rem;	+	font-size: 1.1rem;
−	cursor: pointer;	+	cursor: pointer;
−	display: flex;	+	display: flex;
−	align-items: center;	+	align-items: center;
−	margin-left: 0.25em;	+	margin-left: 0.25em;
	}		}
−
	.sideBlock li:last-child {		.sideBlock li:last-child {
−	margin-bottom: 0;	+	margin-bottom: 0;
	}		}
−
	.sideBlock li div {		.sideBlock li div {
−	max-width: 15px;	+	max-width: 15px;
−	max-height: 15px;	+	max-height: 15px;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	border: 1px solid;	+	border: 1px solid;
−	color: #2E64EC;	+	color: #2E64EC;
−	border-radius: 20px;	+	border-radius: 20px;
−	transition: 0.5s;	+	transition: 0.5s;
−	margin-right: 8px;	+	margin-right: 8px;
−	height: 10vw;	+	height: 10vw;
−	width: 10vh;	+	width: 10vh;
	}		}
−
	.sideBlock li.active div {		.sideBlock li.active div {
−	background-color: #2E64EC;	+	background-color: #2E64EC;
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.sideBlock {	+	.sideBlock {
−	position: fixed;	+	position: fixed;
−	bottom: 0;	+	bottom: 0;
−	padding: 0 64px;	+	padding: 0 64px;
−	background-color: #6281EF;	+	background-color: #6281EF;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	float: unset;	+	float: unset;
−	margin: 0;	+	margin: 0;
−	z-index: 20;	+	z-index: 20;
−	width: 100%;	+	width: 100%;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	min-width: unset;	+	min-width: unset;
−	max-width: unset;	+	max-width: unset;
−	text-align: center;	+	text-align: center;
−	transition: transform 0.5s;	+	transition: transform 0.5s;
−	top: unset;	+	top: unset;
−	transform: translateY(calc(100% - 62px));	+	transform: translateY(calc(100% - 62px));
−	display: flex;	+	display: flex;
−	flex-direction: column;	+	flex-direction: column;
−	align-items: center;	+	align-items: center;
−	}	+	}
−	.sideBlock b {	+	.sideBlock b {
−	display: block;	+	display: block;
−	margin: 0;	+	margin: 0;
−	}	+	}
−	.sideBlock ul {	+	.sideBlock ul {
−	display: inline-block;	+	display: inline-block;
−	text-align: start;	+	text-align: start;
−	margin-top: 0;	+	margin-top: 0;
−	margin-bottom: 30px;	+	margin-bottom: 30px;
−	}	+	}
−	.sideBlock li {	+	.sideBlock li {
−	font-weight: bold;	+	font-weight: bold;
−	}	+	}
−	.sideBlock li a {	+	.sideBlock li a {
−	color: #FAFAFC;	+	color: #FAFAFC;
−	}	+	}
−	.sideBlock li div {	+	.sideBlock li div {
−	color: #FAFAFC;	+	color: #FAFAFC;
−	}	+	}
−	.sideBlock li.active div {	+	.sideBlock li.active div {
−	background-color: #FAFAFC;	+	background-color: #FAFAFC;
−	}	+	}
−	.sideBlock.notshow {	+	.sideBlock.notshow {
−	transform: translateY(calc(100% - 0px));	+	transform: translateY(calc(100% - 0px));
−	}	+	}
−	.sideBlock.open {	+	.sideBlock.open {
−	transform: translateY(0);	+	transform: translateY(0);
−	}	+	}
	}		}
	.contentBlock {		.contentBlock {
−	width: 64vw;	+	width: 64vw;
−	max-width: 700px;	+	max-width: 700px;
−	float: right;	+	float: right;
−	display: flex;	+	display: flex;
−	flex-direction: column;	+	flex-direction: column;
	}		}
−
	@media (max-width: 1024px) {		@media (max-width: 1024px) {
−	.contentBlock {	+	.contentBlock {
−	margin-right: 5vw;	+	margin-right: 5vw;
−	}	+	}
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.contentBlock {	+	.contentBlock {
−	margin-right: unset;	+	margin-right: unset;
−	width: 90%;	+	width: 90%;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	max-width: 650px;	+	max-width: 650px;
−	}	+	}
	}		}
	.content {		.content {
−	padding: 64px;	+	padding: 64px;
−	border-radius: 5px;	+	border-radius: 5px;
−	box-shadow: 0 0 10px lightgray;	+	box-shadow: 0 0 10px lightgray;
−	color: #121212;	+	color: #121212;
−	margin-top: 40px;	+	margin-top: 40px;
−	overflow: hidden;	+	overflow: hidden;
−	display: flex;	+	display: flex;
−	flex-direction: column;	+	flex-direction: column;
−	font-family: "lato-light";	+	font-family: "lato-light";
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.content {	+	.content {
−	margin: 0 auto;	+	margin: 0 auto;
−	box-shadow: unset;	+	box-shadow: unset;
−	padding: 35px;	+	padding: 35px;
−	width: 100%;	+	width: 100%;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	}	+	}
	}		}
−
	@media (max-width: 400px) {		@media (max-width: 400px) {
−	.content {	+	.content {
−	padding: 20px;	+	padding: 20px;
−	}	+	}
	}		}
−
	.content p:first-child {		.content p:first-child {
−	margin-top: 0;	+	margin-top: 0;
	}		}
−
	.content ul,		.content ul,
	.content ol {		.content ol {
−	font-family: "lato-light", sans-serif;	+	font-family: "lato-light", sans-serif;
	}		}
−
	.content ul {		.content ul {
−	padding-inline-start: 20px;	+	padding-inline-start: 20px;
−	list-style-image: none;	+	list-style-image: none;
−	list-style-type: none;	+	list-style-type: none;
	}		}
−
	.content ul li {		.content ul li {
−	display: flex;	+	display: flex;
	}		}
−
	.content ul li::before {		.content ul li::before {
−	content: "•";	+	content: "•";
−	color: #6281ef;	+	color: #6281ef;
	}		}
−
−	.content ul.splide__pagination li::before {
−	content: unset;
−	}
−
	.content li {		.content li {
−	margin: 10px;	+	margin: 10px;
	}		}
−
	.content li::marker {		.content li::marker {
−	color: #6281ef;	+	color: #6281ef;
−	font-family: "lato-heavy";	+	font-family: "lato-heavy";
−	font-size: 1.3em;	+	font-size: 1.3em;
	}		}
−
	.content h4,		.content h4,
	.content h5 {		.content h5 {
−	font-family: "montserrat-bold", sans-serif;	+	font-family: "montserrat-bold", sans-serif;
−	font-size: 1.2em;	+	font-size: 1.2em;
−	text-transform: uppercase;	+	text-transform: uppercase;
−	margin-block-end: 0.2em;	+	margin-block-end: 0.2em;
−	margin-block-start: 60px;	+	margin-block-start: 60px;
	}		}
−
	.content h5 {		.content h5 {
−	font-size: 1em;	+	font-size: 1em;
	}		}
−
	.content a {		.content a {
−	color: #2e64ec;	+	color: #2e64ec;
−	text-decoration: none;	+	text-decoration: none;
−	text-align: center;	+	text-align: center;
−	cursor: pointer;	+	cursor: pointer;
	}		}
−
	.content a.citation {		.content a.citation {
−	font-size: 0.6em;	+	font-size: 0.6em;
−	vertical-align: super;	+	vertical-align: super;
	}		}
−
	.content a button {		.content a button {
−	display: flex;	+	display: flex;
−	align-items: center;	+	align-items: center;
−	justify-content: center;	+	justify-content: center;
−	font-family: "lato-semibold", sans-serif;	+	font-family: "lato-semibold", sans-serif;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	padding: 32px 56px;	+	padding: 32px 56px;
−	font-size: 1.2rem;	+	font-size: 1.2rem;
−	max-width: 700px;	+	max-width: 7;
−	text-align: center;	+	text-align: center;
−	border-radius: 1000px;	+	border-radius: 1000px;
−	margin: 40px auto;	+	margin: 40px auto;
−	transition: 0.3s ease-out;	+	transition: 0.3s ease-out;
−	background-color: #6281ef;	+	background-color: #6281ef;
−	box-shadow: 0 16px 32px -12px #3658cf;	+	box-shadow: 0 16px 32px -12px #3658cf;
−	border: none;	+	border: none;
−	position: relative;	+	position: relative;
−	top: 0;	+	top: 0;
−	font-variant-position: normal;	+	font-variant-position: normal;
−	cursor: pointer;	+	cursor: pointer;
−	text-transform: uppercase;	+	text-transform: uppercase;
	}		}
−
	.content a button:hover {		.content a button:hover {
−	top: -5px;	+	top: -5px;
−	box-shadow: 0 16px 32px -16px #3658cf;	+	box-shadow: 0 16px 32px -16px #3658cf;
	}		}
−
	.content p b {		.content p b {
−	font-family: "lato-regular", sans-serif;	+	font-family: "lato-regular", sans-serif;
−	color: #000;	+	color: #000;
	}		}
−
	.content p a:not(.citation) {		.content p a:not(.citation) {
−	text-decoration: none;	+	text-decoration: none;
−	font-variant-position: normal;	+	font-variant-position: normal;
−	color: #121212;	+	color: #121212;
−	box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;	+	box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
−	transition: 0.3s ease-out;	+	transition: 0.3s ease-out;
	}		}
−
	.content p a:not(.citation):hover {		.content p a:not(.citation):hover {
−	box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;	+	box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;
	}		}
Line 502:		Line 470:
	_:future,		_:future,
	:root {		:root {
−	transition-duration: unset;	+	transition-duration: unset;
	}		}
	.photos-wrapper.full-width {		.photos-wrapper.full-width {
−	width: 100%;	+	width: 100%;
	}		}
−
	.photos-wrapper.full-width::after {		.photos-wrapper.full-width::after {
−	transform: rotate(180deg) translate(-520px, 50px);	+	transform: rotate(180deg) translate(-520px, 50px);
	}		}
−
	.photos-wrapper .photos {		.photos-wrapper .photos {
−	padding: 20px;	+	padding: 20px;
−	height: fit-content;	+	height: fit-content;
−	width: 100%;	+	width: 100%;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	overflow: hidden;	+	overflow: hidden;
	}		}
−
	.photos-wrapper .photos.phone {		.photos-wrapper .photos.phone {
−	display: flex;	+	display: flex;
−	justify-content: space-around;	+	justify-content: space-around;
	}		}
−
	.photos-wrapper .photos.phone img {		.photos-wrapper .photos.phone img {
−	height: 400px;	+	height: 400px;
−	border-radius: 0;	+	border-radius: 0;
−	box-shadow: none;	+	box-shadow: none;
−	max-width: none;	+	max-width: none;
−	max-height: none;	+	max-height: none;
−	width: auto;	+	width: auto;
	}		}
−
	.photos-wrapper .photos.photo-grid {		.photos-wrapper .photos.photo-grid {
−	display: grid;	+	display: grid;
−	align-items: center;	+	align-items: center;
−	justify-items: center;	+	justify-items: center;
	}		}
−
	.photos-wrapper .photos.photo-grid.three-part {		.photos-wrapper .photos.photo-grid.three-part {
−	grid-template-columns: 1fr 1fr 1fr;	+	grid-template-columns: 1fr 1fr 1fr;
	}		}
−
	.photos-wrapper .photos.photo-grid.two-part {		.photos-wrapper .photos.photo-grid.two-part {
−	grid-template-columns: 1fr 1fr;	+	grid-template-columns: 1fr 1fr;
	}		}
−
	.photos-wrapper .photos.photo-grid.one-part {		.photos-wrapper .photos.photo-grid.one-part {
−	grid-template-columns: 1fr;	+	grid-template-columns: 1fr;
	}		}
−
	.photos-wrapper .photos.photo-grid.round-corners img {		.photos-wrapper .photos.photo-grid.round-corners img {
−	border-radius: 200px;	+	border-radius: 200px;
		+	}
		+	.photos-wrapper .photos.photo-grid.no-shadow img {
		+	box-shadow: none;
	}		}
−
	.photos-wrapper .photos.photo-grid img {		.photos-wrapper .photos.photo-grid img {
−	box-shadow: 5px 5px 7px #00000029;	+	box-shadow: 5px 5px 7px #00000029;
−	width: 90%;	+	width: 90%;
	}		}
−
	.photos-wrapper.half-width {		.photos-wrapper.half-width {
−	width: 50%;	+	width: 50%;
−	align-self: center;	+	align-self: center;
	}		}
−
	.photos-wrapper.half-width .photos {		.photos-wrapper.half-width .photos {
−	height: fit-content;	+	height: fit-content;
	}		}
−
	.photos-wrapper.half-width .photos img {		.photos-wrapper.half-width .photos img {
−	width: 100%;	+	width: 100%;
	}		}
−
	.photos-wrapper.half-width::after {		.photos-wrapper.half-width::after {
−	transform: rotate(180deg) translate(-235px, 50px);	+	transform: rotate(180deg) translate(-235px, 50px);
	}		}
	video {		video {
−	width: 100%;	+	width: 100%;
	}		}
	.content p.photo-desc {		.content p.photo-desc {
−	text-align: left !important;	+	text-align: left !important;
−	font-size: 0.8em !important;	+	font-size: 0.8em !important;
	}		}
−
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.content p.photo-desc {	+	.content p.photo-desc {
−	font-size: 0.6em;	+	font-size: 0.6em;
−	}	+	}
	}		}
	.references {		.references {
−	font-size: 1.9rem;	+	font-size: 1.9rem;
	}		}
−
	.references svg {		.references svg {
−	max-width: 100px;	+	max-width: 100px;
	}		}
−
	.references h3 {		.references h3 {
−	margin-block-start: 0em;	+	margin-block-start: 0em;
−	font-size: 0.8em;	+	font-size: 0.8em;
−	font-family: "montserrat-bold", sans-serif;	+	font-family: "montserrat-bold", sans-serif;
	}		}
−
	.references ol {		.references ol {
−	margin: initial;	+	margin: initial;
−	padding-inline-start: 10px;	+	padding-inline-start: 10px;
	}		}
−
	.references ol li {		.references ol li {
−	font-size: 0.4em;	+	font-size: 0.4em;
−	font-family: "lato-light", sans-serif;	+	font-family: "lato-light", sans-serif;
	}		}
−
	.references ol li::marker {		.references ol li::marker {
−	color: initial;	+	color: initial;
−	font-family: "lato-light", sans-serif;	+	font-family: "lato-light", sans-serif;
−	font-size: 1em;	+	font-size: 1em;
	}		}

---

Revision as of 17:12, 27 October 2020

@charset "UTF-8"; body, html {

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.igem_column_wrapper > p {

 margin: 0;

}

main .content .content-paragraph, main .content .reference,

1. HQ_page main .content .content-paragraph,
2. HQ_page main .content .reference {

 font-family: "lato-light";
 margin: 0;
 font-size: 1.2rem;
 line-height: 1.5;
 margin-top: 20px;
 margin-bottom: 40px;
 text-align: left;

} @media (max-width: 480px) {

 main .content .content-paragraph,

main .content .reference,

1. HQ_page main .content .content-paragraph,
2. HQ_page main .content .reference {

   font-size: 1rem;
 }

} main .content .quote,

1. HQ_page main .content .quote {

 padding: 20px;
 box-shadow: 0 0 10px lightgray;
 margin: 40px;

} main .content .quote p, main .content .quote p.content-paragraph,

1. HQ_page main .content .quote p,
2. HQ_page main .content .quote p.content-paragraph {

 text-align: center;
 font-size: 0.8em;

} main .content .quote .beforeWave,

1. HQ_page main .content .quote .beforeWave {

 align-self: center;

} main .content .reference,

1. HQ_page main .content .reference {

 word-break: break-word;

} main .content .h3,

1. HQ_page main .content .h3 {

 font-size: 2rem;

} main .content .beforeWave::before,

1. HQ_page main .content .beforeWave::before {

 background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 background-size: contain;
 background-repeat: no-repeat;
 content: "";
 margin-bottom: 16px;
 display: block;
 width: 100px;
 height: 18px;

} main .content .afterWave::after,

1. HQ_page main .content .afterWave::after {

 background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 background-size: contain;
 background-repeat: no-repeat;
 content: "";
 margin-top: 16px;
 display: block;
 width: 100px;
 height: 18px;

}

main {

 font-size: initial;

}

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

 font-family: "montserrat-bold";
 font-weight: 800;
 margin-bottom: 0.4em;
 margin-top: 1rem;

} div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger {

 font-size: 2.5rem;

}

.introContainer {

 width: 100%;
 height: calc(100vh - 18px);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #121212;
 background-image: url();
 background-size: cover;

} .introContainer > span {

 width: 80vw;
 height: 80vw;
 border-radius: 1000px;
 position: relative;
 background-size: cover;
 background-position: 0px 0px;
 background-attachment: fixed;
 overflow: hidden;

} @media (min-aspect-ratio: 1/1) {

 .introContainer > span {
   width: 80vh;
   height: 80vh;
 }

} .introContainer > span #image-overlay {

 width: 100%;
 height: 100%;
 position: absolute;
 background-color: #6281EF;
 mix-blend-mode: multiply;

} .introContainer .heading {

 z-index: 3;
 position: absolute;
 font-size: 5.7vh;
 font-size: calc(2.5vh + 2vw);
 color: #FAFAFC;
 text-transform: uppercase;
 text-align: center;
 font-family: "montserrat-black";

} .introContainer .heading.other {

 padding-top: 0.3em;
 pointer-events: none;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;

} @media (min-aspect-ratio: 1/1) {

 .introContainer .heading {
   font-size: 6.5vw;
 }

}

.milkWaveContentPage {

 z-index: 2;
 width: 100%;
 top: 0;
 height: calc(100vh - 18px);
 position: absolute;
 content: "";
 pointer-events: none;
 background-position: bottom;
 background-origin: border-box;
 background-size: 100%;
 background-repeat: no-repeat;
 background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);

}

main {

 margin-top: -5px;
 width: 100%;
 background-color: #FAFAFC;
 z-index: 10;
 position: relative;
 padding-bottom: 50px;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-evenly;

} main::after {

 content: "";
 clear: both;
 display: table;

} @media (max-width: 800px) {

 main {
   justify-content: center;
 }

}

.indexbutton {

 display: none;
 color: #FAFAFC;
 text-transform: capitalize;
 font-size: 1.4rem;
 width: 100%;
 text-align: center;
 font-weight: bold;
 padding: 16px 0;
 height: 62px;
 box-sizing: border-box;
 cursor: pointer;
 background-color: #6281EF;
 z-index: 21;
 transition: 0.5s;

} @media (max-width: 800px) {

 .indexbutton {
   display: block;
 }

}

.sideBlock {

 text-transform: uppercase;
 float: left;
 margin-left: 10vw;
 position: -webkit-sticky;
 position: sticky;
 top: 50%;
 margin: 200px 32px 0 4vw;
 transform: translateY(-50%);
 min-width: 220px;
 max-width: 350px;

} @media (max-width: 1024px) {

 .sideBlock {
   margin: 200px 32px 0 4vw;
 }

} .sideBlock b {

 font-family: "montserrat-bold";
 font-size: 1.4rem;
 font-weight: bold;
 margin-left: 0.25em;
 display: block;

} .sideBlock ul {

 margin: 1em 0;
 padding: 0;

} .sideBlock a {

 color: #121212;
 text-decoration: none;
 font-family: "lato-light", sans-serif;

} .sideBlock li {

 margin: 24px;
 list-style: none;
 color: #121212;
 font-size: 1.1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 margin-left: 0.25em;

} .sideBlock li:last-child {

 margin-bottom: 0;

} .sideBlock li div {

 max-width: 15px;
 max-height: 15px;
 box-sizing: border-box;
 border: 1px solid;
 color: #2E64EC;
 border-radius: 20px;
 transition: 0.5s;
 margin-right: 8px;
 height: 10vw;
 width: 10vh;

} .sideBlock li.active div {

 background-color: #2E64EC;

} @media (max-width: 800px) {

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 0 64px;
   background-color: #6281EF;
   color: #FAFAFC;
   float: unset;
   margin: 0;
   z-index: 20;
   width: 100%;
   box-sizing: border-box;
   min-width: unset;
   max-width: unset;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(calc(100% - 62px));
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .sideBlock b {
   display: block;
   margin: 0;
 }
 .sideBlock ul {
   display: inline-block;
   text-align: start;
   margin-top: 0;
   margin-bottom: 30px;
 }
 .sideBlock li {
   font-weight: bold;
 }
 .sideBlock li a {
   color: #FAFAFC;
 }
 .sideBlock li div {
   color: #FAFAFC;
 }
 .sideBlock li.active div {
   background-color: #FAFAFC;
 }
 .sideBlock.notshow {
   transform: translateY(calc(100% - 0px));
 }
 .sideBlock.open {
   transform: translateY(0);
 }

}

.contentBlock {

 width: 64vw;
 max-width: 700px;
 float: right;
 display: flex;
 flex-direction: column;

} @media (max-width: 1024px) {

 .contentBlock {
   margin-right: 5vw;
 }

} @media (max-width: 800px) {

 .contentBlock {
   margin-right: unset;
   width: 90%;
   box-sizing: border-box;
   max-width: 650px;
 }

}

.content {

 padding: 64px;
 border-radius: 5px;
 box-shadow: 0 0 10px lightgray;
 color: #121212;
 margin-top: 40px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 font-family: "lato-light";

} @media (max-width: 800px) {

 .content {
   margin: 0 auto;
   box-shadow: unset;
   padding: 35px;
   width: 100%;
   box-sizing: border-box;
 }

} @media (max-width: 400px) {

 .content {
   padding: 20px;
 }

} .content p:first-child {

 margin-top: 0;

} .content ul, .content ol {

 font-family: "lato-light", sans-serif;

} .content ul {

 padding-inline-start: 20px;
 list-style-image: none;
 list-style-type: none;

} .content ul li {

 display: flex;

} .content ul li::before {

 content: "•";
 color: #6281ef;

} .content li {

 margin: 10px;

} .content li::marker {

 color: #6281ef;
 font-family: "lato-heavy";
 font-size: 1.3em;

} .content h4, .content h5 {

 font-family: "montserrat-bold", sans-serif;
 font-size: 1.2em;
 text-transform: uppercase;
 margin-block-end: 0.2em;
 margin-block-start: 60px;

} .content h5 {

 font-size: 1em;

} .content a {

 color: #2e64ec;
 text-decoration: none;
 text-align: center;
 cursor: pointer;

} .content a.citation {

 font-size: 0.6em;
 vertical-align: super;

} .content a button {

 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "lato-semibold", sans-serif;
 color: #FAFAFC;
 padding: 32px 56px;
 font-size: 1.2rem;
 max-width: 7;
 text-align: center;
 border-radius: 1000px;
 margin: 40px auto;
 transition: 0.3s ease-out;
 background-color: #6281ef;
 box-shadow: 0 16px 32px -12px #3658cf;
 border: none;
 position: relative;
 top: 0;
 font-variant-position: normal;
 cursor: pointer;
 text-transform: uppercase;

} .content a button:hover {

 top: -5px;
 box-shadow: 0 16px 32px -16px #3658cf;

} .content p b {

 font-family: "lato-regular", sans-serif;
 color: #000;

} .content p a:not(.citation) {

 text-decoration: none;
 font-variant-position: normal;
 color: #121212;
 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 transition: 0.3s ease-out;

} .content p a:not(.citation):hover {

 box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;

}

_::-webkit-full-page-media, _:future,

root {

 transition-duration: unset;

}

.photos-wrapper.full-width {

 width: 100%;

} .photos-wrapper.full-width::after {

 transform: rotate(180deg) translate(-520px, 50px);

} .photos-wrapper .photos {

 padding: 20px;
 height: fit-content;
 width: 100%;
 box-sizing: border-box;
 overflow: hidden;

} .photos-wrapper .photos.phone {

 display: flex;
 justify-content: space-around;

} .photos-wrapper .photos.phone img {

 height: 400px;
 border-radius: 0;
 box-shadow: none;
 max-width: none;
 max-height: none;
 width: auto;

} .photos-wrapper .photos.photo-grid {

 display: grid;
 align-items: center;
 justify-items: center;

} .photos-wrapper .photos.photo-grid.three-part {

 grid-template-columns: 1fr 1fr 1fr;

} .photos-wrapper .photos.photo-grid.two-part {

 grid-template-columns: 1fr 1fr;

} .photos-wrapper .photos.photo-grid.one-part {

 grid-template-columns: 1fr;

} .photos-wrapper .photos.photo-grid.round-corners img {

 border-radius: 200px;

} .photos-wrapper .photos.photo-grid.no-shadow img {

 box-shadow: none;

} .photos-wrapper .photos.photo-grid img {

 box-shadow: 5px 5px 7px #00000029;
 width: 90%;

} .photos-wrapper.half-width {

 width: 50%;
 align-self: center;

} .photos-wrapper.half-width .photos {

 height: fit-content;

} .photos-wrapper.half-width .photos img {

 width: 100%;

} .photos-wrapper.half-width::after {

 transform: rotate(180deg) translate(-235px, 50px);

}

video {

 width: 100%;

}

.content p.photo-desc {

 text-align: left !important;
 font-size: 0.8em !important;

} @media (max-width: 800px) {

 .content p.photo-desc {
   font-size: 0.6em;
 }

}

.references {

 font-size: 1.9rem;

} .references svg {

 max-width: 100px;

} .references h3 {

 margin-block-start: 0em;
 font-size: 0.8em;
 font-family: "montserrat-bold", sans-serif;

} .references ol {

 margin: initial;
 padding-inline-start: 10px;

} .references ol li {

 font-size: 0.4em;
 font-family: "lato-light", sans-serif;

} .references ol li::marker {

 color: initial;
 font-family: "lato-light", sans-serif;
 font-size: 1em;

}