Repository navigation
fix: add background color for preview-only examples - #55
Conversation
Page borders are crucial in some examples, but they are invisible without `@apply bg-gray-200 p-4`.
✅ Deploy Preview for typst-docs-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| /* Side-by-side examples need additional styles for preview images. */ | ||
| .previewed-code & { | ||
| @apply flex-1 flex-wrap flex items-center justify-center lg:min-w-1/2; | ||
| } |
There was a problem hiding this comment.
.preview {…} is put before .previewed-code .preview {…} (and hence mix into other .preview-code *** {…}) because of the lint rule noDescendingSpecificity | Biome.
There was a problem hiding this comment.
Pull request overview
Adjusts global preview styling so “preview-only” examples (not rendered in side-by-side code/preview blocks) get a background + padding, making page borders visible in rendered docs examples.
Changes:
- Adds a base
.previewstyle (bg-gray-200 p-4) for preview-only examples. - Refactors side-by-side preview styling into a nested
.previewed-code &rule to keep layout behavior for.previewed-code .preview.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
For consistency in design, it needs to have rounded corners.
diff --git a/src/globals.css b/src/globals.css
index f5ba0b3..0a32b8c 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -95,11 +95,13 @@ samp {
.preview {
/* Preview-only examples are not wrapped in `.previewed-code`, but they also need styles to make borders visible */
- @apply bg-gray-200 p-4;
+ @apply rounded-md overflow-hidden bg-gray-200 p-4;
/* Side-by-side examples need additional styles for preview images. */
.previewed-code & {
@apply flex-1 flex-wrap flex items-center justify-center lg:min-w-1/2;
+ /* Do not round the inner edges when in a side-by-side layout. */
+ @apply rounded-none;
}
}
Co-Authored-by: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Updates global preview styling so “preview-only” examples (not wrapped by .previewed-code) get a background/padding treatment that makes page borders visible, while preserving the side-by-side preview layout behavior.
Changes:
- Introduce a base
.previewstyle (bg-gray-200 p-4, rounding/overflow handling) to support preview-only examples. - Move side-by-side preview layout styles under a nested
.previewed-code &selector to keep those behaviors scoped to side-by-side examples.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
3w36zj6
changed the title
Page borders are crucial in some examples, but they are invisible without
@apply bg-gray-200 p-4.The new example for
page.footer-descentis an instance. To test it, you can download the correspondingdocs.jsonfromdocs-main.2026-03-10.530c127- GitHub Actions - Typst dev builds.Before:
After: