diff --git a/CHANGELOG.md b/CHANGELOG.md index 86eb2e5..473b932 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/content/demo/index.md b/content/demo/index.md index 318737e..afd0d2b 100644 --- a/content/demo/index.md +++ b/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 | | :----------- | :---------------- | :--------------- | diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 9fc9bac..7a0bfc7 100644 --- a/sass/_buttons.scss +++ b/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 { diff --git a/sass/_code.scss b/sass/_code.scss index df25bdb..42c8aed 100644 --- a/sass/_code.scss +++ b/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; } diff --git a/sass/_comments.scss b/sass/_comments.scss index 3cf6ac0..ae43fca 100644 --- a/sass/_comments.scss +++ b/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; } } diff --git a/sass/_input.scss b/sass/_input.scss index 543c6b0..e2964f3 100644 --- a/sass/_input.scss +++ b/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; diff --git a/sass/_media.scss b/sass/_media.scss index 60d04f2..f22f650 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -77,15 +77,14 @@ video { img { transition: var(--transition-longer); - &:not(.no-hover, .full-bleed, &[src*="#no-hover"], &[src*="#full-bleed"]) { - cursor: zoom-in; - + &:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) { &: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; +} diff --git a/sass/_nav.scss b/sass/_nav.scss index 05cb1f7..df46462 100644 --- a/sass/_nav.scss +++ b/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 { diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 7dcd2a6..138150a 100644 --- a/sass/_pre-container.scss +++ b/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; diff --git a/sass/_typography.scss b/sass/_typography.scss index 262e328..c9e499f 100644 --- a/sass/_typography.scss +++ b/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 {