Differentiate Remarkup header sizes more clearly
ClosedPublic
Actions

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

Details

Reviewers

amckinley

Commits

rPb7aacaa4d30b: Differentiate Remarkup header sizes more clearly

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

Branch

header1

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 22945
Build 31485: Run Core Tests
Build 31484: arc lint + arc unit

Event Timeline

epriestley created this revision.Jun 4 2019, 7:06 PM

epriestley added inline comments.Jun 4 2019, 7:07 PM

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!

Update Celerity map.

Harbormaster completed remote builds in B22944: Diff 49069.Jun 4 2019, 7:09 PM

epriestley requested review of this revision.Jun 4 2019, 7:09 PM

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.