dank/serverAppConfigs
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

homepage: simplified console — flat navy, static down-state, no scanlines/lattice/frames/glows

Browse Source
This commit is contained in:
Frank
2026-10-08 04:31:30 -07:00
parent 90f678582e
commit fa5a444b64
2 changed files with 52 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
serverAppConfigs-docs/Infrastructure/Homepage.md
+16
View File
@@ -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.
shared/homepage/style.css
+36 -87
View File
@@ -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;