Styles: Fix low-hanging layout problems on mobile

[nfagerlund]

Most of the built-in S2 layouts have one or more of the following issues, especially on mobile:

• Overly wide margins crowding the content area.
  • On mobile, full-page margins shouldn’t be a % and shouldn’t be configurable. Pick a pixel value instead.
  • Other paddings and margins might also be too fluffy.
• Insufficient space for subjects (and sometimes other things).
  • A common move is to bump the userpic up into the header’s turf and constrain the header with a margin. On mobile that can shrink header space by half, and that’s just not enough room.
• Gross overflows!!! My nemesis. Can we agree that nothing posted by a rando should ever be allowed to cause full-page sideways slop on your flist or entry pages? If so:
  • Entry/comment/module content areas should have overflow-x: auto, so that if worst comes to worst they can scroll independently without trashing an entire page.
  • Fields that might contain a long pseudo-word (headers, metadata items, probably content areas too to accommodate the occasional five-minute keyboard smash) need overflow-wrap: break-word.
• Dramatic Woodchuck zoom in polls and modules.
• Other stuff? TBD.

This isn’t a “fix it, done” issue; it’s more just a space to talk about what’s worth doing in service of being a Mobile Friend, and a thing to reference when making edits that serve this goal without addressing some other issue.

---

I turned on responsive design mode, set it to 320px wide (the venerable iPhone SE size), and previewed every single built-in layout on dreamwidth.org (except Tabula Rasa). This wasn't a deep dive; it was just a scroll down a fairly ordinary "recent entries" page. Here's what I learned:

• A surprising number of layouts were in excellent (9) or decent (23) condition! For whatever reason, these were mostly the ones that I hadn't ever really tried before, haha. All of these should get at least a quick once-over, but they'll go fast.
• There were 9 that need extensive but fairly tractable adjustments. This was the group I expected to be the largest? Go figure.
• 16 layouts were either fundamentally broken, or superficially broken in so many ways at once that they'll take extra effort to repair.

In Excellent Condition

These actually look pretty dece. We can do some preventative maintenance and send them on their way.

For all of these, we need to at least check the amount of indentantion on blockquotes and list items (the defaults are usually too aggressive) and protect against overflows (with overflow-wrap: break-word in headers/metadata, and overflow-x: auto in content).

1. basic boxes
2. compartmentalize
3. marginless
4. mobility
5. modish
6. paletteable
7. planet caravan
   • blockquotes need extra attention, font size in those looks goofy?
8. practicality (wip already)
9. refried tablet

Needs Simple, Straightforward Adjustments

Like the previous group, these need overflow checks and list item / blockquote indent adjustments. They also have some other issues, usually overly wide margins. But otherwise, they're in fairly decent shape.

1. abstractia
   • page title size, entry title size
2. Bases
   • header sizes in content text need attention
3. boxes and borders
   • needs margin fixes
   • needs the header nav menu straightened out.
4. ciel
   • shrink the page title on small
5. colorside
   • outrageous margins and padding and indents.
6. crisped
   • margins too big
7. crossroads
   • margins too big
8. database
   • looks real bad, but easy to fix.
   • margins WAY too big
   • header sizes.
9. dusty foot
   • margins
10. drifting
    • margins
11. easyread
    • font sizes
    • margins
12. for the bold
    • (can't remember)
13. heads up
    • margins
14. hibiscus
    • margins (wow)
    • header sizes
15. modular
    • margins
16. motion
    • absolute 20em width set on modules??? what the eff.
    • other than that it seems ok, weirdly.
17. negatives
    • margins
18. skittlish dreams
    • some known overflows.
19. stepping stones
    • margins
20. summertime
    • margins
21. sunday morning
    • margins
    • entry headers are annoyingly compressed.
22. tranquility iii
    • margins
23. wide open
    • header sizes need attention

Needs Extensive Adjustments, but Salvageable

These all make a tremendous mess on mobile. The fixes aren't immediately obvious and might require design decisions, but they don't seem intractible.

1. corinthian
   • ok in the content, but does something totally heinous with the nav module, pushing it all the way off the screen to the right.
   • list/quote indent fixes.
2. fluid measure
   • needs a LOT of different levels of margin/padding fixes. sloppy whitespace on every possible target.
3. funky circles
   • margin heck
   • justified text looks bad here.
4. gold leaf
   • needs a reflow of some kind, you can't put a nav chonk up top like that and push all content below the fold.
5. nouveau oleanders
   • has margin shenanigans in weird places (padding on #primary > .inner???). This one could have maybe gone in the previous section, but untangling its weird decisions about padding will take a bit longer than those.
   • list/quote indents.
6. paper me
   • extreme padding/margin heck, compounding fluff in a lot of different places.
7. strata
   • margin problems, but they're a core part of its ~look~, so it needs a judicious hand.
8. transmogrified
   • messed up entry headers that also cause vertical space problems.
   • margin problems
   • known overflows
9. venture
   • Looks trashed, but if you were only looking at the entries column, it would actually look pretty great.
   • so it needs major structural work, but very few detail fixes. wild.

Entirely Screwed and Needs Extensive Redesign

These styles are so bad on mobile that they might need to be re-thought from the ground up. (Or hey, maybe not, if we're lucky.) Some of them are bad enough that I need someone else to make the argument for even trying.

1. bannering
2. blanket
3. brittle
   • bad margins, bad font sizes (headers get too SMALL??), generally fugly.
4. fantaisie
5. five am
6. lefty
   • needs redesign of the top area of each entry/comment (headers are 84px wide at 320px viewport, WOW)
   • justified text looks bad
   • typography in body text (font sizes, line heights, header sizes)
   • margins, etc.
7. librarian's dream
   • that left rail of interact icons is real iffy on a narrow viewport.
   • the usual margin stuff.
   • also some overlaps, like post times running over userpics.
8. leftovers
9. line up
10. patsy
    • it tries (even moves the userpic on mobile), but still looks bad.
    • line spacing.
    • page title size/letterspacing.
    • weird margins (not just simple overly big ones).
11. pattern
12. seamless
13. snakes and boxes
14. tectonic
    • wow
15. trifecta
16. Zesty
    • yeah, you were waiting for that one.

[nfagerlund]

An implementation wrinkle that can come up: once a container has been set to overflow: auto (in either dimension), it will clip and hide any relatively positioned children that get pushed outside its boundaries. And that can be a problem if you're trying to use position: relative (or a negative margin-top, which works similarly) to nudge the userpic up out of the body content area and into the header area.

The fix seems to be to set the parent of the scrollable container to position: relative, then use position: absolute (which ends up being relative to that parent) to put the userpic into place. That makes it so you can't float the userpic, but a ::before pseudo-element of the same size makes a good floatable substitute.