From 03aef063bc067bd6e020459f9bfa406572498583 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 24 Apr 2024 14:47:47 +0100 Subject: [PATCH] Add Dropdowns Rename folder from Components to Elements Clean up font sizing and weighting --- front/public/BackgroundTexture.svg | 115 ++++++++ front/public/BackgroundTextureAlt.svg | 115 ++++++++ front/src/App.svelte | 4 +- front/src/components/DropDown.svelte | 84 ++++++ front/src/pages/Page404.svelte | 12 +- front/src/pages/PageIndex.svelte | 6 +- front/src/pages/PageLoading.svelte | 2 +- front/src/pages/PageMenu.svelte | 261 ++++++++++++------ .../AnnouncementBanner.svelte | 2 +- .../{components => elements}/FooterBar.svelte | 0 .../LoadingBar.svelte | 0 .../{components => elements}/MenuItem.svelte | 7 +- .../{components => elements}/MenuList.svelte | 2 +- .../NavigationBar.svelte | 0 front/src/styles/_menu_item.scss | 3 + front/src/styles/_navigation_bar.scss | 28 +- front/src/styles/_reset.scss | 42 ++- front/src/styles/main.scss | 31 +-- front/src/styles/vars.scss | 49 ++++ 19 files changed, 628 insertions(+), 135 deletions(-) create mode 100644 front/public/BackgroundTexture.svg create mode 100644 front/public/BackgroundTextureAlt.svg create mode 100644 front/src/components/DropDown.svelte rename front/src/pages/{components => elements}/AnnouncementBanner.svelte (72%) rename front/src/pages/{components => elements}/FooterBar.svelte (100%) rename front/src/pages/{components => elements}/LoadingBar.svelte (100%) rename front/src/pages/{components => elements}/MenuItem.svelte (79%) rename front/src/pages/{components => elements}/MenuList.svelte (90%) rename front/src/pages/{components => elements}/NavigationBar.svelte (100%) create mode 100644 front/src/styles/vars.scss diff --git a/front/public/BackgroundTexture.svg b/front/public/BackgroundTexture.svg new file mode 100644 index 0000000..322d05f --- /dev/null +++ b/front/public/BackgroundTexture.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/public/BackgroundTextureAlt.svg b/front/public/BackgroundTextureAlt.svg new file mode 100644 index 0000000..2699079 --- /dev/null +++ b/front/public/BackgroundTextureAlt.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/App.svelte b/front/src/App.svelte index 7879afe..e50e864 100644 --- a/front/src/App.svelte +++ b/front/src/App.svelte @@ -2,8 +2,8 @@ import Router from 'svelte-spa-router'; import { replace } from 'svelte-spa-router'; import routes from '%/routes.js'; - import NavigationBar from "%/pages/components/NavigationBar.svelte"; - import FooterBar from "%/pages/components/FooterBar.svelte"; + import NavigationBar from "%/pages/elements/NavigationBar.svelte"; + import FooterBar from "%/pages/elements/FooterBar.svelte"; let oldLocation = undefined; let showNavBar = false; diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte new file mode 100644 index 0000000..64d329d --- /dev/null +++ b/front/src/components/DropDown.svelte @@ -0,0 +1,84 @@ + + +
+
+

{name}

+ +
+
+ +
+
+ + diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte index da22b26..a212b34 100644 --- a/front/src/pages/Page404.svelte +++ b/front/src/pages/Page404.svelte @@ -9,15 +9,19 @@

Could not find resource you've searched for. Go Back

- diff --git a/front/src/pages/components/AnnouncementBanner.svelte b/front/src/pages/elements/AnnouncementBanner.svelte similarity index 72% rename from front/src/pages/components/AnnouncementBanner.svelte rename to front/src/pages/elements/AnnouncementBanner.svelte index 11c34a2..3b4e6b9 100644 --- a/front/src/pages/components/AnnouncementBanner.svelte +++ b/front/src/pages/elements/AnnouncementBanner.svelte @@ -1,5 +1,5 @@ diff --git a/front/src/pages/components/FooterBar.svelte b/front/src/pages/elements/FooterBar.svelte similarity index 100% rename from front/src/pages/components/FooterBar.svelte rename to front/src/pages/elements/FooterBar.svelte diff --git a/front/src/pages/components/LoadingBar.svelte b/front/src/pages/elements/LoadingBar.svelte similarity index 100% rename from front/src/pages/components/LoadingBar.svelte rename to front/src/pages/elements/LoadingBar.svelte diff --git a/front/src/pages/components/MenuItem.svelte b/front/src/pages/elements/MenuItem.svelte similarity index 79% rename from front/src/pages/components/MenuItem.svelte rename to front/src/pages/elements/MenuItem.svelte index a50c392..4ae9148 100644 --- a/front/src/pages/components/MenuItem.svelte +++ b/front/src/pages/elements/MenuItem.svelte @@ -1,6 +1,6 @@ diff --git a/front/src/pages/components/NavigationBar.svelte b/front/src/pages/elements/NavigationBar.svelte similarity index 100% rename from front/src/pages/components/NavigationBar.svelte rename to front/src/pages/elements/NavigationBar.svelte diff --git a/front/src/styles/_menu_item.scss b/front/src/styles/_menu_item.scss index eb1cdc7..40c3e27 100644 --- a/front/src/styles/_menu_item.scss +++ b/front/src/styles/_menu_item.scss @@ -68,6 +68,9 @@ &.nut { background-color: $color-nut; } + &.gluten { + background-color: $color-gluten; + } &.spicy { background-color: $color-spicy; } diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss index 4928148..4df3a5e 100644 --- a/front/src/styles/_navigation_bar.scss +++ b/front/src/styles/_navigation_bar.scss @@ -1,17 +1,17 @@ nav { - padding: 1rem; + padding: $spacing-normal; width: 100%; height: $sizing-navigation-height; display: flex; flex-direction: row; + justify-content: center; + align-items: center; position: fixed; top: 0; left: 0; - justify-content: center; - align-items: center; border-bottom: 2px solid $color-primary; background-color: $color-dark; @@ -20,13 +20,21 @@ nav { z-index: 9999999; ul { - width: 300px; padding: 0; - margin: 0; + + width: 300px; + display: flex; + flex-direction: row; + align-items: center; + list-style: none; + li { - margin: 0 1rem; + padding: 0 $spacing-small; + + font-weight: $font-weight-normal; + font-size: $font-size-h6; a { text-decoration: none; @@ -40,12 +48,12 @@ nav { } span { - margin: 0 1rem; - font-weight: bolder; - font-size: 25px; + padding: 0 $spacing-normal; + font-weight: $font-weight-black; + font-size: $font-size-h1; } &.scrolled { - //box-shadow: 0 0 10px 1px $color-dark; + //box-shadow: 0 0 15px 1px $color-background; } } \ No newline at end of file diff --git a/front/src/styles/_reset.scss b/front/src/styles/_reset.scss index 1565c2c..5445e6b 100644 --- a/front/src/styles/_reset.scss +++ b/front/src/styles/_reset.scss @@ -1,10 +1,14 @@ *, *::before, *::after { box-sizing: border-box; - font-family: 'Erode', serif; - font-weight: 600; margin: 0; } +html { + font-size: 100%; + font-weight: $font-weight-normal; + font-family: $font-family; +} + body, #app { min-height: 100vh; display: flex; @@ -16,6 +20,40 @@ body { color: $color-on-background; } +h1 { + font-size: $font-size-h1; + font-weight: $font-weight-bolder; +} +h2 { + font-size: $font-size-h2; + font-weight: $font-weight-bold; +} +h3 { + font-size: $font-size-h3; + font-weight: $font-weight-normal; +} +h4 { + font-size: $font-size-h4; + font-weight: $font-weight-normal; +} +h5 { + font-size: $font-size-h5; + font-weight: $font-weight-normal; +} +h6 { + font-size: $font-size-h6; + font-weight: $font-weight-normal; +} +p { + font-size: $font-size-p; + font-weight: $font-weight-normal; +} +small { + font-size: $font-size-small; + font-weight: $font-weight-thin; +} + + main { margin-left: auto; margin-right: auto; diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss index c0fd3da..026e9fb 100644 --- a/front/src/styles/main.scss +++ b/front/src/styles/main.scss @@ -1,33 +1,4 @@ -// COLORS -$color-background: #e8e1ce; // #ccc2ae; -$color-on-background: #33251a; -$color-dark: #443023; -$color-on-dark: #e1dcd3; -$color-light: #fffbf4; -$color-on-light: #33251a; -$color-primary: #6A9343; -$color-on-primary: #fffbf4; - -$color-vegan: #75a446; -$color-fish: #487fa6; -$color-nut: #5c4130; -$color-spicy: #c75e32; - -// BORDERS -$border-radius-normal: 5px; -$border-radius-large: 10px; -$border-radius-circle: 99999px; - -// SIZING -$sizing-default-width: 1000px; -$sizing-full-width: 1200px; -$sizing-navigation-height: 55px; - -// PADDING/MARGIN -$spacing-small: 14px; -$spacing-normal: 16px; -$spacing-large: 24px; - +@import "vars"; @import "reset"; @import "loading_bar"; diff --git a/front/src/styles/vars.scss b/front/src/styles/vars.scss new file mode 100644 index 0000000..c0c3777 --- /dev/null +++ b/front/src/styles/vars.scss @@ -0,0 +1,49 @@ +// COLORS +$color-background: #e8e1ce; // #ccc2ae; +$color-on-background: #33251a; +$color-dark: #443023; +$color-on-dark: #e1dcd3; +$color-light: #fffbf4; +$color-on-light: #33251a; +$color-primary: #6A9343; +$color-on-primary: #fffbf4; + +$color-vegan: #75a446; +$color-fish: #487fa6; +$color-nut: #5c4130; +$color-spicy: #c75e32; +$color-gluten: #8c6b49; + +// BORDERS +$border-radius-normal: 5px; +$border-radius-large: 10px; +$border-radius-circle: 99999px; + +// GAP SIZING +$sizing-default-width: 1000px; +$sizing-full-width: 1200px; +$sizing-navigation-height: 55px; + +// PADDING/MARGIN +$spacing-small: 14px; +$spacing-normal: 16px; +$spacing-large: 24px; + +// FONT +$font-family: 'Erode', serif; + +$font-size-h1: 32.44px; +$font-size-h2: 28.83px; +$font-size-h3: 25.63px; +$font-size-h4: 22.78px; +$font-size-h5: 20.25px; +$font-size-h6: 18px; +$font-size-p: 16px; +$font-size-small: 14.22px; +$font-size-xsmall: 12.64px; + +$font-weight-thin: 400; +$font-weight-normal: 500; +$font-weight-bold: 600; +$font-weight-bolder: 700; +$font-weight-black: 800;