Improve section headings containing links

elixir-lang · Sep 8, 2023 · bc7c0e0 · bc7c0e0
1 parent 5504a30
commit bc7c0e0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
@@ -39,26 +39,25 @@
   color: var(--main);
   margin: 0 0 1em;
   font-weight: 400;
-  overflow: hidden;
 }
 
 .page-cheatmd .content-inner h3 :is(a, a:visited) {
   color: var(--main);
   text-decoration: none;
 }
 
-.page-cheatmd .content-inner h3.section-heading i {
-  display: none;
-}
-
 .page-cheatmd .content-inner section.h3 {
   min-width: 300px;
   margin: 0;
   padding: 0 0 calc(var(--vertical-space) * 2) 0;
   break-inside: avoid;
 }
 
-.page-cheatmd .content-inner h3::after {
+.page-cheatmd .content-inner h3 .text {
+  overflow: hidden; /* Clips generated content horizontal rule */
+}
+
+.page-cheatmd .content-inner h3 .text::after {
   content: "";
   margin-left: calc(var(--horizontal-space) / 2);
   vertical-align: baseline;

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -131,30 +131,53 @@
   vertical-align: top;
 }
 
-.content-inner .section-heading a {
+.content-inner .section-heading a.link {
   text-decoration: none;
 }
 
+/* Section link icon. */
+.content-inner .section-heading {
+  --icon-size: 16px;
+  --icon-spacing: 5px;
+}
 .content-inner .section-heading i {
-  font-size: 16px;
+  font-size: var(--icon-size);
   margin-top: .1em;
-  margin-left: -21px;
+  margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
+  padding-right: var(--icon-spacing); /* Avoids gap during hover */
   opacity: 0;
 }
 
-.content-inner .section-heading a:is(:hover, :focus) i {
-  opacity: 1;
+@media screen and (max-width: 768px) {
+  .content-inner .section-heading i {
+    margin-left: calc(-1 * (var(--icon-size)));
+  }
 }
 
-blockquote .section-heading i {
+.content-inner blockquote .section-heading i {
   display: none;
 }
 
-@media screen and (max-width: 768px) {
-  .content-inner .section-heading i {
-    margin-left: -16px;
-    margin-right: -5px;
-  }
+.content-inner .section-heading .link:is(:hover, :focus) i {
+  opacity: 1;
+}
+
+/* Have both the section link anchor and title occupy the same grid item */
+.content-inner .section-heading {
+  display: grid;
+  grid-template: 1fr / 1fr;
+}
+.content-inner .section-heading > * {
+  grid-row: 1;
+  grid-column: 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 {

diff --git a/lib/ex_doc/formatter/html/templates.ex b/lib/ex_doc/formatter/html/templates.ex
@@ -302,10 +302,7 @@ defmodule ExDoc.Formatter.HTML.Templates do
 
     """
     <#{tag} id="#{prefix}#{id}" class="#{class_attribute}">
-      <a href="##{prefix}#{id}">
-        <i class="ri-link-m" aria-hidden="true"></i>
-        #{title}
-      </a>
+      <a href="##{prefix}#{id}" class="link"><i class="ri-link-m" aria-hidden="true"></i></a><span class="text">#{title}</span>
     </#{tag}>
     """
   end