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