From 117cd3216dcc8e487ee18b98f37625348ddf7832 Mon Sep 17 00:00:00 2001 From: Bendik Aagaard Lynghaug Date: Fri, 14 Aug 2026 22:46:14 +0200 Subject: [PATCH] Ban px from stylesheets: every length rem/em off the responsive root Only the :root font-size definition itself stays absolute - it is the base everything derives from. Embed-card inline styles in the editor follow the same rule; already-stored embeds keep their old px inline styles until re-edited. Co-Authored-By: Claude Fable 5 --- prosekit-editor.js | 6 +++--- style/main.css | 43 +++++++++++++++++++++++-------------------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/prosekit-editor.js b/prosekit-editor.js index 22f710b..bbaf7c6 100644 --- a/prosekit-editor.js +++ b/prosekit-editor.js @@ -129,15 +129,15 @@ function defineGiteaRepoEmbed() { 'data-description': description, 'data-url': url, style: - 'display:block;border:1px solid #ddd;border-radius:8px;' + - 'padding:12px 16px;margin:8px 0;font-family:inherit;', + 'display:block;border:0.06em solid #ddd;border-radius:0.5em;' + + 'padding:0.75em 1em;margin:0.5em 0;font-family:inherit;', }, [ 'a', { href: url, style: 'font-weight:600;text-decoration:none;color:inherit;' }, `${owner}/${repo}`, ], - ['div', { style: 'opacity:0.7;font-size:0.9em;margin-top:4px;' }, description], + ['div', { style: 'opacity:0.7;font-size:0.9rem;margin-top:0.25em;' }, description], ] }, }) diff --git a/style/main.css b/style/main.css index 2e9bf10..5d6ca22 100644 --- a/style/main.css +++ b/style/main.css @@ -57,6 +57,9 @@ --radius: 1.1rem; + /* The single place absolute units are allowed: this IS the base every + other length derives from (rem/em everywhere else - px is banned in + stylesheets). First line is the fallback for engines without lvmin. */ font-size: 17px; font-size: max(12px, calc(2.1lvmin + 3pt)); } @@ -112,7 +115,7 @@ main.not-found { /* hero */ .hero { - max-width: 780px; + max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem 2.5rem; display: flex; @@ -200,7 +203,7 @@ main.not-found { z-index: 1; padding: 0 1.5rem 3.5rem; gap: 0.6rem; - text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8); + text-shadow: 0 0.12em 1.4em rgba(0, 0, 0, 0.8); } /* Softens the otherwise hard cut where the full-bleed canvas meets the @@ -229,7 +232,7 @@ main.not-found { gap: 1.25rem; } -@media (max-width: 700px) { +@media (max-width: 43.75rem) { .alternatives { padding: 0; gap: 3.5rem; @@ -263,7 +266,7 @@ main.not-found { .question-nav a { color: var(--ink-dim); text-decoration: none; - border-bottom: 1px solid var(--line); + border-bottom: 0.06rem solid var(--line); } .question-nav a:hover { @@ -293,7 +296,7 @@ main.not-found { .alt-card { background: var(--paper-raised); - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.9rem; } @@ -363,7 +366,7 @@ main.not-found { } .feature { - border-left: 3px solid var(--feature-accent, transparent); + border-left: 0.18rem solid var(--feature-accent, transparent); } .feature-icon { @@ -413,7 +416,7 @@ textarea { font: inherit; color: var(--ink); background: var(--paper); - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: 0.6rem; padding: 0.65rem 0.8rem; width: 100%; @@ -438,12 +441,12 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-soft); + box-shadow: 0 0 0 0.18rem var(--accent-soft); } .prosekit-wrap { background: var(--paper); - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: 0.6rem; overflow: hidden; } @@ -452,7 +455,7 @@ textarea:focus { display: flex; gap: 0.2rem; padding: 0.4rem; - border-bottom: 1px solid var(--line); + border-bottom: 0.06rem solid var(--line); flex-wrap: wrap; } @@ -461,7 +464,7 @@ textarea:focus { font-size: 0.9rem; color: var(--ink-dim); background: transparent; - border: 1px solid transparent; + border: 0.06rem solid transparent; border-radius: 0.4rem; padding: 0.3rem 0.55rem; cursor: pointer; @@ -491,7 +494,7 @@ textarea:focus { .prosekit-wrap:focus-within { border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-soft); + box-shadow: 0 0 0 0.18rem var(--accent-soft); } /* ProseKit's typography.css (loaded from esm.sh at mount time) sets @@ -566,7 +569,7 @@ textarea:focus { } .alt-submit:active { - transform: translateY(1px); + transform: translateY(0.06em); } .alt-submit:disabled { @@ -597,7 +600,7 @@ textarea:focus { .resource-raw { background: var(--paper); - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: 0.6rem; padding: 0.8rem; font-size: 0.82rem; @@ -611,7 +614,7 @@ textarea:focus { } .answer-row { - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: 0.8rem; padding: 1rem 1.1rem; display: grid; @@ -624,7 +627,7 @@ textarea:focus { .answer-fields { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem 1rem; } @@ -674,7 +677,7 @@ textarea:focus { } .item-card { - border: 1px solid var(--line); + border: 0.06rem solid var(--line); border-radius: 0.8rem; padding: 1rem 1.1rem; display: grid; @@ -736,8 +739,8 @@ textarea:focus { font-size: 0.85rem; color: var(--ink); background: var(--paper); - border: 1px solid var(--line); - border-radius: 999px; + border: 0.06rem solid var(--line); + border-radius: 999rem; padding: 0.4rem 0.9rem; cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms; @@ -759,7 +762,7 @@ textarea:focus { cursor: not-allowed; } -@media (max-width: 640px) { +@media (max-width: 40rem) { .hero { padding: 3rem 1.25rem 2rem; }