Merge pull request #1 from madrilene/main

Catchup with upstream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "engines": {
     "node": ">=16.x.x"
   },

readme.md

@@ -25,24 +25,28 @@ https://eleventy-excellent.netlify.app/
 
 ## Features
 
-This starter includes:
+**This starter includes:**
 
 - The whole CSS workflow as suggested by buildexcellentwebsit.es
 - Accessible site navigation, editable in `src/_data/navigation.js`
-- Image optimization with Eleventy-img (see blog post)
-- Youtube embed with lite-youtube (see blog post)
-- Syntax highlighting via eleventy-plugin-syntaxhighlight
-- SEO (XML-sitemap, metadata)
+- Image optimization with Eleventy-img _(see blog post)_
+- Youtube embed with lite-youtube _(see blog post)_
+- Easy resource fetching with eleventy-fetch _(see blog post)_
+- Syntax highlighting via eleventy-plugin-syntaxhighlight _(see blog post)_
+- SEO basics (XML-sitemap, metadata)
 - dayjs handling dates & times
 - 301 redirects for netlify
-- markdown handling
+- Advanced markdown handling
 - Bundling via esbuild
+- RSS feed
+- Links to spcial networks in footer
+- Mastodon domain verification snippet
 
 ## First steps
 
 - **Important:** edit meta data in `src/_data/meta.js`, it's being used all over the template.
 - Search for 'eleventy-excellent.netlify.app'. You'll find an entry in `src/assets/css/global/global-styles.css`. Replace with your own domain.
-- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". Great resource: https://lucide.dev/
+- Edit your social media in `src/_data/social.js` and `src/_includes/icons`. If you add new icons they must be prefixed with "social-". By default you have rss, mastodon, twitter, ko-fi, linkedin and github. Great resource: https://lucide.dev/
 - Not required, but recommended: Delete `github.js` in `src/_data/github.js` and the blog posts, as these serve only as an example.
 - Edit your preferences (colors, fluid text sizes etc.) in `src/assets/css/design-tokens`.
 - Optional: set your (favicon) icons in `src/assets/images/favicon`.
@@ -81,8 +85,10 @@ npm run build
 
 - updated required node version in package.json
 - meta.js now controls most of the templates defaults
-- added RSS feed, because of course!
-- Made twitter and other meta data OPTIONAL. Added Mastodon.
+- added RSS feed, because of course!!
+- Made twitter and other meta data OPTIONAL
+- Added Mastodon verification and more social icon defaults
+- focus-within for the cards
 
 ### 22-11-04
 

src/_includes/icons/social-linkedin.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
+  ></path>
+  <rect x="2" y="9" width="4" height="12"></rect>
+  <circle cx="4" cy="4" r="2"></circle>
+</svg>

src/assets/css/blocks/card.css

@@ -1,5 +1,6 @@
 .card {
   background: var(--color-dark);
+  border: 4px solid var(--color-dark);
   color: var(--color-light);
   padding: var(--space-m-l);
   border-radius: var(--border-radius);
@@ -23,3 +24,16 @@
 .card time {
   opacity: 0.8;
 }
+
+.card:hover,
+.card:focus-within {
+  border: 4px solid var(--color-primary);
+}
+
+.card a {
+  text-decoration: none;
+}
+
+.card:focus-within a:focus {
+  outline: none;
+}

src/assets/css/global/global-styles.css

@@ -84,7 +84,7 @@ a:hover {
 }
 
 :focus {
-  outline: 2px solid;
+  outline: 3px solid;
   outline-offset: 0.3ch;
 }