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

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>

landing/src/app/ui/_detail.scss

@@ -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;
     }

tools/mock-api.mjs

@@ -64,8 +64,20 @@ const page = (id, title, slug, featured) => ({
   alternates: { es: `/${slug}`, en: `/en/${slug}-en`, ca: `/ca/${slug}-ca` }, path: `/${slug}`,
 });
 
+// A body with everything the editor can produce, images included, so the
+// post's typography can be reviewed without writing one in the panel.
+const richBody =
+  '<p>Volvimos a renderizar en el servidor por tres motivos.</p>' +
+  '<ul><li><p><strong>Rendimiento</strong> en móviles modestos.</p></li><li><p><strong>SEO</strong> sin trucos.</p></li></ul>' +
+  '<img src="/logo.png" alt="El logo de Pireon">' +
+  '<h2>Cómo lo hicimos</h2><p>Con <code>injectLoad</code> y un loader por página:</p>' +
+  '<pre><code>export const load = async () => fetchPage();</code></pre>' +
+  '<figure><img src="/logo.png" alt="Otra vez el logo"><figcaption>Una imagen con pie de foto.</figcaption></figure>' +
+  '<blockquote><p>Lo que no se mide en un móvil de gama baja, no está medido.</p></blockquote>';
+
 const post = (id, title, slug, published_at) => ({
   ...page(id, title, slug, false),
+  body: richBody,
   published_at,
   excerpt: 'Lo que hemos aprendido este mes, contado sin prisa y con ejemplos de código.',
   category: { id: 9, name: 'Blog', slug: 'blog', position: 3 },