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

Revision as of 11:47, 29 August 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Latest revision as of 09:38, 18 October 2020 (view source) Paulius (Talk | contribs) m
(2 intermediate revisions by the same user not shown)
Line 10:		Line 10:
	height: 45vh;		height: 45vh;
	background-color: #121212;		background-color: #121212;
		+	background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png);
		+	background-size: cover;
	color: #FAFAFC;		color: #FAFAFC;
	display: flex;		display: flex;
Line 15:		Line 17:
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
		+	overflow: hidden;
	}		}
	.introContainer .heading {		.introContainer .heading {
	font-family: "montserrat-black";		font-family: "montserrat-black";
−	font-size: calc(4.5vw + 10px);	+	font-size: calc(4.7vw + 11px);
	text-transform: uppercase;		text-transform: uppercase;
	padding-left: 10vw;		padding-left: 10vw;
Line 26:		Line 29:
	padding-left: 0;		padding-left: 0;
	padding-right: 10vw;		padding-right: 10vw;
		+	margin-bottom: 20px;
	color: transparent;		color: transparent;
	-webkit-text-stroke-width: 1px;		-webkit-text-stroke-width: 1px;
Line 51:		Line 55:
	min-height: calc(55vh - 18px);		min-height: calc(55vh - 18px);
	background-color: #FAFAFC;		background-color: #FAFAFC;
		+	background-image: url(https://static.igem.org/mediawiki/2020/4/4b/T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png);
		+	background-repeat: no-repeat, repeat-y;
		+	background-size: 100%, 100%;
	color: #121212;		color: #121212;
−	padding: 32px 6vw 72px 12vw;	+	padding: 7vw 10vw 72px;
	display: flex;		display: flex;
		+	flex-direction: column;
	justify-content: space-evenly;		justify-content: space-evenly;
	align-items: stretch;		align-items: stretch;
	}		}
−	main .collabInfo {	+	@media (max-aspect-ratio: 14/11) {
		+	main {
		+	padding: 7vw 7vw 72px;
		+	}
		+	}
		+	main .collabSingle {
		+	display: grid;
		+	grid-template-rows: auto auto;
		+	grid-template-columns: auto auto;
	box-sizing: border-box;		box-sizing: border-box;
−	padding-right: 64px;
−	display: flex;
−	flex-direction: column;
	}		}
−	main .collabInfo .name {	+	@media (max-aspect-ratio: 1/1) {
		+	main .collabSingle {
		+	grid-template-rows: auto auto auto;
		+	grid-template-columns: 1fr;
		+	justify-items: center;
		+	}
		+	}
		+	main .collabSingle + .collabSingle {
		+	margin-top: 64px;
		+	}
		+	main .collabSingle .name {
		+	grid-row: 1;
		+	grid-column: 1/3;
		+	margin-bottom: 16px;
	font-family: "montserrat-black";		font-family: "montserrat-black";
−	font-size: 1.4rem;	+	font-size: calc(2.5vw + 12px);
	text-transform: uppercase;		text-transform: uppercase;
−	margin-bottom: 12px;	+	text-align: center;
		+	margin-bottom: 2vw;
		+	}
		+	@media (max-aspect-ratio: 1/1) {
		+	main .collabSingle .name {
		+	grid-column: 1;
		+	}
	}		}
−	main .collabInfo .text {	+	main .collabSingle .text {
		+	grid-row: 2;
		+	grid-column: 1;
		+	text-align: justify;
		+	margin-right: 4vw;
	font-size: 1.2rem;		font-size: 1.2rem;
	}		}
−	main .collabInfo .controls {	+	@media (max-aspect-ratio: 1/1) {
−	flex-grow: 1;	+	main .collabSingle .text {
−	margin-top: 32px;	+	grid-row: 3;
−	display: flex;	+	margin-right: unset;
−	justify-content: center;	+	}
	}		}
−	main .collabInfo .controls > div {	+	@media (max-width: 480px) {
−	flex-grow: 1;	+	main .collabSingle .text {
−	display: flex;	+	font-size: 1rem;
−	flex-direction: row;	+	}
−	justify-content: space-evenly;	+
−	align-items: flex-end;	+
−	max-width: 400px;	+
	}		}
−	main .collabInfo .controls .previous, main .collabInfo .controls .next {	+	main .collabSingle .photos {
−	border-radius: 1000px;	+	grid-row: 2;
−	width: 64px;	+	grid-column: 2;
−	height: 64px;	+
−	background-image: url(https://static.igem.org/mediawiki/2020/1/15/T--Vilnius-Lithuania--arrowNext.svg);	+
−	background-repeat: no-repeat;	+
−	background-position: center;	+
−	cursor: pointer;	+
−	transition: transform 0.2s ease-out;	+
−	}	+
−	main .collabInfo .controls .previous:hover, main .collabInfo .controls .next:hover {	+
−	transform: scale(1.1);	+
−	}	+
−	main .collabInfo .controls .previous {	+
−	transform: scaleX(-1);	+
−	}	+
−	main .collabInfo .controls .previous:hover {	+
−	transform: scaleX(-1) scale(1.1);	+
−	}	+
−	main .collabInfo .controls .select {	+
−	flex-grow: 1;	+
−	height: 64px;	+
	display: flex;		display: flex;
	flex-direction: row;		flex-direction: row;
−	justify-content: space-evenly;
	align-items: center;		align-items: center;
		+	margin: 2vw 0;
	}		}
−	main .collabInfo .controls .select span {	+	@media (max-aspect-ratio: 1/1) {
−	box-sizing: border-box;	+	main .collabSingle .photos {
−	width: 16px;	+	grid-row: 2;
−	height: 16px;	+	grid-column: 1;
−	border-radius: 1000px;	+	margin: 6vw 0;
−	display: inline-block;	+	}
−	border: 2px solid #121212;	+
−	background-color: transparent;	+
−	transition: 0.3s;	+
−	cursor: pointer;	+
−	}	+
−	main .collabInfo .controls .select span.active {	+
−	background-color: #121212;	+
−	}	+
−	main .collabInfo .controls .select span:hover {	+
−	transform: scale(1.2);	+
−	}	+
−	main .collabPhotos {	+
−	display: flex;	+
−	flex-direction: row;	+
−	align-items: center;	+
	}		}
−	main .collabPhotos span {	+	main .collabSingle .photos span {
	box-sizing: border-box;		box-sizing: border-box;
	display: inline-block;		display: inline-block;
	border-radius: 1000px;		border-radius: 1000px;
−	width: 25vw;	+	width: 22vw;
−	height: 25vw;	+	height: 22vw;
	background-position: center;		background-position: center;
	background-size: cover;		background-size: cover;
	position: relative;		position: relative;
	}		}
−	main .collabPhotos span:first-child {	+	@media (max-aspect-ratio: 1/1) {
		+	main .collabSingle .photos span {
		+	width: 40vw;
		+	height: 40vw;
		+	}
		+	}
		+	main .collabSingle .photos span:first-child {
	margin-right: -3vw;		margin-right: -3vw;
	z-index: 2;		z-index: 2;
	overflow: hidden;		overflow: hidden;
	}		}
−	main .collabPhotos span:first-child::before {	+	main .collabSingle .photos span:first-child::before {
	content: "";		content: "";
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	display: inline-block;		display: inline-block;
−	margin-left: 19vw;	+	margin-left: 16vw;
	border-radius: 1000px 0 0 1000px;		border-radius: 1000px 0 0 1000px;
	box-sizing: border-box;		box-sizing: border-box;
Line 161:		Line 166:
	opacity: 0.7;		opacity: 0.7;
	}		}
−	main .collabPhotos span:last-child {	+	@media (max-aspect-ratio: 1/1) {
		+	main .collabSingle .photos span:first-child::before {
		+	margin-left: 34vw;
		+	}
		+	}
		+	main .collabSingle .photos span:last-child {
	margin-left: -3vw;		margin-left: -3vw;
−	}
−	@media (max-aspect-ratio: 3/2) {
−	main {
−	padding: 7vw 7vw 72px;
−	flex-direction: column-reverse;
−	justify-content: unset;
−	align-items: flex-start;
−	}
−	main .collabInfo {
−	padding-right: 0;
−	}
−	main .collabPhotos {
−	margin-bottom: 48px;
−	align-self: center;
−	}
−	main .collabPhotos span {
−	width: 42vw;
−	height: 42vw;
−	}
−	main .collabPhotos span:first-child::before {
−	margin-left: 36vw;
−	}
	}		}

---

Latest revision as of 09:38, 18 October 2020

body, html {

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

}

.introContainer {

 width: 100%;
 height: 45vh;
 background-color: #121212;
 background-image: url();
 background-size: cover;
 color: #FAFAFC;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 overflow: hidden;

} .introContainer .heading {

 font-family: "montserrat-black";
 font-size: calc(4.7vw + 11px);
 text-transform: uppercase;
 padding-left: 10vw;
 line-height: 0.9;

} .introContainer .heading.other {

 padding-left: 0;
 padding-right: 10vw;
 margin-bottom: 20px;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;

}

.milkWave {

 z-index: 2;
 width: 100%;
 top: 0;
 height: calc(45vh + 2px);
 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;
 box-sizing: border-box;
 min-height: calc(55vh - 18px);
 background-color: #FAFAFC;
 background-image: url(), url();
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 color: #121212;
 padding: 7vw 10vw 72px;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: stretch;

} @media (max-aspect-ratio: 14/11) {

 main {
   padding: 7vw 7vw 72px;
 }

} main .collabSingle {

 display: grid;
 grid-template-rows: auto auto;
 grid-template-columns: auto auto;
 box-sizing: border-box;

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

 main .collabSingle {
   grid-template-rows: auto auto auto;
   grid-template-columns: 1fr;
   justify-items: center;
 }

} main .collabSingle + .collabSingle {

 margin-top: 64px;

} main .collabSingle .name {

 grid-row: 1;
 grid-column: 1/3;
 margin-bottom: 16px;
 font-family: "montserrat-black";
 font-size: calc(2.5vw + 12px);
 text-transform: uppercase;
 text-align: center;
 margin-bottom: 2vw;

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

 main .collabSingle .name {
   grid-column: 1;
 }

} main .collabSingle .text {

 grid-row: 2;
 grid-column: 1;
 text-align: justify;
 margin-right: 4vw;
 font-size: 1.2rem;

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

 main .collabSingle .text {
   grid-row: 3;
   margin-right: unset;
 }

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

 main .collabSingle .text {
   font-size: 1rem;
 }

} main .collabSingle .photos {

 grid-row: 2;
 grid-column: 2;
 display: flex;
 flex-direction: row;
 align-items: center;
 margin: 2vw 0;

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

 main .collabSingle .photos {
   grid-row: 2;
   grid-column: 1;
   margin: 6vw 0;
 }

} main .collabSingle .photos span {

 box-sizing: border-box;
 display: inline-block;
 border-radius: 1000px;
 width: 22vw;
 height: 22vw;
 background-position: center;
 background-size: cover;
 position: relative;

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

 main .collabSingle .photos span {
   width: 40vw;
   height: 40vw;
 }

} main .collabSingle .photos span:first-child {

 margin-right: -3vw;
 z-index: 2;
 overflow: hidden;

} main .collabSingle .photos span:first-child::before {

 content: "";
 width: 100%;
 height: 100%;
 display: inline-block;
 margin-left: 16vw;
 border-radius: 1000px 0 0 1000px;
 box-sizing: border-box;
 background-color: #6281EF;
 opacity: 0.7;

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

 main .collabSingle .photos span:first-child::before {
   margin-left: 34vw;
 }

} main .collabSingle .photos span:last-child {

 margin-left: -3vw;

}