Skip to content

Landing: show the finished app first, then explain it #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adnaan merged 6 commits into from
Aug 8, 2026
Merged

Landing: show the finished app first, then explain it #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f623d3a
feat(landing): show the finished app first, then explain it
adnaan Aug 6, 2026
c1ea02d
docs(landing): give the reader a way to check the multi-tab claim
adnaan Aug 6, 2026
0ca3a21
fix(landing): make the highlighting visible, and make every callback …
adnaan Aug 7, 2026
b8679d1
feat(landing): make the hero app actually contain what the page explains
adnaan Aug 7, 2026
abb4da4
fix(landing): keep lvt-* attributes out of the hero
adnaan Aug 7, 2026
bf707e3
docs(landing): name what the hero's elisions actually do
adnaan Aug 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions content/assets/brand.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@
--lt-code-comment: #6B6862;
--lt-code-string: #4A6B52;
--lt-code-keyword: #2F5D8A;
--lt-code-name: #5A5560; /* declared names: func names, types, HTML tags */
--lt-code-name: #6B4A7A; /* declared names: func names, HTML tags */
--lt-code-type: #7D5226; /* built-in types, numbers, booleans */
}

/* ── Prism, neutralised ──
Expand All @@ -87,12 +88,13 @@ pre[class*="language-"] { color: var(--pre-text); text-shadow: none }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--lt-code-comment) }
/* What the code declares or invokes, and what an HTML element IS. */
.token.tag, .token.function, .token.class-name { color: var(--lt-code-name) }
/* The things a value IS: Go's built-in types, literals. */
.token.builtin, .token.number, .token.boolean, .token.constant { color: var(--lt-code-type) }
.token.punctuation, .token.operator, .token.entity, .token.url,
.token.property, .token.boolean, .token.number,
.token.constant, .token.symbol, .token.deleted, .token.namespace,
.token.property, .token.symbol, .token.deleted, .token.namespace,
.token.regex, .token.important, .token.variable { color: var(--pre-text) }
.token.selector, .token.attr-name, .token.string, .token.char,
.token.builtin, .token.inserted,
.token.inserted,
.language-css .token.string, .style .token.string { color: var(--lt-code-string) }
.token.atrule, .token.attr-value, .token.keyword { color: var(--lt-code-keyword) }

Expand Down
12 changes: 10 additions & 2 deletions content/assets/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,10 @@ section { scroll-margin-top: 72px }
.close { margin: 28px 0 0 }
.note { font-size: 15px; line-height: 1.6; color: var(--body-muted); max-width: 62ch }

.hero { padding: 88px 0 64px }
.hero { padding: 88px 0 40px }
.hero .sub { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0; max-width: 56ch }
#whole-app { padding: 56px 0; border-top: 1px solid var(--line) }
/* The app is the hero's payload, not the next topic — no rule between them. */
.lead-in { padding: 0 0 56px }
.intro { padding: 56px 0 24px; border-top: 1px solid var(--line) }
.step { padding: 40px 0; border-top: 1px solid var(--line-soft) }
.cta {
Expand Down Expand Up @@ -327,6 +328,13 @@ section { scroll-margin-top: 72px }
}
.pair > * { min-width: 0 }

/* The hero's two snippets are read in sequence — template, then the Go that
serves it — not compared. Side by side they get ~420px each at 1440px, and
these signatures run past 60 characters, so every interesting line clipped.
Full width fits them without a scrollbar. */
.stack { display: grid; gap: 16px; margin-bottom: 4px }
.stack > * { min-width: 0 }

/* ══ On the wire ═════════════════════════════════════════════════════════ */

.wire {
Expand Down
Loading
Loading