focus-within

package.json

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

readme.md

@@ -85,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/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;
 }