Editor type in rem: prosekit's px typography ignored the responsive root
Deploy / deploy (push) Successful in 1m5s

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-14 19:45:58 +02:00
co-authored by Claude Fable 5
parent 5571d21b21
commit 428716e479
+48 -2
View File
@@ -494,14 +494,60 @@ textarea:focus {
box-shadow: 0 0 0 3px var(--accent-soft);
}
.prosekit-editor p {
/* ProseKit's typography.css (loaded from esm.sh at mount time) sets
fixed px font sizes on .ProseMirror, so they ignore the responsive
root font-size. Re-state them in rem/em at the same proportions,
with .prosekit-editor prefixed so these win on specificity. */
.prosekit-editor .ProseMirror p {
font-size: 1rem;
line-height: 1.5;
margin: 0 0 0.6em;
}
.prosekit-editor p:last-child {
.prosekit-editor .ProseMirror p:last-child {
margin-bottom: 0;
}
.prosekit-editor .ProseMirror h1 {
font-size: 2.5rem;
line-height: 1.1;
margin: 0.9em 0 0.1em;
}
.prosekit-editor .ProseMirror h2 {
font-size: 1.875rem;
line-height: 1.3;
margin: 1.05em 0 0.13em;
}
.prosekit-editor .ProseMirror h3 {
font-size: 1.5rem;
line-height: 1.33;
margin: 0.9em 0 0.04em;
}
.prosekit-editor .ProseMirror h4 {
font-size: 1.25rem;
line-height: 1.3;
margin: 0.8em 0 0.05em;
}
.prosekit-editor .ProseMirror h5 {
font-size: 1.125rem;
line-height: 1.22;
margin: 0.78em 0 0.06em;
}
.prosekit-editor .ProseMirror h6 {
font-size: 1rem;
line-height: 1.25;
margin: 0.75em 0 0.06em;
}
.prosekit-editor .ProseMirror :is(h1, h2, h3, h4, h5, h6):first-child {
margin-top: 0;
}
.alt-submit {
font-family: var(--sans);
font-weight: 600;