jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pick a code theme and setup styles for inline code

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-16 21:16:17 -04:00
parent 3aa7ad1368
commit d2770b9a5a
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/code.css
View File

@@ -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,

8
src/styles/vars.css
View File

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