Refine getting-started docs typography and preview styling

[Alek99]

Summary

• Tighten docs typography (smaller, semibold headings; lighter body weight; reduced gaps)
• Widen content column (42rem→52rem / 56rem→64rem) and push right sidebar to 2xl: so mid-width screens get room to read
• Navbar tabs visible from md: (was xl:) so they don't collapse to a burger at medium widths
• Swap Getting Started order: Installation before Introduction
• docgen section/tabs renderers: cleaner rx.el.div layouts, pill-style tabs (pill-tab/pill-tab-list), consistent gap + padding
• Tailwind theme additions: pill tabs, slate-tinted inline rt-Code, hover-reveal copy button with "Copy" label, softer borders

Test plan

• Visit /docs/getting-started/introduction, /installation, /basics, /dashboard-tutorial — verify headings/body typography feels tighter, content column is wider
• Resize browser — tabs should stay visible through md:, right sidebar hides below 2xl:, hamburger only at <md:
• Check tabs render as pills (not underline), with active state showing a white pill and subtle shadow
• Hover a code block — copy button fades in with "Copy" label
• Inline code (\like this``) renders with slate color, not purple accent
• Sidebar: Getting Started expands to show Installation above Introduction
• uv run reflex compile succeeds
• uv run pre-commit run --all-files passes

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

This PR tightens docs typography (smaller headings, lighter body weight, reduced gaps), widens the content column, shifts sidebar breakpoints for better mid-width readability, reorders Getting Started to show Installation first, and introduces pill-style tabs with a hover-reveal copy button for code blocks.

Confidence Score: 5/5

Safe to merge after removing the extra blank line that will break pre-commit.

All findings are P2 — one trivial blank-line removal to pass Ruff E303, and two CSS observations (pointer-events !important consistency, top/right positioning relying on Reflex library CSS). No logic bugs or data integrity issues.

pcweb/flexdown.py (extra blank line) and assets/tailwind-theme.css (pointer-events consistency, verify top/right positioning).

Important Files Changed

Filename	Overview
assets/tailwind-theme.css	Large styling additions: pill-tab/pill-tab-list components, hover-reveal copy button with "Copy" label, inline code slate-color override. Minor issues: pointer-events lacks !important (inconsistent with rest of block), top/right positioning offsets are only meaningful if Reflex's library CSS already makes the button absolutely positioned.
pcweb/flexdown.py	SectionBlock migrated from rx.vstack/rx.box to rx.el.div with Tailwind classes. Introduces a spurious third blank line between SectionBlock and DefinitionBlock, which will fail Ruff E303 during pre-commit.
pcweb/docgen_pipeline.py	Tab triggers updated to pill-tab class, tab content gets pt-6 padding, section renderer migrated to rx.el.div. Removes local c_color import in favour of direct CSS variable reference — clean and equivalent.
pcweb/templates/docpage/blocks/headings.py	All heading levels downsized (h1 5xl→4xl, h2 4xl→3xl, etc.) and font-weight changed from font-[525] to font-semibold. HeadingLink gap reduced from gap-6 to gap-2 and margin-bottom from mb-6 to mb-3. Intentional typography tightening.
pcweb/templates/docpage/blocks/typography.py	Body text and list items changed from font-[475] to font-normal (400). Straightforward weight normalization.
pcweb/templates/docpage/docpage.py	Content column widened (42rem→52rem, 56rem→64rem) and right sidebar breakpoint shifted from xl to 2xl to reclaim horizontal space on mid-size screens. No logic changes.
pcweb/views/docs_navbar.py	Navbar tab visibility breakpoint lowered from xl to md, hamburger hidden from md upward. Consistent pair of changes that keep tabs and hamburger mutually exclusive.
pcweb/components/docpage/sidebar/sidebar_items/learn.py	Installation moved before Introduction in Getting Started sidebar group. Simple reorder, no logic impact.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Markdown / Flexdown source] --> B[flexdown.py SectionBlock]
    A --> C[docgen_pipeline.py\nReflexDocTransformer]
    B --> D[rx.el.div\npill-style section layout]
    C --> E[_render_tabs\npill-tab / pill-tab-list]
    C --> F[_render_section\nrx.el.div + CSS vars]
    D --> G[docpage template]
    E --> G
    F --> G
    G --> H{Screen width}
    H -->|>= 2xl 1536px| I[Content + Right sidebar\nmax-w-52rem]
    H -->|lg to 2xl| J[Content only\nmax-w-52rem, sidebar hidden]
    H -->|md to lg| K[Content + full navbar tabs\nno hamburger]
    H -->|< md| L[Content + hamburger menu]
    G --> M[tailwind-theme.css]
    M --> N[pill-tab-list / pill-tab styles]
    M --> O[Hover-reveal copy button\n::after content Copy]
    M --> P[rt-Code slate override]

Loading

_{Reviews (1): Last reviewed commit: "refine getting-started docs typography a..." | Re-trigger Greptile}

[greptile-apps]

Extra blank line will fail Ruff E303

Three blank lines between top-level class definitions violates PEP 8's E303 rule (max 2 allowed), which Ruff enforces. This will cause uv run pre-commit run --all-files to fail, as listed in the test plan.

Suggested change

	class DefinitionBlock(flexdown.blocks.Block):
	)
	class DefinitionBlock(flexdown.blocks.Block):

[greptile-apps]

pointer-events inconsistency may allow invisible button clicks

Every adjacent property in this block uses !important, but pointer-events: none and pointer-events: auto do not. If any other rule in the cascade applies pointer-events: all !important (e.g. from Radix or a utility class), the hidden button (opacity: 0) becomes clickable when the code block is not hovered, silently accepting keyboard/mouse events without any visual feedback.

Add !important to both declarations to match the surrounding rules.

[greptile-apps]

top/right offsets are inert without position

top: 8px and right: 12px only take effect on positioned elements (absolute, fixed, sticky, or relative). No position property is set anywhere on .code-block button in this stylesheet, so these values will be silently ignored unless Reflex's library CSS already applies position: absolute to the copy button. If that guarantee doesn't hold, the button won't be correctly pinned to the top-right corner of the code block.

[masenf]

These changes should go in reflex-dev/reflex in docs/app I believe.

This whole repo should have been in public archive, I think it came out of archive because Tom needed a special deploy or something.