Don't set cursor on hover

CHANGELOG.md

@@ -24,10 +24,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add loading animation to "Load Comments" button.
 - Add margin between comment author name and timestamp.
 - Add missing edge highlight to active footer navbar links.
+- Add open animation to `details`.
 - Add special `switch` class for checkboxes (#70).
 - Add spoiler styles.
 - Add zoom-on-hover to custom comment emojis.
 - Return the scrollbar styling.
+- Show arrow after article heading in article list on hover.
+- Style `details` arrow.
 - Style mentions and hashtags in comments.
 - Turn "Feed" button to a dropdown if multiple feeds are avaiable (#72).
 
@@ -65,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use PNG instead of GIF for comments QR code to reduce download size.
 - Use relative colors for `-bg` color variants.
 - Use separator `div` instead of `::after` on the home button.
+- Use the current text color for icons instead of explicitly setting their color.
 
 ### Removed
 

sass/_buttons.scss

@@ -11,11 +11,8 @@ a.inline-button {
 
 button.inline-button {
 	appearance: none;
+	cursor: pointer;
 	border: none;
-
-	&:hover {
-		cursor: pointer;
-	}
 }
 
 a.inline-button,

sass/_comments.scss

@@ -34,9 +34,9 @@
 			&:disabled {
 				animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
 				transition: none;
+				cursor: not-allowed;
 
 				&:hover {
-					cursor: not-allowed;
 					background-color: transparent;
 					color: var(--fg-muted-5);
 				}
@@ -177,12 +177,12 @@
 				display: inline-block;
 				vertical-align: middle;
 				transition: var(--transition);
+				cursor: zoom-in;
 				width: 1.5em;
 				height: 1.5em;
 
 				&:hover {
 					transform: scale(2);
-					cursor: zoom-in;
 				}
 			}
 

sass/_external.scss

@@ -4,7 +4,7 @@ a.external::after {
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E");
 	mask-size: cover;
 	margin-inline-start: 0.25rem;
-	background-color: var(--accent-color);
+	background-color: currentColor;
 	width: max(0.75rem, 0.75em);
 	height: max(0.75rem, 0.75em);
 	content: "";

sass/_input.scss

@@ -4,21 +4,21 @@ input[type="color"] {
 	position: relative;
 	appearance: none;
 	transition: var(--transition);
+	cursor: pointer;
 	border: 0.15rem solid var(--fg-muted-2);
 	background-color: var(--fg-muted-1);
 	width: 1rem;
 	height: 1rem;
 
 	&:hover {
-		cursor: pointer;
 		background-color: var(--fg-muted-2);
 	}
 
 	&:disabled {
 		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
 
 		&:hover {
-			cursor: not-allowed;
 			background-color: var(--fg-muted-1);
 		}
 	}
@@ -161,30 +161,24 @@ input[type="color"] {
 input[type="range"] {
 	appearance: none;
 	transition: var(--transition);
+	cursor: pointer;
 	box-shadow: var(--edge-highlight);
 	border-radius: 999px;
 	background: var(--accent-color);
 	width: 100%;
 	height: 0.5rem;
 
-	&:hover {
-		cursor: pointer;
-	}
-
 	&::-webkit-slider-thumb {
 		appearance: none;
 		filter: brightness(0.9);
 		transition: var(--transition);
+		cursor: grab;
 		box-shadow: var(--shadow);
 		border-radius: 999px;
 		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
 
-		&:hover {
-			cursor: grab;
-		}
-
 		&:active {
 			transform: var(--active);
 			cursor: grabbing;
@@ -194,6 +188,7 @@ input[type="range"] {
 	&::-moz-range-thumb {
 		appearance: none;
 		transition: var(--transition);
+		cursor: grab;
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
@@ -201,10 +196,6 @@ input[type="range"] {
 		width: 1.5rem;
 		height: 1.5rem;
 
-		&:hover {
-			cursor: grab;
-		}
-
 		&:active {
 			transform: var(--active);
 			cursor: grabbing;

sass/_media.scss

@@ -78,11 +78,12 @@ img {
 	transition: var(--transition-longer);
 
 	&:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
+		cursor: zoom-in;
+
 		&:hover {
 			position: relative;
 			transform: var(--hover);
 			z-index: 1;
-			cursor: zoom-in;
 			box-shadow: var(--edge-highlight), var(--shadow-raised);
 			border-radius: 0;
 		}
@@ -113,6 +114,6 @@ img {
 	}
 }
 
-a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]):hover {
+a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
 	cursor: pointer;
 }

sass/_nav.scss

@@ -164,15 +164,11 @@
 		button {
 			appearance: none;
 			transition: var(--transition);
+			cursor: pointer;
 			border: none;
 			border-radius: 999px;
 			background-color: transparent;
-			font-weight: bold;
 			font-size: 1rem;
-
-			&:hover {
-				cursor: pointer;
-			}
 		}
 
 		details {

sass/_pre-container.scss

@@ -22,6 +22,7 @@
 			float: inline-end;
 			appearance: none;
 			transition: var(--transition);
+			cursor: pointer;
 			border: none;
 			border-radius: var(--rounded-corner-small);
 			background-color: transparent;
@@ -30,7 +31,6 @@
 			line-height: 0;
 
 			&:hover {
-				cursor: pointer;
 				box-shadow: var(--edge-highlight);
 				background-color: var(--fg-muted-1);
 				color: var(--fg-muted-5);
@@ -41,9 +41,7 @@
 			}
 
 			&:disabled {
-				&:hover {
+				cursor: not-allowed;
-					cursor: not-allowed;
-				}
 
 				&:active {
 					transform: none;

sass/_typography.scss

@@ -42,13 +42,10 @@ small {
 }
 
 abbr[title] {
+	cursor: help;
 	text-decoration: underline;
 	text-decoration-style: dotted;
 	text-decoration-thickness: max(1px, 0.0625em);
-
-	&:hover {
-		cursor: help;
-	}
 }
 
 figcaption {
@@ -149,16 +146,13 @@ progress {
 kbd {
 	display: inline-block;
 	transition: var(--transition);
+	cursor: pointer;
 	box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2);
 	border-radius: var(--rounded-corner-small);
 	background-color: var(--fg-muted-1);
 	padding: 0.125rem 0.375rem;
 	font-size: smaller;
 
-	&:hover {
-		cursor: pointer;
-	}
-
 	// Small nice thingy, keys can be pressed!
 	&:active {
 		transform: translateY(0.125rem);