cdransf/coryd.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Cory Dransfeldt 2025-04-14 13:54:00 -07:00
parent a284f758e2
commit 321b6d2fca
No known key found for this signature in database
8 changed files with 45 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

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

2
package.json
View file

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

22
src/assets/styles/base/index.css
View file

@ -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),
text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
transition: 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 {

2
src/assets/styles/base/vars.css
View file

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

7
src/assets/styles/components/buttons.css
View file

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

9
src/assets/styles/components/forms.css
View file

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

38
src/assets/styles/components/tab-buttons.css
View file

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

32
src/pages/media/music/index.html
View file

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