m |
m |
||
Line 57: | Line 57: | ||
align-items: stretch; | align-items: stretch; | ||
} | } | ||
− | main . | + | main .collabAll { |
− | + | ||
− | + | ||
display: flex; | display: flex; | ||
+ | justify-content: space-evenly; | ||
+ | align-items: stretch; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 3/2) { | ||
+ | main .collabAll { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | main .collabSingle { | ||
+ | display: none; | ||
flex-direction: column; | flex-direction: column; | ||
+ | align-items: center; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 3/2) { | ||
+ | main .collabSingle { | ||
+ | display: flex; | ||
+ | } | ||
+ | } | ||
+ | main .collabSingle, main .collabAll { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | main .collabSingle .collabInfo, main .collabAll .collabInfo { | ||
+ | padding-right: 64px; | ||
} | } | ||
− | main . | + | main .collabSingle .name, main .collabAll .name { |
font-family: "montserrat-black"; | font-family: "montserrat-black"; | ||
font-size: 1.4rem; | font-size: 1.4rem; | ||
Line 69: | Line 89: | ||
margin-bottom: 12px; | margin-bottom: 12px; | ||
} | } | ||
− | main . | + | main .collabSingle .text, main .collabAll .text { |
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
− | main . | + | main .collabSingle .controls, main .collabAll .controls { |
flex-grow: 1; | flex-grow: 1; | ||
margin-top: 32px; | margin-top: 32px; | ||
Line 78: | Line 98: | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
− | main . | + | main .collabSingle .controls > div, main .collabAll .controls > div { |
flex-grow: 1; | flex-grow: 1; | ||
display: flex; | display: flex; | ||
Line 86: | Line 106: | ||
max-width: 400px; | max-width: 400px; | ||
} | } | ||
− | main . | + | main .collabSingle .controls .previous, main .collabSingle .controls .next, main .collabAll .controls .previous, main .collabAll .controls .next { |
border-radius: 1000px; | border-radius: 1000px; | ||
width: 64px; | width: 64px; | ||
Line 96: | Line 116: | ||
transition: transform 0.2s ease-out; | transition: transform 0.2s ease-out; | ||
} | } | ||
− | main . | + | main .collabSingle .controls .previous:hover, main .collabSingle .controls .next:hover, main .collabAll .controls .previous:hover, main .collabAll .controls .next:hover { |
transform: scale(1.1); | transform: scale(1.1); | ||
} | } | ||
− | main . | + | main .collabSingle .controls .previous, main .collabAll .controls .previous { |
transform: scaleX(-1); | transform: scaleX(-1); | ||
} | } | ||
− | main . | + | main .collabSingle .controls .previous:hover, main .collabAll .controls .previous:hover { |
transform: scaleX(-1) scale(1.1); | transform: scaleX(-1) scale(1.1); | ||
} | } | ||
− | main . | + | main .collabSingle .controls .select, main .collabAll .controls .select { |
flex-grow: 1; | flex-grow: 1; | ||
height: 64px; | height: 64px; | ||
Line 113: | Line 133: | ||
align-items: center; | align-items: center; | ||
} | } | ||
− | main . | + | main .collabSingle .controls .select span, main .collabAll .controls .select span { |
box-sizing: border-box; | box-sizing: border-box; | ||
width: 16px; | width: 16px; | ||
Line 124: | Line 144: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
− | main . | + | main .collabSingle .controls .select span.active, main .collabAll .controls .select span.active { |
background-color: #121212; | background-color: #121212; | ||
} | } | ||
− | main . | + | main .collabSingle .controls .select span:hover, main .collabAll .controls .select span:hover { |
transform: scale(1.2); | transform: scale(1.2); | ||
} | } | ||
− | main . | + | main .collabSingle .photos, main .collabAll .photos { |
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
align-items: center; | align-items: center; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span, main .collabAll .photos span { |
box-sizing: border-box; | box-sizing: border-box; | ||
display: inline-block; | display: inline-block; | ||
Line 145: | Line 165: | ||
position: relative; | position: relative; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span:first-child, main .collabAll .photos span:first-child { |
margin-right: -3vw; | margin-right: -3vw; | ||
z-index: 2; | z-index: 2; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span:first-child::before, main .collabAll .photos span:first-child::before { |
content: ""; | content: ""; | ||
width: 100%; | width: 100%; | ||
Line 161: | Line 181: | ||
opacity: 0.7; | opacity: 0.7; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span:last-child, main .collabAll .photos span:last-child { |
margin-left: -3vw; | margin-left: -3vw; | ||
} | } | ||
Line 167: | Line 187: | ||
main { | main { | ||
padding: 7vw 7vw 72px; | padding: 7vw 7vw 72px; | ||
− | flex-direction: column | + | flex-direction: column; |
− | + | ||
− | + | ||
} | } | ||
main .collabInfo { | main .collabInfo { | ||
padding-right: 0; | padding-right: 0; | ||
} | } | ||
− | main . | + | main .collabSingle + .collabSingle { |
− | margin- | + | margin-top: 64px; |
+ | } | ||
+ | main .collabSingle .name { | ||
+ | font-size: calc(2.5vw + 12px); | ||
+ | } | ||
+ | main .collabSingle .photos { | ||
+ | margin: 32px 0; | ||
align-self: center; | align-self: center; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span { |
width: 42vw; | width: 42vw; | ||
height: 42vw; | height: 42vw; | ||
} | } | ||
− | main . | + | main .collabSingle .photos span:first-child::before { |
margin-left: 36vw; | margin-left: 36vw; | ||
} | } | ||
} | } |
Revision as of 15:56, 29 August 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
width: 100%; height: 45vh; background-color: #121212; color: #FAFAFC; display: flex; flex-direction: column; justify-content: center; align-items: center;
} .introContainer .heading {
font-family: "montserrat-black"; font-size: calc(4.5vw + 10px); text-transform: uppercase; padding-left: 10vw; line-height: 0.9;
} .introContainer .heading.other {
padding-left: 0; padding-right: 10vw; 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; color: #121212; padding: 32px 6vw 72px 12vw; display: flex; justify-content: space-evenly; align-items: stretch;
} main .collabAll {
display: flex; justify-content: space-evenly; align-items: stretch;
} @media (max-aspect-ratio: 3/2) {
main .collabAll { display: none; }
} main .collabSingle {
display: none; flex-direction: column; align-items: center;
} @media (max-aspect-ratio: 3/2) {
main .collabSingle { display: flex; }
} main .collabSingle, main .collabAll {
box-sizing: border-box;
} main .collabSingle .collabInfo, main .collabAll .collabInfo {
padding-right: 64px;
} main .collabSingle .name, main .collabAll .name {
font-family: "montserrat-black"; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 12px;
} main .collabSingle .text, main .collabAll .text {
font-size: 1.2rem;
} main .collabSingle .controls, main .collabAll .controls {
flex-grow: 1; margin-top: 32px; display: flex; justify-content: center;
} main .collabSingle .controls > div, main .collabAll .controls > div {
flex-grow: 1; display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end; max-width: 400px;
} main .collabSingle .controls .previous, main .collabSingle .controls .next, main .collabAll .controls .previous, main .collabAll .controls .next {
border-radius: 1000px; width: 64px; 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 .collabSingle .controls .previous:hover, main .collabSingle .controls .next:hover, main .collabAll .controls .previous:hover, main .collabAll .controls .next:hover {
transform: scale(1.1);
} main .collabSingle .controls .previous, main .collabAll .controls .previous {
transform: scaleX(-1);
} main .collabSingle .controls .previous:hover, main .collabAll .controls .previous:hover {
transform: scaleX(-1) scale(1.1);
} main .collabSingle .controls .select, main .collabAll .controls .select {
flex-grow: 1; height: 64px; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;
} main .collabSingle .controls .select span, main .collabAll .controls .select span {
box-sizing: border-box; width: 16px; height: 16px; border-radius: 1000px; display: inline-block; border: 2px solid #121212; background-color: transparent; transition: 0.3s; cursor: pointer;
} main .collabSingle .controls .select span.active, main .collabAll .controls .select span.active {
background-color: #121212;
} main .collabSingle .controls .select span:hover, main .collabAll .controls .select span:hover {
transform: scale(1.2);
} main .collabSingle .photos, main .collabAll .photos {
display: flex; flex-direction: row; align-items: center;
} main .collabSingle .photos span, main .collabAll .photos span {
box-sizing: border-box; display: inline-block; border-radius: 1000px; width: 25vw; height: 25vw; background-position: center; background-size: cover; position: relative;
} main .collabSingle .photos span:first-child, main .collabAll .photos span:first-child {
margin-right: -3vw; z-index: 2; overflow: hidden;
} main .collabSingle .photos span:first-child::before, main .collabAll .photos span:first-child::before {
content: ""; width: 100%; height: 100%; display: inline-block; margin-left: 19vw; border-radius: 1000px 0 0 1000px; box-sizing: border-box; background-color: #6281EF; opacity: 0.7;
} main .collabSingle .photos span:last-child, main .collabAll .photos span:last-child {
margin-left: -3vw;
} @media (max-aspect-ratio: 3/2) {
main { padding: 7vw 7vw 72px; flex-direction: column; } main .collabInfo { padding-right: 0; } main .collabSingle + .collabSingle { margin-top: 64px; } main .collabSingle .name { font-size: calc(2.5vw + 12px); } main .collabSingle .photos { margin: 32px 0; align-self: center; } main .collabSingle .photos span { width: 42vw; height: 42vw; } main .collabSingle .photos span:first-child::before { margin-left: 36vw; }
}