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

fix: theme button focus state

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-22 12:27:24 -07:00
parent 17df90d0b1
commit eb3656f451
No known key found for this signature in database
3 changed files with 10 additions and 4 deletions
Show stats 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": "19.5.27", "version": "19.5.28",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.27", "version": "19.5.28",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.27", "version": "19.5.28",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

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

@ -21,13 +21,19 @@ button {
&:not(.theme-toggle, .active):active, &:not(.theme-toggle, .active):active,
&:not(.theme-toggle, .active):focus, &:not(.theme-toggle, .active):focus,
&:not(.theme-toggle, .active):focus-within { &:not(.theme-toggle, .active):focus-within {
outline: 2px dashed var(--accent-color);
background-color: var(--accent-color-hover); background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover); border-color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out); transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default); transition-duration: var(--transition-duration-default);
} }
&:not(.active):hover,
&:not(.active):active,
&:not(.active):focus,
&:not(.active):focus-within {
outline: 2px dashed var(--accent-color);
}
&.small { &.small {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-sm); line-height: var(--line-height-sm);