#418 Better header line height

Merged
dfeyer merged 2 commits from task-better-header into master 2 years ago
  1. +2
    -2
      static/css/_article.scss
  2. +1
    -1
      static/css/_forms.scss
  3. +22
    -6
      static/css/_global.scss

+ 2
- 2
static/css/_article.scss View File

@@ -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 2 years ago (Migrated from github.com)
Review

what’s the measure without a postfix?

what's the measure without a postfix?
dfeyer commented 2 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;
}
}


+ 1
- 1
static/css/_forms.scss View File

@@ -34,7 +34,7 @@ textarea {

font-family: $lora;
font-size: 1.1em;
line-height: 1.5em;
line-height: 1.5;
}

input[type="checkbox"] {


+ 22
- 6
static/css/_global.scss View File

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


Loading…
Cancel
Save