Skip to content
Permalink
Browse files

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
  • Loading branch information
talha131 committed Dec 1, 2019
1 parent a5f5c81 commit afa99ab89baf715a68627552152b7163ea0534b9
Showing with 123 additions and 39 deletions.
  1. +39 −0 documentation/content/Components/heading.md
  2. +2 −36 static/css/elegant.css
  3. +0 −3 static/css/sidebar.css
  4. +82 −0 static/css/typography.css
@@ -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 -->
@@ -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;
@@ -2,6 +2,3 @@ section#article-sidebar {
float: right;
font-size: 0.9em;
}
section#article-sidebar h4 {
font-size: 1.1rem;
}
@@ -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);
}

0 comments on commit afa99ab

Please sign in to comment.
You can’t perform that action at this time.