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", "name": "coryd.dev",
"version": "1.7.1", "version": "1.7.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.7.1", "version": "1.7.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"html-minifier-terser": "7.2.0", "html-minifier-terser": "7.2.0",

2
package.json
View file

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

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

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

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

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