From 612c8c9693a1e9856c9ed8f6c949f8e9e14044b9 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Wed, 12 Nov 2025 11:43:05 +0100
Subject: [PATCH] fix: bluesky icon cut off, nicer focus styles with new 
 button variant

---
 src/_includes/partials/footer.njk             | 10 ++++++++--
 src/assets/css/global/base/reset.css          |  1 -
 src/assets/css/global/blocks/button.css       | 19 ++++++++++++++-----
 src/assets/css/global/blocks/theme-switch.css |  2 +-
 src/assets/svg/misc/rss.svg                   |  2 --
 src/assets/svg/platform/bluesky.svg           |  2 +-
 src/pages/styleguide.njk                      |  4 +++-
 7 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index b2f3118..b16c565 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -23,7 +23,13 @@
 
       <nav class="cluster" aria-label="{{ meta.navigation.ariaPlatforms }}">
         <!-- gets the first item from the feed loop set in meta -->
-        <a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
+        <a
+          href="{{ meta.blog.feedLinks[0].url }}"
+          rel="alternate"
+          type="{{ meta.blog.feedLinks[0].type }}"
+          class="button"
+          data-icon
+        >
           <span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
           {% svg "misc/rss" %}
         </a>
@@ -31,7 +37,7 @@
         {% for key, value in personal.platforms %}
           {% if value != "" %}
             <!-- regular platforms -->
-            <a class="no-indicator" href="{{ value }}" rel="me">
+            <a class="no-indicator button" data-icon href="{{ value }}" rel="me">
               <span class="visually-hidden">{{ key | capitalize }}</span>
               {% svg 'platform/' + key %}
             </a>
diff --git a/src/assets/css/global/base/reset.css b/src/assets/css/global/base/reset.css
index f2eb8ff..e82c50d 100644
--- a/src/assets/css/global/base/reset.css
+++ b/src/assets/css/global/base/reset.css
@@ -152,7 +152,6 @@ html:has(dialog[open]:modal) {
   }
 }
 
-/* View transition */
 @view-transition {
   navigation: auto;
 }
diff --git a/src/assets/css/global/blocks/button.css b/src/assets/css/global/blocks/button.css
index 924260d..b1cd94b 100644
--- a/src/assets/css/global/blocks/button.css
+++ b/src/assets/css/global/blocks/button.css
@@ -4,6 +4,7 @@
   --button-bg: var(--color-text);
   --button-color: color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));
   --button-hover-bg: color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));
+  --button-hover-color: var(--button-color);
   --button-border-width: var(--border-thickness);
   --button-border-style: solid;
   --button-border-color: color-mix(in oklab, var(--button-bg) 80%, var(--color-text));
@@ -48,11 +49,7 @@
 .button[aria-pressed='true'],
 .button[data-state='active'] {
   background: var(--button-hover-bg);
-  color: var(--button-color);
-}
-
-.button:focus {
-  outline-color: var(--button-outline-color, var(--button-border-color));
+  color: var(--button-hover-color);
 }
 
 .button:active {
@@ -104,3 +101,15 @@
 .button[data-button-radius='hard'] {
   --button-radius: 0;
 }
+
+.button[data-icon] {
+  --button-padding: var(--space-2xs);
+  --button-bg: var(--color-bg);
+  --button-border-color: var(--color-bg);
+  --button-color: var(--color-text);
+  --button-hover-color: var(--color-primary);
+  --button-radius: 50%;
+  aspect-ratio: 1;
+  display: inline-grid;
+  place-items: center;
+}
diff --git a/src/assets/css/global/blocks/theme-switch.css b/src/assets/css/global/blocks/theme-switch.css
index 4edafd5..1dbc318 100644
--- a/src/assets/css/global/blocks/theme-switch.css
+++ b/src/assets/css/global/blocks/theme-switch.css
@@ -8,7 +8,7 @@
   --button-bg: var(--_color-contrast);
   --button-color: var(--color-dark);
   --button-border-color: var(--_color-contrast);
-  outline-color: var(--_color-contrast);
+  --focus-color: var(--_color-contrast);
 }
 
 /* Hide without JS */
diff --git a/src/assets/svg/misc/rss.svg b/src/assets/svg/misc/rss.svg
index 71efca3..5ad7dcb 100644
--- a/src/assets/svg/misc/rss.svg
+++ b/src/assets/svg/misc/rss.svg
@@ -1,5 +1,4 @@
 <svg
-  role="img"
   viewBox="0 0 24 24"
   width="1em"
   height="1em"
@@ -8,7 +7,6 @@
   stroke-width="2"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <title>RSS</title>
   <path d="M4 11a9 9 0 0 1 9 9"></path>
   <path d="M4 4a16 16 0 0 1 16 16"></path>
   <circle cx="5" cy="19" r="1"></circle>
diff --git a/src/assets/svg/platform/bluesky.svg b/src/assets/svg/platform/bluesky.svg
index 34380f0..7f175bd 100644
--- a/src/assets/svg/platform/bluesky.svg
+++ b/src/assets/svg/platform/bluesky.svg
@@ -1,7 +1,7 @@
 <svg
   viewBox="0 0 24 24"
   width="1em"
-  height="1em"
+  height="0.9em"
   fill="var(--color-bg)"
   stroke="currentColor"
   stroke-width="2"
diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
index 4f66a63..8b79f78 100644
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@@ -45,7 +45,6 @@ customGradients:
       <li>
         <a href="#" class="button" data-button-variant="tertiary">tertiary button</a>
       </li>
-
       <li>
         <a href="#" class="button" data-ghost-button>Ghost button</a>
       </li>
@@ -58,6 +57,9 @@ customGradients:
       <li>
         <a href="#" class="button" data-small-button>small button</a>
       </li>
+      <li>
+        <a href="#" class="button" data-icon>{% svg "misc/star" %}</a>
+      </li>
     </ul>
   </section>