z0x/blog.z0x.ca
Code Activity Actions

refactor: improved typography, revert back to global.css

Browse source
This commit is contained in:
z0x 2025-05-07 09:05:25 -04:00
parent 4379511206
commit 81d454824a
5 changed files with 38 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
astro.config.ts
View file

@ -42,6 +42,7 @@ export default defineConfig({
}, },
}, },
styleOverrides: { styleOverrides: {
codeFontSize: "0.75rem",
borderColor: "var(--border)", borderColor: "var(--border)",
codeFontFamily: "var(--font-mono)", codeFontFamily: "var(--font-mono)",
codeBackground: codeBackground:
@ -52,6 +53,7 @@ export default defineConfig({
"color-mix(in oklab, var(--secondary) 25%, transparent)", "color-mix(in oklab, var(--secondary) 25%, transparent)",
editorActiveTabIndicatorBottomColor: "transparent", editorActiveTabIndicatorBottomColor: "transparent",
editorActiveTabIndicatorTopColor: "transparent", editorActiveTabIndicatorTopColor: "transparent",
editorTabBorderRadius: "0",
editorTabBarBackground: "transparent", editorTabBarBackground: "transparent",
editorTabBarBorderBottomColor: "transparent", editorTabBarBorderBottomColor: "transparent",
frameBoxShadowCssValue: "none", frameBoxShadowCssValue: "none",

2
components.json
View file

@ -5,7 +5,7 @@
"tsx": true, "tsx": true,
"tailwind": { "tailwind": {
"config": "tailwind.config.ts", "config": "tailwind.config.ts",
"css": "src/styles/globals.css", "css": "src/styles/global.css",
"baseColor": "neutral", "baseColor": "neutral",
"cssVariables": true, "cssVariables": true,
"prefix": "" "prefix": ""

2
src/components/Head.astro
View file

@ -2,7 +2,7 @@
import "@fontsource-variable/geist"; import "@fontsource-variable/geist";
import "@fontsource-variable/geist-mono"; import "@fontsource-variable/geist-mono";
import "../styles/callout.css"; import "../styles/callout.css";
import "../styles/globals.css"; import "../styles/global.css";
import "../styles/typography.css"; import "../styles/typography.css";
import { ClientRouter } from "astro:transitions"; import { ClientRouter } from "astro:transitions";

0
src/styles/globals.css → src/styles/global.css
View file

65
src/styles/typography.css
View file

@ -1,36 +1,35 @@
@reference './globals.css'; @reference './global.css';
@layer components { @layer components {
.prose { .prose {
@apply text-foreground text-base leading-8; @apply text-foreground text-base leading-7;
@apply [&>*]:first:mt-0 [&>*]:last:mb-0 [&>section:first-child>*]:mt-0 [&>section:last-child>*]:mb-0;
p { p {
@apply text-foreground/80 my-5 leading-7 not-first:mt-5; @apply text-foreground/80 my-5 not-first:mt-5;
} }
h1 { h1 {
@apply text-foreground mt-0 mb-6 scroll-m-20 text-4xl leading-tight font-medium; @apply text-foreground mt-0 mb-6 scroll-m-20 text-4xl leading-5 font-medium;
} }
h2 { h2 {
@apply text-foreground mt-8 mb-4 scroll-m-20 text-2xl leading-tight font-medium; @apply text-foreground mt-8 mb-4 scroll-m-20 text-2xl leading-5 font-medium;
} }
h3 { h3 {
@apply text-foreground mt-6 mb-4 scroll-m-20 text-xl leading-snug font-medium; @apply text-foreground mt-6 mb-4 scroll-m-20 text-xl leading-6 font-medium;
} }
h4 { h4 {
@apply text-foreground mt-6 mb-3 scroll-m-20 text-lg leading-normal font-medium; @apply text-foreground mt-6 mb-3 scroll-m-20 text-lg leading-6 font-medium;
} }
h5 { h5 {
@apply text-foreground mt-5 mb-3 scroll-m-20 leading-normal font-medium; @apply text-foreground mt-5 mb-3 scroll-m-20 leading-6 font-medium;
} }
h6 { h6 {
@apply text-foreground mt-5 mb-3 scroll-m-20 leading-normal font-medium; @apply text-foreground mt-5 mb-3 scroll-m-20 leading-6 font-medium;
} }
a { a {
@ -51,7 +50,7 @@
} }
li { li {
@apply text-foreground/80 pl-2 leading-7 [&>p]:my-0; @apply text-foreground/80 pl-2 [&>p]:my-0;
} }
ul ul, ul ul,
@ -62,16 +61,12 @@
} }
code { code {
@apply bg-muted/50 text-foreground relative rounded-sm px-[0.3rem] py-[0.2rem] text-sm font-medium; @apply bg-muted/50 text-foreground relative rounded-sm px-[0.3rem] py-[0.2rem] text-sm font-medium break-words;
@apply [&>span[data-line='']>*]:text-(--shiki-light) dark:[&>span[data-line='']>*]:text-(--shiki-dark); @apply [&>span[data-line='']>*]:text-(--shiki-light) dark:[&>span[data-line='']>*]:text-(--shiki-dark);
} }
.expressive-code {
@apply my-6 [&_.title]:font-medium!;
}
blockquote { blockquote {
@apply [&_*]:text-muted-foreground my-6 border-l-2 pl-6; @apply [&_*]:text-muted-foreground small my-6 border-l-2 pl-6;
} }
hr { hr {
@ -79,7 +74,7 @@
} }
table { table {
@apply my-8 w-full text-sm; @apply my-6 block w-full overflow-x-auto text-sm;
} }
thead { thead {
@ -87,28 +82,28 @@
} }
th { th {
@apply border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right; @apply px-4 py-2 font-medium;
@apply text-left [&[align=center]]:text-center [&[align=right]]:text-right;
} }
tbody tr { tr {
@apply border-muted-foreground/20 even:bg-muted/50 border-b; @apply border-muted-foreground/30 border-y first:border-t-0 last:border-b-0;
} }
td { td {
@apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right; @apply fix-margin text-foreground/80 small px-4 py-2 align-top break-words;
@apply text-left [&[align=center]]:text-center [&[align=right]]:text-right;
} }
img, img,
video { video,
@apply my-8; figure,
.expressive-code {
@apply my-6;
} }
figure { summary {
@apply my-8; @apply [&~*]:small [&~*]:fix-margin;
}
figcaption {
@apply text-muted-foreground mt-3 text-sm;
} }
kbd { kbd {
@ -116,7 +111,15 @@
} }
.katex-display { .katex-display {
@apply my-6 overflow-x-auto overflow-y-hidden tracking-normal; @apply text-foreground/80 my-6 overflow-x-auto overflow-y-hidden py-2 tracking-normal;
} }
} }
} }
@utility fix-margin {
@apply [&>*]:first:mt-0! [&>*]:last:mb-0!;
}
@utility small {
@apply text-sm leading-6 [&_code]:text-xs [&_img,video,figure,details,blockquote,.katex-display,.expressive-code]:my-4! [&_li,ol]:mt-0 [&_p]:my-2! [&_ul]:my-0;
}