m |
m |
||
Line 6: | Line 6: | ||
} | } | ||
− | h1, h2, h3, h4, h5, h6 { | + | .igem_column_wrapper > p { |
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | main { | ||
+ | font-size: initial; | ||
+ | } | ||
+ | |||
+ | div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 { | ||
font-weight: 800; | font-weight: 800; | ||
+ | margin-bottom: 0.83em; | ||
+ | margin-top: 1em; | ||
} | } | ||
− | h1.larger, h2.larger, h3.larger, h4.larger, h5.larger, h6.larger { | + | div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger { |
font-size: 2rem; | font-size: 2rem; | ||
} | } | ||
Line 137: | Line 147: | ||
} | } | ||
.index ul { | .index ul { | ||
+ | margin: 1em 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
Line 166: | Line 177: | ||
.index li a { | .index li a { | ||
text-decoration: none; | text-decoration: none; | ||
− | color: | + | color: #121212; |
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
Line 218: | Line 229: | ||
border-radius: 16px; | border-radius: 16px; | ||
box-shadow: 0 0 10px lightgray; | box-shadow: 0 0 10px lightgray; | ||
+ | color: #121212; | ||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { |
Revision as of 08:39, 24 July 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.igem_column_wrapper > p {
margin: 0;
}
main {
font-size: initial;
}
div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 {
font-weight: 800; margin-bottom: 0.83em; margin-top: 1em;
} div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger {
font-size: 2rem;
}
.introContainer {
width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #121212;
} .introContainer span {
width: 80vw; height: 80vw; border-radius: 40vw; position: relative; background-size: cover; background-position: center; background-attachment: fixed;
} @media (min-aspect-ratio: 1/1) {
.introContainer span { width: 80vh; height: 80vh; }
} .introContainer .heading {
z-index: 3; position: fixed; font-size: 7vh; top: 20vh; left: 10vw; color: #FAFAFC; text-transform: uppercase; font-family: "lato-heavy";
} @media (max-width: 480px) {
.introContainer .heading { left: unset; }
} @media (min-aspect-ratio: 1/1) {
.introContainer .heading { font-size: 7vw; }
} .introContainer .heading.other {
top: 22vh; left: 12vw; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FAFAFC;
} @media (max-width: 480px) {
.introContainer .heading.other { top: 21vh; left: unset; }
} .introContainer::before {
z-index: 2; position: absolute; width: 100%; height: 100vh; content: ""; pointer-events: none; background-image: url(https://static.igem.org/mediawiki/2020/d/db/T--Vilnius-Lithuania--milk1.svg); background-size: cover; background-position: bottom; background-origin: border-box; border-bottom: 2px solid #FAFAFC;
}
main {
margin-top: -5px; width: 100%; background-color: #FAFAFC; z-index: 10; position: relative; padding-bottom: 50px; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly;
} main::after {
content: ""; clear: both; display: table;
}
.indexbutton {
display: none; position: fixed; bottom: 0px; color: #FAFAFC; border-radius: 64px 64px 0 0; text-transform: capitalize; font-size: 1.5rem; font-weight: bold; padding: 24px 24px 8px; cursor: pointer; background-color: #6281EF;
} @media (max-width: 800px) {
.indexbutton { display: block; z-index: 21; }
}
.index {
text-transform: uppercase; float: left; margin-left: 10vw; position: -webkit-sticky; position: sticky; top: 100px; margin: 64px; min-width: 220px;
} .index b {
font-size: 1.5em; font-weight: bold; margin-left: 0.25em;
} .index ul {
margin: 1em 0; padding: 0;
} .index li {
margin: 24px; list-style: none;
} .index li:last-child {
margin-bottom: 0;
} .index li::before {
width: 0.5em; height: 0.5em; content: " "; margin-left: -1em; margin-right: 0.5em; box-sizing: border-box; position: relative; bottom: 2px; display: inline-block; border: 1px solid; color: #2E64EC; border-radius: 1em; transition: 0.5s;
} .index li.active::before {
background-color: #2E64EC;
} .index li a {
text-decoration: none; color: #121212;
} @media (max-width: 800px) {
.index { position: fixed; bottom: -100vh; padding: 64px 64px 0; border-radius: 1000px 1000px 0 0; background-color: #6281EF; color: #FAFAFC; float: unset; margin: 0; z-index: 20; min-width: 300px; text-align: center; transition: 0.5s; top: unset; } .index b { display: block; margin-right: 1em; } .index ul { display: inline-block; text-align: start; margin-top: 0; margin-bottom: 60px; } .index li { font-weight: bold; } .index li::before { color: #FAFAFC; } .index li.active::before { background-color: #FAFAFC; } .index li a { color: #FAFAFC; } .index.open { bottom: 0px; }
}
.content {
max-width: 700px; margin-right: 10vw; float: right; padding: 40px; border-radius: 16px; box-shadow: 0 0 10px lightgray; color: #121212;
} @media (max-width: 800px) {
.content { margin: 0; box-shadow: unset; }
} .content *:first-child {
margin-top: 0;
}