m |
|||
Line 9: | Line 9: | ||
flex-direction: column-reverse; | flex-direction: column-reverse; | ||
justify-content: space-between; | justify-content: space-between; | ||
+ | position: fixed; | ||
+ | height: calc(100vh + 4vw); | ||
} | } | ||
.introContainer .heading { | .introContainer .heading { | ||
Line 15: | Line 17: | ||
top: 6vh; | top: 6vh; | ||
pointer-events: none; | pointer-events: none; | ||
− | font-family: " | + | font-family: "montserrat-bold"; |
+ | text-align: center; | ||
+ | } | ||
+ | .introContainer .heading div { | ||
+ | display: inline; | ||
} | } | ||
.introContainer .heading.other { | .introContainer .heading.other { | ||
top: 8vh; | top: 8vh; | ||
+ | } | ||
+ | .introContainer .heading.other .invisible { | ||
+ | color: transparent; | ||
+ | -webkit-text-stroke-width: 0; | ||
+ | -webkit-text-stroke-color: transparent; | ||
} | } | ||
@media (min-aspect-ratio: 1/1) { | @media (min-aspect-ratio: 1/1) { | ||
Line 26: | Line 37: | ||
} | } | ||
.introContainer::before { | .introContainer::before { | ||
− | content: | + | content: unset; |
− | + | display: none; | |
− | + | background-image: unset; | |
− | background-image: | + | |
} | } | ||
.introContainer span { | .introContainer span { | ||
Line 35: | Line 45: | ||
color: #FAFAFC; | color: #FAFAFC; | ||
top: 7vw; | top: 7vw; | ||
− | width: | + | width: 70vw; |
− | height: | + | height: 70vw; |
background-attachment: unset; | background-attachment: unset; | ||
overflow: hidden; | overflow: hidden; | ||
Line 44: | Line 54: | ||
.introContainer span { | .introContainer span { | ||
top: 7vh; | top: 7vh; | ||
− | width: | + | width: 70vh; |
− | height: | + | height: 70vh; |
} | } | ||
} | } | ||
Line 58: | Line 68: | ||
.introContainer button.introVideoPlay { | .introContainer button.introVideoPlay { | ||
position: absolute; | position: absolute; | ||
− | top: | + | top: 55vw; |
− | left: | + | left: 15vw; |
width: 64px; | width: 64px; | ||
height: 64px; | height: 64px; | ||
Line 75: | Line 85: | ||
@media (min-aspect-ratio: 1/1) { | @media (min-aspect-ratio: 1/1) { | ||
.introContainer button.introVideoPlay { | .introContainer button.introVideoPlay { | ||
− | top: | + | top: 55vh; |
− | left: calc(50vw - | + | left: calc(50vw - 35vh); |
} | } | ||
} | } | ||
Line 84: | Line 94: | ||
.introContainer .memberDiv { | .introContainer .memberDiv { | ||
position: absolute; | position: absolute; | ||
− | left: | + | left: 67vw; |
− | top: | + | top: 40vh; |
color: #FAFAFC; | color: #FAFAFC; | ||
+ | padding-right: 16px; | ||
} | } | ||
.introContainer .memberDiv div { | .introContainer .memberDiv div { | ||
Line 92: | Line 103: | ||
} | } | ||
.introContainer .memberDiv #memberName { | .introContainer .memberDiv #memberName { | ||
− | font-family: " | + | font-family: "montserrat-bold"; |
font-size: 3.25vh; | font-size: 3.25vh; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
.introContainer .memberDiv #memberRole { | .introContainer .memberDiv #memberRole { | ||
+ | font-family: "lato-light"; | ||
font-size: 2.75vh; | font-size: 2.75vh; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
Line 104: | Line 116: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
− | @media (max- | + | @media (max-aspect-ratio: 14/16) { |
.introContainer .memberDiv { | .introContainer .memberDiv { | ||
− | left: | + | padding: 0 32px; |
+ | left: 0; | ||
+ | top: 77vw; | ||
} | } | ||
} | } | ||
.introContainer .bubbleList { | .introContainer .bubbleList { | ||
− | margin-bottom: | + | margin-bottom: calc(24px + 4vw); |
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
Line 144: | Line 158: | ||
border-radius: 10vw; | border-radius: 10vw; | ||
position: static; | position: static; | ||
− | max-width: | + | max-width: 10vh; |
− | max-height: | + | max-height: 10vh; |
− | min-width: | + | min-width: 10vh; |
− | min-height: | + | min-height: 10vh; |
margin: 10px; | margin: 10px; | ||
transform: scale(1); | transform: scale(1); | ||
Line 154: | Line 168: | ||
@media (min-aspect-ratio: 1/1) { | @media (min-aspect-ratio: 1/1) { | ||
.introContainer .bubbleList span { | .introContainer .bubbleList span { | ||
− | width: | + | width: 10vh; |
− | height: | + | height: 10vh; |
} | } | ||
} | } | ||
Line 172: | Line 186: | ||
box-shadow: 0px 0px 10px 0px #444444; | box-shadow: 0px 0px 10px 0px #444444; | ||
border-radius: 10px; | border-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .milkWave { | ||
+ | z-index: 2; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: calc(100vh + 4vw); | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | content: ""; | ||
+ | pointer-events: none; | ||
+ | background-position: bottom; | ||
+ | background-origin: border-box; | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); | ||
} | } | ||
main { | main { | ||
+ | top: calc(100vh + 4vw); | ||
padding: 50px 10vw 96px; | padding: 50px 10vw 96px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 253: | Line 285: | ||
align-items: flex-end; | align-items: flex-end; | ||
font-size: 2vw; | font-size: 2vw; | ||
− | font-family: " | + | font-family: "montserrat-black"; |
text-transform: uppercase; | text-transform: uppercase; | ||
color: #6281EF; | color: #6281EF; |
Revision as of 15:07, 24 August 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
flex-direction: column-reverse; justify-content: space-between; position: fixed; height: calc(100vh + 4vw);
} .introContainer .heading {
position: absolute; font-size: 6vh; top: 6vh; pointer-events: none; font-family: "montserrat-bold"; text-align: center;
} .introContainer .heading div {
display: inline;
} .introContainer .heading.other {
top: 8vh;
} .introContainer .heading.other .invisible {
color: transparent; -webkit-text-stroke-width: 0; -webkit-text-stroke-color: transparent;
} @media (min-aspect-ratio: 1/1) {
.introContainer .heading { font-size: 7vw; }
} .introContainer::before {
content: unset; display: none; background-image: unset;
} .introContainer span {
position: absolute; color: #FAFAFC; top: 7vw; width: 70vw; height: 70vw; background-attachment: unset; overflow: hidden; font-weight: bold;
} @media (min-aspect-ratio: 1/1) {
.introContainer span { top: 7vh; width: 70vh; height: 70vh; }
} .introContainer span.novideo video {
display: none;
} .introContainer span video {
width: 100%; height: 100%; object-fit: cover;
} .introContainer button.introVideoPlay {
position: absolute; top: 55vw; left: 15vw; width: 64px; height: 64px; border: unset; display: none; background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg"); background-size: 50% 50%; background-repeat: no-repeat; background-position: 58% 50%; cursor: pointer; padding: 0; border-radius: 1000px; background-color: #6281EF;
} @media (min-aspect-ratio: 1/1) {
.introContainer button.introVideoPlay { top: 55vh; left: calc(50vw - 35vh); }
} .introContainer button.introVideoPlay.novideo {
display: block;
} .introContainer .memberDiv {
position: absolute; left: 67vw; top: 40vh; color: #FAFAFC; padding-right: 16px;
} .introContainer .memberDiv div {
margin: 8px 0;
} .introContainer .memberDiv #memberName {
font-family: "montserrat-bold"; font-size: 3.25vh; text-transform: uppercase;
} .introContainer .memberDiv #memberRole {
font-family: "lato-light"; font-size: 2.75vh; text-transform: uppercase;
} .introContainer .memberDiv #memberFunFact {
font-size: 2.5vh; font-weight: normal;
} @media (max-aspect-ratio: 14/16) {
.introContainer .memberDiv { padding: 0 32px; left: 0; top: 77vw; }
} .introContainer .bubbleList {
margin-bottom: calc(24px + 4vw); width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: start; flex-wrap: nowrap; box-sizing: border-box; overflow-x: auto; overflow-y: hidden;
} .introContainer .bubbleList::after {
content: "."; color: transparent;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleList { padding: 16px; flex-wrap: wrap; overflow-x: hidden; justify-content: center; } .introContainer .bubbleList::after { content: unset; }
} .introContainer .bubbleList span {
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background-color: #6281EF; border-radius: 10vw; position: static; max-width: 10vh; max-height: 10vh; min-width: 10vh; min-height: 10vh; margin: 10px; transform: scale(1); transition: transform 0.3s;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleList span { width: 10vh; height: 10vh; }
} .introContainer .bubbleList span:hover {
transform: scale(1.2);
} .introContainer .bubbleList::-webkit-scrollbar {
background-color: transparent; border-radius: 10px; height: 8px;
} .introContainer .bubbleList::-webkit-scrollbar-thumb {
background-color: #444444; -webkit-box-shadow: 0px 0px 10px 0px #444444; -moz-box-shadow: 0px 0px 10px 0px #444444; box-shadow: 0px 0px 10px 0px #444444; border-radius: 10px;
}
.milkWave {
z-index: 2; position: absolute; width: 100%; height: calc(100vh + 4vw); top: 0; left: 0; right: 0; content: ""; pointer-events: none; background-position: bottom; background-origin: border-box; background-size: contain; background-repeat: no-repeat; background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
}
main {
top: calc(100vh + 4vw); padding: 50px 10vw 96px; box-sizing: border-box; flex-direction: column;
} main .heading2 {
font-family: "montserrat-black"; font-size: 4vw; font-size: max(4vw, 18px); text-transform: uppercase; display: block; width: 100%; text-align: end; color: #222222;
} main .heading2.other {
color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #222222;
} main .instructorList {
display: flex; flex-flow: row wrap; justify-content: flex-end;
} main .instructorList .instructor {
margin-top: 50px; display: grid; grid-template-columns: 16vw auto; grid-template-rows: 6vw auto; column-gap: 28px; row-gap: 4px; width: 50%;
} @media (max-width: 800px) {
main .instructorList .instructor { grid-template-columns: 32vw auto; grid-template-rows: 10vw auto; width: 100%; }
} main .instructorList .instructor img {
width: 16vw; height: 16vw; border-radius: 1000px; border: 2px solid #6281EF; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3;
} @media (max-width: 800px) {
main .instructorList .instructor img { width: 32vw; height: 32vw; }
} main .instructorList .instructor .filter {
width: 16vw; height: 16vw; border: 2px solid #6281EF; border-radius: 1000px; background-color: #6281EF; mix-blend-mode: hue; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3;
} @media (max-width: 800px) {
main .instructorList .instructor .filter { width: 32vw; height: 32vw; }
} main .instructorList .instructor .instructorName {
display: flex; align-items: flex-end; font-size: 2vw; font-family: "montserrat-black"; text-transform: uppercase; color: #6281EF; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;
} @media (max-width: 800px) {
main .instructorList .instructor .instructorName { font-size: 4vw; }
} main .instructorList .instructor .instructorAbout {
font-size: 1.8vw; font-family: "lato-light"; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;
} @media (max-width: 800px) {
main .instructorList .instructor .instructorAbout { font-size: 3.6vw; }
} main .instructorList .arrowMore {
margin-top: 3em; width: 50%; height: 16vw; text-decoration: none; display: flex; align-items: center;
} @media (max-width: 800px) {
main .instructorList .arrowMore { width: 100%; height: 32vw; }
} main .instructorList .arrowMore::before {
content: ""; display: block; background-image: url(https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--arrowMore.svg); background-repeat: no-repeat; background-position: 5vw center; width: 16vw; height: 16vw;
} @media (max-width: 800px) {
main .instructorList .arrowMore::before { width: 32vw; height: 32vw; background-position: 10vw center; }
} main .instructorList .arrowMore span {
color: #222222; font-family: "montserrat-bold"; font-size: 3vw; margin-left: 2vw;
} @media (max-width: 800px) {
main .instructorList .arrowMore span { margin-left: 4vw; font-size: 5vw; }
}