From 59a283ac82fb89452ff55e85244617ca6e87745d Mon Sep 17 00:00:00 2001 From: Evan <38150833+beigebeats@users.noreply.github.com> Date: Sun, 10 Dec 2023 20:45:19 -0800 Subject: Massive Refactor --- index.html | 24 ++++++----- styles.css | 108 +++++++++++++++++++++++++++++++--------------- styles.scss | 139 +++++++++++++++++++++++++++++++++++------------------------- 3 files changed, 169 insertions(+), 102 deletions(-) diff --git a/index.html b/index.html index 5649850..ee24571 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,22 @@ - Evan Cohen's Digital Business Card + QR Code Menu + + + + -
-
- -
-
+
+ +
diff --git a/styles.css b/styles.css index c755b81..d30dbc2 100644 --- a/styles.css +++ b/styles.css @@ -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 */ diff --git a/styles.scss b/styles.scss index 3aea8fe..de1b44e 100644 --- a/styles.scss +++ b/styles.scss @@ -1,13 +1,13 @@ -$primary-color: #353535; /* Grey */ -$secondary-color: #DDD1C7; /* Tan */ -$accent-color-1: #AD5D4E; /* Rust */ -$accent-color-2: #18A999; /* Teal */ -$accent-color-3: #6A9170; /* Muted Green */ +//Colors +$foreground-color: #27327b; +$background-color: #e6e6e6; +$primary-color: #3eadad; +$secondary-color: #487143; +$accent-color: #cfab28; -$dark-grey: #1c1b20; - - -$sans-serif-font: 'Helvetica'; +// Fonts +$sans-serif-font: 'Josefin Sans'; +$serif-font: 'Josefin Slab'; //GLOBAL STYLES @@ -18,11 +18,36 @@ $sans-serif-font: 'Helvetica'; background-size: cover; background-repeat: no-repeat; - background-color: $secondary-color; + background-color: $background-color; +} + + +body { + font-family: $serif-font; + font-weight: 400; + color: $foreground-color; +} - font-family: sans-serif; +a { + font-family: $sans-serif-font; + font-weight: 400; + color: $foreground-color; } +h1, h2, h3, h4, h5 { + font-family: $sans-serif-font; + font-weight: 700; + color: $foreground-color; +} + +html {font-size: 100%;} /* 16px */ +h1 {font-size: 4.210rem; /* 67.36px */} +h2 {font-size: 3.158rem; /* 50.56px */} +h3 {font-size: 2.369rem; /* 37.92px */} +h4 {font-size: 1.777rem; /* 28.48px */} +h5 {font-size: 1.333rem; /* 21.28px */} +small {font-size: 0.750rem; /* 12px */} + //MIXIN @mixin flexcenter { display: flex; @@ -30,57 +55,57 @@ $sans-serif-font: 'Helvetica'; align-items: center; } +// Animation +@keyframes reveal { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + //MAIN CSS -.landing-page { - //overflow-x: hidden; +.menu-container { + position: fixed; + top: 0; + left: 0; height: 100vh; width: 100%; - background-color: $secondary-color; - - .menu-container { - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 100%; - z-index: 5; - opacity: 1; - transition: opacity 1500ms; - @include flexcenter(); - - .menu-wrapper { - list-style: none; - - li { - margin: 0.5vmin 0; - display: flex; - justify-content: left; - - a { - text-decoration: none; - font-weight: 700; - font-size: 15vmin; - color: rgba(255, 255, 255, 0); - -webkit-text-stroke: 0.12vmin $primary-color; - transition-duration: 200ms; - - &:hover { - color: $primary-color; - -webkit-text-stroke: 0px $primary-color; - } - } - - span { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + @include flexcenter(); - font-size: 68vmin; - font-weight: 900; - color: rgba(0, 0, 0, 0.2); - } + .menu-wrapper { + list-style: none; + + li { + margin: 0.5vmin 0; + display: flex; + justify-content: left; + opacity: 0; // Start items as invisible + animation: reveal 1s ease-out forwards; + + &:nth-child(1) { + animation-delay: 0.15s; // Delay for the first item + } + &:nth-child(2) { + animation-delay: 0.3s; // Delay for the second item + } + &:nth-child(3) { + animation-delay: 0.45s; // Delay for the third item + } + &:nth-child(4) { + animation-delay: 0.6s; // Delay for the fourth item + } + + a { + text-decoration: none; + font-weight: 700; + font-size: 15vmin; + color: $foreground-color; // Assuming you want to use your color variable } } } } + -- cgit v1.2.3