m |
|||
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
body, html { | body, html { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
color: #222222; | color: #222222; | ||
− | font-family: "lato- | + | font-family: "lato-regular"; |
} | } | ||
Line 95: | Line 87: | ||
width: 100%; | width: 100%; | ||
background-color: #FAFAFC; | background-color: #FAFAFC; | ||
− | z-index: | + | z-index: 10; |
position: relative; | position: relative; | ||
padding-bottom: 50px; | padding-bottom: 50px; | ||
Line 125: | Line 117: | ||
.indexbutton { | .indexbutton { | ||
display: block; | display: block; | ||
− | z-index: | + | z-index: 21; |
} | } | ||
} | } | ||
Line 186: | Line 178: | ||
float: unset; | float: unset; | ||
margin: 0; | margin: 0; | ||
− | z-index: | + | z-index: 20; |
min-width: 300px; | min-width: 300px; | ||
text-align: center; | text-align: center; |
Revision as of 11:15, 23 July 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
} h1.larger, h2.larger, h3.larger, h4.larger, h5.larger, 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 h1 {
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 h1 { left: unset; }
} @media (min-aspect-ratio: 1/1) {
.introContainer h1 { font-size: 7vw; }
} .introContainer h1.other {
top: 22vh; left: 12vw; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FAFAFC;
} @media (max-width: 480px) {
.introContainer h1.other { top: 21vh; left: unset; }
} .introContainer::before {
z-index: 2; position: absolute; width: 100%; height: 100vh; content: ""; pointer-events: none; background-image: url(../assets/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 {
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: black;
} @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;
} @media (max-width: 800px) {
.content { margin: 0; box-shadow: unset; }
} .content *:first-child {
margin-top: 0;
}