diff --git a/config/design-tokens/fonts.js b/config/design-tokens/fonts.js index 8b94a73..036e37b 100644 --- a/config/design-tokens/fonts.js +++ b/config/design-tokens/fonts.js @@ -1,59 +1,37 @@ export default { display: { - family: "Anek Latin", - format: "truetype", - weights: { - ExtraBold: { - path: "/aneklatin/AnekLatin-ExtraBold.ttf", - "font-style": "normal", - weight: 800, - }, - Bold: { - path: "/aneklatin/AnekLatin-Bold.ttf", - "font-style": "normal", - weight: 700, + family: "Atikinson Hyperlegible Next", + format: "woff2", + styles: { + Regular: { + path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2", + fontStyle: "normal", + fontWeight: "125 950", + fontStretch: "75% 125%", }, }, }, body: { - family: "iA Writer Quattro V", + family: "Atikinson Hyperlegible Next", format: "woff2", - weights: { + styles: { Regular: { - path: "/quattro/iAWriterQuattroS-Regular.woff2", - "font-style": "normal", - weight: 400, - }, - Italic: { - path: "/quattro/iAWriterQuattroS-Italic.woff2", - "font-style": "italic", - weight: 400, - }, - Bold: { - path: "/quattro/iAWriterQuattroS-Bold.woff2", - "font-style": "normal", - weight: 650, - }, - BoldItalic: { - path: "/quattro/iAWriterQuattroS-BoldItalic.woff2", - "font-style": "italic", - weight: 650, + path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2", + fontStyle: "normal", + fontWeight: "125 950", + fontStretch: "75% 125%", }, }, }, monospace: { - family: "IBM Plex Mono", - format: "truetype", - weights: { + family: "Atikinson Hyperlegible Mono", + format: "woff2", + styles: { Regular: { - path: "/ibmplexmono/IBMPlexMono-Regular.ttf", - "font-style": "normal", - weight: 400, - }, - Italic: { - path: "/ibmplexmono/IBMPlexMono-Italic.ttf", - "font-style": "italic", - weight: 400, + path: "/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2", + fontStyle: "normal", + fontWeight: "125 950", + fontStretch: "75% 125%", }, }, }, diff --git a/config/filters/postcss/utils/font-family.js b/config/filters/postcss/utils/font-family.js index 1693a69..4facde2 100644 --- a/config/filters/postcss/utils/font-family.js +++ b/config/filters/postcss/utils/font-family.js @@ -1,22 +1,22 @@ import path from "path"; -import { ASSETS_FONTS_PATH } from "../../../constants/paths.js"; import fonts from "../../../design-tokens/fonts.js"; -const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src); +const getFontUrl = (src) => path.join("/assets/fonts", src); const fontsToCss = (fonts) => { return Object.entries(fonts).reduce((css, [, fontProperties]) => { const family = fontProperties.family; const format = fontProperties.format; - const weights = fontProperties.weights; + const styles = fontProperties.styles; return ( css + - Object.entries(weights).reduce((css, [variant, fontFamily]) => { + Object.entries(styles).reduce((css, [variant, fontFamily]) => { const url = getFontUrl(fontFamily.path); - const style = fontFamily["font-style"]; - const weight = fontFamily.weight; + const style = fontFamily.fontStyle; + const weight = fontFamily.fontWeight; + const stretch = fontFamily.fontStretch; const postScriptName = [family, variant].join("-").replaceAll(" ", ""); return ( @@ -25,6 +25,7 @@ const fontsToCss = (fonts) => { family, style, weight, + stretch, url, family, postScriptName, @@ -40,6 +41,7 @@ const fontFamilyToCss = ( family, style, weight, + stretch, url, localName, postScriptName, @@ -48,6 +50,7 @@ const fontFamilyToCss = ( font-family: ${family}; font-style: ${style}; font-weight: ${weight}; + font-stretch: ${stretch}; font-display: swap; src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}") }\n`; diff --git a/config/filters/postcss/utils/font-variables.js b/config/filters/postcss/utils/font-variables.js index b100180..fcb3586 100644 --- a/config/filters/postcss/utils/font-variables.js +++ b/config/filters/postcss/utils/font-variables.js @@ -1,45 +1,57 @@ +/* + * Fallbacks from Modern Font Stacks. + * https://modernfontstacks.com/ + */ + import fonts from "../../../design-tokens/fonts.js"; -const fallbacks = [ - "-apple-system", - "BlinkMacSystemFont", - "Segoe UI", - "Roboto", - "Ubuntu", - "Open Sans", - "Helvetica Neue", - "sans-serif", +const displayFallbacks = [ + "ui-monospace", + "Cascadia Code", + "Source Code Pro", + "Menlo", + "Consolas", + "DejaVu Sans Mono", + "monospace", ]; +const bodyFallbacks = [ + "ui-monospace", + "Cascadia Code", + "Source Code Pro", + "Menlo", + "Consolas", + "DejaVu Sans Mono", + "monospace", +]; + +const monoFallbacks = [ + "ui-monospace", + "Cascadia Code", + "Source Code Pro", + "Menlo", + "Consolas", + "DejaVu Sans Mono", + "monospace", +]; + +const fallbacks = { + display: displayFallbacks, + body: bodyFallbacks, + monospace: monoFallbacks, +}; + const fontsToCss = (fonts) => { return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => { const family = fontProperties.family; - const weights = fontProperties.weights; const fontTypeCss = fontFamilyToCss(fontType, family); - const fontWeightsCss = fontWeightsToCss(fontType, weights); - return css + fontTypeCss + fontWeightsCss; + return css + fontTypeCss; }, ``); }; -const validVariants = ["regular", "bold", "extrabold"]; - -const fontWeightsToCss = (type, weights) => - Object.entries(weights) - .filter(([variant]) => validVariants.includes(variant.toLowerCase())) - .reduce((css, [variant, fontFamily]) => { - const weight = fontFamily.weight; - - return css + fontWeightToCss(type, variant.toLowerCase(), weight); - }, ``); - -const fontWeightToCss = (type, variant, value) => - `--font-weight-${type}-${variant}: ${value};`; - const fontFamilyToCss = (type, value) => - `--font-family-${type}: ${value},${fallbacks.join(",")};`; + `--font-family-${type}: ${value},${fallbacks[type].join(",")};`; -const css = `:root{${fontsToCss(fonts)}}`; - -export default css; +export default `:root{${fontsToCss(fonts)}}`; diff --git a/src/assets/fonts/aneklatin/AnekLatin-Bold.ttf b/src/assets/fonts/aneklatin/AnekLatin-Bold.ttf deleted file mode 100644 index a3a80e5..0000000 Binary files a/src/assets/fonts/aneklatin/AnekLatin-Bold.ttf and /dev/null differ diff --git a/src/assets/fonts/aneklatin/AnekLatin-ExtraBold.ttf b/src/assets/fonts/aneklatin/AnekLatin-ExtraBold.ttf deleted file mode 100644 index a2ad2f7..0000000 Binary files a/src/assets/fonts/aneklatin/AnekLatin-ExtraBold.ttf and /dev/null differ diff --git a/src/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2 b/src/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2 new file mode 100644 index 0000000..7d8593b Binary files /dev/null and b/src/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2 differ diff --git a/src/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2 b/src/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2 new file mode 100644 index 0000000..d65952f Binary files /dev/null and b/src/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2 differ diff --git a/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf b/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf deleted file mode 100644 index 3cb28a3..0000000 Binary files a/src/assets/fonts/ibmplexmono/IBMPlexMono-Italic.ttf and /dev/null differ diff --git a/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf b/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf deleted file mode 100644 index 81ca3dc..0000000 Binary files a/src/assets/fonts/ibmplexmono/IBMPlexMono-Regular.ttf and /dev/null differ diff --git a/src/assets/fonts/quattro/iAWriterQuattroS-Bold.woff2 b/src/assets/fonts/quattro/iAWriterQuattroS-Bold.woff2 deleted file mode 100644 index d4c3f63..0000000 Binary files a/src/assets/fonts/quattro/iAWriterQuattroS-Bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/quattro/iAWriterQuattroS-BoldItalic.woff2 b/src/assets/fonts/quattro/iAWriterQuattroS-BoldItalic.woff2 deleted file mode 100644 index fb9324d..0000000 Binary files a/src/assets/fonts/quattro/iAWriterQuattroS-BoldItalic.woff2 and /dev/null differ diff --git a/src/assets/fonts/quattro/iAWriterQuattroS-Italic.woff2 b/src/assets/fonts/quattro/iAWriterQuattroS-Italic.woff2 deleted file mode 100644 index ae1630c..0000000 Binary files a/src/assets/fonts/quattro/iAWriterQuattroS-Italic.woff2 and /dev/null differ diff --git a/src/assets/fonts/quattro/iAWriterQuattroS-Regular.woff2 b/src/assets/fonts/quattro/iAWriterQuattroS-Regular.woff2 deleted file mode 100644 index a25cdbc..0000000 Binary files a/src/assets/fonts/quattro/iAWriterQuattroS-Regular.woff2 and /dev/null differ diff --git a/src/content/posts/2025-04-04-quick-update-on-rss.md b/src/content/posts/2025-04-04-quick-update-on-rss.md new file mode 100644 index 0000000..4419394 --- /dev/null +++ b/src/content/posts/2025-04-04-quick-update-on-rss.md @@ -0,0 +1,13 @@ +--- +title: Quick Update on RSS +date: 2025-04-04T16:10-07:00 +excerpt: I'm sorry I broke your RSS reader. +tags: + - webdev + - site-updates + - rss +--- + +I'm sorry in advance (or perhaps it's too late) if I broke your RSS reader. I've been switching hosting platforms, and did not configure my deployment script correctly. It built the site as if I'd been developing locally, so all the URLs got borked in my various feed templates. + +I've since fixed the issue, but you'll probably see a bunch of the same posts come up as new in your RSS reader. I'm sorry! It won't happen again. diff --git a/src/data/preloads.js b/src/data/preloads.js index 4f6f3a9..7243e0b 100644 --- a/src/data/preloads.js +++ b/src/data/preloads.js @@ -8,17 +8,17 @@ const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src); const preloads = [ { as: "font", - href: getFontUrl(fonts.display.weights.ExtraBold.path), + href: getFontUrl(fonts.display.styles.Regular.path), crossorigin: true, }, { as: "font", - href: getFontUrl(fonts.display.weights.Bold.path), + href: getFontUrl(fonts.body.styles.Regular.path), crossorigin: true, }, { as: "font", - href: getFontUrl(fonts.body.weights.Regular.path), + href: getFontUrl(fonts.monospace.styles.Regular.path), crossorigin: true, }, ]; diff --git a/src/includes/css/blocks/site-logo.css b/src/includes/css/blocks/site-logo.css index 344bc37..e3a25cf 100644 --- a/src/includes/css/blocks/site-logo.css +++ b/src/includes/css/blocks/site-logo.css @@ -19,6 +19,7 @@ color: var(--color-white); font-family: var(--font-family-display); font-size: 1.5rem; + font-weight: var(--font-weight-black); letter-spacing: -0.05em; position: relative; text-shadow: diff --git a/src/includes/css/global/global-styles.css b/src/includes/css/global/global-styles.css index 97ea330..1756ccc 100644 --- a/src/includes/css/global/global-styles.css +++ b/src/includes/css/global/global-styles.css @@ -18,8 +18,8 @@ body { background-color: var(--color-background); color: var(--color-text); font-family: var(--font-family-body); - font-size: 1.125rem; - font-weight: var(--font-weight-body-regular); + font-size: 1.25rem; + font-weight: var(--font-weight-normal); letter-spacing: -0.03rem; line-height: 2rem; margin: 0; @@ -36,35 +36,43 @@ h6 { h1 { font-size: 3rem; - font-weight: var(--font-weight-display-extrabold); + font-weight: var(--font-weight-black); letter-spacing: -0.05rem; line-height: 3rem; } h2 { font-size: 2rem; - font-weight: var(--font-weight-display-bold); + font-weight: var(--font-weight-bold); letter-spacing: -0.05rem; line-height: 2rem; } h3 { font-size: 1.5rem; - font-weight: var(--font-weight-display-bold); + font-weight: var(--font-weight-bold); letter-spacing: -0.05rem; line-height: 1.5rem; } h4 { font-size: 1.125rem; - font-weight: var(--font-weight-display-bold); + font-weight: var(--font-weight-bold); letter-spacing: -0.05rem; line-height: 1.125rem; text-transform: uppercase; } +h1 a, +h2 a, +h3 a, +h4 a { + font-weight: inherit; +} + a { color: currentColor; + font-weight: 350; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; transition: @@ -125,6 +133,7 @@ hr { code { font-family: var(--font-family-monospace); + font-weight: 350; } :not(pre) > code { diff --git a/src/includes/css/global/variables.css b/src/includes/css/global/variables.css index 2ef2f89..88e0277 100644 --- a/src/includes/css/global/variables.css +++ b/src/includes/css/global/variables.css @@ -8,6 +8,10 @@ --text-skew: skew(0deg, -1deg); + --font-weight-normal: 300; + --font-weight-bold: 700; + --font-weight-black: 900; + --triangles: url('data:image/svg+xml;utf8,'); --transition-bounce: linear( diff --git a/src/includes/css/utilities/fonts.css b/src/includes/css/utilities/fonts.css index 98c659d..8cf1615 100644 --- a/src/includes/css/utilities/fonts.css +++ b/src/includes/css/utilities/fonts.css @@ -1,5 +1,5 @@ .font-size-s { - font-size: 0.8rem; + font-size: 1rem; } .font-size-m { diff --git a/src/pages/changelog.md b/src/pages/changelog.md index 4d37d4e..f5cb520 100644 --- a/src/pages/changelog.md +++ b/src/pages/changelog.md @@ -10,6 +10,15 @@ All the changes that are fit to read! If preferred, the [commit log is available here][commits]. +## April 4th, 2025 + +- Updated the RSS generation scripts. I'm sorry (and in advance) for screwing with your RSS reader. + - I also took the time to ensure that my generated feeds comply with the RSS 2.0 spec! +- Updated the global font to use [Atkinson Hyperlegible](https://www.brailleinstitute.org/freefont/). +- The site is now hosted by [Bunny.net](https://bunny.net)! Also using them as the CDN. +- Removed the [`eleventy-plugin-no-robots`](https://github.com/wkillerud/eleventy-plugin-no-robots) plugin. +- Various organizational changes in the site's backend. + ## January 27th, 2025 - Upgraded to [Eleventy v3](https://www.11ty.dev/blog/eleventy-v3/)! diff --git a/src/pages/colophon.md b/src/pages/colophon.md index 32c9253..83f95d5 100644 --- a/src/pages/colophon.md +++ b/src/pages/colophon.md @@ -26,9 +26,7 @@ A minimal amount of [PostCSS][postcss] is used as a developer convenience, othwi Responsive images are generated by [eleventy-img][eleventyimg]. -Media is hosted on [Backblaze B2][backblaze]. - -RSS is generated by [eleventy-plugin-rss][eleventypluginrss]. +The site (and its accompanying media assets are hosted on [Bunny.net][https://bunny.net]. Date formatting uses [dayjs][dayjs]. @@ -36,7 +34,7 @@ Code formatting is applied by [Prism][prismjs] and uses a tweaked version of the ## Design -Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro]. Monospace font is [IBM Plex Mono][ibmplexmono]. +The global font is [Atkinson Hyperlegible Next](https://www.brailleinstitute.org/freefont/), except for monospace fonts which uses the Mono variant of Atkinson Hyperlegible. The colour palette is viewable on the [styleguide][styleguide] page. @@ -78,11 +76,8 @@ I've done my best to show where I found any code I did not write myself. [markdownitprism]: https://github.com/jGleitz/markdown-it-prism [postcss]: https://postcss.org [eleventyimg]: https://www.11ty.dev/docs/plugins/image -[backblaze]: https://www.backblaze.com/cloud-storage [eleventypluginrss]: https://www.11ty.dev/docs/plugins/rss [dayjs]: https://day.js.org/en -[aneklatin]: https://fonts.google.com/specimen/Anek+Latin -[iawriterquattro]: https://github.com/iaolo/iA-Fonts [styleguide]: /styleguide [chunkicons]: https://www.figma.com/community/file/1327310800295849271 [noahjacobus]: https://noahjacob.us @@ -91,6 +86,5 @@ I've done my best to show where I found any code I did not write myself. [everylayout]: https://every-layout.dev [prismjs]: https://prismjs.com [tokyonight]: https://github.com/folke/tokyonight.nvim -[ibmplexmono]: https://fonts.google.com/specimen/IBM+Plex+Mono [markdownitimagefigures]: https://github.com/Antonio-Laguna/markdown-it-image-figures [markdownitattrs]: https://www.npmjs.com/package/markdown-it-attrs