app/assets/stylesheets/outfits/_new.sass

@@ -78,57 +78,85 @@ body.outfits-new
         font-size: 175%
       select
         font-size: 120%
+  #description, #top-contributors
+    float: left
+  #description
+    margin-right: 2%
+    width: 64%
+  #top-contributors
+    border: 1px solid $input-border-color
+    margin-top: 1em
+    padding: 1%
+    width: 30%
+    ol
+      margin-left: 2em
+      padding-left: 1em
+    > a
+      font-size: 80%
+      display: block
+      text-align: right
+  #how-can-i-help, #i-found-something
+    +module
+    float: left
+    padding: 1%
+    width: 46%
+    h2
+      font-style: italic
+    input, button
+      font-size: 115%
+    input[type=text]
+      border-color: $module-border-color
+      width: 12em
+  #how-can-i-help
+    margin-right: 1%
+  #i-found-something
+    margin-left: 1%
+    a
+      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
-    display: grid
-    grid-template-columns: 1fr 1fr 1fr
+    +clearfix
+    display: table
     list-style: none
     margin-top: 1em
-    li
-      display: grid
-      grid-template-areas: "header image" "info image" "form form"
-      grid-template-rows: auto auto auto
-      row-gap: .5em
-      padding: 0.5em
-      &:not(:first-child)
-        border-left: 1px solid $module-border-color
     h3
-      grid-area: header
-      margin-bottom: 0
+      margin-bottom: .25em
+    li
+      border-left:
+        color: $module-border-color
+        style: solid
+        width: $section-border-width
+      display: table-cell
+      padding: $section-padding
+      position: relative
+      width: $section-width
+      &:first-child
+        border-left: 0
     div
-      grid-area: info
       color: $soft-text-color
       font-size: 75%
       margin-left: 1em
       z-index: 2
-    strong
+    h4, input
       font-size: 116%
-    a:has(img)
-      grid-area: image
+    h4, input[type=text]
+      color: inherit
+    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
@@ -297,3 +325,4 @@ body.outfits-new
     #latest-contribution-created-at
       color: $soft-text-color
       margin-left: .5em
+

app/views/outfits/new.html.haml

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