Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style: add hover styles to focus

Browse source
This commit is contained in:
Ben Goldsworthy 2025-05-09 18:47:23 +02:00
parent f1c9fa5622
commit 1a61aeade0
No known key found for this signature in database
5 changed files with 27 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/css/base/_typography.scss
View file

@ -97,6 +97,11 @@ a {
text-decoration: none; text-decoration: none;
opacity: 1; opacity: 1;
} }
&:focus {
text-decoration-style: double;
opacity: 1;
}
} }
::selection { ::selection {

23
assets/css/components/_button.scss
View file

@ -1,17 +1,18 @@
.label--button { .label--button {
cursor: pointer; cursor: pointer;
display: block; display: block;
inline-size: fit-content; inline-size: fit-content;
margin-inline: auto; margin-inline: auto;
} }
.button { .button {
border: 2px solid $dark; border: 2px solid $dark;
background-color: $light; background-color: $light;
padding: 0.4em 1em; padding: 0.4em 1em;
cursor: pointer; cursor: pointer;
&:hover { &:hover,
box-shadow: 2px 2px gray; &:focus {
} box-shadow: 2px 2px gray;
}
} }

3
assets/css/components/_item-tile.scss
View file

@ -3,7 +3,8 @@
box-sizing: border-box; box-sizing: border-box;
border: 2px solid transparent; border: 2px solid transparent;
&:hover { &:hover,
&:focus {
border-color: $dark; border-color: $dark;
& .item-tile__title-wrapper { & .item-tile__title-wrapper {

11
assets/css/layout/_header.scss
View file

@ -4,10 +4,10 @@
grid-gap: 0; grid-gap: 0;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
grid-template-areas: grid-template-areas:
"header-title" "header-title"
"header-tagline" "header-tagline"
"header-icons" "header-icons"
"header-nav"; "header-nav";
inset-block-start: 0; inset-block-start: 0;
inset-inline-start: 0; inset-inline-start: 0;
@ -66,7 +66,8 @@
padding: 0.4em; padding: 0.4em;
background-color: inherit; background-color: inherit;
&:hover { &:hover,
&:focus {
background-color: #ffffd0; background-color: #ffffd0;
} }

3
assets/css/themes/_dark.scss
View file

@ -9,7 +9,8 @@
color: $light; color: $light;
border-color: $light; border-color: $light;
&:hover { &:hover,
&:focus {
background-color: $dark; background-color: $dark;
} }
} }