chore: spacing

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",

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": {

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

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 {

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;

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" %}