diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss index 4e841d14..b9376967 100644 --- a/assets/sass/abstracts/_functions.scss +++ b/assets/sass/abstracts/_functions.scss @@ -13,8 +13,8 @@ } // Web fonts (see components/_fonts.scss) -@mixin font-face($family, $src, - $weight: normal, $style: normal, $display: swap) { +// stylelint-disable indentation +@mixin font-face($family, $src, $weight: normal, $range: false, $style: normal, $display: swap) { @font-face { font-family: $family; font-style: $style; @@ -25,7 +25,9 @@ // src: local("#{$src-local}"), local("#{$src-local-alt}"), // url('#{$src}.ttf') format('truetype'), // url('#{$src}.eot') format('embedded-opentype'); - unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, - U+2190-21FF, U+2200-22FF, U+2122; + @if $range { + unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, + U+2190-21FF, U+2200-22FF, U+2122; + } } } diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss index 000b9255..09070d55 100644 --- a/assets/sass/abstracts/_variables.scss +++ b/assets/sass/abstracts/_variables.scss @@ -2,6 +2,7 @@ // System fonts and web fonts // https://markdotto.com/2018/02/07/github-system-fonts/ +// stylelint-disable indentation $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, @@ -10,6 +11,7 @@ $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; $webfont-inter: "Inter", sans-serif; +$webfont-hack: "Hack", monospace; // Misc Settings $responsive-width: 890px; @@ -42,7 +44,6 @@ $colors-home:( angular: #c3002f, vue: #486491, java: #ab6311, -// cpp: #865fc5, python: #fea500, php: #8892bf, ruby: #d34135, diff --git a/assets/sass/components/_fonts.scss b/assets/sass/components/_fonts.scss index 76092f3d..3b36e47e 100644 --- a/assets/sass/components/_fonts.scss +++ b/assets/sass/components/_fonts.scss @@ -1,6 +1,9 @@ @charset "UTF-8"; -/*! Inter UI | SIL Open Font License 1.1 | https://rsms.me/inter/ */ -@include font-face("Inter", "./fonts/inter-regular-subset", 400); -@include font-face("Inter", "./fonts/inter-medium-subset", 500); -@include font-face("Inter", "./fonts/inter-bold-subset", 700); +/*! Inter Typeface | SIL Open Font License 1.1 | https://rsms.me/inter/ */ +@include font-face("Inter", "./fonts/inter-regular-subset", 400, true); +@include font-face("Inter", "./fonts/inter-medium-subset", 500, true); +@include font-face("Inter", "./fonts/inter-bold-subset", 700, true); + +/*! Hack Typeface | MIT License | https://sourcefoundry.org/hack/ */ +@include font-face("Hack", "./fonts/hack-regular-subset", 400); diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index ff4e8f6f..e36645fa 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -111,12 +111,6 @@ div#content { max-width: 100%; height: auto; border: 0; - - // Subtitle caption styling - // stylelint-disable-next-line selector-pseudo-element-no-unknown - &::cue { - font-family: inherit; - } } div.embed { @@ -163,9 +157,9 @@ div#content { // all code code, div.highlight { - font-family: $system-fonts-monospace; + font-family: $webfont-hack; background: $color-super-light; - font-size: 0.9em; + font-size: 0.95em; letter-spacing: 0; page-break-inside: avoid; } diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html index ccdb1163..a6dba9fb 100644 --- a/layouts/_default/single.amp.html +++ b/layouts/_default/single.amp.html @@ -28,8 +28,8 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url("{{ "fonts/inter-regular.woff2" | absURL }}") format("woff2"), - url("{{ "fonts/inter-regular.woff" | absURL }}") format("woff"); + src: url("{{ "fonts/inter-regular-subset.woff2" | absURL }}") format("woff2"), + url("{{ "fonts/inter-regular-subset.woff" | absURL }}") format("woff"); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122; } @@ -38,8 +38,8 @@ font-style: normal; font-weight: 500; font-display: swap; - src: url("{{ "fonts/inter-medium.woff2" | absURL }}") format("woff2"), - url("{{ "fonts/inter-medium.woff" | absURL }}") format("woff"); + src: url("{{ "fonts/inter-medium-subset.woff2" | absURL }}") format("woff2"), + url("{{ "fonts/inter-medium-subset.woff" | absURL }}") format("woff"); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122; } @@ -48,11 +48,20 @@ font-style: normal; font-weight: 700; font-display: swap; - src: url("{{ "fonts/inter-bold.woff2" | absURL }}") format("woff2"), - url("{{ "fonts/inter-bold.woff" | absURL }}") format("woff"); + src: url("{{ "fonts/inter-bold-subset.woff2" | absURL }}") format("woff2"), + url("{{ "fonts/inter-bold-subset.woff" | absURL }}") format("woff"); unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122; } + @font-face { + font-family: "Hack"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("{{ "fonts/hack-regular-subset.woff2" | absURL }}") format("woff2"), + url("{{ "fonts/hack-regular-subset.woff" | absURL }}") format("woff"); + } + body { font-family: "Inter", sans-serif; @@ -171,9 +180,9 @@ text-align: right; } div.highlight, code { - font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; + font-family: "Hack", monospace; background: #f4f4f4; - font-size: 0.9em; + font-size: 0.95em; letter-spacing: 0; page-break-inside: avoid; } diff --git a/static/fonts/hack-regular-subset.woff b/static/fonts/hack-regular-subset.woff new file mode 100644 index 00000000..85583a52 Binary files /dev/null and b/static/fonts/hack-regular-subset.woff differ diff --git a/static/fonts/hack-regular-subset.woff2 b/static/fonts/hack-regular-subset.woff2 new file mode 100644 index 00000000..1e3abb96 Binary files /dev/null and b/static/fonts/hack-regular-subset.woff2 differ diff --git a/static/fonts/hack-regular.woff b/static/fonts/hack-regular.woff new file mode 100644 index 00000000..e835381e Binary files /dev/null and b/static/fonts/hack-regular.woff differ diff --git a/static/fonts/hack-regular.woff2 b/static/fonts/hack-regular.woff2 new file mode 100644 index 00000000..524465cf Binary files /dev/null and b/static/fonts/hack-regular.woff2 differ