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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user