From fa5a444b6402140d656bf13f4610828c79761121 Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 8 Oct 2026 04:31:30 -0700 Subject: [PATCH] =?UTF-8?q?homepage:=20simplified=20console=20=E2=80=94=20?= =?UTF-8?q?flat=20navy,=20static=20down-state,=20no=20scanlines/lattice/fr?= =?UTF-8?q?ames/glows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Infrastructure/Homepage.md | 16 +++ shared/homepage/style.css | 123 +++++------------- 2 files changed, 52 insertions(+), 87 deletions(-) diff --git a/serverAppConfigs-docs/Infrastructure/Homepage.md b/serverAppConfigs-docs/Infrastructure/Homepage.md index 2d8e2e9..603513a 100644 --- a/serverAppConfigs-docs/Infrastructure/Homepage.md +++ b/serverAppConfigs-docs/Infrastructure/Homepage.md @@ -182,6 +182,22 @@ Marreta a crumbling brick wall with a red crack (`img/apps/app-*.svg`). frank-dragoon's card accent is phase-crystal teal (`#5fe0d0`), matching the new palette. Bare mode strips the frames, octagon cuts and fonts. +**Simplified console (2026-10-08, seventh wave):** "too busy — clean up +and simplify/solidify." The sixth-wave effect stack was stripped to +essentials. Removed: the scanline overlay (`body::before`), the hex +lattice + twin radial backdrop (one quiet pylon glow above the horizon +remains), the panel/model-card inner frame lines, all ambient text +glows (body, title, model names, callouts), the blinking title cursor, +the gradient section-title plates (headings are plain Rajdhani with a +hollow diamond glyph + steel underline), the gradient `border-image` +header rule (solid 2px warp-blue), the pulsing down-state animation +(down tiles and cards now show a STATIC red border + tint), and the +button/hover glows. Kept: octagon-cut panels (softer 14 px), unit-color +model cards, the pictograms, and the fonts. Motion is reserved for +state — the only animation left is the speaking-voice pulse. The result +is flat navy panels on crisp 1px borders: same Protoss direction, half +the pixels. + ## Design decision — 2026-08-22 The live up/down check runs server-side. A checker on Dankclaw probes each backend and writes a same-origin `status.json`. The page fetches only that file and renders the badges. The browser never calls a backend directly. The checker runs as a systemd timer every 3 minutes. diff --git a/shared/homepage/style.css b/shared/homepage/style.css index c5cffee..2bcf6f9 100644 --- a/shared/homepage/style.css +++ b/shared/homepage/style.css @@ -1,10 +1,10 @@ -/* The homepage theme: StarCraft Protoss console — deep space navy, - warp-blue/cyan glow, Share Tech Mono body with Rajdhani headings - (Google Fonts CDN), maximal octagon-cut panels with double frames, - plate section headers, pylon glows, hex-lattice backdrop, scanlines. - A ?bare=1 toggle strips the page to bare, unstyled HTML (Q27). The page - never sets a custom or hidden cursor, so the user's cursor is untouched - (Q28). */ +/* The homepage theme: StarCraft Protoss console — flat deep-space navy, + warp-blue/cyan accents used sparingly, Share Tech Mono body with + Rajdhani headings (Google Fonts CDN), octagon-cut panels on crisp + 1px steel borders, quiet section headers. Motion is reserved for + state (speaking voice). A ?bare=1 toggle strips the page to bare, + unstyled HTML (Q27). The page never sets a custom or hidden cursor, + so the user's cursor is untouched (Q28). */ :root { --bg: #050d16; @@ -34,46 +34,27 @@ body { line-height: 1.45; margin: 0; padding: 24px; - text-shadow: 0 0 4px rgba(127, 231, 255, 0.22); } -/* Subtle scanlines. */ -body::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 9999; - background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.14) 2px 4px); -} - -/* Protoss backdrop: pylon glow at the edges + faint hex lattice. */ +/* One quiet pylon glow above the horizon; the navy stays flat. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; - background: - radial-gradient(1100px 480px at 50% -8%, rgba(63, 169, 255, 0.10), transparent 60%), - radial-gradient(900px 420px at 88% 108%, rgba(127, 231, 255, 0.07), transparent 60%), - linear-gradient(30deg, rgba(79, 216, 255, 0.04) 1px, transparent 1px), - linear-gradient(150deg, rgba(79, 216, 255, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(63, 169, 255, 0.03) 1px, transparent 1px); - background-size: auto, auto, 34px 60px, 34px 60px, 34px 60px; + background: radial-gradient(1200px 500px at 50% -10%, + rgba(63, 169, 255, 0.07), transparent 65%); } .top { display: flex; justify-content: space-between; align-items: baseline; - border-bottom: 2px solid; - border-image: linear-gradient(90deg, var(--head), var(--proto-blue) 55%, transparent) 1; + border-bottom: 2px solid var(--proto-blue); padding-bottom: 8px; } -.title { color: var(--head); text-shadow: 0 0 8px color-mix(in srgb, var(--proto-cyan) 50%, transparent), 0 0 18px color-mix(in srgb, var(--proto-blue) 35%, transparent); } -.title::after { content: " \25AE"; color: var(--proto-cyan); animation: proto-blink 1.2s steps(2, start) infinite; } -@keyframes proto-blink { 50% { opacity: 0; } } +.title { color: var(--head); text-shadow: 0 0 10px color-mix(in srgb, var(--proto-blue) 30%, transparent); } .summary { color: var(--dim); margin: 12px 0; letter-spacing: 0.05em; } /* Sections stack vertically; each section's panels fill a horizontal @@ -83,21 +64,15 @@ body::after { color: var(--head); font-size: 1.05rem; font-weight: 600; - letter-spacing: 0.18em; + letter-spacing: 0.16em; text-transform: uppercase; - margin: 0 0 14px; - padding: 3px 18px 3px 36px; + margin: 0 0 12px; + padding: 0 0 6px 24px; position: relative; - display: inline-block; - border: 1px solid color-mix(in srgb, var(--proto-cyan) 45%, var(--border)); - background: linear-gradient(90deg, color-mix(in srgb, var(--proto-blue) 18%, var(--panel)), transparent 90%); - clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); - text-shadow: 0 0 8px color-mix(in srgb, var(--proto-cyan) 40%, transparent); + border-bottom: 1px solid var(--border); } -.section-title::before { content: "\25C8"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); - color: var(--proto-cyan); text-shadow: 0 0 8px var(--proto-cyan); } -.section-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; - background: linear-gradient(90deg, var(--proto-cyan), var(--proto-blue) 45%, transparent 90%); } +.section-title::before { content: "\25C7"; position: absolute; left: 3px; top: 50%; + transform: translateY(-55%); color: var(--proto-cyan); } .grid { display: grid; @@ -105,32 +80,23 @@ body::after { gap: 12px; } -.panel { position: relative; border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; - clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px); } -.panel::before { content: ""; position: absolute; inset: 4px; pointer-events: none; - border: 1px solid color-mix(in srgb, var(--proto-cyan) 18%, transparent); - clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); } +.panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; + clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); } .panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; } .panel.clickable:hover { border-color: var(--proto-cyan); transform: translateY(-2px); - filter: drop-shadow(0 0 7px color-mix(in srgb, var(--proto-blue) 60%, transparent)) - drop-shadow(0 0 18px color-mix(in srgb, var(--link) 30%, transparent)); + filter: drop-shadow(0 0 6px color-mix(in srgb, var(--proto-blue) 45%, transparent)); } -.panel.clickable:hover::before { border-color: color-mix(in srgb, var(--proto-cyan) 55%, transparent); } .panel.down { + border-color: color-mix(in srgb, var(--down) 70%, var(--border)); background: linear-gradient(180deg, - color-mix(in srgb, var(--down) 12%, var(--panel)), var(--panel)); - animation: down-pulse 3.2s ease-in-out infinite; -} -@keyframes down-pulse { - 50% { border-color: color-mix(in srgb, var(--down) 70%, var(--border)); - filter: drop-shadow(0 0 10px color-mix(in srgb, var(--down) 55%, transparent)); } + color-mix(in srgb, var(--down) 10%, var(--panel)), var(--panel)); } .mi-card:has(.badge.down) { + border-color: color-mix(in srgb, var(--down) 70%, var(--mi)); background: linear-gradient(180deg, - color-mix(in srgb, var(--down) 12%, var(--panel)), var(--panel)); - animation: down-pulse 3.2s ease-in-out infinite; + color-mix(in srgb, var(--down) 10%, var(--panel)), var(--panel)); } .panel-head { display: flex; align-items: center; gap: 8px; } .panel-head .name { flex: 1; } @@ -178,13 +144,10 @@ body::after { padding: 2px 14px; text-transform: uppercase; letter-spacing: 1px; - text-shadow: 0 0 6px color-mix(in srgb, var(--link) 55%, transparent); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); } .foot-btn:hover { - background: color-mix(in srgb, var(--link) 16%, transparent); - box-shadow: 0 0 10px color-mix(in srgb, var(--link) 45%, transparent); - text-shadow: 0 0 8px var(--proto-cyan); + background: color-mix(in srgb, var(--link) 14%, transparent); } /* The user docs page (static prose). */ @@ -213,11 +176,10 @@ html[data-bare="1"] body::before { display: none; } html[data-bare="1"] .panel, html[data-bare="1"] .top, html[data-bare="1"] .foot { border-color: #000; background: none; } html[data-bare="1"] .badge, html[data-bare="1"] .name, html[data-bare="1"] .desc, html[data-bare="1"] .summary, html[data-bare="1"] .section-title { color: #000; } html[data-bare="1"] .desc-role, html[data-bare="1"] .desc-spec, html[data-bare="1"] .desc-inputs, html[data-bare="1"] .desc-use, html[data-bare="1"] .desc-equiv { color: #000; font-weight: normal; } -html[data-bare="1"] .section-title { border-color: #000; background: none; clip-path: none; padding: 0 0 6px; } +html[data-bare="1"] .section-title { border-color: #000; padding: 0 0 6px 2px; } html[data-bare="1"] .links a, html[data-bare="1"] .toggle, html[data-bare="1"] .foot a { color: #000; } html[data-bare="1"] .foot-btn { border-color: #000; text-shadow: none; } html[data-bare="1"] .panel, html[data-bare="1"] .mi-card, html[data-bare="1"] .badge, html[data-bare="1"] .foot-btn, html[data-bare="1"] .model-info { clip-path: none; filter: none; animation: none; box-shadow: none; } -html[data-bare="1"] .panel::before, html[data-bare="1"] .mi-card::before { content: none; } html[data-bare="1"] body::after { display: none; } html[data-bare="1"] .section-title::before, html[data-bare="1"] .section-title::after, html[data-bare="1"] .title::after { content: none; } html[data-bare="1"] .top { border-image: none; } @@ -227,19 +189,14 @@ html[data-bare="1"] .top { border-image: none; } StarCraft Protoss unit's colours and art. */ .model-info { grid-column: 1 / -1; - background: linear-gradient(180deg, - color-mix(in srgb, var(--proto-blue) 6%, var(--panel)), var(--panel) 45%); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proto-cyan) 30%, transparent), - inset 0 0 28px color-mix(in srgb, var(--proto-blue) 7%, transparent); - clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); + background: var(--panel); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proto-cyan) 25%, transparent); + clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); } .mi-title { - background: linear-gradient(90deg, var(--head), var(--proto-cyan) 70%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + color: var(--proto-cyan); text-transform: uppercase; - letter-spacing: 0.12em; + letter-spacing: 0.14em; border-bottom: 1px solid var(--border); margin-bottom: 10px; padding-bottom: 4px; @@ -250,19 +207,13 @@ html[data-bare="1"] .top { border-image: none; } gap: 12px; } .mi-card { - position: relative; font-size: 15px; line-height: 1.35; border: 1px solid var(--mi); padding: 10px 12px; - clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); - background: - linear-gradient(160deg, color-mix(in srgb, var(--mi) 7%, var(--panel)), var(--panel) 60%); - box-shadow: inset 0 0 22px color-mix(in srgb, var(--mi) 8%, transparent); + clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); + background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 5%, var(--panel)), var(--panel) 60%); } -.mi-card::before { content: ""; position: absolute; inset: 4px; pointer-events: none; - border: 1px solid color-mix(in srgb, var(--mi) 25%, transparent); - clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); } .mi-zealot { --mi: #4fb4ff; } /* Zealot: Khai's blue blades */ .mi-archon { --mi: #a8ecff; } /* Archon: pure psychic light */ .mi-dragoon { --mi: #5fe0d0; } /* Dragoon: phase-crystal teal */ @@ -277,10 +228,10 @@ html[data-bare="1"] .top { border-image: none; } filter: saturate(0.9) brightness(0.95); } .mi-id { display: flex; align-items: baseline; gap: 8px; } -.mi-name { color: var(--mi); font-size: 19px; text-shadow: 0 0 6px color-mix(in srgb, var(--mi) 55%, transparent); } +.mi-name { color: var(--mi); font-size: 19px; } .mi-role { color: var(--dim); margin: 6px 0 2px; } .mi-hf { display: inline-block; margin: 1px 0 2px; font-size: 12px; color: var(--proto-cyan); text-decoration: none; } -.mi-hf:hover { text-decoration: underline; text-shadow: 0 0 6px color-mix(in srgb, var(--proto-cyan) 60%, transparent); } +.mi-hf:hover { text-decoration: underline; } .mi-voice { display: block; appearance: none; @@ -310,7 +261,6 @@ html[data-bare="1"] .top { border-image: none; } border: 1px solid var(--down); color: var(--down); font-weight: bold; - text-shadow: 0 0 6px color-mix(in srgb, var(--down) 45%, transparent); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); } .mi-comp { @@ -319,7 +269,6 @@ html[data-bare="1"] .top { border-image: none; } border: 1px solid var(--head); color: var(--head); background: color-mix(in srgb, var(--head) 8%, transparent); - text-shadow: 0 0 6px color-mix(in srgb, var(--head) 40%, transparent); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); } .svc-warn { color: var(--down); margin-top: 6px; cursor: help;