Style improvements for home and articles index

Author: rossta

app/content/pages/index.html.erb

@@ -9,7 +9,8 @@ title: Joy of Rails
       <%= render Pages::Summary.from_page(page, side: side) %>
     <% end %>
 
-    <%= render Pages::List.new(articles.drop(3).take(6), class: "mt-16") %>
+    <h3 class="mt-16">More articles</h3>
+    <%= render Pages::List.new(articles.drop(3).take(6)) %>
   </div>
 </section>
 <section>

app/javascript/css/utilities/tailwind-media.scss

@@ -117,4 +117,8 @@
   .lg\:aspect-\[3\/2\] {
     aspect-ratio: 3 / 2;
   }
+
+  .lg\:block {
+    display: block;
+  }
 }

app/javascript/css/utilities/tailwind.css

@@ -1081,6 +1081,14 @@ focus\:ring-0:focus {
   aspect-ratio: 16 / 9;
 }
 
+.aspect-\[2\/1\] {
+  aspect-ratio: 2 / 1;
+}
+
+.object-cover {
+  object-fit: cover;
+}
+
 .drop-shadow-sm {
   filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
 }

app/views/components/pages/card.rb

@@ -16,7 +16,7 @@ def view_template
           figure(class: "page-card--image w-full") do
             image_tag @image,
               alt: description,
-              class: "aspect-[16/9] w-full rounded-2xl object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
+              class: "w-full rounded-2xl object-cover aspect-[16/9]"
           end
         end
         div(class: "max-w-xl") do

app/views/components/pages/summary.rb

@@ -57,7 +57,7 @@ def content(**)
     def image(**)
       div(**) do
         figure(class: "page-summary--image") do
-          image_tag @image, class: "w-full"
+          image_tag @image, class: "w-full object-cover aspect-[2/1] lg:aspect-[3/2]"
         end
       rescue
         ActionView::Template::Error