From 5204abbc3b460a1e7448a6f29ca8031aae285407 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sun, 23 Jun 2024 13:15:34 -0700
Subject: [PATCH] chore: spacing

---
 package-lock.json                           |  4 ++--
 package.json                                |  2 +-
 src/assets/styles/base/index.css            | 25 ++++++++-------------
 src/assets/styles/components/buttons.css    | 12 +++++++---
 src/assets/styles/components/media-grid.css |  6 ++++-
 src/pages/main/music/index.html             |  2 +-
 6 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8fcb187d..4d292fbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.5.30",
+  "version": "19.5.31",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.5.30",
+      "version": "19.5.31",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index 0a8f94d9..30c584e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.5.30",
+  "version": "19.5.31",
   "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 ff2d9a64..41240c47 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -183,9 +183,12 @@ h5 { font-size: var(--font-size-md) }
 h6 { font-size: var(--font-size-sm) }
 
 .section-header-wrapper {
-  display: flex;
-  flex-direction: column;
   justify-content: space-between;
+  margin: var(--sizing-xl) 0 var(--sizing-lg);
+
+  & .section-header {
+    margin: 0;
+  }
 }
 
 .section-header {
@@ -201,14 +204,12 @@ h6 { font-size: var(--font-size-sm) }
 }
 
 .section-header-buttons {
-  margin: 0 0 var(--sizing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--sizing-sm);
 
   & > button {
-    margin-bottom: var(--sizing-sm) !important;
-
-    &:last-of-type {
-      margin-right: 0 !important;
-    }
+    margin-bottom: 0 !important;
   }
 }
 
@@ -604,14 +605,6 @@ li {
     max-width: 768px;
   }
 
-  .section-header-wrapper {
-    flex-direction: row;
-  }
-
-  .section-header-buttons {
-    margin: var(--sizing-md) 0 var(--sizing-lg);
-  }
-
   footer nav.social {
     gap: var(--sizing-md);
   }
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 3473cfa8..e46a7529 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -14,7 +14,7 @@ button {
     background-color: var(--accent-color);
     appearance: none;
     border: 2px solid var(--accent-color);
-    transition-property: all;
+    transition-property: border;
   }
 
   &:not(.theme-toggle, .active):hover,
@@ -27,17 +27,23 @@ button {
     transition-duration: var(--transition-duration-default);
   }
 
-  &:not(.active):hover,
-  &:not(.active):active,
   &:not(.active):focus,
   &:not(.active):focus-within {
+    transition-property: none;
     outline: 2px dashed var(--accent-color);
+    padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
+    border: 0;
   }
 
   &.small {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     padding: var(--sizing-xs) var(--sizing-sm);
+
+    &:not(.active):focus,
+    &:not(.active):focus-within {
+      padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
+    }
   }
 
   &.secondary {
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index abb9ebf9..d93deec6 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -50,11 +50,15 @@
   }
 
   & a:hover img,
-  & a:focus img,
   & a:active img {
     border-color: var(--accent-color-hover)
   }
 
+  & a:focus img,
+  & a:focus-within img {
+    border: 0
+  }
+
   & .meta-text {
     position: absolute;
     z-index: 2;
diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html
index fff04c7d..e7d1ae6e 100644
--- a/src/pages/main/music/index.html
+++ b/src/pages/main/music/index.html
@@ -29,7 +29,7 @@ schema: music-index
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
-<div class="section-header-wrapper">
+<div class="section-header-wrapper flex-centered">
   <h3 id="tracks" class="section-header">
     <a class="link-icon" href="/music/tracks/this-week">
       {% tablericon "playlist" "Tracks" %}