Skip to content

Landing: restore marquee and header, one button system, dedupe #62

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

Closed
abahmed wants to merge 3 commits into from
Closed

Landing: restore marquee and header, one button system, dedupe #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4901d74
Restore marquee and header, icon copy button, one hover system, dedup…
abahmed Oct 22, 2026
abcd89b
Benefits grid 2x2 on desktop
abahmed Oct 22, 2026
0637b9a
One primary button style for both themes; keep copy icon clear of the…
abahmed Oct 22, 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
5 changes: 1 addition & 4 deletions apps/web/src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const { current = 'none', minimal = false } = Astro.props;
<a href="/support" aria-current={current === 'support' ? 'page' : undefined}>Get help</a>
<a href="https://app.kwatch.dev">Sign in</a>
</nav>
<a class="btn btn-line install-pill" href="/#install">Install</a>
</>
)}
</div>
Expand All @@ -31,10 +30,8 @@ const { current = 'none', minimal = false } = Astro.props;
nav a { color: var(--text-muted); text-decoration: none; }
nav a:hover { color: var(--text); text-decoration: underline; }
nav a[aria-current='page'] { color: var(--text); font-weight: 600; }
.install-pill { padding-block: 8px; }
@media (max-width: 700px) {
.inner { gap: 8px 16px; padding-block: 14px; }
.inner { gap: 12px 16px; }
nav { order: 3; flex-basis: 100%; }
.install-pill { margin-left: auto; }
}
</style>
36 changes: 21 additions & 15 deletions apps/web/src/components/InstallField.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,36 @@ const { id, label, onSignal = false } = Astro.props;
---
<div class="install-field" class:list={{ 'on-sig': onSignal }} data-install id={id}>
{label && <p class="install-label">{label}</p>}
<div class="field-row">
<div class="field" role="group" aria-label="Installer command" tabindex="0"><code>/bin/bash -c "$(curl -fsSL https://kwatch.dev/kwatch.sh)"</code></div>
<button type="button" class="btn btn-line copy" data-copy hidden>Copy</button>
<div class="field" role="group" aria-label="Installer command">
<code tabindex="0">/bin/bash -c "$(curl -fsSL https://kwatch.dev/kwatch.sh)"</code>
<button type="button" class="copy" data-copy hidden aria-label="Copy install command" title="Copy">
<svg class="i-copy" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true" focusable="false"><path d="M8 8h12v12H8zM4 16V4h12" /></svg>
<svg class="i-done" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true" focusable="false"><path d="M4 12l6 6L20 6" /></svg>
</button>
</div>
<p class="sr-only" role="status" aria-live="polite" data-status></p>
</div>

<style>
.install-label { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-muted); margin-bottom: var(--space-2); }
.field-row { display: flex; gap: var(--space-3); align-items: stretch; }
.field {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: var(--hit);
display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit);
background: var(--surface); border: var(--btn-border) solid var(--line); border-radius: var(--radius-input);
padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 15px; overflow-wrap: anywhere;
padding: 0 var(--space-1) 0 var(--space-4); font-family: var(--font-mono); font-size: 15px;
}
.field code { user-select: all; }
.copy { cursor: pointer; font: inherit; font-weight: 600; background: transparent; flex: 0 0 auto; }
.field code { flex: 1 1 auto; min-width: 0; padding-block: var(--space-3); padding-right: var(--space-2); overflow-wrap: anywhere; overflow-x: auto; scrollbar-width: none; user-select: all; }
.field code::-webkit-scrollbar { display: none; }
.copy {
flex: none; width: var(--hit); height: var(--hit); display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text); border: 0; border-radius: var(--radius-input); cursor: pointer;
}
.copy[hidden] { display: none; }
.copy { transition: background-color var(--motion-fast); }
.copy:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.i-done, .copy.done .i-copy { display: none; }
.copy.done .i-done { display: block; }
.on-sig .install-label { color: var(--on-signal); }
.on-sig .field { background: transparent; border-color: var(--on-signal); }
.on-sig .copy { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.on-sig .copy:hover, .on-sig .copy:focus-visible { background: var(--ink-line); border-color: var(--ink-line); color: var(--ink-text); }
@media (max-width: 700px) {
.field-row { flex-direction: column; }
.copy { width: 100%; }
.field { font-size: 14px; }
}
.on-sig .copy { color: var(--on-signal); }
@media (max-width: 700px) { .field { font-size: 14px; } }
</style>
Loading
Loading