d5bbc321f9
Key changes: - Change main font to Roboto Slab for enhanced readability. - Change code font to 'Source Code Pro' for consistent monospace code rendering. - Import and set code font explicitly for uniform appearance across platforms. - Update Slabo 27px (logo font) version from v6 to v14. - Update Yesteryear (cursive font) version from v8 to v18. - Drop support for historic browser-specific formats, retaining only WOFF2 for modern and TTF for legacy browsers. - Use `font-display: swap` to improve perceived load times and minimize layout shifts. Supporting changes: - Simplify font-weight usage to 'normal' and 'bold' for consistency. - Adjust inline code padding for better scalability and prevent overflow. - Introduce `$font-main` as main font variable. - Remove specification of main font as it's best practice to rely on the default font defined on `body` style. - Specify font in code area to ensure it uses the code font consistently as the rest of the application. - Remove local font search through `local` to simplify the import logic and prioritize consistency over performance. - Import bold font explicitly (`font-weight: 700`) for smooth and consistent rendering. - Move `font-family` definitions to `_typography.scss` to better adhere to the common standards and conventions. - Refactor font variables to have `font-family-` prefix instead of `font-` to improve clarity and differentiation between `font-size` variables. - Rename 'artistic' font to 'cursive' for preciseness and clarity. - Use smaller font sizes to match the new main font size, as Roboto Slab is relatively larger. - Add missing fallbacks for serif fonts to improve fault tolerance. - Change padding slightly on toggle switch for revert buttons to align well with new main font and its sizing.
25 lines
1.3 KiB
SCSS
25 lines
1.3 KiB
SCSS
// Keep the amount of fonts minimal. No more than 3 (except logo and monospace)
|
|
// for visual consistency and readability.
|
|
$font-family-main : 'Roboto Slab', serif;
|
|
$font-family-logo : 'Slabo 27px', serif;
|
|
$font-family-monospace : 'Source Code Pro', monospace;
|
|
$font-family-cursive : 'Yesteryear', cursive;
|
|
|
|
/*
|
|
This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.
|
|
|
|
We prefix each variable with its type (absolute or relative) for clear identification and context.
|
|
*/
|
|
// Absolute sizes use the <absolute-size> CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
|
|
// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
|
|
$font-size-absolute-x-small : 13px;
|
|
$font-size-absolute-small : 15px;
|
|
$font-size-absolute-normal : 17px;
|
|
$font-size-absolute-large : 21px;
|
|
$font-size-absolute-x-large : 27px;
|
|
$font-size-absolute-xx-large : 40px;
|
|
// Relative sizes employ the <relative-size> CSS data type, allowing font size adjustments based on the parent element's size.
|
|
// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
|
|
$font-size-relative-smallest : 80%;
|
|
$font-size-relative-smaller : 85%;
|