pigui/landing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix lists in posts and pages, and style images inside the text

Browse Source 
Every list in a post rendered its bullet alone on one line and the
item's text on the next. The panel's editor wraps each item's text in
a <p>, and @pi/ui's reset puts the bullet inside the line: a block
after an inline marker falls below it, paragraph margins and all.
Bullets now sit outside, with the paragraph inside an item unspaced.

Images in the text — attached in the panel or written in by URL through
the API — are never wider than the column and sit apart from the prose,
with a caption under a figure. Inline code and code blocks get a tinted
surface; quotes keep the library's own quotation marks.

The mock's posts carry such a body, so the typography can be reviewed
without writing one in the panel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
pigui
2026-09-29 23:11:46 +02:00
parent e5d91d673a
commit e2e90d5512
2 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
landing/src/app/ui/_detail.scss
View File

@@ -90,18 +90,28 @@
margin: 0 0 1rem;
}
// The bullet outside the text, where a list's bullet goes. `@pi/ui`'s
// reset puts it inside, and the editor wraps each item's text in a `<p>`:
// together the bullet sat alone on one line and the text, a block, fell to
// the next — with a paragraph's margins on top.
ul,
ol {
margin: 0 0 1.5rem;
padding-left: 1.25rem;
padding-left: 1.5rem;
}
li {
margin: 0 0 0.5rem;
padding-left: 0.25rem;
list-style-position: outside;
&::marker {
color: var(--pi-color-primary);
}
> p {
margin: 0;
}
}
strong {
@@ -112,6 +122,67 @@
color: var(--pi-color-primary);
}
code {
padding: 0.1em 0.35em;
border-radius: 0.375rem;
background: color-mix(in srgb, var(--pi-color-primary) 10%, transparent);
font-size: 0.9em;
}
pre {
margin: 0 0 1.5rem;
padding: 1rem 1.25rem;
overflow-x: auto;
border-radius: var(--pi-border-radius-medium, 0.75rem);
background: color-mix(in srgb, var(--pi-color-primary) 7%, transparent);
line-height: 1.55;
code {
padding: 0;
background: none;
}
}
// `@pi/ui` already frames a quote with its own quotation marks; only the
// spacing is this page's business.
blockquote {
margin: 0 0 1.5rem;
p:last-child {
margin-bottom: 0;
}
}
hr {
margin: 2.5rem 0;
border: 0;
border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
// Images in the text — attached in the panel's editor, or by URL through
// the API. Never wider than the column, and set apart from the prose.
img {
display: block;
max-width: 100%;
height: auto;
margin: 2rem 0;
border-radius: var(--pi-border-radius-medium, 0.75rem);
}
figure {
margin: 2rem 0;
img {
margin: 0;
}
}
figcaption {
margin-top: 0.5rem;
font-size: 0.875rem;
color: color-mix(in srgb, currentColor 68%, transparent);
}
> :first-child {
margin-top: 0;
}