(Created page with "body, html { margin: 0; padding: 0; color: #222222; font-family: "lato-regular"; } .introContainer { width: 100%; height: 45vh; background-color: #121212; col...") |
|||
Line 63: | Line 63: | ||
main .collabInfo .name { | main .collabInfo .name { | ||
font-family: "montserrat-black"; | font-family: "montserrat-black"; | ||
− | font-size: 1. | + | font-size: 1.4rem; |
text-transform: uppercase; | text-transform: uppercase; | ||
margin-bottom: 12px; | margin-bottom: 12px; | ||
} | } | ||
main .collabInfo .text { | main .collabInfo .text { | ||
− | font-size: 1. | + | font-size: 1.2rem; |
} | } | ||
main .collabInfo .controls { | main .collabInfo .controls { | ||
Line 137: | Line 137: | ||
display: inline-block; | display: inline-block; | ||
border-radius: 1000px; | border-radius: 1000px; | ||
− | width: | + | width: 25vw; |
− | height: | + | height: 25vw; |
background-position: center; | background-position: center; | ||
background-size: cover; | background-size: cover; | ||
Line 150: | Line 150: | ||
main .collabPhotos span:first-child::before { | main .collabPhotos span:first-child::before { | ||
content: ""; | content: ""; | ||
− | width: | + | width: 100%; |
− | height: | + | height: 100%; |
display: inline-block; | display: inline-block; | ||
− | margin-left: | + | margin-left: 19vw; |
border-radius: 1000px 0 0 1000px; | border-radius: 1000px 0 0 1000px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 177: | Line 177: | ||
} | } | ||
main .collabPhotos span { | main .collabPhotos span { | ||
− | width: | + | width: 42vw; |
− | height: | + | height: 42vw; |
} | } | ||
− | main .collabPhotos span: | + | main .collabPhotos span:first-child::before { |
− | + | margin-left: 36vw; | |
− | + | ||
− | margin-left: | + | |
} | } | ||
} | } |
Revision as of 13:44, 25 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;
} .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 32px 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; 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; }
}