hedy
/
site
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS: Smaller headers - adjusted scale progression 

Adding YET ANOTHER variable for something should just be left to the web
user-agent stylesheet. I'm so extra, I know.

Anyways in this commit I've adjusted the scaling for h1, h2, and h3 so
they aren't too big.

Reasoning:
  Big = attention-seeking             = ugly = bad = bad design
  Big = wraps text on smaller screens = ugly = bad = bad design

The scale progression of headers is inherited from simple.css. In the
future I'll probably remove the font-size settings altogether and leave
it up to the user to set.
This commit is contained in:
hedy 2022-05-16 20:32:39 +08:00
parent 1d7e997f5f
commit 33929e5977
Signed by: hedy
GPG Key ID: B51B5A8D1B176372
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/main.css
View File

@ -16,6 +16,8 @@
/* Major third scale progression - see https://type-scale.com/ */
--header-scale: 1.25;
/* I don't want h1, h2, and h3 to be too big */
--header-scale-minor: 1.1;
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
@ -423,17 +425,17 @@ h1, h2, h3, h4, h5, h6 {
margin-bottom: 1.1rem;
}
h1 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
margin-top: calc(var(--line-height) * 1.3rem);
}
h2 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
margin-top: calc(var(--line-height) * 1.1rem);
}
h3 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
}
h4 {