From 0d6d2e07ed68ff7d22c32802746c324df7864aa2 Mon Sep 17 00:00:00 2001 From: Evan <38150833+beigebeats@users.noreply.github.com> Date: Wed, 22 Nov 2023 23:21:06 -0800 Subject: Complete Overhaul --- styles.css | 117 ++++++++++++++++++++++++++++--------------------------------- 1 file changed, 53 insertions(+), 64 deletions(-) (limited to 'styles.css') diff --git a/styles.css b/styles.css index 0fa1300..9fbff72 100644 --- a/styles.css +++ b/styles.css @@ -1,75 +1,64 @@ -/* Simple Reset */ +/* Grey */ +/* Tan */ +/* Rust */ +/* Teal */ +/* Muted Green */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0px; + padding: 0px; + box-sizing: border-box; + background-size: cover; + background-repeat: no-repeat; + font-family: sans-serif; } -/* Basic Styling */ -body { - font-family: 'Helvetica', sans-serif; - background-color: #fff; - color: #000; - line-height: 1.4; +.landing-page { + height: 100vh; + width: 100%; + background-color: #DDD1C7; } - -.container { - max-width: 400px; - margin: 50px auto; - padding: 20px; - text-align: center; +.landing-page .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; } - -header h1 { - font-size: 2em; - margin-bottom: 0.5em; +.landing-page .menu-container .menu-wrapper { + list-style: none; } - -header p { - font-size: 1.2em; - color: #000; - margin-bottom: 2em; +.landing-page .menu-container .menu-wrapper li { + margin: 10px 0; + display: flex; + justify-content: left; } - -/* Responsive Design */ -@media (max-width: 400px) { - .container { - width: 100%; - margin: 20px auto; - padding: 10px; - } +.landing-page .menu-container .menu-wrapper li a { + text-decoration: none; + letter-spacing: 5px; + font-weight: 700; + font-size: 15vmin; + color: rgba(255, 255, 255, 0); + -webkit-text-stroke: 1.4px #353535; + transition-duration: 200ms; } - -.button { - display: inline-block; - padding: 10px 30px; - font-size: 18px; - cursor: pointer; - background-color: #000; /* Dark grey for OLED efficiency */ - color: #fff; - border: none; - border-radius: 50px; /* High border-radius for pill shape */ - transition: background-color 0.3s; +.landing-page .menu-container .menu-wrapper li a:hover { + color: #353535; + -webkit-text-stroke: 0px #353535; } - -.button:hover { - background-color: #333333; /* Slightly lighter grey for hover state */ +.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); } -.menu-option { - margin-bottom: 20px; -} - -.menu-option a { - text-decoration: none; - color: #fff; - display: flex; - align-items: center; - justify-content: center; -} - -.menu-option svg.logo { - width: 50px; - height: 50px; - margin-right: 40px; -} +/*# sourceMappingURL=styles.css.map */ -- cgit v1.2.3