Plume/Plume
9
18
Atzarojums 24
Kods Pieteikumi 177 Izmaiņu pieprasījumi 8 Laidieni 8 Vikivietne Notikumi

Better header line height #418

Apvienots
dfeyer Iekļāva 2 iesūtījumus no task-better-header zarā master 2019-01-09 16:46:04 +00:00
Saruna 0 Iesūtījumi 2 Izmainītās datnes 3 +25 -9
3 izmainītas datnes ar 25 papildinājumiem un 9 izdzēšanām
Rādīt apkopojumu Lejupielādēt ielāpa datni Lejupielādēt atšķirību datni Izvērst visas datnes Savērst visas datnes

4
static/css/_article.scss
Apskatīt datni

@ -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 pievienoja piebildi 2019-01-08 23:48:32 +00:00 (Pārcelta no github.com)
Izskatīšana
Ievietot saiti starpliktuvē

what's the measure without a postfix?

what's the measure without a postfix?
dfeyer pievienoja piebildi 2019-01-09 12:30:53 +00:00 (Pārcelta no github.com)
Izskatīšana
Ievietot saiti starpliktuvē

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

2
static/css/_forms.scss
Apskatīt datni

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

28
static/css/_global.scss
Apskatīt datni

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