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)",
margin: 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>
);
}
@@ -267,7 +272,6 @@ export function Divider() {
export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return (
<>
<Divider />
<SectionHeading id={id}>{title}</SectionHeading>
{children}
</>
@@ -569,7 +573,7 @@ export function EditorialPage({
>
<div style={{ height: "80px" }} />
<article className="liveline-article flex flex-col gap-[24px]">
<article className="liveline-article flex flex-col gap-[32px]">
{children}
</article>
</div>
+11 -11
View File
@@ -102,19 +102,19 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
back.
</P>
<CodeBlock lang="bash">{`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
<CodeBlock lang="bash">{`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
│ BROWSER │ │ LOCALHOST │ │ CLIENT │
│ │ │ │ │ │
│ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐ │
│ │ Extension │<-----------> :19988 │ │ │ CLI / MCP │ │
│ └───────┬───────┘ │ WS │ │ │ └───────────┘ │
│ │ │ │ /extension │ │ │ │
│ chrome.debugger │ │ │ │ │ v │
│ v │ │ v │ │ ┌───────────┐ │
│ ┌───────────────┐ │ │ /cdp/:id <--------------->│ │ execute │ │
│ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │
│ │ Tab 2 (green) │ │ │ │ │
│ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API │
│ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐
│ │ Extension │<───────┬───> :19988 │ │ │ CLI / MCP │
│ └───────┬───────┘ │ WS │ │ │ └───────────┘
│ │ │ │ /extension │ │ │
│ chrome.debugger │ │ │ │ │ v
│ v │ │ v │ │ ┌───────────┐ │
│ ┌───────────────┐ │ │ /cdp/:id <───────────────>│ │ execute │ │
│ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │
│ │ Tab 2 (green) │ │ │ │
│ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API
└─────────────────────┘ (extension not clicked) └─────────────────┘`}</CodeBlock>
<P>