Style .method elements

Author: jonathanhefner

lib/rdoc/generator/template/rails/_context.rhtml

@@ -131,7 +131,7 @@
       <h2 class="content__divider"><%= visibility.to_s.capitalize %> <%= type %> methods</h2>
       <% methods.each do |method| %>
         <div class="method">
-          <h3 class="title method-title" id="<%= method.aref %>">
+          <h3 class="method__signature" id="<%= method.aref %>">
             <% if method.call_seq %>
               <b><%= method.call_seq.gsub(/->/, '&rarr;').gsub(/\n(.)/, '<br />\1') %></b>
             <% else %>
@@ -141,15 +141,15 @@
           <%= link_to "Link", method, class: "permalink", name: method.aref %>
 
           <% unless method.aliases.empty? %>
-            <p class="aka">
+            <p class="method__aka">
               Also aliased as:
               <%# Sometimes a parent cannot be determined. See ruby/rdoc@85ebfe13dc. %>
               <%= method.aliases.map { |aka| link_to_if aka.parent, short_name(aka), aka }.join(", ") %>.
             </p>
           <% end %>
 
           <% if alias_for = method.is_alias_for then %>
-            <p class="aka">
+            <p class="method__aka">
               Alias for:
               <%= link_to short_name(alias_for), alias_for %>.
             </p>
@@ -163,20 +163,18 @@
 
           <% source_code, source_url = method_source_code_and_url(method) %>
           <% if source_code %>
-            <details class="sourcecode">
+            <details class="method__source">
               <summary>
                 <span class="label">Source code</span>
                 <% if source_url %>
                   <%= link_to_external "GitHub", source_url %>
                 <% end %>
               </summary>
 
-              <div class="dyn-source">
-                <pre><code class="ruby"><%= source_code %></code></pre>
-              </div>
+              <pre><code class="ruby"><%= source_code %></code></pre>
             </details>
           <% elsif source_url %>
-            <p><%= link_to_external "GitHub", source_url %></p>
+            <p class="method__source"><%= link_to_external "GitHub", source_url %></p>
           <% end %>
         </div>
       <% end %><%# methods.each %>

lib/rdoc/generator/template/rails/resources/css/main.css

@@ -12,9 +12,9 @@
   --link-hover-color: #990000;
   --icon-color: #777777;
 
-  --body-bg: #fff;
-  --code-bg: #eee;
-  --source-code-bg: #fffde8;
+  --body-bg: #ffffff;
+  --code-bg: #f1f1f1;
+  --source-code-bg: #f1f1e1;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -149,34 +149,20 @@ dt
   font-size: 1.15em;
 }
 
-.dyn-source {
-  background: var(--source-code-bg);
-  color: #000;
-  border: #ffe0bb dotted 1px;
-  margin: 0.5em 2em 0.5em 0;
-  padding: 0.5em;
-}
-
 .description pre {
   padding: 1em 1.2em;
   background: var(--code-bg);
   border-radius: 10px;
 }
 
 .description pre,
-.sourcecode pre {
+.method__source pre {
   overflow-x: auto;
 }
 
 .method {
-    margin-bottom: 2em;
     position: relative;
 }
-.method .description,
-.method .sourcecode
-{
-    margin-left: 1.2em;
-}
 .method h4
 {
     border-bottom: 1px dotted #999;
@@ -185,14 +171,6 @@ dt
     font-size: 1.1em;
     color: var(--heading-color);
 }
-.method .method-title {
-    border-bottom: 1px dotted #666;
-    padding: 0 0 0.15em 0;
-    margin: 0 0 0.5em 0;
-    font-size: 1.2em;
-    line-height: 1.25em;
-    position: relative;
-}
 
 .method a.permalink {
   position: absolute;
@@ -201,42 +179,6 @@ dt
   top: 0;
 }
 
-.method .aka {
-  margin-left: 1.2em;
-  font-style: italic;
-}
-
-.sourcecode {
-  width: fit-content; /* Reduce clickable area when collapsed */
-}
-
-.sourcecode[open] {
-  width: auto;
-}
-
-.sourcecode summary {
-  cursor: pointer;
-}
-
-.sourcecode summary::marker {
-  font-size: 1.25em;
-  color: var(--icon-color);
-}
-
-.sourcecode summary .label {
-  margin-left: -0.4em;
-  font-weight: bold;
-  color: var(--link-color);
-}
-
-.sourcecode summary .label:hover {
-  color: var(--link-hover-color);
-}
-
-.sourcecode summary .external-link {
-  margin-left: 1em;
-}
-
 @keyframes spotlight {
   from { background-color: yellow; }
   to { background-color: white; }
@@ -529,6 +471,67 @@ html {
 }
 
 
+/*
+ * Method
+ */
+
+.method {
+  margin-top: var(--space-xl);
+}
+
+.content__divider + .method {
+  margin-top: var(--space-lg);
+}
+
+.method__signature {
+  font-size: 1.1em;
+  font-weight: normal;
+  padding-bottom: var(--space-sm);
+  border-bottom: 2px solid var(--code-bg);
+}
+
+.method__aka {
+  font-style: italic;
+}
+
+.method__source {
+  width: fit-content; /* Reduce clickable area when collapsed */
+}
+
+.method__source[open] {
+  width: auto;
+}
+
+.method__source summary {
+  cursor: pointer;
+}
+
+.method__source summary::marker {
+  color: var(--icon-color);
+}
+
+.method__source summary .label {
+  margin-left: -0.2em;
+  color: var(--link-color);
+}
+
+.method__source summary .label:hover {
+  color: var(--link-hover-color);
+}
+
+.method__source summary .external-link {
+  margin-left: 1em;
+}
+
+.method__source pre {
+  margin-top: var(--space-sm);
+  padding: 0.5em 1em;
+  border-radius: 8px;
+
+  background: var(--source-code-bg);
+}
+
+
 /*
  * More-Less widget
  */

lib/sdoc/postprocessor.rb

@@ -89,7 +89,7 @@ def style_ref_links!(document)
   end
 
   def highlight_code_blocks!(document)
-    document.css(".description pre > code, .sourcecode pre > code").each do |element|
+    document.css(".description pre > code, .method__source pre > code").each do |element|
       code = element.inner_text
       language = element.classes.include?("ruby") ? "ruby" : guess_code_language(code)
       element.inner_html = highlight_code(code, language)

spec/postprocessor_spec.rb

@@ -148,21 +148,21 @@
 
     it "highlights method source code" do
       rendered = <<~HTML
-        <div class="sourcecode">
+        <div class="method__source">
           <pre><code class="ruby"><span class="ruby-comment"># highlighted by RDoc</span></code></pre>
         </div>
 
-        <div class="sourcecode">
+        <div class="method__source">
           <pre><code class="ruby">DELETE FROM 'tricky_ruby'</code></pre>
         </div>
       HTML
 
       expected = <<~HTML
-        <div class="sourcecode">
+        <div class="method__source">
           <pre><code class="ruby highlight">#{SDoc::Postprocessor.highlight_code("# highlighted by RDoc", "ruby")}</code></pre>
         </div>
 
-        <div class="sourcecode">
+        <div class="method__source">
           <pre><code class="ruby highlight">#{SDoc::Postprocessor.highlight_code("DELETE FROM 'tricky_ruby'", "ruby")}</code></pre>
         </div>
       HTML