Rework article/section content bottom spacing

rossta · rossta · commit d1ad186c8892 · 2024-09-02T12:04:47.000-04:00
diff --git a/app/content/layouts/article.html.erb b/app/content/layouts/article.html.erb
@@ -33,7 +33,7 @@
         </nav>
       </aside>
     <%- end -%>
-    <div class="article-content container" itemprop="articleBody">
+    <div class="article-content container mb-3xl" itemprop="articleBody">
       <%= yield %>
     </div>
   </article>
diff --git a/app/javascript/css/components/article-content.css b/app/javascript/css/components/article-content.css
@@ -1,7 +1,5 @@
 .article-content,
 .section-content {
-  padding-bottom: var(--space-3xl);
-
   & h1,
   & h2,
   & h3,
diff --git a/app/javascript/css/utilities/custom.css b/app/javascript/css/utilities/custom.css
@@ -2,8 +2,8 @@
   margin-bottom: var(--grid-gutter);
 }
 
-.mb-gap {
-  margin-bottom: var(--grid-gutter);
+.mb-3xl {
+  margin-bottom: var(--space-3xl);
 }
 
 .py-gap {
diff --git a/app/views/admin/newsletters/edit.html.erb b/app/views/admin/newsletters/edit.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Newsletter: Edit") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render "form", newsletter: @newsletter %>
 
   <div>
diff --git a/app/views/admin/newsletters/index.html.erb b/app/views/admin/newsletters/index.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: Newsletters") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="flex">
     <%= link_to "New newsletter", new_admin_newsletter_path, class: "button primary" %>
   </div>
diff --git a/app/views/admin/newsletters/new.html.erb b/app/views/admin/newsletters/new.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: Create Newsletter") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render "form", newsletter: @newsletter %>
 
   <div>
diff --git a/app/views/admin/newsletters/show.html.erb b/app/views/admin/newsletters/show.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Admin: #{@newsletter.title}") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="flex gap-x-2">
     <%= button_to "Send Test", deliver_admin_newsletter_path(@newsletter), method: :patch, class: "button secondary" %>
     <%= button_to "Send Live", deliver_admin_newsletter_path(@newsletter, live: true), method: :patch, class: "button primary" %>
diff --git a/app/views/color_schemes/index_view.rb b/app/views/color_schemes/index_view.rb
@@ -10,7 +10,7 @@ def initialize(color_schemes:)
   def view_template
     render Pages::Header.new(title: "Color Scheme Index")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       div(class: "grid grid-content") do
         @color_schemes.each do |color_scheme|
           style do
diff --git a/app/views/color_schemes/show_view.rb b/app/views/color_schemes/show_view.rb
@@ -12,7 +12,7 @@ def initialize(color_scheme:)
   def view_template
     render Pages::Header.new(title: "Color Scheme: #{@color_scheme.display_name}")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       style do
         render(ColorSchemes::Css.new(color_scheme: @color_scheme, my_theme_enabled: true))
       end
diff --git a/app/views/examples/posts/index_view.rb b/app/views/examples/posts/index_view.rb
@@ -18,7 +18,7 @@ def view_template
       description: "This is an example for creating a post of different types, like text, link, or image."
     )
 
-    div(class: "section-content container py-gap") do
+    div(class: "section-content container py-gap mb-3xl") do
       link_to "New Post", new_examples_post_path, class: "button primary", data: {turbo_frame: "examples_post_form"}
 
       turbo_frame_tag :examples_post_form
diff --git a/app/views/examples/posts/new_view.rb b/app/views/examples/posts/new_view.rb
@@ -16,7 +16,7 @@ def view_template
       description: "This is an example for creating a post of different types, like text, link, or image."
     )
 
-    div(class: "section-content container py-gap") do
+    div(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag :examples_post_form do
         render Examples::Posts::Form.new(post: @post)
       end
diff --git a/app/views/newsletters/index.html.erb b/app/views/newsletters/index.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Joy of Rails Newsletter") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <div class="only:inherit grid grid-row-mid">
     <h2>No newsletters have been sent yet!</h2>
     <div>
diff --git a/app/views/newsletters/show.html.erb b/app/views/newsletters/show.html.erb
@@ -1,4 +1,4 @@
 <%= render Pages::Header.new(title: @newsletter.title, published_on: @newsletter.sent_at&.to_date) %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= render @newsletter %>
 </div>
diff --git a/app/views/settings/color_schemes/preview_view.rb b/app/views/settings/color_schemes/preview_view.rb
@@ -25,7 +25,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Color Scheme Preview")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag "color-scheme-preview", data: {turbo_action: "advance"} do
         style do
           render(ColorSchemes::Css.new(color_scheme: @color_scheme, my_theme_enabled: true))
diff --git a/app/views/settings/color_schemes/show_view.rb b/app/views/settings/color_schemes/show_view.rb
@@ -26,7 +26,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Color Scheme")
 
-    section(class: "section-content container py-gap") do
+    section(class: "section-content container py-gap mb-3xl") do
       turbo_frame_tag "color-scheme-form", data: {turbo_action: "advance", controller: "analytics", analytics_event_value: "Color Scheme Update"} do
         style do
           render(ColorSchemes::Css.new(color_scheme: @session_color_scheme)) if @session_color_scheme
diff --git a/app/views/settings/syntax_highlights/show_view.rb b/app/views/settings/syntax_highlights/show_view.rb
@@ -18,7 +18,7 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Syntax Highlighting")
 
-    section(class: %(section-content container py-gap)) do
+    section(class: %(section-content container py-gap mb-3xl)) do
       turbo_frame_tag "syntax-highlight-form" do
         render Settings::SyntaxHighlights::Form.new(
           settings: @settings,
diff --git a/app/views/share/snippet_screenshots/new.html.erb b/app/views/share/snippet_screenshots/new.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Share Snippet: Screenshot") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
     <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
   <% end %>
diff --git a/app/views/share/snippet_tweets/new.html.erb b/app/views/share/snippet_tweets/new.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Share Snippet") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
     <%= render Share::SnippetTweets::Tweet.new(@snippet, auto: @auto) %>
   <% end %>
diff --git a/app/views/share/snippets/edit.html.erb b/app/views/share/snippets/edit.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Snippet Share") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form do %>
     <%= render Share::Snippets::Form.new(@snippet) %>
   <% end %>
diff --git a/app/views/share/snippets/index.html.erb b/app/views/share/snippets/index.html.erb
@@ -1,13 +1,13 @@
 <%= render Pages::Header.new(title: "Snippet Share") %>
-<div id="snippets" class="section-content container py-gap">
+<div id="snippets" class="section-content container py-gap mb-3xl">
   <% if Flipper.enabled?(:snippets, current_user) %>
     <div class="flex">
       <%= link_to "New Snippet", new_share_snippet_path, class: "button primary" %>
     </div>
   <% end %>
 
   <% @snippets.each do |snippet| %>
-    <div id="<%= dom_id(snippet) %>" class="section-content">
+    <div id="<%= dom_id(snippet) %>" class="section-content mb-xl">
       <%= link_to share_snippet_path(snippet), class: "block" do %>
         <%= render CodeBlock::Snippet.new(snippet) %>
       <% end %>
diff --git a/app/views/share/snippets/new.html.erb b/app/views/share/snippets/new.html.erb
@@ -1,5 +1,5 @@
 <%= render Pages::Header.new(title: "Snippet Share") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
     <%= render Share::Snippets::Form.new(@snippet) %>
   <% end %>
diff --git a/app/views/share/snippets/show.html.erb b/app/views/share/snippets/show.html.erb
@@ -11,7 +11,7 @@
 ) %>
 
 <%= render Pages::Header.new(title: "Snippet Share") %>
-<div class="section-content container py-gap">
+<div class="section-content container py-gap mb-3xl">
   <%= turbo_frame_tag :snippet_form, data: {turbo_action: "advance"} do %>
     <%= render CodeBlock::Snippet.new(@snippet) %>
   <% end %>
diff --git a/app/views/users/newsletter_subscriptions/banner.rb b/app/views/users/newsletter_subscriptions/banner.rb
@@ -4,7 +4,7 @@ class Users::NewsletterSubscriptions::Banner < ApplicationComponent
   include Phlex::Rails::Helpers::TurboFrameTag
 
   def view_template(&block)
-    div(class: "newsletter-banner section-content container py-gap lg:py-3xl lg:grid-cols-1/2") do
+    div(class: "newsletter-banner section-content container py-gap mb-3xl lg:py-3xl lg:grid-cols-1/2") do
       h3(class: "font-semibold") do
         plain "The Joy of Rails Newsletter: "
         span { "A spark of joy for your inbox" }

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,8 @@`
`2`	`2`	`margin-bottom: var(--grid-gutter);`
`3`	`3`	`}`
`4`	`4`
`5`		`-.mb-gap {`
`6`		`- margin-bottom: var(--grid-gutter);`
	`5`	`+.mb-3xl {`
	`6`	`+ margin-bottom: var(--space-3xl);`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.py-gap {`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ def view_template`
`18`	`18`	`description: "This is an example for creating a post of different types, like text, link, or image."`
`19`	`19`	`)`
`20`	`20`
`21`		`- div(class: "section-content container py-gap") do`
	`21`	`+ div(class: "section-content container py-gap mb-3xl") do`
`22`	`22`	`link_to "New Post", new_examples_post_path, class: "button primary", data: {turbo_frame: "examples_post_form"}`
`23`	`23`
`24`	`24`	`turbo_frame_tag :examples_post_form`