Refactor module sections on homepage, to handle font change

Huh okay, moving to my other machine, the change to Noto Sans subtly
broke the homepage layout a bit, wrapping the form buttons to the next
line in the three module sections.

Here, I refactor to more modern grid/flexbox sensibilities. Btw, there
was a Flexbox thing that didn't work quite how I expected? I commented
on my confusion, but checked in Chrome and Firefox and it seems to work
in both, so, ok!

app/assets/stylesheets/outfits/_new.sass

@@ -115,48 +115,57 @@ body.outfits-new
       float: right
       font-size: 87.5%
       margin-top: 1em
-  $section-count: 3
-  $section-border-width: 1px
-  $section-padding: 0.5em
-  $section-width: 100% / $section-count
-  // (A - (B-1)*C) / B
   #sections
-    +clearfix
+    display: grid
-    display: table
+    grid-template-columns: 1fr 1fr 1fr
     list-style: none
     margin-top: 1em
-    h3
-      margin-bottom: .25em
     li
-      border-left:
+      display: grid
-        color: $module-border-color
+      grid-template-areas: "header image" "info image" "form form"
-        style: solid
+      grid-template-rows: auto auto auto
-        width: $section-border-width
+      row-gap: .5em
-      display: table-cell
+      padding: 0.5em
-      padding: $section-padding
+      &:not(:first-child)
-      position: relative
+        border-left: 1px solid $module-border-color
-      width: $section-width
+    h3
-      &:first-child
+      grid-area: header
-        border-left: 0
+      margin-bottom: 0
     div
+      grid-area: info
       color: $soft-text-color
       font-size: 75%
       margin-left: 1em
       z-index: 2
-    h4, input
+    strong
       font-size: 116%
-    h4, input[type=text]
+    a:has(img)
-      color: inherit
+      grid-area: image
-    h4 a
-      background: #ffffc0
     img
-      +opacity(0.75)
+      opacity: 0.75
       float: right
       margin-left: .5em
       &:hover
-        +opacity(1)
+        opacity: 1
     p
+      line-height: 1.5
       min-height: 4.5em
+      margin-bottom: 0
+    form
+      grid-area: form
+      display: flex
+      align-items: center
+      gap: .5em
+      font-size: .85em
+      margin-left: 1em
+      margin-right: .5em
+
+      input[type=text], input[type=search]
+        // TODO: It doesn't make sense to me that this is the right style? I
+        // expected `flex: 1 0 0` to be right, but that grew *too* large, and
+        // forced the sections to grow wider too. I also tried `flex: 0 1 100%`,
+        // which I would have *thought* is the same as this, but isn't! Idk!
+        width: 100%
 
   #whats-new
     margin-bottom: 1em

app/views/outfits/new.html.haml

@@ -51,41 +51,39 @@
         = t('.submit.secondary')
 
 %ul#sections
-  - localized_cache :action_suffix => 'your_items_module' do
+  %li
-    %li#your-items-module
+    %h3= link_to t('your_items'), your_items_path
-      = link_to image_tag('your_items.png'), your_items_path
+    = link_to image_tag('your_items.png'), your_items_path
-      %h3= link_to t('your_items'), your_items_path
+    .section-info
-      %div
+      %strong= t '.your_items.tagline'
-        %h4= t '.your_items.tagline'
+      %p= t '.your_items.description'
-        %p= t '.your_items.description'
+    = form_tag users_path, :method => 'get' do
-        = form_tag users_path, :method => 'get' do
+      = text_field_tag 'name', '', :type => 'search',
-          = text_field_tag 'name', '', :type => 'search',
+        :placeholder => t('.your_items.user_search.placeholder')
-            :placeholder => t('.your_items.user_search.placeholder')
+      = submit_tag t('.your_items.user_search.submit')
-          = submit_tag t('.your_items.user_search.submit')
-
-  - localized_cache :action_suffix => 'infinite_closet_module' do
-    %li
-      = link_to image_tag('items.png'), items_path
-      %h3= link_to t('infinite_closet'), items_path
-      %div
-        %h4= t '.infinite_closet.tagline'
-        %p= t '.infinite_closet.description'
-        = form_tag items_path, :method => 'get' do
-          = text_field_tag 'q', '', :type => 'search',
-            :placeholder => t('.infinite_closet.item_search.placeholder')
-          = submit_tag t('.infinite_closet.item_search.submit')
 
   %li
+    %h3= link_to t('infinite_closet'), items_path
+    = link_to image_tag('items.png'), items_path
+    .section-info
+      %strong= t '.infinite_closet.tagline'
+      %p= t '.infinite_closet.description'
+    = form_tag items_path, :method => 'get' do
+      = text_field_tag 'q', '', :type => 'search',
+        :placeholder => t('.infinite_closet.item_search.placeholder')
+      = submit_tag t('.infinite_closet.item_search.submit')
+    
+  %li
+    %h3= link_to t('modeling_hub'), bulk_pets_path
     = link_to bulk_pets_path do
       = image_tag 'https://images.neopets.com/items/mall_ac_garland_spotlight.gif'
-    %h3= link_to t('modeling_hub'), bulk_pets_path
+    .section-info
-    %div
+      %strong= t '.modeling_hub.tagline'
-      %h4= t '.modeling_hub.tagline'
       %p= t '.modeling_hub.description'
-      = form_tag load_pet_path, method: 'POST' do
+    = form_tag load_pet_path, method: 'POST' do
-        = pet_name_tag placeholder: t('.modeling_hub.load_pet.placeholder'),
+      = pet_name_tag placeholder: t('.modeling_hub.load_pet.placeholder'),
-          required: true
+        required: true
-        = submit_tag t('.modeling_hub.load_pet.submit')
+      = submit_tag t('.modeling_hub.load_pet.submit')
 
 - if @latest_contribution  # will be nil for a fresh copy of the site ;P
   #latest-contribution