From 36c5e527c90d9e91448154112e1322f8ebbad1ee Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 26 Nov 2024 14:51:17 +0100
Subject: [PATCH 1/2] Improve content headings

Allows selection of heading text. Also makes hover link always
(slightly) visible for discoverability.

Also improves:

- hover link colour
- hover link icon spacing
- heading spacing

Fixes #1969
---
 assets/css/content/general.css | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index 5f727446a..e4b9c54e7 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -39,7 +39,8 @@
 
 .content-inner h2 {
   font-size: 1.6em;
-  margin: 1em 0 0.5em;
+  padding-top: 1em;
+  margin-bottom: 0.5em;
   font-weight: 700;
 }
 
@@ -154,6 +155,11 @@
   display: grid;
   grid-template: 1fr / 1fr;
 }
+@media screen and (max-width: 768px) {
+  .content-inner .section-heading {
+    --icon-spacing: 2px;
+  }
+}
 
 .content-inner .section-heading > :is(.hover-link, .text) {
   grid-row: 1;
@@ -166,34 +172,21 @@
 
 .content-inner .section-heading i {
   font-size: var(--icon-size);
+  color: var(--mainLight);
   margin-top: 0.1em;
   margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
-  padding-right: var(--icon-spacing); /* Avoids gap in hover area */
-  opacity: 0;
-}
-
-@media screen and (max-width: 768px) {
-  .content-inner .section-heading i {
-    margin-left: calc(-1 * (var(--icon-size)));
-  }
+  padding-right: var(--icon-spacing);
+  opacity: 0.3;
 }
 
 .content-inner :is(blockquote, section.admonition) .section-heading i {
   display: none;
 }
 
-.content-inner .section-heading .hover-link:is(:hover, :focus) i {
+.content-inner .section-heading:is(:hover, :focus, :target) i {
   opacity: 1;
 }
 
-/* Allow section link to be hovered and used “through” text */
-.content-inner .section-heading .text {
-  pointer-events: none;
-}
-.content-inner .section-heading .text a {
-  pointer-events: all;
-}
-
 .content-inner .app-vsn {
   display: none !important;
   font-size: 0.6em;

From 9b8ba5bf9196c87f08f801efb315a08e4b9a71c8 Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Tue, 26 Nov 2024 15:43:15 +0100
Subject: [PATCH 2/2] Restrict hover link visibility to heading hover/focus

---
 assets/css/content/general.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index e4b9c54e7..9561f48b7 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -176,7 +176,7 @@
   margin-top: 0.1em;
   margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
   padding-right: var(--icon-spacing);
-  opacity: 0.3;
+  opacity: 0;
 }
 
 .content-inner :is(blockquote, section.admonition) .section-heading i {