feat: update global font
This commit is contained in:
parent
466183dcdc
commit
383e3e4c90
21 changed files with 120 additions and 97 deletions
|
|
@ -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%",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
|
|
|
|||
|
|
@ -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)}}`;
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
13
src/content/posts/2025-04-04-quick-update-on-rss.md
Normal file
13
src/content/posts/2025-04-04-quick-update-on-rss.md
Normal file
|
|
@ -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.
|
||||
|
|
@ -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,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
|
||||
|
||||
--transition-bounce: linear(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.font-size-s {
|
||||
font-size: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.font-size-m {
|
||||
|
|
|
|||
|
|
@ -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/)!
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue