fix: bluesky icon cut off, nicer focus styles with new button variant

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>

src/assets/css/global/base/reset.css

@@ -152,7 +152,6 @@ html:has(dialog[open]:modal) {
   }
 }
 
-/* View transition */
 @view-transition {
   navigation: auto;
 }

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;
+}

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 */

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>

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"

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>