Fix article cards missing a focus outline

CHANGELOG.md

@@ -13,12 +13,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Make the code and styling for article cards much cleaner.
 - Remove top/bottom margin from the first/last element in `<aside>`.
 - Rename `show_read_time` to `show_reading_time`.
 - Use Zola's built-in reading time variable instead of the custom implementation (#102).
 
 ### Fixed
 
+- Fix article cards missing a focus outline.
 - Fix navbar mods having broken border radius.
 
 ## [5.4.0](https://codeberg.org/daudix/duckquill/compare/v5.3.2...v5.4.0)

sass/_article-list.scss

@@ -36,6 +36,20 @@
 			transform: var(--active);
 		}
 
+		&: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;
@@ -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);
 			}