m |
m |
||
Line 57: | Line 57: | ||
border: unset; | border: unset; | ||
display: none; | display: none; | ||
− | background-image: url(../ | + | background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg"); |
background-size: 50% 50%; | background-size: 50% 50%; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; |
Revision as of 11:32, 23 July 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
flex-direction: column-reverse; justify-content: space-between;
} .introContainer h1 {
position: absolute; text-align: end; top: 10vh; pointer-events: none;
} .introContainer h1.other {
top: 12vh;
} .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: 60vw; top: 40vh; color: #FAFAFC;
} .introContainer .memberDiv h2, .introContainer .memberDiv h3, .introContainer .memberDiv h4 {
margin: 8px 0;
} .introContainer .memberDiv h2 {
font-size: 1.8em; text-transform: uppercase;
} .introContainer .memberDiv h3 {
font-size: 1.5em; font-weight: normal; text-transform: uppercase;
} .introContainer .memberDiv h4 {
font-size: 1.5em; font-weight: normal;
} @media (max-width: 480px) {
.introContainer .memberDiv { left: 5vw; }
} .introContainer .bubbleList {
width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap;
} .introContainer .bubbleList span {
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background-color: #6281EF; border-radius: 10vw; position: static; width: 7vh; height: 7vh; margin: 12px; transform: scale(1); transition: transform 0.3s;
} @media (min-aspect-ratio: 1/1) {
.introContainer .bubbleList span { width: 7vw; height: 7vw; }
} .introContainer .bubbleList span:hover {
transform: scale(1.2);
}
main {
margin-top: 0; padding-top: 50px;
}