Skip to content

Put the demo video in the hero #32

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
codr1 merged 2 commits into from
Sep 30, 2026
Merged

Put the demo video in the hero #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4dc74d6
Put the demo video in the hero and move the illustration below it
codr1 Sep 30, 2026
e9b813b
Give the hero video more room and keep the install command on one line
codr1 Sep 30, 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
22 changes: 17 additions & 5 deletions site/assets/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ button { cursor: pointer; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; font: 0.75rem var(--mono); color: var(--muted); }
.site-nav a[aria-current="page"] { color: var(--green); }
.site-nav .nav-install { padding: 10px 15px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 52px; padding-block: 90px 80px; }
.hero { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 52px; padding-block: 90px 80px; }
.hero-copy { min-width: 0; }
.eyebrow { font: 0.625rem/1.6 var(--mono); letter-spacing: 1.6px; color: var(--blue); margin: 0 0 22px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }
Expand Down Expand Up @@ -113,7 +113,7 @@ summary { cursor: pointer; font-size: 0.9375rem; font-weight: 500; }
.docs-content code { font: .86em var(--mono); background: #172230; padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; color: #b7e9cd; }
.docs-content pre { position: relative; margin: 22px 0; padding: 24px; overflow-x: auto; background: #121d28; border: 1px solid #2d4054; border-radius: 5px; line-height: 1.7; }
.docs-content pre code { padding: 0; background: none; font-size: 0.75rem; color: #c9e4d5; overflow-wrap: normal; }
.copy-button { order: 2; flex: none; margin: 0 0 0 auto; padding: 5px 9px; border: 1px solid #43556b; background: var(--panel); color: var(--muted); border-radius: 3px; font: 0.625rem var(--mono); }
.copy-button { order: 2; flex: none; white-space: nowrap; margin: 0 0 0 auto; padding: 5px 9px; border: 1px solid #43556b; background: var(--panel); color: var(--muted); border-radius: 3px; font: 0.625rem var(--mono); }
/* Command and copy button share one row; the command wraps at spaces, never mid-word. */
pre:has(> .copy-button) { display: flex; align-items: flex-start; gap: 12px; }
pre:has(> .copy-button) > code { flex: 1; min-width: 0; overflow-wrap: break-word; }
Expand Down Expand Up @@ -164,6 +164,18 @@ pre:has(> .copy-button) > code { flex: 1; min-width: 0; overflow-wrap: break-wor
.github-icon { flex: 0 0 16px; width: 16px; height: 16px; }

.mouse-keys-panel { margin-top: 48px; padding-top: 36px; border-top: 1px solid #304051; }
.demo-video { padding-block: 0 72px; }
.demo-video video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #344457; border-radius: 8px; background: #10151e; box-shadow: 0 22px 65px #0005; }
.demo-video .fine-print { max-width: none; }
.hero-video { min-width: 0; margin: 0; }
.hero-video video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #344457; border-radius: 8px; background: #10151e; box-shadow: 0 22px 65px #0005; }
.hero-video figcaption { margin-top: 12px; color: var(--muted); font: 0.625rem/1.6 var(--mono); }
.hero-illustration { display: flex; justify-content: center; padding-block: 0 72px; }
.hero-illustration .terminal-demo { width: 100%; max-width: 560px; }
/* Below 1200px the install command no longer fits beside the video, so the hero goes to one column:
headline and lede, then the video, then the buttons and install command. */
@media (max-width: 1199px) {
.hero { grid-template-columns: 1fr; gap: 0; }
.hero-copy { display: contents; }
.hero-copy > * { order: 3; }
.hero-copy > .eyebrow, .hero-copy > h1, .hero-copy > .lede { order: 1; }
.hero-video { order: 2; width: 100%; max-width: 900px; margin-bottom: 32px; }
.hero-illustration { padding-block: 0 48px; }
}
26 changes: 14 additions & 12 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,22 @@ <h1>Chromium.<br>In your <span class="accent">terminal_</span></h1>
<p class="fine-print">One command. Chromium and Vimium included in setup. Linux x86-64 · macOS Apple Silicon + Intel · Windows (WSL2 x86-64).</p>
<p class="fine-print">On Windows, run the command in your WSL2 Linux shell. <a href="https://apps.microsoft.com/detail/9n8g5rfz9xk3">Windows Terminal (Preview)</a> is supported with Sixel graphics.</p>
</div>
<figure class="terminal-demo" aria-label="Illustration of Termium's browser and terminal controls">
<div class="window-title"><span class="window-dots" aria-hidden="true">● ● ●</span><span>termium</span><span aria-hidden="true">⌘</span></div>
<div class="demo-tabs"><span>1 The web, at your command <b>×</b></span><span aria-hidden="true">+</span></div>
<div class="demo-address"><span aria-hidden="true">← → ↻</span><span>https://termium.dev</span><span aria-hidden="true">≡</span></div>
<div class="demo-page">{{logo}}<p class="demo-greeting">The web. At your command<span class="accent">_</span></p><div class="demo-keys"><span><kbd>f</kbd> follow links</span><span><kbd>j</kbd><kbd>k</kbd> scroll</span><span><kbd>t</kbd> new tab</span></div></div>
<figcaption><span>Vimium ready</span><span>F1 help · F6 mouse keys</span></figcaption>
<figure class="hero-video">
<video controls autoplay muted loop playsinline preload="metadata" poster="/assets/media/termium-demo-poster.jpg" aria-label="Termium demo: YouTube, SpaceX, Hacker News and Steam in the terminal">
<source src="/assets/media/termium-demo.webm" type="video/webm">
<source src="/assets/media/termium-demo.mp4" type="video/mp4">
</video>
<figcaption>70 seconds in Ghostty, Kitty, WezTerm, foot, xterm, and Alacritty. Unmute for the soundtrack.</figcaption>
</figure>
</section>
<section class="demo-video container" aria-label="Termium demo video">
<video controls autoplay muted loop playsinline preload="metadata" poster="/assets/media/termium-demo-poster.jpg">
<source src="/assets/media/termium-demo.webm" type="video/webm">
<source src="/assets/media/termium-demo.mp4" type="video/mp4">
</video>
<p class="fine-print">70 seconds in Ghostty, Kitty, WezTerm, foot, xterm, and Alacritty. Unmute for the soundtrack.</p>
<section class="hero-illustration container" aria-label="Termium welcome page">
<figure class="terminal-demo" aria-label="Illustration of Termium's browser and terminal controls">
<div class="window-title"><span class="window-dots" aria-hidden="true">● ● ●</span><span>termium</span><span aria-hidden="true">⌘</span></div>
<div class="demo-tabs"><span>1 The web, at your command <b>×</b></span><span aria-hidden="true">+</span></div>
<div class="demo-address"><span aria-hidden="true">← → ↻</span><span>https://termium.dev</span><span aria-hidden="true">≡</span></div>
<div class="demo-page">{{logo}}<p class="demo-greeting">The web. At your command<span class="accent">_</span></p><div class="demo-keys"><span><kbd>f</kbd> follow links</span><span><kbd>j</kbd><kbd>k</kbd> scroll</span><span><kbd>t</kbd> new tab</span></div></div>
<figcaption><span>Vimium ready</span><span>F1 help · F6 mouse keys</span></figcaption>
</figure>
</section>
<div class="tech-strip container" aria-label="Technology"><span>A REAL BROWSER, END TO END</span><span>Chromium</span><span>Vimium</span><span>Kitty graphics</span><span>Sixel</span><span>ASCII graphics</span></div>
<section class="section container" id="features" aria-labelledby="features-title">
Expand Down
Loading