m |
|||
Line 12: | Line 12: | ||
.introContainer .heading { | .introContainer .heading { | ||
position: absolute; | position: absolute; | ||
− | + | font-size: 6vh; | |
− | top: | + | top: 6vh; |
pointer-events: none; | pointer-events: none; | ||
− | font-family: | + | font-family: "ubuntu-bold"; |
} | } | ||
.introContainer .heading.other { | .introContainer .heading.other { | ||
− | top: | + | top: 8vh; |
+ | } | ||
+ | @media (min-aspect-ratio: 1/1) { | ||
+ | .introContainer .heading { | ||
+ | font-size: 7vw; | ||
+ | } | ||
} | } | ||
.introContainer::before { | .introContainer::before { | ||
Line 79: | Line 84: | ||
position: absolute; | position: absolute; | ||
left: 62vw; | left: 62vw; | ||
− | top: | + | top: 46vh; |
color: #FAFAFC; | color: #FAFAFC; | ||
} | } | ||
Line 87: | Line 92: | ||
.introContainer .memberDiv #memberName { | .introContainer .memberDiv #memberName { | ||
font-family: "lato-heavy"; | font-family: "lato-heavy"; | ||
− | font-size: | + | font-size: 3.25vh; |
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
.introContainer .memberDiv #memberRole { | .introContainer .memberDiv #memberRole { | ||
− | font-size: | + | font-size: 2.75vh; |
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
Line 98: | Line 103: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
− | @media (max-width: | + | @media (max-width: 520px) { |
.introContainer .memberDiv { | .introContainer .memberDiv { | ||
left: 5vw; | left: 5vw; | ||
Line 104: | Line 109: | ||
} | } | ||
.introContainer .bubbleList { | .introContainer .bubbleList { | ||
+ | margin-bottom: 32px; | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
Line 153: | Line 159: | ||
.introContainer .bubbleList span:hover { | .introContainer .bubbleList span:hover { | ||
transform: scale(1.2); | 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; | ||
} | } | ||
Revision as of 11:29, 29 July 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
flex-direction: column-reverse; justify-content: space-between;
} .introContainer .heading {
position: absolute; font-size: 6vh; top: 6vh; pointer-events: none; font-family: "ubuntu-bold";
} .introContainer .heading.other {
top: 8vh;
} @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: 60vw; height: 60vw; background-attachment: unset; overflow: hidden; font-weight: bold;
} @media (min-aspect-ratio: 1/1) {
.introContainer span { top: 7vh; width: 60vh; height: 60vh; }
} .introContainer span.novideo video {
display: none;
} .introContainer span video {
width: 100%; height: 100%; object-fit: cover;
} .introContainer button.introVideoPlay {
position: absolute; top: 52vw; left: 20vw; 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: 52vh; left: calc(50vw - 30vh); }
} .introContainer button.introVideoPlay.novideo {
display: block;
} .introContainer .memberDiv {
position: absolute; left: 62vw; top: 46vh; color: #FAFAFC;
} .introContainer .memberDiv div {
margin: 8px 0;
} .introContainer .memberDiv #memberName {
font-family: "lato-heavy"; font-size: 3.25vh; text-transform: uppercase;
} .introContainer .memberDiv #memberRole {
font-size: 2.75vh; text-transform: uppercase;
} .introContainer .memberDiv #memberFunFact {
font-size: 2.5vh; font-weight: normal;
} @media (max-width: 520px) {
.introContainer .memberDiv { left: 5vw; }
} .introContainer .bubbleList {
margin-bottom: 32px; 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: 9vh; max-height: 9vh; min-width: 9vh; min-height: 9vh; margin: 12px; transform: scale(1); transition: transform 0.3s;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleList span { width: 9vh; height: 9vh; }
} .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;
}
main {
margin-top: 0; padding-top: 50px;
}