Display pointer if an image is in link

CHANGELOG.md

@@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set.
+- Display pointer cursor if image is wrapped in a link.
 - Don't add `::before` pseudo element to color pickers.
 - Fix images being covered by other images in some scenarios.
 - Load auto-menu-close script if navbar sublinks are present.

content/demo/index.md

@@ -54,7 +54,7 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
 - [ ] Coffee
 - [x] Combustible lemons
 
-![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)
+[![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)](https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg)
 
 | Mare         | Rating            | Additional info  |
 | :----------- | :---------------- | :---------------  |

sass/_buttons.scss

@@ -6,13 +6,24 @@
 	margin-block-start: 4rem;
 }
 
-.inline-button {
+a.inline-button {
+	text-decoration: none;
+}
+
+button.inline-button {
 	-webkit-appearance: none;
 	appearance: none;
-	transition: var(--transition);
-	cursor: pointer;
-	box-shadow: var(--edge-highlight);
 	border: none;
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+
+a.inline-button,
+button.inline-button {
+	transition: var(--transition);
+	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
 	background-color: var(--fg-muted-1);
 	padding: 0.75rem 1rem;
@@ -20,12 +31,10 @@
 	font-weight: bold;
 	font-size: 0.875rem;
 	line-height: 1;
-	text-decoration: none;
 
 	&:hover {
 		background-color: var(--fg-muted-2);
 		color: var(--fg-color);
-		text-decoration: none;
 	}
 
 	&:active {

sass/_code.scss

@@ -52,7 +52,6 @@ pre {
 	// The line number cells
 	table td:nth-of-type(1) {
 		-webkit-user-select: none;
-		cursor: default;
 		user-select: none;
 		text-align: center;
 	}

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);
 				}
@@ -181,12 +181,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/_input.scss

@@ -5,21 +5,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);
-		cursor: not-allowed;
 
 		&:hover {
+			cursor: not-allowed;
 			background-color: var(--fg-muted-1);
 		}
 	}
@@ -42,7 +42,6 @@ input[type="checkbox"] {
 		background-color: var(--primary-color);
 
 		&:disabled {
-			cursor: not-allowed;
 			border: 0.15rem solid transparent;
 			background-color: var(--primary-color-alpha);
 
@@ -168,25 +167,31 @@ input[type="range"] {
 	-webkit-appearance: none;
 	appearance: none;
 	transition: var(--transition);
-	cursor: pointer;
 	box-shadow: var(--edge-highlight);
 	border-radius: 999px;
 	background: var(--primary-color);
 	width: 100%;
 	height: 0.5rem;
 
+	&:hover {
+		cursor: pointer;
+	}
+
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		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;
@@ -196,7 +201,6 @@ input[type="range"] {
 	&::-moz-range-thumb {
 		appearance: none;
 		transition: var(--transition);
-		cursor: grab;
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
@@ -204,6 +208,10 @@ input[type="range"] {
 		width: 1.5rem;
 		height: 1.5rem;
 
+		&:hover {
+			cursor: grab;
+		}
+
 		&:active {
 			transform: var(--active);
 			cursor: grabbing;

sass/_media.scss

@@ -77,15 +77,14 @@ video {
 img {
 	transition: var(--transition-longer);
 
-	&:not(.no-hover, .full-bleed, &[src*="#no-hover"], &[src*="#full-bleed"]) {
+	&: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;
-			position: relative;
 		}
 
 		&.start,
@@ -113,3 +112,7 @@ img {
 		}
 	}
 }
+
+a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]):hover {
+	cursor: pointer;
+}

sass/_nav.scss

@@ -205,12 +205,15 @@
 			-webkit-appearance: none;
 			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

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

sass/_typography.scss

@@ -31,10 +31,13 @@ small {
 }
 
 abbr[title] {
-	cursor: help;
 	text-decoration: underline;
 	text-decoration-style: dotted;
 	text-decoration-thickness: max(1px, 0.0625em);
+
+	&:hover {
+		cursor: help;
+	}
 }
 
 figcaption {
@@ -136,7 +139,6 @@ 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);
@@ -144,6 +146,10 @@ kbd {
 	font-size: 0.875em;
 	line-height: 1;
 
+	&:hover {
+		cursor: pointer;
+	}
+
 	// Small nice thingy, keys can be pressed!
 	&:active {
 		transform: translateY(0.125rem);
@@ -218,8 +224,11 @@ details {
 	padding: 1rem;
 
 	summary {
-		cursor: pointer;
 		line-height: 1.25;
+
+		&:hover {
+			cursor: pointer;
+		}
 	}
 
 	:last-child {