jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:25:33 -04:00
Code Issues Activity

a couple more typography fixes

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-12 10:35:51 -05:00
parent 3444e54db6
commit 178dd93ce5
3 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/sass/abstracts/_settings.scss
View File

@@ -1,4 +1,5 @@
@use "sass:list";
@use "sass:string";
// The maximum width of the content area:
$max-width: 865px;
@@ -11,12 +12,17 @@ $webfont-sans: "Inter";
$webfont-sans-variable: "Inter var";
$webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var";
$webfont-unicode-latin-only: (
latin:
string.unquote(
"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
),
);
// System fonts:
// https://markdotto.com/2018/02/07/github-system-fonts/
// stylelint-disable-next-line value-keyword-case
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
$system-fonts-monospace: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
// Prefer web fonts with system fonts as backup:

38
assets/sass/abstracts/_typography.scss
View File

@@ -1,14 +1,9 @@
@use "settings";
@use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
// stylelint-disable scss/operator-no-unspaced
// prettier-ignore
$latin-only: (
latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
);
// stylelint-enable scss/operator-no-unspaced
/*!
* Inter typeface - https://rsms.me/inter/
*
@@ -18,12 +13,16 @@ $latin-only: (
*/
// Variable
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $latin-only);
@include Inter.fontFaceVariable(
$fontName: "Inter var",
$type: "full",
$unicodeMap: settings.$webfont-unicode-latin-only
);
// Legacy
@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);
/*!
* Roboto Mono typeface - https://fonts.google.com/specimen/Roboto+Mono
@@ -34,12 +33,17 @@ $latin-only: (
*/
// Variable
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $latin-only);
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $latin-only);
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: settings.$webfont-unicode-latin-only);
@include RobotoMono.fontFaceVariable(
$fontName: "Roboto Mono var",
$style: italic,
$unicodeMap: settings.$webfont-unicode-latin-only
);
// Legacy
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);
/*!
* Comic Neue typeface - http://comicneue.com/
@@ -49,5 +53,5 @@ $latin-only: (
* https://github.com/crozynski/comicneue/blob/master/OFL.txt
*/
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);

8
assets/sass/components/_global.scss
View File

@@ -59,12 +59,14 @@ pre,
// Chrome doesn't automatically slant multi-axis Inter var, for some reason.
// Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
em {
font-style: normal;
font-style: normal !important;
font-variation-settings: "ital" 1, "slnt" -10;
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
code {
font-style: italic;
code,
pre,
.monospace {
font-style: italic !important;
}
}
}