From 4dc74d65ed60c924af28ff16429b60191542dab5 Mon Sep 17 00:00:00 2001 From: VB Date: Wed, 30 Sep 2026 14:45:51 +0400 Subject: [PATCH 1/2] Put the demo video in the hero and move the illustration below it The video was below the fold; it now takes the hero's right column in place of the static illustration, which moves into its own section underneath. On one-column layouts the video sits right after the headline and lede, ahead of the buttons and install command. Co-Authored-By: Claude Opus 5.5 --- site/assets/site.css | 17 ++++++++++++++--- site/index.html | 26 ++++++++++++++------------ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/site/assets/site.css b/site/assets/site.css index 875d068..8918b01 100644 --- a/site/assets/site.css +++ b/site/assets/site.css @@ -164,6 +164,17 @@ 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; } +/* One column: headline and lede, then the video, then the buttons and install command. */ +@media (max-width: 800px) { + .hero { 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%; margin-bottom: 32px; } + .hero-illustration { padding-block: 0 48px; } +} diff --git a/site/index.html b/site/index.html index 3551c3d..300db1e 100644 --- a/site/index.html +++ b/site/index.html @@ -35,20 +35,22 @@

Chromium.
In your terminal_

One command. Chromium and Vimium included in setup. Linux x86-64 · macOS Apple Silicon + Intel · Windows (WSL2 x86-64).

On Windows, run the command in your WSL2 Linux shell. Windows Terminal (Preview) is supported with Sixel graphics.

-
-
termium
-
1 The web, at your command ×
-
https://termium.dev
-
{{logo}}

The web. At your command_

f follow linksjk scrollt new tab
-
Vimium readyF1 help · F6 mouse keys
+
+ +
70 seconds in Ghostty, Kitty, WezTerm, foot, xterm, and Alacritty. Unmute for the soundtrack.
-
- -

70 seconds in Ghostty, Kitty, WezTerm, foot, xterm, and Alacritty. Unmute for the soundtrack.

+
+
+
termium
+
1 The web, at your command ×
+
https://termium.dev
+
{{logo}}

The web. At your command_

f follow linksjk scrollt new tab
+
Vimium readyF1 help · F6 mouse keys
+
A REAL BROWSER, END TO ENDChromiumVimiumKitty graphicsSixelASCII graphics
From e9b813bceebab280d696cc0d20cf7035d6aec7e7 Mon Sep 17 00:00:00 2001 From: VB Date: Wed, 30 Sep 2026 14:55:43 +0400 Subject: [PATCH 2/2] Give the hero video more room and keep the install command on one line Two columns now split 45/55 in the video's favor (592px video at full width). Below 1200px, where the install command would wrap beside the video, the hero switches to one column: headline, video (up to 900px), then buttons and install. The Copy label never wraps. Co-Authored-By: Claude Opus 5.5 --- site/assets/site.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/site/assets/site.css b/site/assets/site.css index 8918b01..d9741f8 100644 --- a/site/assets/site.css +++ b/site/assets/site.css @@ -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); } @@ -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; } @@ -169,12 +169,13 @@ pre:has(> .copy-button) > code { flex: 1; min-width: 0; overflow-wrap: break-wor .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; } -/* One column: headline and lede, then the video, then the buttons and install command. */ -@media (max-width: 800px) { - .hero { gap: 0; } +/* 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%; margin-bottom: 32px; } + .hero-video { order: 2; width: 100%; max-width: 900px; margin-bottom: 32px; } .hero-illustration { padding-block: 0 48px; } }