jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

switch to a variable mono font (Roboto Mono) and subset all fonts more

Browse Source
This commit is contained in:
Jake Jarvis
2020-11-27 09:30:54 -05:00
parent 09b44fb689
commit d9deace16c
39 changed files with 180 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,8 @@
// Web fonts
$webfont-sans: "Inter";
$webfont-sans-variable: "Inter var";
$webfont-mono: "Hack";
$webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var";
// System fonts
// https://markdotto.com/2018/02/07/github-system-fonts/
@ -11,9 +12,10 @@ $system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Ar
"Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
$font-stack-static: $webfont-sans, $system-fonts-sans;
$font-stack-var: $webfont-sans-variable, $system-fonts-sans;
$font-stack-sans: $webfont-sans, $system-fonts-sans;
$font-stack-variable: $webfont-sans-variable, $system-fonts-sans;
$font-stack-mono: $webfont-mono, $system-fonts-monospace;
$font-stack-mono-variable: $webfont-mono-variable, $system-fonts-monospace;
// Width at which to switch to mobile styles
$responsive-width: 830px;

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

@ -5,26 +5,9 @@ body {
width: 100%;
height: 100%;
margin: 0 auto;
font-family: $font-stack-static;
font-kerning: normal;
font-variant-ligatures: normal;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
line-height: 1.5;
scroll-behavior: smooth;
}
// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
// stylelint-disable-next-line plugin/no-unsupported-browser-features
@supports (font-variation-settings: normal) {
body {
font-family: $font-stack-var;
font-optical-sizing: auto;
}
}
// manually setting light/dark mode backgrounds and bulb icon
// really just the color of header & footer
body {
@ -97,8 +80,6 @@ strong {
code,
pre,
.monospace {
font-family: $font-stack-mono;
font-size: 0.95em;
letter-spacing: normal;
}

7
assets/sass/components/_syntax.scss
View File

@ -8,18 +8,23 @@ code {
// inline code in paragraphs/elsewhere (single backticks)
:not(pre) > code {
padding: 0.15em 0.3em;
padding: 0.075em 0.325em;
margin: 0 0.1em;
border: 1px solid;
}
// allow for inline code in post/page titles -- override above styles and match title
.title code {
font-size: 1.05em;
background: none !important;
border: 0 !important;
margin: 0 0.075em !important;
padding: 0 !important;
color: inherit !important;
}
h1.title code {
font-weight: 600;
}
// code fences
div.highlight {

59
assets/sass/components/_typography.scss
View File

@ -1,9 +1,11 @@
@charset "UTF-8";
// Note to self: got this list after subsetting Inter with glyphhanger:
// Note to self: got this list after subsetting Inter with glyphhanger or pyftsubset:
// https://github.com/filamentgroup/glyphhanger
// https://github.com/fonttools/fonttools
// ex: glyphhanger --whitelist="" --family="Inter" --formats=woff2,woff --subset="*.woff"
$unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
// ex: pyftsubset --unicodes="" --layout-features=kern,liga,calt,clig,ss01 --flavor=woff --with-zopfli inter.ttf
$unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
/*!
* Inter typeface v3.15 - https://rsms.me/inter/
@ -44,12 +46,53 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
}
/*!
* Hack typeface v3.003 - https://sourcefoundry.org/hack/
* Roboto Mono typeface v3.000 - https://fonts.google.com/specimen/Roboto+Mono
*
* Copyright (c) 2018 Source Foundry Authors.
* Licensed under the MIT License:
* https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
* Copyright (c) 2015 The Roboto Mono Project Authors.
* Licensed under the Apache License, Version 2.0:
* https://github.com/google/fonts/blob/4df0b673c9b316ad5e8de8fa70b0768ab66c87d6/apache/robotomono/LICENSE.txt
*/
@include font-face("Hack", "vendor/fonts/hack-regular-subset", 400);
@include font-face("Hack", "vendor/fonts/hack-italic-subset", 400, italic);
// Variable
@include font-face("Roboto Mono var", "vendor/fonts/roboto-mono-subset.var", 100 700, $variable: true) {
font-named-instance: "Regular"; // stylelint-disable-line property-no-unknown
}
@include font-face("Roboto Mono var", "vendor/fonts/roboto-mono-italic-subset.var", 100 700, italic, $variable: true) {
font-named-instance: "Italic"; // stylelint-disable-line property-no-unknown
}
// Legacy
@include font-face("Roboto Mono", "vendor/fonts/roboto-mono-regular-subset", 400);
@include font-face("Roboto Mono", "vendor/fonts/roboto-mono-italic-subset", 400, italic);
/* --------- */
body {
font-family: $font-stack-sans;
font-kerning: normal;
font-variant-ligatures: normal;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
line-height: 1.5;
}
code,
pre,
.monospace {
font-family: $font-stack-mono;
}
// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
// stylelint-disable-next-line plugin/no-unsupported-browser-features
@supports (font-variation-settings: normal) {
body {
font-family: $font-stack-variable;
font-optical-sizing: auto;
}
code,
pre,
.monospace {
font-family: $font-stack-mono-variable;
}
}