From faa3c78cad548ac18d1682ffdcd5975ea864aa25 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 3 Jul 2024 13:40:34 -0700
Subject: [PATCH] fix: badge params + focus

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 .../partials/widgets/badge-grid.liquid        | 73 +++++++++----------
 src/assets/styles/components/badge-grid.css   |  9 +++
 4 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a58acee..de34158c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.9.15",
+  "version": "19.9.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.9.15",
+      "version": "19.9.16",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index b58ceef6..f2cf0461 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.9.15",
+  "version": "19.9.16",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/partials/widgets/badge-grid.liquid b/src/_includes/partials/widgets/badge-grid.liquid
index 661383f9..8608a924 100644
--- a/src/_includes/partials/widgets/badge-grid.liquid
+++ b/src/_includes/partials/widgets/badge-grid.liquid
@@ -2,16 +2,15 @@
   <a href="https://11ty.dev">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/eleventy.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/eleventy.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/eleventy.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/eleventy.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/eleventy.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/eleventy.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/eleventy.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/eleventy.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/eleventy.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -22,16 +21,15 @@
   <a href="https://social.lol/@cory">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/mastodon.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/mastodon.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/mastodon.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/mastodon.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/mastodon.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/mastodon.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/mastodon.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/mastodon.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/mastodon.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -42,16 +40,15 @@
   <a href="https://www.buymeacoffee.com/cory">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/buymeacoffee.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/buymeacoffee.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/buymeacoffee.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/buymeacoffee.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -62,16 +59,16 @@
   <a href="https://github.com/cdransf">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/github.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/github.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/github.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/github.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/github.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/github.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/github.png?class=w200 200w,
+        https://cdn.coryd.dev/assets/badges/github.png?class=w200 704w
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/github.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/github.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -82,16 +79,15 @@
   <a href="https://github.com/ai-robots-txt/ai.robots.txt">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/notarobot.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/notarobot.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/notarobot.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/notarobot.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/notarobot.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/notarobot.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/notarobot.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/notarobot.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/notarobot.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -102,16 +98,15 @@
   <a href="https://validator.w3.org">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/validhtml5.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/validhtml5.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/validhtml5.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/validhtml5.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/validhtml5.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/validhtml5.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/validhtml5.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/validhtml5.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/validhtml5.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -122,16 +117,15 @@
   <a href="https://www.w3.org/Style/CSS/Overview.en.html">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/validcss.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/validcss.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/validcss.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/validcss.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/validcss.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/validcss.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/validcss.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/validcss.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/validcss.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
@@ -142,16 +136,15 @@
   <a href="https://coryd.dev/feeds">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/badges/validrss.png?aspect_ratio=1:.35&width=88 88w,
-        https://cdn.coryd.dev/assets/badges/validrss.png?aspect_ratio=1:.35&width=176 176w,
-        https://cdn.coryd.dev/assets/badges/validrss.png?aspect_ratio=1:.35&width=352 352w,
-        https://cdn.coryd.dev/assets/badges/validrss.png?aspect_ratio=1:.35&width=704 704w
+        https://cdn.coryd.dev/assets/badges/validrss.png??class=w50 50w,
+        https://cdn.coryd.dev/assets/badges/validrss.png?class=w100 100w,
+        https://cdn.coryd.dev/assets/badges/validrss.png?class=w200 200w,
       "
       sizes="(max-width: 450px) 88px,
         (max-width: 850px) 176px,
         (max-width: 1000px) 352px,
         704px"
-      src="https://cdn.coryd.dev/assets/badges/validrss.png?aspect_ratio=1:.35&width=704"
+      src="https://cdn.coryd.dev/assets/badges/validrss.png?class=w200"
       alt="Made with 11ty"
       loading="lazy"
       decoding="async"
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index 8b999867..7ad76fd9 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -9,6 +9,15 @@
     justify-content: center;
   }
 
+  & a {
+    outline: 0;
+
+    &:focus img,
+    &:focus-within img {
+      outline: var(--outline)
+    }
+  }
+
   & img {
     image-rendering: pixelated;
   }