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:
parent
874483eacb
commit
dab865689f
2 changed files with 62 additions and 55 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue