1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-29 10:12:41 +01:00

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:

{F6485441}

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: {F6485447}

Reviewers: amckinley

Reviewed By: amckinley

Differential Revision: https://secure.phabricator.com/D20569
This commit is contained in:
epriestley 2019-06-04 11:58:31 -07:00
parent d7890d08b8
commit b7aacaa4d3
3 changed files with 15 additions and 35 deletions

View file

@ -9,7 +9,7 @@ return array(
'names' => array( 'names' => array(
'conpherence.pkg.css' => '3c8a0668', 'conpherence.pkg.css' => '3c8a0668',
'conpherence.pkg.js' => '020aebcf', 'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => '3dc188c0', 'core.pkg.css' => 'af983028',
'core.pkg.js' => 'ee320ca2', 'core.pkg.js' => 'ee320ca2',
'differential.pkg.css' => '8d8360fb', 'differential.pkg.css' => '8d8360fb',
'differential.pkg.js' => '67e02996', 'differential.pkg.js' => '67e02996',
@ -112,7 +112,7 @@ return array(
'rsrc/css/application/tokens/tokens.css' => 'ce5a50bd', 'rsrc/css/application/tokens/tokens.css' => 'ce5a50bd',
'rsrc/css/application/uiexample/example.css' => 'b4795059', 'rsrc/css/application/uiexample/example.css' => 'b4795059',
'rsrc/css/core/core.css' => '1b29ed61', 'rsrc/css/core/core.css' => '1b29ed61',
'rsrc/css/core/remarkup.css' => '9e627d41', 'rsrc/css/core/remarkup.css' => 'f06cc20e',
'rsrc/css/core/syntax.css' => '4234f572', 'rsrc/css/core/syntax.css' => '4234f572',
'rsrc/css/core/z-index.css' => '99c0f5eb', 'rsrc/css/core/z-index.css' => '99c0f5eb',
'rsrc/css/diviner/diviner-shared.css' => '4bd263b0', 'rsrc/css/diviner/diviner-shared.css' => '4bd263b0',
@ -151,7 +151,7 @@ return array(
'rsrc/css/phui/phui-document-summary.css' => 'b068eed1', 'rsrc/css/phui/phui-document-summary.css' => 'b068eed1',
'rsrc/css/phui/phui-document.css' => '52b748a5', 'rsrc/css/phui/phui-document.css' => '52b748a5',
'rsrc/css/phui/phui-feed-story.css' => 'a0c05029', 'rsrc/css/phui/phui-feed-story.css' => 'a0c05029',
'rsrc/css/phui/phui-fontkit.css' => '9b714a5e', 'rsrc/css/phui/phui-fontkit.css' => '1ec937e5',
'rsrc/css/phui/phui-form-view.css' => '01b796c0', 'rsrc/css/phui/phui-form-view.css' => '01b796c0',
'rsrc/css/phui/phui-form.css' => '159e2d9c', 'rsrc/css/phui/phui-form.css' => '159e2d9c',
'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
@ -793,7 +793,7 @@ return array(
'phabricator-object-selector-css' => 'ee77366f', 'phabricator-object-selector-css' => 'ee77366f',
'phabricator-phtize' => '2f1db1ed', 'phabricator-phtize' => '2f1db1ed',
'phabricator-prefab' => '5793d835', 'phabricator-prefab' => '5793d835',
'phabricator-remarkup-css' => '9e627d41', 'phabricator-remarkup-css' => 'f06cc20e',
'phabricator-search-results-css' => '9ea70ace', 'phabricator-search-results-css' => '9ea70ace',
'phabricator-shaped-request' => 'abf88db8', 'phabricator-shaped-request' => 'abf88db8',
'phabricator-slowvote-css' => '1694baed', 'phabricator-slowvote-css' => '1694baed',
@ -838,7 +838,7 @@ return array(
'phui-document-view-pro-css' => 'b9613a10', 'phui-document-view-pro-css' => 'b9613a10',
'phui-feed-story-css' => 'a0c05029', 'phui-feed-story-css' => 'a0c05029',
'phui-font-icon-base-css' => 'd7994e06', 'phui-font-icon-base-css' => 'd7994e06',
'phui-fontkit-css' => '9b714a5e', 'phui-fontkit-css' => '1ec937e5',
'phui-form-css' => '159e2d9c', 'phui-form-css' => '159e2d9c',
'phui-form-view-css' => '01b796c0', 'phui-form-view-css' => '01b796c0',
'phui-head-thing-view-css' => 'd7f293df', 'phui-head-thing-view-css' => 'd7f293df',

View file

@ -174,40 +174,29 @@
list-style-type: none; list-style-type: none;
} }
.phabricator-remarkup h1.remarkup-header {
font-size: 24px;
line-height: 1.625em;
margin: 24px 0 4px;
}
.phabricator-remarkup h2.remarkup-header { .phabricator-remarkup h2.remarkup-header {
font-size: 20px; font-size: 28px;
line-height: 1.5em; margin: 1em 0 0.75em;
margin: 20px 0 4px;
} }
.phabricator-remarkup h3.remarkup-header { .phabricator-remarkup h3.remarkup-header {
font-size: 18px; font-size: 24px;
line-height: 1.375em; margin: 1em 0 0.75em;
margin: 20px 0 4px;
} }
.phabricator-remarkup h4.remarkup-header { .phabricator-remarkup h4.remarkup-header {
font-size: 16px; font-size: 22px;
line-height: 1.25em; margin: 1em 0 0.75em;
margin: 12px 0 4px;
} }
.phabricator-remarkup h5.remarkup-header { .phabricator-remarkup h5.remarkup-header {
font-size: 15px; font-size: 18px;
line-height: 1.125em; margin: 1em 0 0.75em;
margin: 8px 0 4px;
} }
.phabricator-remarkup h6.remarkup-header { .phabricator-remarkup h6.remarkup-header {
font-size: 14px; font-size: 16px;
line-height: 1em; margin: 1em 0 0.75em;
margin: 4px 0;
} }
.phabricator-remarkup blockquote { .phabricator-remarkup blockquote {

View file

@ -6,15 +6,6 @@
color: {$blacktext}; color: {$blacktext};
} }
.phui-document-view .phabricator-remarkup .remarkup-header {
margin-bottom: 8px;
}
.phui-document-view .phabricator-remarkup h2.remarkup-header {
padding: 0 24px 8px 0;
margin: 32px 0 4px;
}
.phui-document-view .phabricator-remarkup .remarkup-header strong { .phui-document-view .phabricator-remarkup .remarkup-header strong {
color: #586BE9; color: #586BE9;
} }