m |
|||
Line 21: | Line 21: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
padding-left: 10vw; | padding-left: 10vw; | ||
+ | line-height: 0.9; | ||
} | } | ||
.introContainer .heading.other { | .introContainer .heading.other { | ||
Line 40: | Line 41: | ||
background-position: bottom; | background-position: bottom; | ||
background-origin: border-box; | background-origin: border-box; | ||
− | background-size: | + | 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); | ||
Line 50: | Line 51: | ||
background-color: #FAFAFC; | background-color: #FAFAFC; | ||
color: #121212; | color: #121212; | ||
− | padding: 32px 6vw | + | padding: 32px 6vw 72px 12vw; |
display: flex; | display: flex; | ||
justify-content: space-evenly; | justify-content: space-evenly; | ||
Line 164: | Line 165: | ||
@media (max-aspect-ratio: 3/2) { | @media (max-aspect-ratio: 3/2) { | ||
main { | main { | ||
− | padding: 7vw; | + | padding: 7vw 7vw 72px; |
flex-direction: column-reverse; | flex-direction: column-reverse; | ||
justify-content: unset; | justify-content: unset; |
Revision as of 17:51, 28 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 {
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 .collabInfo {
box-sizing: border-box; padding-right: 64px; display: flex; flex-direction: column;
} main .collabInfo .name {
font-family: "montserrat-black"; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 12px;
} main .collabInfo .text {
font-size: 1.2rem;
} main .collabInfo .controls {
flex-grow: 1; margin-top: 32px; display: flex; justify-content: center;
} main .collabInfo .controls > div {
flex-grow: 1; display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end; max-width: 400px;
} main .collabInfo .controls .previous, main .collabInfo .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 .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; flex-direction: row; justify-content: space-evenly; align-items: center;
} main .collabInfo .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 .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 {
box-sizing: border-box; display: inline-block; border-radius: 1000px; width: 25vw; height: 25vw; background-position: center; background-size: cover; position: relative;
} main .collabPhotos span:first-child {
margin-right: -3vw; z-index: 2; overflow: hidden;
} main .collabPhotos 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 .collabPhotos span:last-child {
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; }
}