Space and grid fixes for mobile web

Author: rossta

app/content/pages/articles/index.html.erb

@@ -1,5 +1,5 @@
 <section>
-  <div class="main-content container py-3xl">
+  <div class="main-content container py-gap lg:py-3xl">
     <% ArticlePage.published.take(20).zip(%w[left right]).each do |(page, side)| %>
       <%= render Pages::Summary.from_page(page, side: side) %>
     <% end %>

app/content/pages/index.html.erb

@@ -3,7 +3,7 @@ title: Joy of Rails
 ---
 
 <section style="min-height: 51vh">
-  <div class="main-content container py-3xl">
+  <div class="main-content container py-gap lg:py-3xl">
     <% ArticlePage.published.take(3).zip(%w[left right]).each do |(page, side)| %>
       <%= render Pages::Summary.from_page(page, side: side) %>
     <% end %>

app/javascript/css/components/footer-content.css

@@ -3,9 +3,6 @@ footer {
 }
 
 .footer-content {
-  padding-top: var(--space-3xl);
-  padding-bottom: var(--space-3xl);
-
   & nav > * {
     display: flex;
     padding-top: var(--space-2xs-xs);

app/javascript/css/components/newsletter-banner.css

@@ -3,9 +3,6 @@ section:has(.newsletter-banner) {
 }
 
 .newsletter-banner {
-  padding-top: var(--space-3xl);
-  padding-bottom: var(--space-3xl);
-
   & h3 {
     align-self: start;
 

app/javascript/css/layout.scss

@@ -49,8 +49,7 @@ main > *,
 }
 
 .main-content,
-.article-content,
-.section-content {
+.article-content {
   grid-gap: var(--grid-gutter);
   grid-template-columns: repeat(var(--grid-columns), [col-start] 1fr);
   grid-template-rows: minmax(calc(var(--leading) * 1em), max-content);
@@ -88,6 +87,10 @@ main > *,
     grid-template-columns: 1fr 2fr;
   }
 
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .article-content > .outside,
   .article-content > img {
     grid-column: col-start 9 / span 4;

app/javascript/css/utilities.css

@@ -1,3 +1,5 @@
+@import 'config/variables.scss';
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -969,9 +971,27 @@ focus\:ring-0:focus {
 .text-right {
   text-align: right;
 }
+
 /* Custom utilities */
 
-.py-3xl {
-  padding-top: var(--space-3xl);
-  padding-bottom: var(--space-3xl);
+.py-gap {
+  padding-top: var(--grid-gutter);
+  padding-bottom: var(--grid-gutter);
+}
+
+@media screen and (min-width: $screen-md) {
+}
+
+@media screen and (min-width: $screen-lg) {
+  lg\:text-left {
+    text-align: left;
+  }
+  lg\:text-right {
+    text-align: right;
+  }
+
+  lg\.py-3xl {
+    padding-top: var(--space-3xl);
+    padding-bottom: var(--space-3xl);
+  }
 }

app/views/application/_footer.html.erb

@@ -1,5 +1,5 @@
 <%= tag.footer class: "" do %>
-  <div class="footer-content">
+  <div class="footer-content py-gap lg:py-3xl">
     <%= link_to root_path, class: "logo" do %>
       <div class="">
         <%= inline_svg_tag "joy-logo.svg", class: "fill-current" %>

app/views/components/pages/summary.rb

@@ -24,14 +24,14 @@ def initialize(title: nil, description: nil, published_on: nil, image: nil, requ
   end
 
   def view_template
-    div(class: "page-summary grid grid-cols-2") do
+    div(class: "page-summary grid lg:grid-cols-2") do
       case @side
       when "left"
-        content(class: "grid grid-row-tight text-right")
-        image(class: "grid grid-row-tight text-left")
+        content(class: "grid grid-row-tight lg:text-right")
+        image(class: "grid grid-row-tight lg:text-left")
       else
-        image(class: "grid grid-row-tight text-right")
-        content(class: "grid grid-row-tight text-left")
+        image(class: "grid grid-row-tight lg:text-right")
+        content(class: "grid grid-row-tight lg:text-left")
       end
     end
   end

app/views/newsletter/_banner.html.erb

@@ -1,4 +1,4 @@
-<div class="newsletter-banner section-content container lg:grid-cols-1/2">
+<div class="newsletter-banner section-content container py-gap lg:py-3xl lg:grid-cols-1/2">
   <h3 class="font-semibold">The Joy of Rails Newsletter:
     <span>A spark of joy for your inbox</span>
   </h3>