From afa99ab89baf715a68627552152b7163ea0534b9 Mon Sep 17 00:00:00 2001 From: Talha Mansoor Date: Sun, 1 Dec 2019 18:33:52 +0500 Subject: [PATCH] feat(typography): headings sizes and other properties are consistent Headings have consistent size. Code inside headings have proper size. Small inside headings have consistent size. fix #508 fix #521 --- documentation/content/Components/heading.md | 39 ++++++++++ static/css/elegant.css | 38 +--------- static/css/sidebar.css | 3 - static/css/typography.css | 82 +++++++++++++++++++++ 4 files changed, 123 insertions(+), 39 deletions(-) create mode 100644 documentation/content/Components/heading.md diff --git a/documentation/content/Components/heading.md b/documentation/content/Components/heading.md new file mode 100644 index 00000000..932e86df --- /dev/null +++ b/documentation/content/Components/heading.md @@ -0,0 +1,39 @@ +Title: Headings Style +Tags: style, typography +Category: Components +Date: 2019-12-01 10:38 +Slug: headings-style +comment_id: 3tb82h9vziuw-headings-style +Subtitle: +Summary: +Keywords: + +Following are the examples of headings as they appear inside an article. + + + +# Heading 1 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + +## Heading 2 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + +### Heading 3 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + +#### Heading 4 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + +##### Heading 5 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + +###### Heading 6 `code` small + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Lobortis feugiat vivamus at augue. Sed augue lacus viverra vitae congue eu consequat. + + diff --git a/static/css/elegant.css b/static/css/elegant.css index 53adbf54..b68b6e37 100644 --- a/static/css/elegant.css +++ b/static/css/elegant.css @@ -34,37 +34,6 @@ footer div#fpowered { margin-left: auto; margin-right: unset; } -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: Baskerville, Garamond, Georgia, "DejaVu Serif", "Times New Roman", - Times, Serif; - font-weight: normal; -} -h1 small, -h1 a, -h1 a:hover, -h2 small, -h2 a, -h2 a:hover, -h3 small, -h3 a, -h3 a:hover, -h4 small, -h4 a, -h4 a:hover, -h5 small, -h5 a, -h5 a:hover, -h6 small, -h6 a, -h6 a:hover { - color: inherit; - text-decoration: none; -} :lang(zh) { font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Helvetica, Arial, sans-serif; @@ -75,9 +44,6 @@ a { hr { border-width: 3px; } -small.subtitle { - font-style: italic; -} /* site title */ .site-name { font-family: "Monaco", "Inconsolata", "Andale Mono", "Lucida Console", @@ -288,8 +254,8 @@ blockquote p { padding: 5px; } .page-header h1 { - font-size: 3em; - font-weight: normal; + border: none; + line-height: 1em; } ul.articles-timeline { list-style: none; diff --git a/static/css/sidebar.css b/static/css/sidebar.css index 4cf06610..fbfb83af 100644 --- a/static/css/sidebar.css +++ b/static/css/sidebar.css @@ -2,6 +2,3 @@ section#article-sidebar { float: right; font-size: 0.9em; } -section#article-sidebar h4 { - font-size: 1.1rem; -} diff --git a/static/css/typography.css b/static/css/typography.css index b132dccb..33637f39 100644 --- a/static/css/typography.css +++ b/static/css/typography.css @@ -1,3 +1,10 @@ +:root { + --heading-border-bottom-width: 1px; + --heading-border-bottom-style: solid; + /* Headings that are not inside article. Like in sidebar are "others" */ + --heading-others-line-height: 1.3rem; + --heading-others-h4-font-size: 1.1rem; +} h1, h2, h3, @@ -7,6 +14,67 @@ h6 { font-family: Baskerville, Garamond, Georgia, "DejaVu Serif", "Times New Roman", Times, Serif; font-weight: normal; + margin: 10px 0px; +} +h1 { + font-size: 3rem; + border-bottom: var(--heading-border-bottom-width) + var(--heading-border-bottom-style) darkgray; +} +h1 code { + font-size: 2.5rem; +} +h2 { + font-size: 2.5rem; + border-bottom: var(--heading-border-bottom-width) + var(--heading-border-bottom-style) silver; +} +h2 code { + font-size: 2rem; +} +h3 { + border-bottom: var(--heading-border-bottom-width) + var(--heading-border-bottom-style) lightgray; + font-size: 2.3rem; +} +h3 code { + font-size: 1.8rem; +} +h4 { + font-size: 2rem; +} +h4 code { + font-size: 1.6rem; +} +h5 { + font-size: 1.8rem; +} +h5 code { + font-size: 1.4rem; +} +h6 { + font-size: 1.6rem; +} +h6 code { + font-size: 1.2rem; +} +h1, +h2, +h3 { + line-height: 1.3em; +} +h4, +h5, +h6 { + line-height: 1.1em; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-size: 70%; } h1 small, h1 a, @@ -32,3 +100,17 @@ h6 a:hover { small.subtitle { font-style: italic; } +h1#my-projects, +h1#recent-posts { + border: none; + font-size: 2.4rem; + line-height: var(--heading-others-line-height); +} +nav h4 { + font-size: var(--heading-others-h4-font-size); + line-height: var(--heading-others-line-height); +} +section#article-sidebar h4 { + font-size: var(--heading-others-h4-font-size); + line-height: var(--heading-others-line-height); +}