Page MenuHomePhabricator

Differentiate Remarkup header sizes more clearly
ClosedPublic

Authored by epriestley on Tue, Jun 4, 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:

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

Diff Detail

Repository
rP Phabricator
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

epriestley created this revision.Tue, Jun 4, 7:06 PM
epriestley added inline comments.Tue, Jun 4, 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.
epriestley updated this revision to Diff 49069.Tue, Jun 4, 7:07 PM
  • Update Celerity map.
epriestley requested review of this revision.Tue, Jun 4, 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.

epriestley updated this revision to Diff 49070.Tue, Jun 4, 7:25 PM
  • 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:

New after:

New rules with actual content:

amckinley accepted this revision.Tue, Jun 4, 9:18 PM
This revision is now accepted and ready to land.Tue, Jun 4, 9:18 PM
This revision was automatically updated to reflect the committed changes.