From 27d422ddb82f2ea83e155e9c1def628990aa9ef8 Mon Sep 17 00:00:00 2001 From: Curt Rabinak Date: Wed, 10 Apr 2024 00:01:13 -0500 Subject: [PATCH 01/12] Converted theme.scss and variables.scss to theme.css --- beam/dev/Dev.vue | 3 +- beam/dev/_variables.scss | 6 -- beam/dev/theme.css | 1 + beam/dev/theme.scss | 2 - .../{_beam-primary.scss => _beam-primary.css} | 58 ++++++++++++------- 5 files changed, 38 insertions(+), 32 deletions(-) delete mode 100644 beam/dev/_variables.scss create mode 100644 beam/dev/theme.css delete mode 100644 beam/dev/theme.scss rename beam/themes/{_beam-primary.scss => _beam-primary.css} (70%) diff --git a/beam/dev/Dev.vue b/beam/dev/Dev.vue index 6cc3d8c5..b969201d 100644 --- a/beam/dev/Dev.vue +++ b/beam/dev/Dev.vue @@ -222,6 +222,7 @@ export default { } diff --git a/beam/dev/_variables.scss b/beam/dev/_variables.scss deleted file mode 100644 index 467a5edd..00000000 --- a/beam/dev/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -$brand-primary: #827553 !default; -$brand-secondary: #827553 !default; -$brand-danger: #e63c28 !default; -$brand-success: #3c5014 !default; -$brand-dark: #3a3c41 !default; -$font-family: 'Roboto', 'sans-serif'; diff --git a/beam/dev/theme.css b/beam/dev/theme.css new file mode 100644 index 00000000..e8b6a565 --- /dev/null +++ b/beam/dev/theme.css @@ -0,0 +1 @@ +@import url('./../themes/_beam-primary.css'); diff --git a/beam/dev/theme.scss b/beam/dev/theme.scss deleted file mode 100644 index fbb574eb..00000000 --- a/beam/dev/theme.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './../themes/_beam-primary.scss'; -@import './_variables.scss'; diff --git a/beam/themes/_beam-primary.scss b/beam/themes/_beam-primary.css similarity index 70% rename from beam/themes/_beam-primary.scss rename to beam/themes/_beam-primary.css index bd5295c8..c91959c8 100644 --- a/beam/themes/_beam-primary.scss +++ b/beam/themes/_beam-primary.css @@ -1,3 +1,20 @@ +/* Font import */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto&display=swap'); + +/* Variables */ +:root { + --brand-primary: #827553; + --brand-secondary: #827553; + --brand-danger: #e63c28; + --brand-success: #3c5014; + --brand-dark: #3a3c41; + --font-family: 'Roboto', 'sans-serif'; +} +body { + font-family: var(--font-family); +} + +/* Style */ .beam__listview { list-style-type: none; padding-left: 0; @@ -12,7 +29,7 @@ outline: 2px solid transparent; margin-left: 1ch; margin-right: 1ch; - border-bottom: 2px solid $brand-dark; + border-bottom: 2px solid var(--brand-dark); max-width: 100%; box-sizing: border-box; display: flex; @@ -42,7 +59,7 @@ .beam__listitem:focus { border-bottom: 2px solid transparent; - outline: 2px solid $brand-primary; + outline: 2px solid var(--brand-primary); } .beam__itemcount { @@ -56,21 +73,18 @@ outline: none; } -.beam__item_check { -} - .beam__listanchor { text-decoration: none; outline: none; - color: $brand-dark; + color: var(--brand-dark); } .beam__navbar { - background-color: $brand-dark; + background-color: var(--brand-dark); margin-left: 0; min-height: 4em; max-height: 4em; - color: $brand-primary; + color: var(--brand-primary); display: flex; flex-flow: row nowrap; align-content: center; @@ -89,7 +103,7 @@ } .home-icon:hover { - border: 1px solid $brand-primary; + border: 1px solid var(--brand-primary); } .nav-title { @@ -100,7 +114,7 @@ text-align: center; } .nav-title:hover { - border: 1px solid $brand-primary; + border: 1px solid var(--brand-primary); } .navbar-action-wrapper { max-width: 33%; @@ -114,26 +128,26 @@ min-height: 2.2em; padding-left: 1ch; padding-right: 1ch; - border: 1px solid $brand-primary; - color: $brand-dark; - background-color: $brand-primary; - outline: 2px solid $brand-dark; + border: 1px solid var(--brand-primary); + color: var(--brand-dark); + background-color: var(--brand-primary); + outline: 2px solid var(--brand-dark); transition: outline-offset 200ms ease; } .navbar-action:hover, .navbar-action:active { - outline: 2px solid $brand-dark; + outline: 2px solid var(--brand-dark); outline-offset: -4px; transition: outline-offset 200ms ease; } } .beam__actionfooter { - background-color: $brand-primary; + background-color: var(--brand-primary); margin-left: 0; min-height: 3em; max-height: 3em; - color: $brand-dark; + color: var(--brand-dark); position: fixed; bottom: 0; left: 0; @@ -160,16 +174,16 @@ min-height: 2.2em; padding-left: 1ch; padding-right: 1ch; - border: 1px solid $brand-dark; - color: $brand-primary; - background-color: $brand-dark; - outline: 2px solid $brand-primary; + border: 1px solid var(--brand-dark); + color: var(--brand-primary); + background-color: var(--brand-dark); + outline: 2px solid var(--brand-primary); transition: outline-offset 200ms ease; } .footer-action:hover, .footer-action:active { - outline: 2px solid $brand-primary; + outline: 2px solid var(--brand-primary); outline-offset: -4px; transition: outline-offset 200ms ease; } From d2627efe2ae9de9bccb11afd204c622b4afe14bf Mon Sep 17 00:00:00 2001 From: Curt Rabinak Date: Wed, 10 Apr 2024 08:52:12 -0500 Subject: [PATCH 02/12] updated variable usage --- beam/themes/_beam-primary.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/beam/themes/_beam-primary.css b/beam/themes/_beam-primary.css index c91959c8..10d23423 100644 --- a/beam/themes/_beam-primary.css +++ b/beam/themes/_beam-primary.css @@ -1,5 +1,10 @@ -/* Font import */ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto&display=swap'); +/* Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap'); + +/* General Sizing */ +html { + font-size: 62.5%; /*1 rem = 10px; 10px/16px = 62.5%*/ +} /* Variables */ :root { @@ -8,7 +13,7 @@ --brand-danger: #e63c28; --brand-success: #3c5014; --brand-dark: #3a3c41; - --font-family: 'Roboto', 'sans-serif'; + --font-family: 'Arimo', 'sans-serif'; } body { font-family: var(--font-family); @@ -80,7 +85,8 @@ body { } .beam__navbar { - background-color: var(--brand-dark); + padding: 1rem; + background-color: white; margin-left: 0; min-height: 4em; max-height: 4em; @@ -90,11 +96,11 @@ body { align-content: center; justify-content: space-between; align-items: center; - padding-left: 1ch; - padding-right: 1ch; + /* padding-left: 1ch; + padding-right: 1ch; */ .home-icon { - font-size: 200%; + font-size: 3rem; border: 1px solid transparent; margin-top: -0.3em; max-width: 33%; From b298053ef900d599e449421c4c62ea66439e62d8 Mon Sep 17 00:00:00 2001 From: Curt Rabinak Date: Wed, 10 Apr 2024 23:29:19 -0500 Subject: [PATCH 03/12] added/refactored styling for navbar and footer --- beam/dev/Dev.vue | 2 +- beam/src/ActionFooter.vue | 2 +- beam/src/Navbar.vue | 2 +- beam/themes/_beam-primary.css | 142 ++++++++++++++++++++-------------- 4 files changed, 87 insertions(+), 61 deletions(-) diff --git a/beam/dev/Dev.vue b/beam/dev/Dev.vue index b969201d..a5fca024 100644 --- a/beam/dev/Dev.vue +++ b/beam/dev/Dev.vue @@ -4,7 +4,7 @@ - + diff --git a/beam/src/ActionFooter.vue b/beam/src/ActionFooter.vue index a0cd4279..8a30b3a5 100644 --- a/beam/src/ActionFooter.vue +++ b/beam/src/ActionFooter.vue @@ -1,7 +1,7 @@