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

@@ -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.
+
+<!-- yaspeller ignore:start -->
+
+# Heading 1 `code` <small>small</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>small</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>small</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>small</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>small</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>small</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.
+
+<!-- yaspeller ignore:end -->

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;

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;
-}

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);
+}