From 671c340aa8eb94664ca1f501221bccd75b9ea0c6 Mon Sep 17 00:00:00 2001 From: Dominique Feyer Date: Wed, 9 Jan 2019 17:46:03 +0100 Subject: [PATCH] Better header line height (#418) This change also remote all units for line-height to have more consistent styles and better cascading support. This solve the too small line height for multi line header in article and also add styling for h1 to h6 (previously h3 to h6 was not styled at all) --- static/css/_article.scss | 4 ++-- static/css/_forms.scss | 2 +- static/css/_global.scss | 28 ++++++++++++++++++++++------ 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/static/css/_article.scss b/static/css/_article.scss index b28de36..dd268aa 100644 --- a/static/css/_article.scss +++ b/static/css/_article.scss @@ -16,7 +16,7 @@ main article { margin: 2.5em auto; font-family: $lora; font-size: 1.2em; - line-height: 1.7em; + line-height: 1.7; a:hover { text-decoration: underline; @@ -260,7 +260,7 @@ main .article-meta { padding: 1.25em 0; font-family: $lora; font-size: 1.1em; - line-height: 1.4em; + line-height: 1.4; text-align: left; } } diff --git a/static/css/_forms.scss b/static/css/_forms.scss index ecc43be..52e264b 100644 --- a/static/css/_forms.scss +++ b/static/css/_forms.scss @@ -34,7 +34,7 @@ textarea { font-family: $lora; font-size: 1.1em; - line-height: 1.5em; + line-height: 1.5; } input[type="checkbox"] { diff --git a/static/css/_global.scss b/static/css/_global.scss index a4f8f24..c48bf4c 100644 --- a/static/css/_global.scss +++ b/static/css/_global.scss @@ -55,13 +55,20 @@ body > main > .h-entry, .h-feed { } main { + h1, h2, h3, h4, h5, h6 { + font-family: $route159; + line-height: 1.15; + font-weight: 300; + + &.article { + max-width: 40rem; + } + } h1 { - font-family: $route159; font-size: 2.5em; - font-weight: 300; + margin-top: 1em; &.article { - max-width: 40rem; margin: 1em auto 0.5em; font-family: $playfair; font-size: 2.5em; @@ -70,18 +77,27 @@ main { } h2 { - font-family: $route159; font-size: 1.75em; font-weight: 300; &.article { - max-width: 40rem; margin: auto; font-size: 1.25em; margin-bottom: 0.5em; } } + h3, h4, h5, h6 { + font-size: 1.5em; + font-weight: 300; + + &.article { + margin: auto; + font-size: 1.1em; + margin-bottom: 0.5em; + } + } + .cover { padding: 0px; margin: 0px; @@ -175,7 +191,7 @@ p.error { font-family: $lora; font-size: 1em; - line-height: 1.25em; + line-height: 1.25; text-align: left; overflow: hidden; }