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!
This commit is contained in:
Emi Matchu 2024-09-09 21:33:05 -07:00
parent 874483eacb
commit dab865689f
2 changed files with 62 additions and 55 deletions

View file

@ -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: table
display: grid
grid-template-columns: 1fr 1fr 1fr
list-style: none
margin-top: 1em
h3
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
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
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]
color: inherit
h4 a
background: #ffffc0
a:has(img)
grid-area: image
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

View file

@ -51,41 +51,39 @@
= t('.submit.secondary')
%ul#sections
- 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('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 => '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
%div
%h4= t '.modeling_hub.tagline'
.section-info
%strong= 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