diff options
Diffstat (limited to 'styles.css')
| -rw-r--r-- | styles.css | 108 |
1 files changed, 74 insertions, 34 deletions
@@ -1,64 +1,104 @@ -/* Grey */ -/* Tan */ -/* Rust */ -/* Teal */ -/* Muted Green */ * { margin: 0px; padding: 0px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; - background-color: #DDD1C7; - font-family: sans-serif; + background-color: #e6e6e6; } -.landing-page { - height: 100vh; - width: 100%; - background-color: #DDD1C7; +body { + font-family: "Josefin Slab"; + font-weight: 400; + color: #27327b; +} + +a { + font-family: "Josefin Sans"; + font-weight: 400; + color: #27327b; +} + +h1, h2, h3, h4, h5 { + font-family: "Josefin Sans"; + font-weight: 700; + color: #27327b; +} + +html { + font-size: 100%; +} /* 16px */ +h1 { + font-size: 4.21rem; /* 67.36px */ +} + +h2 { + font-size: 3.158rem; /* 50.56px */ +} + +h3 { + font-size: 2.369rem; /* 37.92px */ } -.landing-page .menu-container { + +h4 { + font-size: 1.777rem; /* 28.48px */ +} + +h5 { + font-size: 1.333rem; /* 21.28px */ +} + +small { + font-size: 0.75rem; /* 12px */ +} + +@keyframes reveal { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +.menu-container { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; - z-index: 5; - opacity: 1; - transition: opacity 1500ms; display: flex; justify-content: center; align-items: center; } -.landing-page .menu-container .menu-wrapper { +.menu-container .menu-wrapper { list-style: none; } -.landing-page .menu-container .menu-wrapper li { +.menu-container .menu-wrapper li { margin: 0.5vmin 0; display: flex; justify-content: left; + opacity: 0; + animation: reveal 1s ease-out forwards; +} +.menu-container .menu-wrapper li:nth-child(1) { + animation-delay: 0.15s; +} +.menu-container .menu-wrapper li:nth-child(2) { + animation-delay: 0.3s; +} +.menu-container .menu-wrapper li:nth-child(3) { + animation-delay: 0.45s; +} +.menu-container .menu-wrapper li:nth-child(4) { + animation-delay: 0.6s; } -.landing-page .menu-container .menu-wrapper li a { +.menu-container .menu-wrapper li a { text-decoration: none; font-weight: 700; font-size: 15vmin; - color: rgba(255, 255, 255, 0); - -webkit-text-stroke: 0.12vmin #353535; - transition-duration: 200ms; -} -.landing-page .menu-container .menu-wrapper li a:hover { - color: #353535; - -webkit-text-stroke: 0px #353535; -} -.landing-page .menu-container .menu-wrapper li span { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 68vmin; - font-weight: 900; - color: rgba(0, 0, 0, 0.2); + color: #27327b; } /*# sourceMappingURL=styles.css.map */ |
