From 23eb02e9a81b5aacf80c27ef6abaa0c3aa7fe0c8 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Thu, 24 Nov 2022 14:55:39 +0100
Subject: [PATCH] focus-within

---
 package.json                            |  2 +-
 readme.md                               |  6 ++++--
 src/assets/css/blocks/card.css          | 14 ++++++++++++++
 src/assets/css/global/global-styles.css |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 417a22b..0276950 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "engines": {
     "node": ">=16.x.x"
   },
diff --git a/readme.md b/readme.md
index 700e258..38e79f9 100644
--- a/readme.md
+++ b/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
 
diff --git a/src/assets/css/blocks/card.css b/src/assets/css/blocks/card.css
index adf96b9..7e8d2f9 100644
--- a/src/assets/css/blocks/card.css
+++ b/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;
+}
diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css
index 8a0a836..0ca29b5 100644
--- a/src/assets/css/global/global-styles.css
+++ b/src/assets/css/global/global-styles.css
@@ -84,7 +84,7 @@ a:hover {
 }
 
 :focus {
-  outline: 2px solid;
+  outline: 3px solid;
   outline-offset: 0.3ch;
 }