liveline: inline heading rule, restore diagram, increase spacing

- SectionHeading now renders as flex row with hairline rule extending
  to fill remaining width after the heading text (matching benji.org)
- Removed separate Divider from Section component
- Restored original diagram layout from before refactor
- Increased article gap to 32px, heading padding to 24px top/bottom
- Centered image captions
This commit is contained in:
Tommy D. Rossi
2026-02-20 12:43:06 +01:00
parent 984f41cfbe
commit abd28162aa
2 changed files with 19 additions and 15 deletions
+8 -4
View File
@@ -198,10 +198,15 @@ export function SectionHeading({ id, children }: { id: string; children: React.R
color: "var(--ll-text-primary)", color: "var(--ll-text-primary)",
margin: 0, margin: 0,
padding: 0, padding: 0,
transform: "translateY(-10px)", display: "flex",
alignItems: "center",
gap: "12px",
paddingTop: "24px",
paddingBottom: "24px",
}} }}
> >
{children} <span style={{ whiteSpace: "nowrap" }}>{children}</span>
<span style={{ flex: 1, height: "1px", background: "var(--ll-divider)" }} />
</h1> </h1>
); );
} }
@@ -267,7 +272,6 @@ export function Divider() {
export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) { export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return ( return (
<> <>
<Divider />
<SectionHeading id={id}>{title}</SectionHeading> <SectionHeading id={id}>{title}</SectionHeading>
{children} {children}
</> </>
@@ -569,7 +573,7 @@ export function EditorialPage({
> >
<div style={{ height: "80px" }} /> <div style={{ height: "80px" }} />
<article className="liveline-article flex flex-col gap-[24px]"> <article className="liveline-article flex flex-col gap-[32px]">
{children} {children}
</article> </article>
</div> </div>
+11 -11
View File
@@ -102,19 +102,19 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
back. back.
</P> </P>
<CodeBlock lang="bash">{`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐ <CodeBlock lang="bash">{`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
│ BROWSER │ │ LOCALHOST │ │ CLIENT │ │ BROWSER │ │ LOCALHOST │ │ CLIENT │
│ │ │ │ │ │ │ │ │ │ │ │
│ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐ │ │ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐
│ │ Extension │<-----------> :19988 │ │ │ CLI / MCP │ │ │ │ Extension │<───────┬───> :19988 │ │ │ CLI / MCP │
│ └───────┬───────┘ │ WS │ │ │ └───────────┘ │ │ └───────┬───────┘ │ WS │ │ │ └───────────┘
│ │ │ │ /extension │ │ │ │ │ │ │ │ /extension │ │ │
│ chrome.debugger │ │ │ │ │ v │ │ chrome.debugger │ │ │ │ │ v
│ v │ │ v │ │ ┌───────────┐ │ │ v │ │ v │ │ ┌───────────┐ │
│ ┌───────────────┐ │ │ /cdp/:id <--------------->│ │ execute │ │ │ ┌───────────────┐ │ │ /cdp/:id <───────────────>│ │ execute │ │
│ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │ │ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │
│ │ Tab 2 (green) │ │ │ │ │ │ │ Tab 2 (green) │ │ │ │
│ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API │ │ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API
└─────────────────────┘ (extension not clicked) └─────────────────┘`}</CodeBlock> └─────────────────────┘ (extension not clicked) └─────────────────┘`}</CodeBlock>
<P> <P>