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

fix(buttons.css): support for reduced motion

Browse source
This commit is contained in:
Cory Dransfeldt 2025-04-14 10:36:03 -07:00
parent 88266d9414
commit 5e5806c6ae
No known key found for this signature in database
4 changed files with 13 additions and 4 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.1",
"version": "1.7.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "1.7.1",
"version": "1.7.2",
"license": "MIT",
"dependencies": {
"html-minifier-terser": "7.2.0",

2
package.json
View file

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

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

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

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

@ -17,10 +17,18 @@ button:not([data-modal-button]),
overflow: hidden;
color: var(--text-color-inverted);
background-color: var(--section-color, var(--accent-color));
transition: var(--transition-duration-default) var(--transition-ease-in-out);
transition: translateY 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);
}
&:not(.active):is(:hover, :active, :focus, :focus-within) {
transform: translateY(var(--button-offset-hover));
@media (prefers-reduced-motion) {
background-color: var(--accent-color-hover);
}
}
&.active {