Plume/Plume
9
18
Fork 24
Code Issues 177 Pull requests 8 Releases 8 Wiki Activity

Better header line height #418

Merged
dfeyer merged 2 commits from task-better-header into master 2019-01-09 16:46:04 +00:00
Conversation 0 Commits 2 Files changed 3 +25 -9
3 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/css/_article.scss
View file

@ -16,7 +16,7 @@ main article {
margin: 2.5em auto; margin: 2.5em auto;
font-family: $lora; font-family: $lora;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.7em; line-height: 1.7;
igalic commented 2019-01-08 23:48:32 +00:00 (Migrated from github.com)
Review
Copy link

what's the measure without a postfix?

what's the measure without a postfix?
dfeyer commented 2019-01-09 12:30:53 +00:00 (Migrated from github.com)
Review
Copy link

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 { a:hover {
text-decoration: underline; text-decoration: underline;
@ -260,7 +260,7 @@ main .article-meta {
padding: 1.25em 0; padding: 1.25em 0;
font-family: $lora; font-family: $lora;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4em; line-height: 1.4;
text-align: left; text-align: left;
} }
} }

2
static/css/_forms.scss
View file

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

28
static/css/_global.scss
View file

@ -55,13 +55,20 @@ body > main > .h-entry, .h-feed {
} }
main { main {
h1, h2, h3, h4, h5, h6 {
font-family: $route159;
line-height: 1.15;
font-weight: 300;
&.article {
max-width: 40rem;
}
}
h1 { h1 {
font-family: $route159;
font-size: 2.5em; font-size: 2.5em;
font-weight: 300; margin-top: 1em;
&.article { &.article {
max-width: 40rem;
margin: 1em auto 0.5em; margin: 1em auto 0.5em;
font-family: $playfair; font-family: $playfair;
font-size: 2.5em; font-size: 2.5em;
@ -70,18 +77,27 @@ main {
} }
h2 { h2 {
font-family: $route159;
font-size: 1.75em; font-size: 1.75em;
font-weight: 300; font-weight: 300;
&.article { &.article {
max-width: 40rem;
margin: auto; margin: auto;
font-size: 1.25em; font-size: 1.25em;
margin-bottom: 0.5em; 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 { .cover {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -175,7 +191,7 @@ p.error {
font-family: $lora; font-family: $lora;
font-size: 1em; font-size: 1em;
line-height: 1.25em; line-height: 1.25;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
} }