hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix article cards missing a focus outline

Browse Source
This commit is contained in:
daudix
2024-10-14 05:19:30 +03:00
parent 8cb2263106
commit 6607a6e3b6
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
sass/_article-list.scss
View File

@ -36,7 +36,21 @@
transform: var(--active);
}
&>a {
&:has(> a:focus-visible) {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
@supports not selector(:focus-visible) {
&:has(> a:focus) {
animation: focus-in var(--transition);
outline: 0.125rem solid var(--accent-color);
outline-offset: 0.125rem;
}
}
& > a {
position: absolute;
inset: 0;
border-radius: var(--rounded-corner);
@ -122,16 +136,13 @@
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
background-color: var(--fg-muted-1);
&::before {
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
background-color: var(--fg-muted-1);
}
&:hover {
outline-color: var(--fg-muted-5);
}
h3 {
color: var(--fg-muted-4);
}
@ -168,10 +179,6 @@
background-color: var(--purple-bg);
}
&:hover {
outline-color: var(--purple-fg);
}
h3 {
color: var(--purple-fg);
}
@ -208,8 +215,6 @@
}
&:hover {
outline-color: var(--yellow-fg);
&::before {
transform: translateY(-50%) rotate(62deg) scale(1.5);
}
@ -254,10 +259,6 @@
background-color: var(--red-bg);
}
&:hover {
outline-color: var(--red-fg);
}
h3 {
color: var(--red-fg);
}
@ -293,10 +294,6 @@
background-color: var(--brown-bg);
}
&:hover {
outline-color: var(--brown-fg);
}
h3 {
color: var(--brown-fg);
}