Move action links out from heading tags

Avoids action link text being read out as part of "navigated to..."
announcements.

elixir-lang#1987

assets/css/content/general.css

@@ -1,3 +1,27 @@
+.content-inner .top-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 6px;
+  padding-top: 1rem;
+}
+.content-inner .top-header h1 {
+  flex-grow: 1;
+  margin: 0;
+}
+.content-inner .top-header .icon-action {
+  flex-grow: 0;
+  padding: 1.5rem 0 0 0;
+  width: 20px;
+  height: 20px;
+  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
 .content-inner {
   font-family: var(--defaultFontFamily);
   font-size: 1em;
@@ -32,11 +56,6 @@
   font-weight: 300;
 }
 
-.content-inner h1 .icon-action {
-  font-size: 1.2rem;
-  font-weight: normal;
-}
-
 .content-inner h2 {
   font-size: 1.6em;
   padding-top: 1em;
@@ -65,17 +84,13 @@
 }
 
 .content-inner .icon-action {
-  float: right;
   color: var(--iconAction);
   text-decoration: none;
   border: none;
   transition: color 0.3s ease-in-out;
   background-color: transparent;
   cursor: pointer;
 }
-.content-inner button.icon-action {
-  margin-top: 12px;
-}
 .content-inner .icon-action:hover {
   color: var(--iconActionHover);
 }

lib/ex_doc/formatter/html/templates/extra_template.eex

@@ -2,22 +2,21 @@
 <%= sidebar_template(config, type, nodes_map) %>
 
 <div id="top-content">
-  <h1>
+  <div class="top-header">
+    <h1><%= node.title_content %></h1>
+    <%= if type == :cheatmd do %>
+      <button onclick="window.print()" title="Print Cheatsheet" class="icon-action" rel="print">
+        <i class="ri-printer-line" aria-hidden="true"></i>
+        <span class="sr-only">Print Cheatsheet</span>
+      </button>
+    <% end %>
     <%= if node.source_url do %>
       <a href="<%= node.source_url %>" title="View Source" class="icon-action" rel="help">
         <i class="ri-code-s-slash-line" aria-hidden="true"></i>
         <span class="sr-only">View Source</span>
       </a>
     <% end %>
-    <%= if type == :cheatmd do %>
-      <button onclick="window.print()" title="Print Cheatsheet" class="icon-action" rel="print">
-        <i class="ri-printer-line" aria-hidden="true"></i>
-        <span class="sr-only">Print cheatsheet</span>
-      </button>
-    <% end %>
-
-    <span><%= node.title_content %></span>
-  </h1>
+  </div>
 
   <%= if type == :livemd do %>
     <div class="livebook-badge-container">

lib/ex_doc/formatter/html/templates/module_template.eex

@@ -2,19 +2,21 @@
 <%= sidebar_template(config, module.type, nodes_map) %>
 
 <div id="top-content">
-  <h1>
+  <div class="top-header">
+    <h1>
+      <span translate="no"><%= module.title %></span> <%= module_type(module) %>
+      <small class="app-vsn" translate="no">(<%= config.project %> v<%= config.version %>)</small>
+      <%= for annotation <- module.annotations do %>
+        <span class="note">(<%= annotation %>)</span>
+      <% end %>
+    </h1>
     <%= if module.source_url do %>
       <a href="<%= module.source_url %>" title="View Source" class="icon-action" rel="help">
         <i class="ri-code-s-slash-line" aria-hidden="true"></i>
         <span class="sr-only">View Source</span>
       </a>
     <% end %>
-    <span translate="no"><%= module.title %></span> <%= module_type(module) %>
-    <small class="app-vsn" translate="no">(<%= config.project %> v<%= config.version %>)</small>
-    <%= for annotation <- module.annotations do %>
-      <span class="note">(<%= annotation %>)</span>
-    <% end %>
-  </h1>
+  </div>
 
   <%= if deprecated = module.deprecated do %>
     <div class="deprecated">
@@ -54,4 +56,5 @@
     </div>
   </section>
 <% end %>
+
 <%= footer_template(config, module) %>