Better header line height #418

Merged
dfeyer merged 2 commits from task-better-header into master 5 years ago

@ -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;
igalic commented 5 years ago (Migrated from github.com)
Review

what's the measure without a postfix?

what's the measure without a postfix?
dfeyer commented 5 years ago (Migrated from github.com)
Review

line-height without postfix is based on the current font size (so a bit like em), but with the em postfix, cascading is based on the current font size, so the h1-6 get a line height of 1.7em based on the font size of the main articleselector, so way too small. Without the postfix, element inside the article will have a correct line height, based on their own font size.

Try to insert a really long headline in an article (to have a multi line rendering), with and without this PR to see that the headline are not readable.

See for more details about the unitless value for line-height: https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0

line-height without postfix is based on the current font size (so a bit like em), but with the em postfix, cascading is based on the current font size, so the h1-6 get a line height of 1.7em based on the font size of the `main article`selector, so way too small. Without the postfix, element inside the article will have a correct line height, based on their own font size. Try to insert a really long headline in an article (to have a multi line rendering), with and without this PR to see that the headline are not readable. See for more details about the unitless value for line-height: https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0
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;
}
}

@ -34,7 +34,7 @@ textarea {
font-family: $lora;
font-size: 1.1em;
line-height: 1.5em;
line-height: 1.5;
}
input[type="checkbox"] {

@ -55,13 +55,20 @@ body > main > .h-entry, .h-feed {
}
main {
h1 {
h1, h2, h3, h4, h5, h6 {
font-family: $route159;
font-size: 2.5em;
line-height: 1.15;
font-weight: 300;
&.article {
max-width: 40rem;
}
}
h1 {
font-size: 2.5em;
margin-top: 1em;
&.article {
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;
}

Loading…
Cancel
Save