From efaec51f2386a0e56fd7a49630b81a75518b9da5 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 14 Feb 2024 07:37:10 +0100 Subject: [PATCH 1/7] prepare for optional menu drawer --- src/_data/meta.js | 11 +- src/_includes/components/burger-template.njk | 16 +++ src/assets/css/blocks/site-nav-drawer.css | 117 +++++++++++++++++++ src/assets/scripts/menu-drawer.js | 34 ++++++ 4 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 src/_includes/components/burger-template.njk create mode 100644 src/assets/css/blocks/site-nav-drawer.css create mode 100644 src/assets/scripts/menu-drawer.js diff --git a/src/_data/meta.js b/src/_data/meta.js index 2db8322..66c4b2c 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -30,7 +30,13 @@ module.exports = { description: 'Tell the word what you are writing about in your blog. It will show up on feed readers.', // feed links are looped over in the head. You may add more to the array. - feedLinks: [{title: 'Atom Feed', url: '/feed.xml', type: 'application/atom+xml'}], + feedLinks: [ + { + title: 'Atom Feed', + url: '/feed.xml', + type: 'application/atom+xml' + } + ], // Tags tagSingle: 'Tag', tagPlural: 'Tags', @@ -51,7 +57,8 @@ module.exports = { ariaTop: 'Main', ariaBottom: 'Complementary', ariaPlatforms: 'Platforms', - closedText: 'Menu' + closedText: 'Menu', + drawerMenu: true }, themeSwitch: { title: 'Theme', diff --git a/src/_includes/components/burger-template.njk b/src/_includes/components/burger-template.njk new file mode 100644 index 0000000..cb32b74 --- /dev/null +++ b/src/_includes/components/burger-template.njk @@ -0,0 +1,16 @@ + + + + + diff --git a/src/assets/css/blocks/site-nav-drawer.css b/src/assets/css/blocks/site-nav-drawer.css new file mode 100644 index 0000000..28b9b19 --- /dev/null +++ b/src/assets/css/blocks/site-nav-drawer.css @@ -0,0 +1,117 @@ +@media (min-width: 38em) { + nav.navbar { + --nav-button-display: none; + --nav-position: static; + } + + nav.navbar ul { + --nav-list-background: transparent; + --nav-list-layout: row; + --nav-list-position: static; + --nav-list-padding: 0; + --nav-list-height: auto; + --nav-list-width: 100%; + --nav-list-shadow: none; + --nav-list-transform: none; + --nav-list-visibility: visible; + } +} + +/* set on parent div to get the right z-index context */ +.ontop { + z-index: 1; + position: relative; +} + +nav.navbar { + position: var(--nav-position, absolute); + /* inset-block-start: 0.5rem; */ + inset-inline-end: 0.1rem; +} + +/* Remove default list styling and create layout for list */ +nav.navbar ul { + background: var(--nav-list-background, var(--color-light)); + box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2)); + display: flex; + flex-direction: var(--nav-list-layout, column); + gap: var(--space-s); + block-size: var(--nav-list-height, 100vh); + list-style: none; + margin: 0; + padding: var(--nav-list-padding, var(--space-l) var(--space-s)); + position: var(--nav-list-position, fixed); + inset-block-start: 0; /* Logical property. Equivalent to top: 0; */ + inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */ + inline-size: var(--nav-list-width, min(22rem, 100vw)); + visibility: var(--nav-list-visibility, visible); +} + +nav.navbar [aria-expanded='false'] + ul { + transform: var(--nav-list-transform, translateX(100%)); + visibility: var(--nav-list-visibility, hidden); +} + +/* animates ul only when opening to avoid flash on page load, svg always */ +@media (prefers-reduced-motion: no-preference) { + nav.navbar [aria-expanded='true'] + ul, + nav.navbar svg { + transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), + visibility 0.05s linear; + } +} + +/* Basic link styling */ +nav.navbar a { + --text-color: var(--color-dark); + color: var(--text-color); + padding: 0.1rem; + text-decoration: none; + display: block; + text-decoration-line: underline; + text-decoration-color: var(--border-color, transparent); + text-decoration-thickness: 3px; + text-underline-offset: 0.3em; +} + +/* Change the border-color on :hover and :focus */ +nav.navbar a:where(:hover, :focus) { + --border-color: var(--text-color); +} + +/* Change border-color and color for the active page */ +nav.navbar [aria-current='page'] { + --border-color: var(--color-primary); + --text-color: var(--color-primary); +} + +/* Reset button styling */ +nav.navbar button { + all: unset; + display: var(--nav-button-display, flex); + align-items: center; + position: relative; + z-index: 2; + cursor: pointer; + align-items: center; + padding: var(--space-xs) 0; +} + +nav.navbar span { + font-size: var(--size-step-min-1); + font-weight: bold; + text-transform: uppercase; + padding-inline-end: var(--space-2xs); +} + +nav.navbar svg { + block-size: 100%; + inline-size: auto; +} +header svg { + transform: translateY(-0.1em); +} + +nav.navbar [aria-expanded='true'] svg { + transform: var(--nav-list-rotate, rotate(45deg)); +} diff --git a/src/assets/scripts/menu-drawer.js b/src/assets/scripts/menu-drawer.js new file mode 100644 index 0000000..f8e00e0 --- /dev/null +++ b/src/assets/scripts/menu-drawer.js @@ -0,0 +1,34 @@ +// © Manuel Matuzović: https://web.dev/website-navigation/ + +const nav = document.querySelector('nav'); +const list = nav.querySelector('ul'); +const burgerClone = document.querySelector('#burger-template').content.cloneNode(true); +const svg = nav.querySelector('svg'); + +const button = burgerClone.querySelector('button'); +button.addEventListener('click', e => { + const isOpen = button.getAttribute('aria-expanded') === 'true'; + button.setAttribute('aria-expanded', !isOpen); +}); + +// avoid DRY: disabling menu +const disableMenu = () => { + button.setAttribute('aria-expanded', false); +}; + +// close on escape +nav.addEventListener('keyup', e => { + if (e.code === 'Escape') { + disableMenu(); + } +}); + +// close if clicked outside of event target +document.addEventListener('click', e => { + const isClickInsideElement = nav.contains(e.target); + if (!isClickInsideElement) { + disableMenu(); + } +}); + +nav.insertBefore(burgerClone, list); From f114c314d233aa2dba220a8ee8c518ff7495d543 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 14 Feb 2024 07:37:28 +0100 Subject: [PATCH 2/7] rename to main-nav --- src/_includes/partials/header.njk | 2 +- src/_includes/partials/{menu.njk => main-nav.njk} | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) rename src/_includes/partials/{menu.njk => main-nav.njk} (81%) diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index 3d95c83..d1844c8 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -10,6 +10,6 @@ {% include "svg/star.svg" %} {{ meta.siteName }} - {% include "partials/menu.njk" %} + {% include "partials/main-nav.njk" %} diff --git a/src/_includes/partials/menu.njk b/src/_includes/partials/main-nav.njk similarity index 81% rename from src/_includes/partials/menu.njk rename to src/_includes/partials/main-nav.njk index f087bbd..24421e6 100644 --- a/src/_includes/partials/menu.njk +++ b/src/_includes/partials/main-nav.njk @@ -17,3 +17,7 @@ {% endfor %} + +{% if meta.navigation.drawerMenu %} + {% include "components/burger-template.njk" %} +{% endif %} From 06c17095b859bfcfc51c28fb9e00ff62e8c11120 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 14 Feb 2024 10:12:45 +0100 Subject: [PATCH 3/7] copy: "based on" -> "built around" --- package.json | 2 +- src/_data/meta.js | 4 ++-- src/pages/about.md | 2 +- src/pages/index.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2f9b101..277227a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "eleventy-excellent", "version": "2.1.4", - "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.", + "description": "Eleventy starter built around the workflow suggested by Andy Bell's buildexcellentwebsit.es.", "author": "Lene Saile", "license": "ISC", "engines": { diff --git a/src/_data/meta.js b/src/_data/meta.js index 66c4b2c..4cfb9de 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -2,7 +2,7 @@ module.exports = { url: process.env.URL || 'http://localhost:8080', siteName: 'Eleventy Excellent', siteDescription: - 'Eleventy starter based on the workflow suggested by buildexcellentwebsit.es', + 'Eleventy starter built around the CSS workflow suggested by buildexcellentwebsit.es', siteType: 'Person', // schema locale: 'en_EN', lang: 'en', @@ -23,7 +23,7 @@ module.exports = { themeBgColor: '#FBFBFB', // Manifest: defines a placeholder background color for the application page to display before its stylesheet is loaded opengraph_default: '/assets/images/template/opengraph-default.jpg', // fallback/default meta image opengraph_default_alt: - 'Visible content: Eleventy starter based on workflow for Cube CSS, Every Layout, Design Tokens and Tailwind for uitility, based on the concepts explained in buildexcellentwebsit.es', // alt text for default meta image + 'Visible content: Eleventy starter built around the CSS workflow for Cube CSS, Every Layout, Design Tokens and Tailwind for uitility, based on the concepts explained in buildexcellentwebsit.es', // alt text for default meta image blog: { // RSS feed name: 'My Web Development Blog', diff --git a/src/pages/about.md b/src/pages/about.md index ced613b..dd69c0b 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -8,7 +8,7 @@ youtube: true This starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template. -Based on the CSS boilerplate by Andy Bell and inspired by Andy's talk **'Be the browser’s mentor, not its micromanager'**. +It is built around the CSS boilerplate by Andy Bell and inspired by Andy's talk **'Be the browser’s mentor, not its micromanager'**. If you want to know exactly how it all works, [read this article on piccalil.li](https://piccalil.li/blog/a-css-project-boilerplate/). diff --git a/src/pages/index.md b/src/pages/index.md index efed2b2..9cc89ed 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -10,7 +10,7 @@ blog: ## An Eleventy starter -This [Eleventy](https://www.11ty.dev/) starter is based on [Andy Bell's](https://andy-bell.co.uk/) talk 'Be the browser’s mentor, not its micromanager' and its companion website buildexcellentwebsit.es. +This [Eleventy](https://www.11ty.dev/) starter was inspired [Andy Bell's](https://andy-bell.co.uk/) talk 'Be the browser’s mentor, not its micromanager' and its companion website buildexcellentwebsit.es. In his words, it's about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spacing, as well as modern CSS features. From 46f445aa250193e1ad5c4b7d85c7e9f3b48982ff Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 14 Feb 2024 10:51:54 +0100 Subject: [PATCH 4/7] rename --- src/assets/scripts/{menu-drawer.js => nav-drawer.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/assets/scripts/{menu-drawer.js => nav-drawer.js} (100%) diff --git a/src/assets/scripts/menu-drawer.js b/src/assets/scripts/nav-drawer.js similarity index 100% rename from src/assets/scripts/menu-drawer.js rename to src/assets/scripts/nav-drawer.js From 3ee8502953882c20a839d06f6db033da51647220 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 14 Feb 2024 10:52:17 +0100 Subject: [PATCH 5/7] bring back menu drawer, optional --- src/_data/meta.js | 5 +- src/_includes/components/burger-template.njk | 22 ++- src/_includes/partials/main-nav.njk | 15 +- src/_layouts/base.njk | 8 +- src/assets/css/blocks/site-nav-drawer.css | 139 ++++++++++++------- 5 files changed, 124 insertions(+), 65 deletions(-) diff --git a/src/_data/meta.js b/src/_data/meta.js index 4cfb9de..39f4704 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -57,8 +57,9 @@ module.exports = { ariaTop: 'Main', ariaBottom: 'Complementary', ariaPlatforms: 'Platforms', - closedText: 'Menu', - drawerMenu: true + // activate alternative mobile menu with drawer + drawerMenu: true, + navLabel: 'Menu' }, themeSwitch: { title: 'Theme', diff --git a/src/_includes/components/burger-template.njk b/src/_includes/components/burger-template.njk index cb32b74..f4038ce 100644 --- a/src/_includes/components/burger-template.njk +++ b/src/_includes/components/burger-template.njk @@ -4,13 +4,21 @@ diff --git a/src/_includes/partials/main-nav.njk b/src/_includes/partials/main-nav.njk index 24421e6..481eaf8 100644 --- a/src/_includes/partials/main-nav.njk +++ b/src/_includes/partials/main-nav.njk @@ -1,4 +1,15 @@ - -{% if drawerMenu %} +{% if drawerNav %} {% include "components/burger-template.njk" %} {% endif %} diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index 1efe5f8..3a2e2e7 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -2,6 +2,8 @@ + + @@ -77,13 +79,13 @@ > {% endif %} - - {% if meta.navigation.drawerMenu %} + {% if meta.navigation.drawerNav %} + {% endif %} - {% if meta.easteregg %} + {% endif %}