Page MenuHomePhabricator

Differentiate Remarkup header sizes more clearly
ClosedPublic

Authored by epriestley on Jun 4 2019, 7:06 PM.

Details

Summary

Ref PHI1275. Previously, see T591. See also T7963. Headers are currently very visually similar to one another, and similar to the text size:

Screen Shot 2019-06-04 at 11.58.36 AM.png (1×2 px, 515 KB)

I think the design intent was to make it hard to make bad-looking documents, but all the headers end up being very samey.

Differentiate the sizes of the headers better so they're much more obvious (e.g., when scrolling through a document) and the different levels are more distinct.

This might be a little overboard, but we can always pull it back a bit if it's too much, and I think giving users more control in Remarkup (in cases where it doesn't create some weird syntax/parsing nightmare) is generally a good thing.

Test Plan

Screen Shot 2019-06-04 at 11.58.10 AM.png (1×2 px, 521 KB)

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

webroot/rsrc/css/core/remarkup.css
177

I've decreased the line heights slightly, but since I've increased the font size and the line height is relative to the font size, the actual absolute line height is also increasing -- just not as much as the font size is increasing.

Harbormaster returned this revision to the author for changes because remote builds failed.Jun 4 2019, 7:07 PM
Harbormaster failed remote builds in B22943: Diff 49068!

This also means that the actual page header (for example, the document title on a Phriction page) may be smaller than an <h1> in the same document.

I think that's perfectly fine and there's no reason the page header has to be the largest text on the page. The page header has many other strong differentiators (position, coloring, tags, underlines, backgrounds) and it's inconceivable to me that anyone will find it confusing if they land on a task/wiki/whatever which has a normal large-text page header text and then some technically-slightly-larger text in the body. The page header also tends to be longer (task title, wiki page name) so there's more total space dedicated to the actual page header than to an in-page header that just says "Overview" or "Next Steps" or whatever.

  • Remove "h1" rule, which is never used (the largest header is "<h2>", with the page header being "<h1>").
  • Adjust sizes a bit more.
  • Remove redundant weird override in some other file.
  • Simplify margins slightly.
webroot/rsrc/css/core/remarkup.css
177

(Obsoleted by later changes.)

New before:

Screen Shot 2019-06-04 at 12.24.02 PM.png (1×1 px, 434 KB)

New after:

Screen Shot 2019-06-04 at 12.23.47 PM.png (1×1 px, 437 KB)

New rules with actual content:

Screen Shot 2019-06-04 at 12.23.39 PM.png (1×1 px, 318 KB)

This revision is now accepted and ready to land.Jun 4 2019, 9:18 PM