fix(*.css): more consistent hover states + fix reduced motion support

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.7.5",
+      "version": "1.7.7",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/assets/styles/base/index.css

@@ -236,8 +236,11 @@ ol {
 a {
   color: var(--link-color);
   text-underline-offset: var(--underline-offset-default);
-  transition: color var(--transition-duration-default) var(--transition-ease-in-out),
+  transition: text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
-    text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
+
+  @media (prefers-reduced-motion) {
+    transition: color var(--transition-duration-default) var(--transition-ease-in-out);
+  }
 
   img:not(.icon) {
     border: var(--border-default);
@@ -264,9 +267,12 @@ a {
   --icon-color: var(--accent-color);
 
   &:is(:hover, :focus, :active) {
-    color: var(--link-color-hover);
     text-underline-offset: var(--underline-offset-hover);
 
+    @media (prefers-reduced-motion) {
+      color: var(--accent-color-hover);
+    }
+
     img:not(.icon) {
       filter: var(--filter-image-light);
 
@@ -279,9 +285,11 @@ a {
     .icon {
       transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
       transform: var(--transform-icon-tilt);
-    }
 
-    --icon-color: var(--accent-color-hover);
+      @media (prefers-reduced-motion) {
+        stroke: var(--accent-color-hover);
+      }
+    }
   }
 }
 
@@ -297,10 +305,6 @@ h1, h2, h3 {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-md);
   margin: var(--margin-vertical-base-horizontal-zero);
-
-  a:is(:hover, :focus, :active) svg {
-    transform: var(--transform-icon-default);
-  }
 }
 
 h1 {

src/assets/styles/base/vars.css

@@ -163,7 +163,7 @@
   @media (prefers-reduced-motion) {
     --transform-icon-tilt: var(--transform-icon-default);
     --underline-offset-hover: var(--underline-offset-default);
-    --button-offset-hover: 0px;
+    --button-offset-hover: 0;
   }
 
 /* filters */

src/assets/styles/components/buttons.css

@@ -1,4 +1,3 @@
-@import url("./tab-buttons.css");
 @import url("./text-toggle.css");
 
 button:not([data-modal-button]),
@@ -20,13 +19,17 @@ button:not([data-modal-button]),
   transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
   @media (prefers-reduced-motion) {
-    transition: background-color var(--transition-duration-default) var(--transition-ease-in-out);
+    transition:
+      border-color var(--transition-duration-default) var(--transition-ease-in-out),
+      background-color var(--transition-duration-default) var(--transition-ease-in-out);
   }
 
   &:not(.active):is(:hover, :active, :focus, :focus-within) {
     transform: translateY(var(--button-offset-hover));
 
     @media (prefers-reduced-motion) {
+      transform: none;
+      border-color: var(--accent-color-hover);
       background-color: var(--accent-color-hover);
     }
   }

src/assets/styles/components/forms.css

@@ -50,6 +50,15 @@ label svg {
   }
 }
 
+summary {
+  font-weight: var(--font-weight-bold);
+  transition: font-weight var(--transition-duration-default) var(--transition-ease-in-out);
+}
+
+details[open] summary {
+  font-weight: var(--font-weight-light);
+}
+
 .search__form--type {
   display: flex;
   gap: var(--spacing-md);

src/assets/styles/components/tab-buttons.css

@@ -1,38 +0,0 @@
-#tracks-recent,
-#tracks-chart,
-.tracks-recent,
-.tracks-chart {
-  display: none;
-}
-
-#tracks-recent:checked ~ .tracks-recent,
-#tracks-chart:checked ~ .tracks-chart {
-  display: block;
-}
-
-input[id="tracks-recent"] ~ .tracks-recent,
-input[id="tracks-chart"] ~ .tracks-chart {
-  margin-top: var(--spacing-base);
-}
-
-#tracks-recent:checked ~ [for="tracks-recent"],
-#tracks-chart:checked ~ [for="tracks-chart"] {
-  cursor: not-allowed;
-  border-color: var(--accent-color);
-  background-color: var(--accent-color);
-}
-
-#tracks-recent:not(:checked) ~ [for="tracks-recent"],
-#tracks-chart:not(:checked) ~ [for="tracks-chart"] {
-  color: var(--accent-color);
-  background: transparent;
-}
-
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:is(:hover, :active),
-#tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) {
-  color: var(--accent-color-hover);
-}
-
-[for="tracks-recent"] {
-  margin-right: var(--sizing-xs);
-}

src/pages/media/music/index.html

@@ -47,24 +47,20 @@ updated: "now"
     Tracks
   </a>
 </h3>
-<div>
+<details open>
-  <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
+  <summary>Recent</summary>
-  <input id="tracks-chart" name="track-options" type="radio" aria-hidden="true" />
-  <label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
-  <label for="tracks-chart" class="button" data-toggle="tracks-chart">This week</label>
-  <div class="tracks-recent">
   {% render "media/music/charts/recent.liquid",
     globals:globals,
     data:music.recent
   %}
-  </div>
+</details>
-  <div class="tracks-chart">
+<details>
+  <summary>This week</summary>
   {% render "media/music/charts/rank.liquid",
     data:music.week.tracks,
     count:10
   %}
-  </div>
+</details>
-</div>
 {%- if albumReleases.upcoming.size > 0 -%}
   <h3 id="album-releases">
     <a href="/music/album-releases/">