From 3cd99c5ff784f0ebba53fe5130a77ca7e1eb9635 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 4 Jul 2024 17:56:49 -0700
Subject: [PATCH] fix: styles + spacing

---
 package-lock.json                    |  4 ++--
 package.json                         |  2 +-
 src/assets/styles/base/index.css     | 36 +++++++++++++++-------------
 src/assets/styles/defaults/vars.css  |  2 ++
 src/assets/styles/pages/blogroll.css |  7 +++++-
 src/pages/secondary/blogroll.html    |  8 +++----
 6 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3fe7cc3e..5d58ef8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.10.1",
+  "version": "19.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.10.1",
+      "version": "19.10.2",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index ff8b1e2e..3e20e64c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.10.1",
+  "version": "19.10.2",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 99c0eff5..a19abaa9 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -85,23 +85,25 @@ code {
 
 /* social icons */
 :is(body, html, nav) a {
-  &.at > svg { stroke: var(--brand-proton); }
-  &.brand-github > svg { stroke: var(--brand-github); }
-  &.brand-npm > svg { stroke: var(--brand-npm); }
-  &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
-  &.article > svg { stroke: var(--posts) }
-  &.books > svg { stroke: var(--books); }
-  &.brain > svg { stroke: var(--brand-listenbrainz); }
-  &.clock-hour-3 > svg { stroke: var(--now); }
-  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
-  &.device-tv > svg { stroke: var(--tv); }
-  &.favorite > svg { stroke: var(--favorite) }
-  &.headphones > svg { stroke: var(--music); }
-  &.heart-handshake > svg { stroke: var(--webrings); }
-  &.info-circle > svg { stroke: var(--about) }
-  &.link > svg { stroke: var(--links); }
-  &.rss > svg { stroke: var(--brand-rss); }
-  &.search > svg { stroke: var(--search) }
+  &.at > svg { stroke: var(--brand-proton) !important; }
+  &.brand-github > svg { stroke: var(--brand-github) !important; }
+  &.brand-npm > svg { stroke: var(--brand-npm) !important; }
+  &.brand-mastodon > svg { stroke: var(--brand-mastodon) !important; }
+  &.article > svg { stroke: var(--posts) !important; }
+  &.books > svg { stroke: var(--books) !important; }
+  &.brain > svg { stroke: var(--brand-listenbrainz) !important; }
+  &.clock-hour-3 > svg { stroke: var(--now) !important; }
+  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee) !important; }
+  &.device-tv > svg { stroke: var(--tv) !important; }
+  &.favorite > svg { stroke: var(--favorite) !important; }
+  &.headphones > svg { stroke: var(--music) !important; }
+  &.heart-handshake > svg { stroke: var(--webrings) !important; }
+  &.info-circle > svg { stroke: var(--about) !important; }
+  &.json > svg { stroke: var(--json) !important; }
+  &.link > svg { stroke: var(--links) !important; }
+  &.mail-plus > svg { stroke: var(--newsletter) !important; }
+  &.rss > svg { stroke: var(--brand-rss) !important; }
+  &.search > svg { stroke: var(--search) !important; }
 }
 
 :is(body, html, nav .search) svg {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 3c5afbaf..a2970edc 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -54,9 +54,11 @@
   --books: #32cd32;
   --error: #d92525;
   --favorite: #ff69b4;
+  --json: #4169E1;
   --links: #9370db;
   --moon: #6a5acd;
   --music: #1e90ff;
+  --newsletter: #40e0d0;
   --now: #ff1493;
   --posts: #008080;
   --search: #4682b4;
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 377a4c3e..290d8db7 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -1,10 +1,15 @@
 .blog-roll-icons {
   display: flex;
   flex-direction: row;
-  gap: var(--sizing-xs);
 
   & a {
     display: flex;
     align-items: center;
+    outline: 0;
+
+    &:focus svg,
+    &:focus-within svg {
+      outline: var(--outline)
+    }
   }
 }
\ No newline at end of file
diff --git a/src/pages/secondary/blogroll.html b/src/pages/secondary/blogroll.html
index be3e521c..73f4276d 100644
--- a/src/pages/secondary/blogroll.html
+++ b/src/pages/secondary/blogroll.html
@@ -19,16 +19,16 @@ description: These are awesome blogs that I enjoy and you may enjoy too.
     <td><a href="{{ blog.url }}">{{ blog.url | replace: "https://", "" }}</a></td>
     <td class="blog-roll-icons">
       {%- if blog.rss_feed -%}
-      <a href="{{ blog.rss_feed }}">{% tablericon "rss" "Subscribe via RSS" %}</a>
+      <a class="rss" href="{{ blog.rss_feed }}">{% tablericon "rss" "Subscribe via RSS" %}</a>&nbsp;
       {%- endif -%}
       {%- if blog.json_feed -%}
-      / <a href="{{ blog.json_feed }}">{% tablericon "json" "Subscribe via JSON" %}</a>
+      <a class="json" href="{{ blog.json_feed }}">{% tablericon "json" "Subscribe via JSON" %}</a>&nbsp;
       {%- endif -%}
       {%- if blog.newsletter -%}
-      / <a href="{{ blog.newsletter }}">{% tablericon "mail-plus" "Newsletter subscription" %}</a>
+      <a class="mail-plus" href="{{ blog.newsletter }}">{% tablericon "mail-plus" "Newsletter subscription" %}</a>&nbsp;
       {%- endif -%}
       {%- if blog.mastodon -%}
-      / <a href="{{ blog.mastodon }}">{% tablericon "brand-mastodon" "Mastodon" %}</a>
+      <a class="brand-mastodon" href="{{ blog.mastodon }}">{% tablericon "brand-mastodon" "Mastodon" %}</a>&nbsp;
       {%- endif -%}
     </td>
   </tr>