Compare commits

..

2 commits

Author SHA1 Message Date
30f211caf3 Remove some now-unused homepage styles
These must be from long ago! Shrug!
2024-09-09 21:35:06 -07:00
dab865689f 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!
2024-09-09 21:33:05 -07:00
2 changed files with 62 additions and 93 deletions

View file

@ -78,85 +78,57 @@ body.outfits-new
font-size: 175% font-size: 175%
select select
font-size: 120% 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 #sections
+clearfix display: grid
display: table grid-template-columns: 1fr 1fr 1fr
list-style: none list-style: none
margin-top: 1em margin-top: 1em
h3
margin-bottom: .25em
li 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 div
grid-area: info
color: $soft-text-color color: $soft-text-color
font-size: 75% font-size: 75%
margin-left: 1em margin-left: 1em
z-index: 2 z-index: 2
h4, input strong
font-size: 116% font-size: 116%
h4, input[type=text] a:has(img)
color: inherit grid-area: image
h4 a
background: #ffffc0
img img
+opacity(0.75) opacity: 0.75
float: right float: right
margin-left: .5em margin-left: .5em
&:hover &:hover
+opacity(1) opacity: 1
p p
line-height: 1.5
min-height: 4.5em 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 #whats-new
margin-bottom: 1em margin-bottom: 1em
@ -325,4 +297,3 @@ body.outfits-new
#latest-contribution-created-at #latest-contribution-created-at
color: $soft-text-color color: $soft-text-color
margin-left: .5em margin-left: .5em

View file

@ -51,24 +51,22 @@
= t('.submit.secondary') = t('.submit.secondary')
%ul#sections %ul#sections
- localized_cache :action_suffix => 'your_items_module' do %li
%li#your-items-module
= link_to image_tag('your_items.png'), your_items_path
%h3= link_to t('your_items'), your_items_path %h3= link_to t('your_items'), your_items_path
%div = link_to image_tag('your_items.png'), your_items_path
%h4= t '.your_items.tagline' .section-info
%strong= 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 %li
= link_to image_tag('items.png'), items_path
%h3= link_to t('infinite_closet'), items_path %h3= link_to t('infinite_closet'), items_path
%div = link_to image_tag('items.png'), items_path
%h4= t '.infinite_closet.tagline' .section-info
%strong= t '.infinite_closet.tagline'
%p= t '.infinite_closet.description' %p= t '.infinite_closet.description'
= form_tag items_path, :method => 'get' do = form_tag items_path, :method => 'get' do
= text_field_tag 'q', '', :type => 'search', = text_field_tag 'q', '', :type => 'search',
@ -76,11 +74,11 @@
= submit_tag t('.infinite_closet.item_search.submit') = submit_tag t('.infinite_closet.item_search.submit')
%li %li
%h3= link_to t('modeling_hub'), bulk_pets_path
= link_to bulk_pets_path do = link_to bulk_pets_path do
= image_tag 'https://images.neopets.com/items/mall_ac_garland_spotlight.gif' = 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' %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'),