diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index 2ba986f..0000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "url": "http://localhost:8080", - "webRoot": "${workspaceFolder}" - } - ] -} \ No newline at end of file diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 5b2120b..6f9f57f 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -1,9 +1,7 @@ -/* Font Import */ - +/* Font Import */ @import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap'); - /* Reset / Normalize */ *, *::before, @@ -15,43 +13,54 @@ /* Colors + Main Font */ :root { + --max-width: 1200px; + --padding: 1.5rem; + + --tomato: #D44B24; --tomato-dark: #D44B24; --olive: #6B6B05; --olive-dark: #5C5C05; - --olive-light: #E5E1B7; - --butter: #FFFBD1; - --butter-light: #FFFDE3; + --olive-light: #C8CC7A; + --butter: #F5F1BC; + --butter-light: #F7F6E6; --white: #ffffff; - --black: #221C1A; + --black: #22211A; --brown: #66340d; + --blue: #3489DA; + --blue-dark: #1D70BF; + --error: #FF3B30; --font-main: 'Jost', sans-serif; - --font-size-base: 16px; + --font-size-base: 1rem; -/* Spacing Scale */ - --space-1: 8px; - --space-2: 12px; - --space-3: 16px; - --space-4: 20px; - --space-5: 24px; - --space-6: 32px; + /* Spacing Scale */ + --space-1: 0.5rem; + --space-2: 0.75rem; + --space-3: 1rem; + --space-4: 1.25rem; + --space-5: 1.5rem; + --space-6: 2rem; + --space-7: 3rem; + --space-8: 4rem; -/* Radius Scale */ - --radius-pill: 999px; - --radius-md: 20px; - --radius-lg: 30px; -/* Letter Spacing Scale */ + /* Radius Scale */ + --radius-pill: 62.4375rem; + --radius-sm: 0.5rem; + --radius-md: 1.5rem; + --radius-lg: 1.875rem; + + /* Letter Spacing */ --ls-none: 0; - --ls-ui: 0.03em; - --ls-label: 0.045em; + --ls-sm: 2.5%; + --ls-label: 0.045rem; } /* Base Styles */ body { font-family: var(--font-main); - font-size: 1.125em; + font-size: 1.125rem; line-height: 1.5; color: var(--black); background-color: var(--butter); @@ -66,96 +75,139 @@ img { h1, h2 { font-family: 'Bagel Fat One'; - margin-bottom: 0.5em; +} + +h1 { + font-size: 2em; + font-weight: 600; + line-height: 120%; + letter-spacing: var(--ls-sm); + color: var(--brown); } p { font-family: 'Jost', sans-serif; - margin-bottom: 1em; + margin-bottom: 1rem; } /* Layout */ + +.main-content { + margin-top: var(--space-8); + +} + .container { width: 90%; - max-width: 1200px; + max-width: 75rem; margin: 0 auto; } /* Top Navigation */ .top-nav-wrap { - background: var(--butter); - padding: 6px 12px; + position: sticky; + height: 58px; + top: 1rem; + z-index: 1000; + background: none; + padding: 0 1rem; } .top-nav { - background: rgba(255, 255, 255, 0.95); + background: var(--white); + /*backdrop-filter: blur(3px) saturate(140%); + -webkit-backdrop-filter: blur(3px) saturate(140%);*/ + border-radius: var(--radius-lg); - box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); + box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1); display: flex; justify-content: space-between; align-items: center; - min-height: 58px; - padding: 3px 9px 3px var(--space-5); + min-height: 3.625rem; + padding: 0.1875rem 0.5625rem 0.1875rem var(--space-5); max-width: none; width: 100%; box-sizing: border-box; - margin: 0 auto; } .brand { display: inline-flex; align-items: center; - height: 50px; + height: 3.125rem; text-decoration: none; } .brand img { width: auto; height: 100%; - max-width: 104px; + max-width: 6.5rem; display: block; } -.top-nav-links { +.button-small-links { display: flex; align-items: center; - gap: 16px; - + gap: var(--space-1); } -.nav-link { + +/* Buttons */ +.button { + display: inline-block; + padding: 0.5rem 1.25rem; + background-color: var(--olive); + border: none; + border-radius: var(--radius-lg); + font-family: 'Jost', sans-serif; + font-weight: 400; + font-size: 1.25rem; + color: var(--butter-light); + cursor: pointer; +} + +.button:hover { + background-color: var(--olive-dark); +} + +.button-small { color: var(--black); - line-height: 1.3; + font-size: 1.125rem; + font-weight: 500; + letter-spacing: var(--ls-sm); + line-height: 1; text-decoration: none; + padding: var(--space-1) var(--space-4); border-radius: var(--radius-md); - border-width: 2px; - border-color: none; - border-radius: 20px } -.nav-link:hover, -.nav-link:focus-visible { +.button-small:hover, .button-small:active, +.button-small:focus-visible { background: var(--olive-light); color: var(--black); } -.login-pill { + +.button-login { background: var(--olive); - border-radius: var(--radius-md); - color: var(--butter); - line-height: 1.3; - padding: var(--space-1) var(--space-4); + color: var(--butter-light); + font-size: 1.125rem; + font-weight: 500; + letter-spacing: var(--ls-sm); + line-height: 1; text-decoration: none; + + padding: var(--space-1) var(--space-4); + border-radius: var(--radius-md); } .profile-pill { - width: 38px; - height: 38px; - border-radius: 19px; + width: 2.375rem; + height: 2.375rem; + border-radius: 1.1875rem; background: var(--tomato); color: var(--butter); - font-size: 17px; + font-size: 1.0625rem; font-weight: 500; letter-spacing: var(--ls-ui); line-height: 1.3; @@ -165,30 +217,6 @@ p { text-decoration: none; } -/* Components */ -.button { - display: inline-block; - padding: 0.5em 1.25em; - background-color: var(--olive-color); - font-family: 'Jost', sans-serif; - font-size: 1em; - color: var(--butter-light); - border: none; - border-radius: 2em; - cursor: pointer; - -} - -.button:hover { - background-color: var(--olive-dark); -} - -/* Navigation */ -.nav { - display: flex; - gap: 1rem; -} - /* Utilities */ .text-center { text-align: left; @@ -199,7 +227,7 @@ p { } /* Media Queries (Responsive) */ -@media (max-width: 768px) { +@media (max-width: 48rem) { .container { width: 95%; }