A calm place to write long-form, and publish it to the open social web. skypress.blog/
0

Configure Feed

Select the types of activity you want to include in your feed.

Style the editor surface: constrain width, add framing, respect dark mode

The bundled isolated-block-editor CSS hard-codes a full-width white
surface that ignores prefers-color-scheme, and the .skypress-editor
wrapper had no styles of its own. On large viewports the editor spanned
the full width, lacked padding, and rendered as a white block on the
dark page.

Constrain and frame it as a centered writing panel, and drive its
colours from the existing design tokens (--paper-raised, --line-strong,
--ink, --shadow) so it follows light/dark like the rest of the app. The
visual editor and Gutenberg's inline-styled device-preview wrapper are
made transparent so the paper surface shows through.

+30
+30
src/pages/editor.astro
··· 257 257 font: inherit; 258 258 cursor: pointer; 259 259 } 260 + 261 + /* Editor surface. The bundled isolated-block-editor CSS hard-codes a 262 + full-width white surface that ignores `prefers-color-scheme`. Constrain 263 + and frame it as a contained writing panel, and drive its colours from the 264 + design tokens so it follows light/dark like the rest of the app. */ 265 + .skypress-editor { 266 + max-width: 60rem; 267 + margin: 1.5rem auto 3rem; 268 + padding: 0 1.25rem; 269 + } 270 + .skypress-editor .iso-editor { 271 + background-color: var(--paper-raised); 272 + border: 1px solid var(--line-strong); 273 + border-radius: var(--radius); 274 + color: var(--ink); 275 + box-shadow: var(--shadow); 276 + } 277 + .skypress-editor .iso-editor .edit-post-visual-editor { 278 + background-color: transparent; 279 + } 280 + /* Gutenberg sets `background: white` inline on the device-preview wrapper; 281 + only !important lets the paper surface show through (esp. in dark mode). */ 282 + .skypress-editor .iso-editor .edit-post-visual-editor .is-desktop-preview { 283 + background: transparent !important; 284 + } 285 + .skypress-editor__status { 286 + margin: 0.75rem 0 0; 287 + color: var(--muted); 288 + font-size: 0.85rem; 289 + } 260 290 </style>