display:block to menu links for larger clickable surface, modernized underline effect

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
   "author": "Lene Saile",
   "license": "ISC",

src/_data/builtwith.json

@@ -45,6 +45,12 @@
     "name": "Misremembered",
     "description": "Misremembered is the brain-child of Jon Michaels, a long-time sound editor, maker of tacos, and generally tech-minded fellow",
     "screenshot": "./src/assets/images/screenshots/misremembered.jpg",
-    "link": "https://misremembe.red/"
+    "link": "https://misremembe.red"
+  },
+  {
+    "name": "Esther Zecco",
+    "description": "Official website of Esther Zecco. Singer and songwriter of pop music from Segovia with influences of American folk and country.",
+    "screenshot": "./src/assets/images/screenshots/estherzecco.jpg",
+    "link": "https://estherzecco.com"
   }
 ]

src/assets/css/blocks/menu.css

@@ -64,10 +64,14 @@ nav.navbar [aria-expanded='false'] + ul {
 /* Basic link styling */
 nav.navbar a {
   --text-color: var(--color-dark);
-  border-block-end: 3px solid var(--border-color, transparent);
   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 */

src/assets/css/blocks/site-foot.css

@@ -8,6 +8,7 @@
   display: flex;
   gap: var(--space-xs-s);
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 .site-foot svg {

src/pages/about.md

@@ -10,13 +10,11 @@ Based on the [companion website](https://buildexcellentwebsit.es/) of Andy Bell'
 
 Like buildexcellentwebsit.es, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects.
 
-The aim is to hopefully spread the use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/).
+The aim is to spread the idea and use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/).
 
 - Find out more on https://buildexcellentwebsit.es/.
 - Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites
 
-Edit your preferences (colors, fonts, fluid text sizes etc.) in `src/assets/design-tokens`.
-
 ## Watch the talk
 
 {% youtube 'JqnMI1AXl6w', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}

src/pages/get-started.md

@@ -18,3 +18,4 @@ youtube: false
 - Optional: Change fonts. This starter uses three fonts, Red Hat Display, Inter and Roboto Mono. You can add or delete fonts in `src/assets/fonts`. I recommend creating font subsets for performance, for example using the [Fontsquirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator). Next, edit `src/assets/css/global/fonts.css`. Add your new font aliases in `src/assets/design-tokens/fonts.json`. Finally, in `src/_layouts/base.njk` edit the font preloads. Roboto Mono is only used for code blocks. It's preload is set directly in the post layout: `src/_layouts/post.njk`.
 - If you don't want to feature any code examples, you may delete the whole stylesheet for syntax highlighting: `src/assets/css/blocks/code.css`.
 - Add and delete your custom block stylesheets in `src/assets/css/blocks/*.css`, they get pulled in your output stylesheet automatically.
+- If you are working with VS Code I recommend installing the Tailwind CSS IntelliSense addon, as it works just as fine for our custom utility classes!