Define some general document typography: font config and heading sizes
All checks were successful
/ build (pull_request) Successful in 38s
All checks were successful
/ build (pull_request) Successful in 38s
This commit is contained in:
parent
6675cefc52
commit
1d77be4e7c
48
themes/ccchh/assets/scss/document-typography.scss
Normal file
48
themes/ccchh/assets/scss/document-typography.scss
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
// A bunch of this is taken from PicoCSS, see here:
|
||||||
|
// https://github.com/picocss/pico/blob/v1.5.11/scss/themes/default/_styles.scss
|
||||||
|
:root {
|
||||||
|
// Use a (minimum) font size of 16px, since this seems to be a standard font
|
||||||
|
// size.
|
||||||
|
font-size: 16px;
|
||||||
|
// Explicitly set the Firefox default.
|
||||||
|
font-weight: 400;
|
||||||
|
// Line height of 1.5, see:
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility_concerns
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
// Go up to 18px for the font size depending on the screen width.
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
// Explicitly set the Firefox default.
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,2 +1,3 @@
|
||||||
@import "variables.scss";
|
@import "variables.scss";
|
||||||
@import "container.scss";
|
@import "container.scss";
|
||||||
|
@import "document-typography.scss";
|
||||||
|
|
Loading…
Reference in a new issue