squashed

Author: andreasgriffin

assets/sass/styles.scss

@@ -178,22 +178,26 @@ h1,h2, h3, h4, h5, h6 {
   }
 
   /* Base style: zero-width, hidden, no layout shift */
-  .header-anchor {
+.header-anchor {
     position: absolute;
-    left: 0;
-    padding-right: 0.3em;
-    margin-left: -1.3em;    /* pulls it into the gutter */
+    top: 50%;
+    left: -1.9em;           /* place the icon farther into the gutter */
+    transform: translateY(-50%);
+    padding-right: 0.4em;
     width: 0;             /* collapsed when not in use */
     overflow: hidden;     /* hide both icon + any extra */
     opacity: 0;
     white-space: nowrap;  /* keep it on one line */
-    font-size: 0.7em;     /* make the icon smaller */
+    line-height: 1;
+    text-decoration: none;
+    font-size: 0.45em;    /* keep the hover icon subtle */
     transition:
       opacity 0.2s ease-in-out,
       width 0.2s ease-in-out;
   }
 
   /* On hover (of the heading), expand and show */
+  h1:hover .header-anchor,
   h2:hover .header-anchor,
   h3:hover .header-anchor,
   h4:hover .header-anchor,

…uts/_default/_markup/render-heading.html layouts/_markup/render-heading.htmllayouts/_default/_markup/render-heading.html renamed to layouts/_markup/render-heading.html layouts/_default/_markup/render-heading.html renamed to layouts/_markup/render-heading.html

@@ -1,5 +1,5 @@
-{{- /* rendered for each heading */ -}}
-{{ $id := .Anchor | default (anchorize .Text) }}
+{{- /* Render Markdown headings with the same hover anchor affordance used elsewhere. */ -}}
+{{- $id := .Anchor | default (anchorize .Text) -}}
 <h{{ .Level }} id="{{ $id }}">
   <a class="header-anchor" href="#{{ $id }}" aria-hidden="true">🔗</a>
   {{ .Text | safeHTML }}

layouts/partials/hardware-signer/detail.html

@@ -5,6 +5,7 @@
 {{ $summary := or (index $signer.summary $lang) (index $signer.summary "en") }}
 {{ $discount := $signer.discount }}
 {{ $slug := or $signer.slug (path.Base (path.Clean $ctx.File.Dir)) }}
+{{ $headerID := anchorize $name }}
 {{ $connections := slice }}
 {{ if $signer.features.usb }}{{ $connections = $connections | append "USB" }}{{ end }}
 {{ if $signer.features.qr }}{{ $connections = $connections | append "QR" }}{{ end }}
@@ -22,7 +23,10 @@
         {{ end }}
       </div>
       <div class="col">
-        <h1 class="mb-1">{{ $name }}</h1>
+        <h1 class="mb-1" id="{{ $headerID }}">
+          <a class="header-anchor" href="#{{ $headerID }}" aria-hidden="true">🔗</a>
+          {{ $name }}
+        </h1>
         {{ with $summary }}<p class="text-muted mb-2">{{ . }}</p>{{ end }}
         <div class="d-flex gap-2 flex-wrap mb-2">
           {{ if $signer.bitcoin_only }}<span class="badge bg-warning text-dark">{{ i18n "hardware_badge_bitcoin_only" }}</span>{{ end }}
@@ -48,7 +52,11 @@ <h1 class="mb-1">{{ $name }}</h1>
     <div class="content">{{ . }}</div>
   {{ else }}
     <div class="content">
-      <h2>{{ i18n "hardware_expect_title" }}</h2>
+      {{ $expectID := anchorize (i18n "hardware_expect_title") }}
+      <h2 id="{{ $expectID }}">
+        <a class="header-anchor" href="#{{ $expectID }}" aria-hidden="true">🔗</a>
+        {{ i18n "hardware_expect_title" }}
+      </h2>
       <p>{{ i18n "hardware_expect_intro" (dict "Name" $name "Connections" $connectionLabel) }}</p>
       <ul>
         {{ if $signer.features.usb }}<li>{{ i18n "hardware_expect_usb" }}</li>{{ end }}
@@ -129,12 +137,21 @@ <h2>{{ i18n "hardware_expect_title" }}</h2>
         {{ if not (in $steps $step) }}{{ $steps = $steps | append $step }}{{ end }}
       {{ end }}
       <section class="mt-4">
-        <h3 class="h5 mb-2">{{ i18n "hardware_instructions" | default "Instructions" }}</h3>
+        {{ $instructionsTitle := i18n "hardware_instructions" | default "Instructions" }}
+        {{ $instructionsID := anchorize $instructionsTitle }}
+        <h3 class="h5 mb-2" id="{{ $instructionsID }}">
+          <a class="header-anchor" href="#{{ $instructionsID }}" aria-hidden="true">🔗</a>
+          {{ $instructionsTitle }}
+        </h3>
         {{ range $stepOrder }}
           {{ $step := . }}
           {{ if in $steps $step }}
           {{ $title := or (index $titleMap $step) (title (replace $step "-" " ")) }}
-          <h4 class="h6 mt-3 mb-1">{{ $title }}</h4>
+          {{ $stepID := printf "instruction-%s" (anchorize $title) }}
+          <h4 class="h6 mt-3 mb-1" id="{{ $stepID }}">
+            <a class="header-anchor" href="#{{ $stepID }}" aria-hidden="true">🔗</a>
+            {{ $title }}
+          </h4>
           {{ with (index $introMap $step) }}<p class="text-muted small mb-2">{{ . }}</p>{{ end }}
           <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-3">
             {{ range $screens }}