Improve content headings (#1972)

Author: DavidOliver

Diff for: 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 */
+  padding-right: var(--icon-spacing);
   opacity: 0;
 }
 
-@media screen and (max-width: 768px) {
-  .content-inner .section-heading i {
-    margin-left: calc(-1 * (var(--icon-size)));
-  }
-}
-
 .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;