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

add variable Inter fonts

Browse Source 
current faces/files kept as a fallback. also switched to Google-hosted fonts on AMP pages (might as well...)
This commit is contained in:
Jake Jarvis
2020-07-22 16:19:24 -04:00
parent 17824d4c5c
commit da1743cf2d
25 changed files with 49 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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%;

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

@ -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);