m |
m |
||
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 53: | 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: 7vw | + | padding: 7vw 10vw 72px; |
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 66: | Line 71: | ||
} | } | ||
main .collabSingle { | main .collabSingle { | ||
− | display: | + | display: grid; |
− | + | grid-template-rows: auto auto; | |
− | + | grid-template-columns: auto auto; | |
box-sizing: border-box; | 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 { | main .collabSingle + .collabSingle { | ||
Line 75: | Line 87: | ||
} | } | ||
main .collabSingle .name { | main .collabSingle .name { | ||
+ | grid-row: 1; | ||
+ | grid-column: 1/3; | ||
+ | margin-bottom: 16px; | ||
font-family: "montserrat-black"; | font-family: "montserrat-black"; | ||
font-size: calc(2.5vw + 12px); | font-size: calc(2.5vw + 12px); | ||
text-transform: uppercase; | text-transform: uppercase; | ||
text-align: center; | text-align: center; | ||
− | margin-bottom: | + | margin-bottom: 2vw; |
+ | } | ||
+ | @media (max-aspect-ratio: 1/1) { | ||
+ | main .collabSingle .name { | ||
+ | grid-column: 1; | ||
+ | } | ||
} | } | ||
main .collabSingle .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 .collabSingle . | + | @media (max-aspect-ratio: 1/1) { |
− | + | main .collabSingle .text { | |
− | + | grid-row: 3; | |
− | + | margin-right: unset; | |
− | + | } | |
} | } | ||
− | main .collabSingle . | + | @media (max-width: 480px) { |
− | + | main .collabSingle .text { | |
− | + | font-size: 1rem; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | main .collabSingle . | + | main .collabSingle .photos { |
− | + | grid-row: 2; | |
− | + | grid-column: 2; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
− | |||
align-items: center; | 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 { | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
main .collabSingle .photos span { | main .collabSingle .photos span { | ||
Line 153: | Line 138: | ||
display: inline-block; | display: inline-block; | ||
border-radius: 1000px; | border-radius: 1000px; | ||
− | width: | + | width: 22vw; |
− | height: | + | height: 22vw; |
background-position: center; | background-position: center; | ||
background-size: cover; | background-size: cover; | ||
position: relative; | position: relative; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 1/1) { | ||
+ | main .collabSingle .photos span { | ||
+ | width: 40vw; | ||
+ | height: 40vw; | ||
+ | } | ||
} | } | ||
main .collabSingle .photos span:first-child { | main .collabSingle .photos span:first-child { | ||
Line 169: | Line 160: | ||
height: 100%; | height: 100%; | ||
display: inline-block; | display: inline-block; | ||
− | margin-left: | + | margin-left: 16vw; |
border-radius: 1000px 0 0 1000px; | border-radius: 1000px 0 0 1000px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background-color: #6281EF; | background-color: #6281EF; | ||
opacity: 0.7; | 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 { | main .collabSingle .photos span:last-child { | ||
margin-left: -3vw; | margin-left: -3vw; | ||
} | } |
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;
}