Skip to content

Give training page a retro public-network theme #26

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

Merged
ibloud merged 2 commits into from
Sep 17, 2026
Merged

Give training page a retro public-network theme #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e7dd88
Add retro public-network training landing page
ibloud Sep 17, 2026
c7e665f
Add accessible retro public-network training theme
ibloud Sep 17, 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
68 changes: 68 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Loptr Lab Creative Development Network — accessible creative training and experimentation.">
<title>LOPTR LAB // CREATIVE DEVELOPMENT NETWORK</title>
<link rel="stylesheet" href="./training.css">
</head>
<body>
<div class="scanlines" aria-hidden="true"></div>
<header class="masthead">
<div class="serial">LL-CDN / TRAINING DIVISION / PUBLIC ACCESS</div>
<h1>LOPTR LAB</h1>
<p class="subtitle">CREATIVE DEVELOPMENT NETWORK</p>
<div class="statusbar"><span>TRANSMISSION STATUS: ACTIVE</span><span>ACCESS: PUBLIC</span><span>ENLISTMENT: NOT REQUIRED</span></div>
</header>
<main>
<section class="brief">
<div class="eyebrow">FIELD BRIEF 001</div>
<h2>CREATIVE ACCESSIBILITY</h2>
<p class="lead">Give creatives accessible, low-risk ways to experiment with techniques they might otherwise be unable to explore.</p>
<div class="path" aria-label="Creative accessibility pathway">
<span>LIMITATION</span><b>→</b><span>ADAPTATION</span><b>→</b><span>EXPERIMENT</span><b>→</b><span>CREATION</span><b>→</b><span>SHARE</span>
</div>
</section>

<section class="grid">
<article class="panel">
<div class="panel-head">TRANSMISSION 001 // WHAT IS THIS?</div>
<p>This training network is a practical on-ramp for people who want to make creative tools, adaptations, assets, and documented techniques.</p>
<p>The TypeScript exercise is one training instrument—not the definition of the program.</p>
<a class="button" href="../README.md">READ THE FULL FIELD MANUAL</a>
</article>
<article class="panel">
<div class="panel-head">CURRENT ASSIGNMENT</div>
<h3>VEILED DOMINION</h3>
<p>Systems exercise · TypeScript · Jest</p>
<dl><dt>STATUS</dt><dd>PROTOTYPE TRAINING SURFACE</dd><dt>OUTPUT</dt><dd>CODE + NOTES + TEST EVIDENCE</dd><dt>ACCESSIBILITY</dt><dd>DESIGN CONSTRAINT THROUGHOUT</dd></dl>
<a class="button" href="https://github.com/Loptr-Lab/training">OPEN TRAINING REPOSITORY ↗</a>
</article>
<article class="panel">
<div class="panel-head">NEXT OBJECTIVE</div>
<h3>MAKE SOMETHING USEFUL</h3>
<p>Build something that helps an independent artist, a community, or another creator cross a barrier.</p>
<a class="button" href="./CREATIVE_ACCESSIBILITY_PATH.md">OPEN THE ACCESSIBILITY PATH</a>
</article>
<article class="panel">
<div class="panel-head">FIELD REPORT // CONNECTION</div>
<h3>FROM CREATOR TO ADVOCATE</h3>
<p>Document what you made, explain the barrier and adaptation, then identify people who can test, use, improve, integrate, or share it.</p>
<a class="button" href="./ADVOCACY_AND_CONNECTION.md">OPEN CONNECTION PROTOCOL</a>
</article>
</section>

<section class="violet">
<div class="eyebrow">TRANSMISSION // VIOLET'S REVENGE</div>
<h2>WOULD YOU LIKE TO KNOW MORE?</h2>
<p>The network is designed as a public-information terminal: serious about craft, slightly theatrical about the mission, and explicit that participation is voluntary.</p>
<p class="directive">NO CERTIFICATE REQUIRED.<br>MAKE SOMETHING. SHARE WHAT YOU LEARNED.</p>
</section>
</main>
<footer>
<span>LOPTR LAB // CREATIVE DEVELOPMENT NETWORK</span>
<span>ACCESSIBILITY IS A DESIGN CONSTRAINT, NOT A FINAL MODULE.</span>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions docs/training.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
:root{--paper:#eee9dc;--ink:#151515;--blue:#173d62;--orange:#d66b20;--line:#1b2731}
*{box-sizing:border-box}
html{font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}
body{margin:0;min-height:100vh;background:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),var(--paper);background-size:100% 4px}
.scanlines{position:fixed;inset:0;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#111 3px);z-index:5}
.masthead,main,footer{max-width:1100px;margin:auto}
.masthead{padding:2rem 1.25rem 1rem;border-left:8px solid var(--blue);border-right:8px solid var(--blue)}
.serial,.eyebrow,.panel-head,.statusbar,footer{font:700 .72rem/1.4 "Courier New",monospace;letter-spacing:.08em}
.serial{color:var(--blue)}
h1{font:900 clamp(2.5rem,8vw,6rem)/.9 Impact,"Arial Narrow",sans-serif;letter-spacing:.03em;margin:.5rem 0 0}
.subtitle{font:800 clamp(1rem,3vw,1.7rem)/1 "Arial Narrow",Arial,sans-serif;letter-spacing:.18em;margin:.5rem 0 1.25rem}
.statusbar{display:flex;gap:1rem;flex-wrap:wrap;border-block:2px solid var(--ink);padding:.65rem 0}
.statusbar span:first-child{color:var(--orange)}
main{padding:1rem 1.25rem 3rem}
.brief{border:3px solid var(--ink);padding:1.5rem;background:#f5f0e4;box-shadow:8px 8px 0 var(--blue)}
h2{font:900 clamp(1.8rem,5vw,3.5rem)/1 Impact,"Arial Narrow",sans-serif;margin:.25rem 0 .75rem}
.lead{font-size:1.2rem;max-width:760px}
.path{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:1.25rem;font:800 .85rem "Courier New",monospace}
.path span{border:2px solid var(--ink);padding:.45rem .55rem;background:#fff}
.path b{color:var(--orange)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}
.panel{border:2px solid var(--line);padding:1.2rem;background:rgba(255,255,255,.35);min-height:240px}
.panel-head{color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:.5rem}
h3{font:900 1.5rem "Arial Narrow",Arial,sans-serif;letter-spacing:.05em}
dl{font:700 .75rem "Courier New",monospace;display:grid;grid-template-columns:110px 1fr;gap:.4rem;margin:1rem 0}
dt{color:var(--orange)}dd{margin:0}
.button{display:inline-block;border:2px solid var(--ink);padding:.65rem .8rem;color:var(--ink);text-decoration:none;font:800 .72rem "Courier New",monospace;background:#fff}
.button:hover,.button:focus{background:var(--blue);color:#fff}
.violet{margin-top:2rem;background:var(--blue);color:#fff;padding:1.5rem;border:3px solid var(--ink)}
.violet .eyebrow{color:#f3b36c}.directive{font:900 1.2rem/1.4 "Courier New",monospace;color:#f3b36c}
footer{padding:1.5rem 1.25rem;border-top:3px solid var(--ink);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(max-width:700px){.grid{grid-template-columns:1fr}.masthead{border-width:4px}.path b{display:none}.path{display:grid;grid-template-columns:1fr 1fr}.path span{width:max-content}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.scanlines{display:none}}
@media(prefers-contrast:more){.panel,.brief,.violet,.button{border-width:3px}}
Loading