diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss
index c52a4493..adca3eb7 100644
--- a/assets/sass/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@@ -16,7 +16,7 @@
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
}
-// Web fonts (see components/_fonts.scss)
+// Web fonts (see components/_typography.scss)
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
@font-face {
font-family: $family;
diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss
index 6b054eb7..5ccfec5b 100644
--- a/assets/sass/abstracts/_settings.scss
+++ b/assets/sass/abstracts/_settings.scss
@@ -2,6 +2,7 @@
// Web fonts
$webfont-sans: "Inter", sans-serif;
+$webfont-sans-variable: "Inter var";
$webfont-mono: "Hack", monospace;
// System fonts
diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss
index b9677477..acae8c1c 100644
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@@ -5,14 +5,26 @@ body {
width: 100%;
height: 100%;
margin: 0 auto;
+
font-family: $webfont-sans;
font-kerning: normal;
+ font-variant-ligatures: normal;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
line-height: 1.5;
- box-sizing: border-box;
+}
- // manually setting light/dark mode backgrounds and bulb icon
- // really just the color of header & footer
+// 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: $webfont-sans-variable, $webfont-sans;
+ }
+}
+
+// manually setting light/dark mode backgrounds and bulb icon
+// really just the color of header & footer
+body {
&.light {
background-color: map-get(map-get($themes, "light"), "background-outer");
@@ -49,7 +61,8 @@ div.layout {
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
}
-/*! Credit for cool link underlines: https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ */
+// cool link underlines:
+// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
a {
text-decoration: none;
background-position: 0% 100%;
diff --git a/assets/sass/components/_typography.scss b/assets/sass/components/_typography.scss
index 8f3a5efd..06fb3413 100644
--- a/assets/sass/components/_typography.scss
+++ b/assets/sass/components/_typography.scss
@@ -12,15 +12,34 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
* Licensed under the SIL Open Font License, Version 1.1:
* https://github.com/rsms/inter/blob/v3.13/LICENSE.txt
*/
+
+// Variable
+@include font-face("Inter var", "vendor/inter/inter-subset.var", 100 900) {
+ unicode-range: $unicode-subset;
+}
+@include font-face("Inter var", "vendor/inter/inter-italic-subset.var", 100 900, italic) {
+ unicode-range: $unicode-subset;
+}
+
+// Legacy
@include font-face("Inter", "vendor/inter/inter-regular-subset", 400) {
unicode-range: $unicode-subset;
}
+@include font-face("Inter", "vendor/inter/inter-regular-italic-subset", 400, italic) {
+ unicode-range: $unicode-subset;
+}
@include font-face("Inter", "vendor/inter/inter-medium-subset", 500) {
unicode-range: $unicode-subset;
}
+@include font-face("Inter", "vendor/inter/inter-medium-italic-subset", 500, italic) {
+ unicode-range: $unicode-subset;
+}
@include font-face("Inter", "vendor/inter/inter-bold-subset", 700) {
unicode-range: $unicode-subset;
}
+@include font-face("Inter", "vendor/inter/inter-bold-italic-subset", 700, italic) {
+ unicode-range: $unicode-subset;
+}
/*!
* Hack typeface v3.003 - https://sourcefoundry.org/hack/
@@ -29,5 +48,6 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
* Licensed under the MIT License:
* https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
*/
+
@include font-face("Hack", "vendor/hack/hack-regular-subset", 400);
@include font-face("Hack", "vendor/hack/hack-italic-subset", 400, italic);
diff --git a/content/previously/index.md b/content/previously/index.md
index c198ab80..9a1e93e8 100644
--- a/content/previously/index.md
+++ b/content/previously/index.md
@@ -19,11 +19,13 @@ css: |
font-style: normal;
font-weight: 700;
font-display: swap;
- src: url('https://jarv.is/vendor/comic-neue/comic-neue-bold.woff2') format('woff2'),
- url('https://jarv.is/vendor/comic-neue/comic-neue-bold.woff') format('woff');
+ src: url('https://jarv.is/vendor/comic-neue/comic-neue-bold-subset.woff2') format('woff2'),
+ url('https://jarv.is/vendor/comic-neue/comic-neue-bold-subset.woff') format('woff');
+ unicode-range: U+0000-00FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2200-22FF,U+2122;
}
body {
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
+ font-weight: 700;
}
div#content {
text-align: center;
diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html
index 8ddb006e..586f0710 100644
--- a/layouts/_default/single.amp.html
+++ b/layouts/_default/single.amp.html
@@ -19,50 +19,12 @@
{{ partial "head/open-graph" . }}
+
+