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

2
components.json
View file

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

2
src/components/Head.astro
View file

@ -2,7 +2,7 @@
import "@fontsource-variable/geist";
import "@fontsource-variable/geist-mono";
import "../styles/callout.css";
import "../styles/globals.css";
import "../styles/global.css";
import "../styles/typography.css";
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 {
.prose {
@apply text-foreground text-base leading-8;
@apply [&>*]:first:mt-0 [&>*]:last:mb-0 [&>section:first-child>*]:mt-0 [&>section:last-child>*]:mb-0;
@apply text-foreground text-base leading-7;
p {
@apply text-foreground/80 my-5 leading-7 not-first:mt-5;
@apply text-foreground/80 my-5 not-first:mt-5;
}
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 {
@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 {
@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 {
@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 {
@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 {
@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 {
@ -51,7 +50,7 @@
}
li {
@apply text-foreground/80 pl-2 leading-7 [&>p]:my-0;
@apply text-foreground/80 pl-2 [&>p]:my-0;
}
ul ul,
@ -62,16 +61,12 @@
}
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);
}
.expressive-code {
@apply my-6 [&_.title]:font-medium!;
}
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 {
@ -79,7 +74,7 @@
}
table {
@apply my-8 w-full text-sm;
@apply my-6 block w-full overflow-x-auto text-sm;
}
thead {
@ -87,28 +82,28 @@
}
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 {
@apply border-muted-foreground/20 even:bg-muted/50 border-b;
tr {
@apply border-muted-foreground/30 border-y first:border-t-0 last:border-b-0;
}
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,
video {
@apply my-8;
video,
figure,
.expressive-code {
@apply my-6;
}
figure {
@apply my-8;
}
figcaption {
@apply text-muted-foreground mt-3 text-sm;
summary {
@apply [&~*]:small [&~*]:fix-margin;
}
kbd {
@ -116,7 +111,15 @@
}
.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;
}