Use scroll-margin-top on anchor targets (#1190)

This will make the anchor target easier to read.
ruby · Oct 17, 2024 · e2fe488 · e2fe488
1 parent 7398e5b
commit e2fe488
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -429,6 +429,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;