m |
m |
||
(3 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. | + | 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 47: | Line 51: | ||
main { | main { | ||
+ | margin-top: -5px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
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: | + | 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 . | + | @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; | ||
− | |||
− | |||
− | |||
} | } | ||
− | main . | + | @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: | + | font-size: calc(2.5vw + 12px); |
text-transform: uppercase; | text-transform: uppercase; | ||
− | margin-bottom: | + | text-align: center; |
+ | margin-bottom: 2vw; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 1/1) { | ||
+ | main .collabSingle .name { | ||
+ | grid-column: 1; | ||
+ | } | ||
} | } | ||
− | main . | + | main .collabSingle .text { |
+ | grid-row: 2; | ||
+ | grid-column: 1; | ||
+ | text-align: justify; | ||
+ | margin-right: 4vw; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
− | main . | + | @media (max-aspect-ratio: 1/1) { |
− | + | main .collabSingle .text { | |
− | + | grid-row: 3; | |
− | + | margin-right: unset; | |
− | + | } | |
} | } | ||
− | main . | + | @media (max-width: 480px) { |
− | + | main .collabSingle .text { | |
− | + | font-size: 1rem; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | main . | + | 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 . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | main . | + | 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: | + | width: 22vw; |
− | height: | + | height: 22vw; |
background-position: center; | background-position: center; | ||
background-size: cover; | background-size: cover; | ||
position: relative; | position: relative; | ||
} | } | ||
− | main . | + | @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 . | + | 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: | + | margin-left: 16vw; |
border-radius: 1000px 0 0 1000px; | border-radius: 1000px 0 0 1000px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 160: | Line 166: | ||
opacity: 0.7; | opacity: 0.7; | ||
} | } | ||
− | main . | + | @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; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } |
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;
}