From deb9bc86584b656d582a7b6eac942301da886434 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sat, 12 Oct 2024 17:27:01 +0100
Subject: [PATCH] Use scroll-margin-top on anchor targets

This will make the anchor target easier to read.
---
 lib/rdoc/generator/template/darkfish/class.rhtml  | 10 +++++-----
 lib/rdoc/generator/template/darkfish/css/rdoc.css |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
index afac0c44cd..85fb0c1c33 100644
--- a/lib/rdoc/generator/template/darkfish/class.rhtml
+++ b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -18,7 +18,7 @@
 </nav>
 
 <main role="main" aria-labelledby="<%=h klass.aref %>">
-  <h1 id="<%=h klass.aref %>" class="<%= klass.type %>">
+  <h1 id="<%=h klass.aref %>" class="anchor-link <%= klass.type %>">
     <%= klass.type %> <%= klass.full_name %>
   </h1>
 
@@ -27,7 +27,7 @@
   </section>
 
   <%- klass.each_section do |section, constants, attributes| -%>
-  <section id="<%= section.aref %>" class="documentation-section">
+  <section id="<%= section.aref %>" class="documentation-section anchor-link">
     <%- if section.title then -%>
     <header class="documentation-section-title">
       <h2>
@@ -70,7 +70,7 @@
       </header>
 
       <%- attributes.each do |attrib| -%>
-      <div id="<%= attrib.aref %>" class="method-detail">
+      <div id="<%= attrib.aref %>" class="method-detail anchor-link">
         <div class="method-heading attribute-method-heading">
           <a href="#<%= attrib.aref %>" title="Link to this attribute">
             <span class="method-name"><%= h attrib.name %></span>
@@ -94,13 +94,13 @@
        next if visibilities.empty?
        visibilities.each do |visibility, methods|
          next if methods.empty? %>
-     <section id="<%= visibility %>-<%= type %>-<%= section.aref %>-method-details" class="method-section">
+     <section id="<%= visibility %>-<%= type %>-<%= section.aref %>-method-details" class="method-section anchor-link">
        <header>
          <h3><%= visibility.to_s.capitalize %> <%= type.capitalize %> Methods</h3>
        </header>
 
     <%- methods.each do |method| -%>
-      <div id="<%= method.aref %>" class="method-detail <%= method.is_alias_for ? "method-alias" : '' %>">
+      <div id="<%= method.aref %>" class="method-detail anchor-link <%= method.is_alias_for ? "method-alias" : '' %>">
         <div class="method-header">
           <%- if (call_seq = method.call_seq) then -%>
             <%- call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 12212a341e..4de5e366dd 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -428,6 +428,10 @@ main sup {
   font-size: 0.8em;
 }
 
+main .anchor-link:target {
+  scroll-margin-top: 20px;
+}
+
 /* The heading with the class name */
 main h1[class] {
   margin-top: 0;