9e5c79b3b2
Previously every device .html bundled its full narrative (purpose, BOM,
dimensioned drawings, embedding docs) inside a #techinfo block that embed
mode (?embed=1) only CSS-hid — so every embedder and every landing-page
iframe downloaded all of it (showcase 77%, teacher 49% of the file) for
content no embedder ever sees.
Now:
- <device>.html is the lean widget only: header + front view/controls +
title + summary + program box. ?embed=1 still collapses to the bare
widget; the heavy narrative is gone from the payload.
- info-<device>.html (new, one per form factor) carries all the words —
purpose, dimensions, priced BOM, embedding docs — and embeds the live
widget at the top via the existing iframe + auto-resize protocol
(new shared src/infoembed.html + src/infoembed.js).
- Each device links out to its info page ("…dimensions & BOM →"); the
landing panes and viewport bar now offer both Open ↗ and Specs & info ⓘ.
- Dropped the now-dead "Show info" toggle (CSS + progbox.js).
Branding: adopt the official VARASYS "tagline on the bottom" logos from the
brand kit (light-background variant now matches; dark already did). The
tagline is baked into the PNGs, so remove the CSS .brand-tag / .dev-tag
spans and the showcase canvas-drawn tagline. Brand cyan #0AB3F7 / navy
#1C283F already match the official palette.
build.sh / deploy.sh: build + deploy the six new info-*.html pages.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
128 lines
9.3 KiB
CSS
128 lines
9.3 KiB
CSS
/* Shared base — inlined into BOTH index.html and player.html by build.sh.
|
|
Box-sizing reset, the VARASYS brand palette, and the common type stack.
|
|
(Page-specific colours/layout live in each page's own <style>.) */
|
|
* { box-sizing: border-box; }
|
|
:root {
|
|
--cyan: #0AB3F7; /* VARASYS brand cyan */
|
|
--navy: #1C283F; /* VARASYS brand navy */
|
|
}
|
|
body {
|
|
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ---- VARASYS brand lockup (the official logo PNGs already bake in the
|
|
"Simplifying Complexity" tagline — dark variant for dark themes, light for light) ---- */
|
|
.brand { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
|
|
.brand-logo { height:34px; width:auto; display:block; }
|
|
.brand-light { display:none; }
|
|
:root[data-theme="light"] .brand-dark { display:none; }
|
|
:root[data-theme="light"] .brand-light { display:block; }
|
|
/* on-device silkscreen brand (official logo image, tagline included) — used in device brandrows */
|
|
.dev-lock { display:inline-flex; align-items:center; }
|
|
.dev-logo { display:block; width:auto; height:20px; }
|
|
.site-head { width:100%; max-width:980px; margin:0 auto; display:flex; align-items:center;
|
|
justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
|
|
.head-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
|
|
.page-name { font-size:13px; color:var(--muted,#7f8b9a); letter-spacing:.02em; }
|
|
.page-name b { color:var(--txt,#c7d0db); }
|
|
.site-nav { display:flex; align-items:center; gap:14px; font-size:13px; }
|
|
.site-nav a { color:var(--muted,#7f8b9a); text-decoration:none; }
|
|
.site-nav a:hover { color:var(--txt,#c7d0db); }
|
|
.site-nav a.here { color:var(--cyan); }
|
|
.tbtn { background:transparent; color:var(--muted,#7f8b9a); border:1px solid var(--panel-bd,#2a313c);
|
|
border-radius:8px; padding:3px 9px; font-size:14px; line-height:1; cursor:pointer; }
|
|
.tbtn:hover { color:var(--txt,#c7d0db); }
|
|
/* embed mode: pages opened with ?embed=1 strip all site chrome (the widget only).
|
|
The flag is set on <html> in a head pre-paint script (no flash). */
|
|
[data-embed] .site-head, [data-embed] .site-foot { display:none !important; }
|
|
[data-embed] body { padding:10px !important; }
|
|
|
|
/* ---- bill-of-materials table (info pages) ---- */
|
|
.sub { color:var(--muted,#7f8b9a); font-size:13px; line-height:1.5; }
|
|
.bom { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
|
|
.bom th, .bom td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--panel-bd,#2a313c); vertical-align:top; }
|
|
.bom th { color:var(--muted,#7f8b9a); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
|
|
.bom th.q, .bom th.c, .bom td.q, .bom td.c { text-align:right; white-space:nowrap; }
|
|
.bom td.q, .bom td.c { color:var(--muted,#7f8b9a); }
|
|
.bom .grp td { color:var(--cyan); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.07em; padding-top:11px; }
|
|
.bom .part { color:var(--txt,#c7d0db); }
|
|
.bom .part .spec { color:var(--muted,#7f8b9a); font-weight:400; }
|
|
.bom tr.total td { font-weight:700; color:var(--txt,#c7d0db); border-top:2px solid var(--panel-bd,#2a313c); border-bottom:none; padding-top:8px; }
|
|
|
|
/* ---- shared site footer ---- */
|
|
.site-foot { width:100%; max-width:980px; margin:40px auto 0; font-size:12px; color:var(--muted,#7f8b9a);
|
|
text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
|
|
.site-foot a { color:var(--muted,#7f8b9a); }
|
|
.site-foot a:hover { color:var(--txt,#c7d0db); }
|
|
.site-foot .dot { opacity:.5; }
|
|
|
|
/* ---- expandable "Spec & BOM" disclosure (merged onto each form-factor page) ---- */
|
|
details.spec { width:100%; max-width:760px; margin:18px auto 0; border:1px solid var(--panel-bd,#2a313c);
|
|
border-radius:12px; background:var(--panel-bg,#161b22); }
|
|
details.spec > summary { cursor:pointer; padding:13px 16px; font-weight:600; font-size:14px; color:var(--txt,#c7d0db);
|
|
list-style:none; display:flex; align-items:center; gap:9px; }
|
|
details.spec > summary::-webkit-details-marker { display:none; }
|
|
details.spec > summary::before { content:"▸"; color:var(--muted,#7f8b9a); transition:transform .15s; }
|
|
details.spec[open] > summary::before { transform:rotate(90deg); }
|
|
details.spec .spec-body { padding:2px 16px 16px; }
|
|
[data-embed] details.spec { display:none !important; }
|
|
|
|
/* ---- per-form-factor page: the description above the expandable spec ---- */
|
|
.about { width:100%; max-width:760px; margin:20px auto 0; color:var(--muted,#7f8b9a); font-size:14px; line-height:1.62; }
|
|
.about h2 { color:var(--txt,#c7d0db); font-size:18px; margin:0 0 4px; }
|
|
.about .ff-tags { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
|
|
.about .ff-tags span { font-size:11px; color:var(--muted,#7f8b9a); border:1px solid var(--panel-bd,#2a313c); border-radius:999px; padding:2px 9px; }
|
|
.about .ff-tags .hw { color:var(--cyan); border-color:rgba(10,179,247,.45); }
|
|
.about p { margin:0 0 10px; max-width:64ch; }
|
|
/* page-only chrome (description, dimensioned views, loading panel) — hidden when embedded */
|
|
[data-embed] .pageonly { display:none !important; }
|
|
|
|
/* ---- per-form-factor page: visible title + summary (plain view) ---- */
|
|
.ff-title { font-size:20px; margin:6px 0 2px; text-align:center; color:var(--txt,#c7d0db); }
|
|
.ff-sum { max-width:60ch; margin:0 auto; text-align:center; color:var(--muted,#7f8b9a); font-size:13.5px; line-height:1.55; }
|
|
[data-embed] .ff-title, [data-embed] .ff-sum { display:none !important; }
|
|
/* link from the lean device page out to its info page (specs / dimensions / BOM) */
|
|
.ff-link { text-align:center; margin:16px auto 0; font-size:13px; }
|
|
.ff-link a { font-weight:600; }
|
|
|
|
/* ---- info-<device>.html: the embedded live widget at the top of the spec page ---- */
|
|
.infoview { width:100%; max-width:760px; margin:18px auto 0; border:1px solid var(--panel-bd,#2a313c);
|
|
border-radius:14px; overflow:hidden; background:var(--field-bg,#0e1116); }
|
|
.iv-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px;
|
|
border-bottom:1px solid var(--panel-bd,#2a313c); font-size:12px; color:var(--muted,#7f8b9a); }
|
|
.iv-bar b { color:var(--txt,#c7d0db); }
|
|
.infoview iframe { display:block; width:100%; height:440px; border:0; background:var(--field-bg,#0e1116); transition:height .15s; }
|
|
|
|
/* ---- per-device program I/O box (plain view) ---- */
|
|
.progbox { width:100%; max-width:620px; margin:14px auto 0; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
|
|
padding:9px 12px; border:1px solid var(--panel-bd,#2a313c); border-radius:11px; background:var(--panel-bg,#161b22); }
|
|
.progbox > label { flex:0 0 auto; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted,#7f8b9a); }
|
|
.progbox input { flex:1; min-width:160px; background:var(--field-bg,#0e1116); color:var(--txt,#c7d0db);
|
|
border:1px solid var(--field-bd,#2a313c); border-radius:8px; padding:8px 10px; font-family:"Courier New",monospace; font-size:12.5px; }
|
|
.progbox input.err { border-color:#c0392b; }
|
|
.progbox button { flex:0 0 auto; background:var(--field-bg,#0e1116); color:var(--txt,#c7d0db); border:1px solid var(--field-bd,#2a313c);
|
|
border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; }
|
|
.progbox button.primary { background:linear-gradient(180deg,#34c6ff,var(--cyan)); color:#04121b; border-color:transparent; font-weight:600; }
|
|
.progbox button:hover { border-color:var(--cyan); }
|
|
.progbox-msg { flex:1 1 100%; font-size:11.5px; color:var(--muted,#7f8b9a); min-height:1em; }
|
|
.progbox-msg.ok { color:#5fd08a; } .progbox-msg.bad { color:#ff8a7a; }
|
|
[data-embed] .progbox { display:none !important; }
|
|
|
|
/* ---- shared dimensioned schematic views (front + top/side with inch dims) ---- */
|
|
.dview { width:100%; max-width:540px; margin:16px auto 0; }
|
|
.dview .cap { text-align:center; font-size:11px; color:var(--muted,#7f8b9a); margin:0 0 8px; }
|
|
.drow { display:flex; align-items:stretch; gap:6px; }
|
|
.dvy { flex:0 0 15px; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center;
|
|
font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em; white-space:nowrap; border-right:1px solid var(--panel-bd,#2a313c); }
|
|
.dvx { text-align:center; font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em;
|
|
border-top:1px solid var(--panel-bd,#2a313c); padding-top:3px; margin:3px 0 0 17px; }
|
|
.dschem { flex:1; min-width:0; position:relative; border:1px solid #33363c; border-radius:8px;
|
|
background:radial-gradient(rgba(255,255,255,.02) .5px, transparent .6px) 0 0/3px 3px, linear-gradient(160deg,#26282d,#15161a);
|
|
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.4); overflow:hidden; }
|
|
.dschem .scap { position:absolute; left:7px; top:5px; font-size:8px; color:var(--silk,#aab2bc); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
|
|
.dschem .ctl { position:absolute; border-radius:50%; background:radial-gradient(circle at 38% 32%,#cfd6dd,#6c7480 60%,#3b424c); box-shadow:0 1px 3px rgba(0,0,0,.5); }
|
|
.dschem .scr { position:absolute; border-radius:4px; background:#06080c; box-shadow:inset 0 0 8px rgba(0,0,0,.7); }
|
|
.dschem .jk { position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #5b6470; background:radial-gradient(circle at 40% 34%,#333a44,#07090c 72%); }
|
|
.dschem .jk.u { width:14px; height:6px; border-radius:3px; }
|
|
.dschem .jl { position:absolute; font-size:7px; color:var(--silk,#aab2bc); letter-spacing:.03em; text-transform:uppercase; opacity:.85; text-align:center; line-height:1.1; }
|