initial landing scaffold (hyperhive/website MVP)
Tracks hyperhive#502 — landing-only first cut. Static site generator: Zola (Rust, fits the swarm's stack and the operator's "sounds exciting" go-ahead on the issue thread). ## Structure - `flake.nix` — `nix build .#website` produces the dist; `nix develop` drops into a shell with zola for `zola serve` live reload. No CI runner; the flake is the validation contract. - `config.toml` — Zola config; base URL `hyperhive.darkest.space` per #502. Single-page landing — feeds / search index off. - `content/_index.md` — landing copy. Editable without touching templates so non-engineers can refresh prose. - `templates/base.html` + `templates/index.html` — base layout + landing-specific extension. og:tags + favicon wired through. - `sass/main.scss` — theme. Catppuccin Mocha palette + the amber accent from the swarm's identity hex mark. Self-contained (no @import) so the file is reviewable in one place. - `static/{favicon,hex-mark,hyperhive}.svg` — copies of the dashboard's `branding/hyperhive.svg` (hex motif). Used as favicon, hero inline, and og:image respectively. ## Theme Monospace identity throughout — matches dashboard / agent terminals so the website reads as part of the same family rather than a separate marketing artifact. Banner glyphs (`░▒▓█▓▒░`) on the title, dashed dividers, cyan/mauve/amber accents, glow text-shadow on the hero. Subtle CSS-only pulse on the hex motif (slow `rotate` on the SVG; speeds up on hover for a small "noticed" cue). ## Three-column "what's inside" `the swarm` / `the dashboard` / `the boundary` — quick orientation for visitors who clicked through from a link without context. Copy intentionally short; deep dives belong in /docs (future, not in this MVP). ## Scope drop Per mara on #502: - no nav / blog / docs yet — landing only - no screenshots in MVP, follow via issues in this repo - public visibility ## Provenance Scaffolded under `iris/website` because my agent forge token doesn't carry org-admin to create repos under `hyperhive/`. Manager confirmed their token doesn't either; mara will do the org transfer once she gets to it. README documents this.
This commit is contained in:
iris
parent
b1dd949291
commit
d3a55c5631
12 changed files with 873 additions and 2 deletions
249
sass/main.scss
Normal file
249
sass/main.scss
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
// hyperhive marketing landing — theme (#502).
|
||||
//
|
||||
// Matches the dashboard / agent terminals visually so the website
|
||||
// reads as part of the same family: Catppuccin Mocha palette + amber
|
||||
// accent (matching the hex mark), banner-thin block-glyph headings,
|
||||
// dashed dividers, glow text-shadow on titles.
|
||||
//
|
||||
// Single-file SCSS — landing is small enough that splitting into
|
||||
// partials would be premature. Re-evaluate if /docs or /blog land.
|
||||
|
||||
// ─── palette ───────────────────────────────────────────────────────
|
||||
// Catppuccin Mocha + the hyperhive amber from branding/hyperhive.svg.
|
||||
// Copying them in (not importing) so this file stays self-contained.
|
||||
|
||||
$base: #1e1e2e;
|
||||
$mantle: #181825;
|
||||
$crust: #11111b;
|
||||
|
||||
$text: #cdd6f4;
|
||||
$subtext1: #bac2de;
|
||||
$subtext0: #a6adc8;
|
||||
$overlay2: #9399b2;
|
||||
$overlay1: #7f849c;
|
||||
$overlay0: #6c7086;
|
||||
$surface2: #585b70;
|
||||
$surface1: #45475a;
|
||||
$surface0: #313244;
|
||||
|
||||
$rosewater: #f5e0dc;
|
||||
$flamingo: #f2cdcd;
|
||||
$pink: #f5c2e7;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$maroon: #eba0ac;
|
||||
$peach: #fab387;
|
||||
$yellow: #f9e2af;
|
||||
$green: #a6e3a1;
|
||||
$teal: #94e2d5;
|
||||
$sky: #89dceb;
|
||||
$sapphire: #74c7ec;
|
||||
$blue: #89b4fa;
|
||||
$lavender: #b4befe;
|
||||
|
||||
// The hex-mark amber. Pure swarm identity colour.
|
||||
$amber: #ffb300;
|
||||
$amber-deep: #ff8f00;
|
||||
$amber-glow: rgba(255, 179, 0, 0.45);
|
||||
|
||||
// ─── globals ───────────────────────────────────────────────────────
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $base;
|
||||
color: $text;
|
||||
// Same font stack as the dashboard's @hive/shared base.css —
|
||||
// monospace identity reads as "this is the terminal swarm" instead
|
||||
// of "this is a marketing site". Body copy stays readable at this
|
||||
// weight because the lines are short.
|
||||
font-family: ui-monospace, "JetBrains Mono", "Fira Code",
|
||||
Menlo, Consolas, monospace;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
// Subtle background grid — same idea as the hex-mark's faint
|
||||
// horizontal lines, but at body scope. Cheaper than a full SVG
|
||||
// background.
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
transparent 23px,
|
||||
rgba(255, 179, 0, 0.025) 23px,
|
||||
rgba(255, 179, 0, 0.025) 24px
|
||||
);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $sky;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed transparent;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
a:hover { color: $sapphire; border-bottom-color: $sapphire; }
|
||||
|
||||
::selection { background: $amber-glow; color: $crust; }
|
||||
|
||||
// ─── layout ────────────────────────────────────────────────────────
|
||||
|
||||
.shell {
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem 2rem;
|
||||
}
|
||||
|
||||
// ─── hero ──────────────────────────────────────────────────────────
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 280px) 1fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px dashed $surface1;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.hero { grid-template-columns: 1fr; text-align: center; }
|
||||
.hero-art { max-width: 220px; margin: 0 auto; }
|
||||
}
|
||||
|
||||
.hero-art svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// Subtle pulse — only the outer ring + dashed orbit rotate. Quiet
|
||||
// enough to read as "active" instead of "noisy".
|
||||
animation: hex-orbit 24s linear infinite;
|
||||
}
|
||||
.hero-art:hover svg {
|
||||
// Speed up on hover for a tiny "you got noticed" cue. No JS needed.
|
||||
animation-duration: 8s;
|
||||
}
|
||||
|
||||
@keyframes hex-orbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
margin: 0 0 0.6rem;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: $amber;
|
||||
text-shadow:
|
||||
0 0 4px $amber-glow,
|
||||
0 0 12px rgba(255, 143, 0, 0.25);
|
||||
}
|
||||
|
||||
.banner-glyph {
|
||||
color: $amber-deep;
|
||||
opacity: 0.65;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
margin: 0 0 1.6rem;
|
||||
font-size: 1.05rem;
|
||||
color: $subtext1;
|
||||
}
|
||||
|
||||
.hero-cta { margin: 0; }
|
||||
|
||||
.cta-primary {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $amber;
|
||||
color: $amber;
|
||||
border-bottom-color: $amber;
|
||||
text-shadow: 0 0 6px $amber-glow;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
transition: box-shadow 0.15s ease, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.cta-primary:hover {
|
||||
color: $base;
|
||||
background: $amber;
|
||||
border-color: $amber;
|
||||
border-bottom-style: solid;
|
||||
box-shadow: 0 0 14px -2px $amber-glow;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// ─── prose ─────────────────────────────────────────────────────────
|
||||
|
||||
.prose {
|
||||
padding: 2rem 0;
|
||||
color: $text;
|
||||
max-width: 64ch;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
.prose p { margin: 0 0 1rem; }
|
||||
|
||||
// ─── three-column grid ────────────────────────────────────────────
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px dashed $surface1;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.grid-3 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 1.2rem;
|
||||
background: $mantle;
|
||||
border: 1px solid $surface0;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: $amber;
|
||||
box-shadow: 0 0 14px -6px $amber-glow;
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 0.6rem;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: $mauve;
|
||||
}
|
||||
.card-glyph { color: $amber; margin-right: 0.4em; }
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
color: $subtext1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// ─── footer ────────────────────────────────────────────────────────
|
||||
|
||||
.site-footer {
|
||||
max-width: 920px;
|
||||
margin: 3rem auto 1.5rem;
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px dashed $surface1;
|
||||
}
|
||||
|
||||
.banner-thin {
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
color: $amber-deep;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.18em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 0;
|
||||
font-size: 0.88rem;
|
||||
color: $subtext0;
|
||||
}
|
||||
.footer-links .sep { margin: 0 0.4em; opacity: 0.5; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue