From d2770b9a5a6634badff425070d96a11d9a1153af Mon Sep 17 00:00:00 2001 From: Joseph Montanaro Date: Mon, 16 Mar 2026 21:16:17 -0400 Subject: [PATCH] pick a code theme and setup styles for inline code --- astro.config.mjs | 2 +- bun.lock | 3 +++ package.json | 1 + src/styles/code.css | 18 ++++++++---------- src/styles/vars.css | 8 ++++++++ 5 files changed, 21 insertions(+), 11 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index ee077bf..6cd53b9 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -12,7 +12,7 @@ export default defineConfig({ shikiConfig: { themes: { light: 'dracula', - dark: 'dracula-soft', + dark: 'dark-plus', } }, }, diff --git a/bun.lock b/bun.lock index 42347bf..4fcc21d 100644 --- a/bun.lock +++ b/bun.lock @@ -12,6 +12,7 @@ "@fontsource-variable/baskervville": "^5.2.3", "@fontsource-variable/baskervville-sc": "^5.2.3", "@fontsource-variable/figtree": "^5.2.10", + "@fontsource-variable/fira-code": "^5.2.7", "astro": "^5.18.0", "sharp": "^0.34.5", }, @@ -180,6 +181,8 @@ "@fontsource-variable/figtree": ["@fontsource-variable/figtree@5.2.10", "", {}, "sha512-a5Gumbpy3mdd+Yg31g6Qb7CmjYbrfyutJa3bWfP5q8A4GclIOwX7mI+ZuSHsJnw/mHvW6r9oh1AHJcJTIxK4JA=="], + "@fontsource-variable/fira-code": ["@fontsource-variable/fira-code@5.2.7", "", {}, "sha512-J2bxN7fz5rd8WpQYyau4o19WqTzxoTqaNj9jhsv4p21GSu1Rf34tbqsxqjyDCR+wDMHM3SajyFqtq+5uvRUQ7w=="], + "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="], "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="], diff --git a/package.json b/package.json index 4ff4060..207c3f3 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@fontsource-variable/baskervville": "^5.2.3", "@fontsource-variable/baskervville-sc": "^5.2.3", "@fontsource-variable/figtree": "^5.2.10", + "@fontsource-variable/fira-code": "^5.2.7", "astro": "^5.18.0", "sharp": "^0.34.5" }, diff --git a/src/styles/code.css b/src/styles/code.css index b40e4c9..ded295a 100644 --- a/src/styles/code.css +++ b/src/styles/code.css @@ -1,15 +1,12 @@ -/* fira-code-latin-wght-normal */ -@font-face { - font-family: 'Fira Code Variable'; - font-style: normal; - font-display: swap; - font-weight: 300 700; - src: url(https://cdn.jsdelivr.net/fontsource/fonts/fira-code:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); - unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; -} +@import '@fontsource-variable/fira-code'; -code { +:not(pre) > code { font-family: 'Fira Code Variable'; + font-size: var(--content-size-sm); + padding: 0.05rem 0.2rem 0.1rem; + border-radius: 0.2rem; + color: var(--inline-code-color); + background-color: var(--inline-code-bg); } pre.astro-code { @@ -18,6 +15,7 @@ pre.astro-code { border-radius: 0.3em; font-size: var(--content-size-sm); + --shiki-dark-font-weight: 500; } :root[data-theme="dark"] .astro-code, diff --git a/src/styles/vars.css b/src/styles/vars.css index 8145baa..0277b55 100644 --- a/src/styles/vars.css +++ b/src/styles/vars.css @@ -28,6 +28,8 @@ --link-color: var(--primary-color); --nav-link-color: white; --neutral-gray: hsl(0deg 0% 30%); + --inline-code-bg: hsl(0deg 0% 93%); + --inline-code-color: var(--content-color); /* dark-mode colors (defined here so that we only have to update them in one place) */ --dark-bg-color: hsl(220deg 10% 13%); @@ -41,6 +43,8 @@ --dark-link-color: hsl(202deg 50% 50%); --dark-nav-link-color: var(--dark-heading-color); --dark-neutral-gray: hsl(220deg 10% 45%); + --dark-inline-code-bg: hsl(220deg 7.5% 21%); + --dark-inline-code-color: hsl(18deg 10% 90%); &[data-theme="dark"] { --bg-color: var(--dark-bg-color); @@ -54,6 +58,8 @@ --link-color: var(--dark-link-color); --nav-link-color: var(--dark-nav-link-color); --neutral-gray: var(--dark-neutral-gray); + --inline-code-bg: var(--dark-inline-code-bg); + --inline-code-color: var(--dark-inline-code-color); } &:not([data-theme="light"]) { @@ -70,6 +76,8 @@ --link-color: var(--dark-link-color); --nav-link-color: var(--dark-nav-link-color); --neutral-gray: var(--dark-neutral-gray); + --inline-code-bg: var(--dark-inline-code-bg); + --inline-code-color: var(--dark-inline-code-color); } } }