From fd24b06bb0cc0c6ffb09060d3a55ec1522c07dc6 Mon Sep 17 00:00:00 2001 From: Ell Bradshaw Date: Sun, 29 Dec 2024 17:47:54 -0800 Subject: [PATCH] Make hamburger menu on mobile functional, update style overrides (#17) * Add Bulma javascript snippet to show/hide hamburger menu This is just copied from the docs, Bulma doesn't come with Javascript built in so we have to add it ourselves There are ways to get clever with hidden checkboxes and not require Javascript here, but this is a very Javascript-oriented project, so that would be silly * Make layout consistent with docs * Add labels in mobile menu I duplicated the icons because hiding just the text in desktop mode results in weird margins on the icon buttons, sigh. This is just kinda part of the tradeoff of using something like Bulma, and that's fine * Fix missing active/focus overrides This resulted in buttons sometimes being white which was invisible Also, this is a lot, imo because we're fighting with an opinionated styling system outside of its built-in customization channels. A cleaner way to do this would be to use the customization variables they give us, likely by upgrading to 1.0 so we don't have to deal with generating the files ourselves, but that's a whole other project --- web/scripts/bulma.js | 22 ++++++++++++++++++++++ web/styles/styles.css | 31 ++++++++++++++++++++++--------- web/templates/layout.html | 31 ++++++++++++++++++++++++++----- 3 files changed, 70 insertions(+), 14 deletions(-) create mode 100644 web/scripts/bulma.js diff --git a/web/scripts/bulma.js b/web/scripts/bulma.js new file mode 100644 index 0000000..7493325 --- /dev/null +++ b/web/scripts/bulma.js @@ -0,0 +1,22 @@ +// From https://bulma.io/documentation/components/navbar/#navbarJsExample +document.addEventListener('DOMContentLoaded', () => { + + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + + // Add a click event on each of them + $navbarBurgers.forEach( el => { + el.addEventListener('click', () => { + + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); + }); + +}); diff --git a/web/styles/styles.css b/web/styles/styles.css index 2e49c3a..2de229a 100644 --- a/web/styles/styles.css +++ b/web/styles/styles.css @@ -90,20 +90,21 @@ h6 { /* Section: Links */ -a, -a:focus, -a:hover { +a, a:focus { color: var(--link-color); text-decoration: var(--link-decoration); } -a:hover { +a:hover, a:active { color: var(--link-hover-color); text-decoration: var(--link-hover-decoration); } a.tags, -a.tags:hover { +a.tags:hover, +a.tags:active, +a.tags:focus +{ text-decoration: none; } @@ -112,7 +113,10 @@ a.button::after { content: none; } -.navbar a, .navbar a:focus, .navbar a:hover { +.navbar a, +.navbar a:focus, +.navbar a:hover, +.navbar a:active { text-decoration: none; } @@ -122,7 +126,9 @@ a.button::after { background-color: var(--color-Violet); } -.button.is-primary:hover { +.button.is-primary:hover, +.button.is-primary:active, +.button.is-primary:focus { background-color: var(--color-Aquarelle); } @@ -132,7 +138,9 @@ a.button::after { border-color: transparent; } -.button.is-alt:hover { +.button.is-alt:hover, +.button.is-alt:active, +.button.is_alt:focus { background-color: var(--color-Cupid); } @@ -179,7 +187,12 @@ body { font-size: 1.5rem; } -.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-end > a.navbar-item:hover { +.navbar.is-primary .navbar-brand > a.navbar-item:hover, +.navbar.is-primary .navbar-brand > a.navbar-item:active, +.navbar.is-primary .navbar-brand > a.navbar-item:focus, +.navbar.is-primary .navbar-menu a.navbar-item:hover, +.navbar.is-primary .navbar-menu a.navbar-item:active, +.navbar.is-primary .navbar-menu a.navbar-item:focus { background-color: var(--color-Zinnia); } diff --git a/web/templates/layout.html b/web/templates/layout.html index be33f08..ce38a67 100644 --- a/web/templates/layout.html +++ b/web/templates/layout.html @@ -6,6 +6,7 @@ Gingerbread + @@ -27,17 +28,37 @@ -
-