/* ============================================================
hackenshaw.com — the house style (dark CRT terminal)
ONE copy, linked by EVERY page on every vhost:
/index.html hackenshaw.com
/projects/index.html projects.hackenshaw.com
/presentations/index.html presentations.hackenshaw.com
/projects/cmdbox/index.html cmdbox.hackenshaw.com
/opt/animated-qr/web/ qr.hackenshaw.com
/opt/qr-keeper/ qrkeeper.hackenshaw.com
/opt/nextslide/server.js nextslide.hackenshaw.com
/opt/playground/server.js playground.hackenshaw.com
Link it root-relative so it stays same-origin on every vhost:
Every vhost carries a `location /assets/` alias block in
/etc/nginx/sites-available/hackenshaw.com pointing back here —
same shared-copy trick as the favicons. Bump the ?v=N on EVERY
page when you edit this file, or the 4h Cloudflare edge cache
serves the old one.
---- The one layout rule ----
Every page is a fixed-viewport page. The page itself NEVER
scrolls; exactly one region inside it does. Header and footer
stay put, the middle gives. That shell lives here so no page
has to rebuild it:
html, body pinned to the viewport, overflow hidden
header/footer flex-shrink: 0
main flex: 1; min-height: 0 <- load-bearing
.panel max-height: 100%
The default scroll region is the panel itself:
…
A page that needs something pinned inside the panel (a call to
action, a preview) leaves the panel unscrolled, keeps it as the
flex column it already is, and puts .scroller on the one child
that should give — see cmdbox's
and qr's .controls-col.
NOT used by reveal.js decks — those have their own house theme
in /presentations/theme/hackenshaw.css.
============================================================ */
/* The CRT look - scanlines, flicker, the glitching h1 - lives in its own
file so the tutorials' hosted game pages can share it without taking the
whole page shell. Every page gets it through this import. */
@import url("crt.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #272727;
--panel: #181818;
--fg: chartreuse;
--dim: #5a8f2a;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* greyscale artwork -> chartreuse phosphor: project thumbnails, row logos */
--tint: sepia(1) hue-rotate(52deg) saturate(2.4) brightness(0.95);
}
/* ---- The fixed-viewport shell ----
height:100dvh comes second on purpose: on a phone 100vh is the height
WITHOUT the collapsing address bar, so the footer sits off-screen until
you scroll — the exact thing this shell exists to prevent. Browsers that
do not know dvh ignore the second line and keep the first. */
html,
body {
height: 100%;
overflow: hidden;
background-color: var(--bg);
color: var(--fg);
font-family: var(--mono);
}
body {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
padding: 3vh 5vw;
gap: 2rem;
-webkit-tap-highlight-color: transparent;
}
header,
footer {
flex-shrink: 0;
}
a {
color: inherit;
text-decoration: none;
}
/* The one scroll region. Both rules are needed to hide the bar without
losing the scrolling — neither alone covers every browser — and
overscroll-behavior stops a flick past the end dragging the page behind it. */
.scroller {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroller::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* ---- CRT overlay: in crt.css, imported at the top ---- */
/* ---- Header ----
Sized for a page pinned to the viewport: a full-page header would eat
most of a laptop screen and leave the panel a slot. */
header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
text-align: center;
}
/* The header mark. It used to be a cropped photo, so it was circled, ringed
and object-fit:cover; it is now the logo — angular artwork on transparency,
which a circle would clip and a ring would fence in. Hence contain, no
border, and the glow moved from box-shadow to drop-shadow so it follows the
mark's own edge rather than a square box that is mostly empty.
The class is still .avatar: it is the hook every page, both Node apps and
the deck theme already use for "the mark in the header", and renaming it
across five repos buys nothing.
The logo carries ~10% internal padding and is taller than it is wide, so at
the old 100px box it would read noticeably smaller than the circle did. The
clamp is scaled up to match the previous optical weight, not the old numbers. */
.avatar {
display: block;
width: clamp(80px, 12.5vmin, 114px);
aspect-ratio: 1;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
/* Kept deliberately faint. A box-shadow on the old circular portrait sat
behind an opaque photo, so it could be strong; drop-shadow traces the
logo's own outline, and anything heavier reads as a fringe drawn around
the artwork rather than a glow behind it. */
filter: drop-shadow(0 0 5px rgba(127, 255, 0, 0.14));
transition: filter 0.18s ease;
}
/* the mark as a link home — used on every page except the landing page */
a.home {
display: inline-flex;
transition: transform 0.18s ease;
}
a.home:hover,
a.home:focus-visible {
transform: scale(1.06);
outline: none;
}
/* The hover glow belongs on the mark, not on a.home. A filter on the wrapper
composes with the one on the image instead of replacing it, so the two
drop-shadows stacked and bloomed hard enough to light up every edge in the
artwork. One filter, one source of truth. */
a.home:hover .avatar,
a.home:focus-visible .avatar {
filter: drop-shadow(0 0 9px rgba(127, 255, 0, 0.26));
}
h1 {
font-size: clamp(1.7rem, 6vmin, 2.8rem);
letter-spacing: 0.08em;
font-weight: 700;
text-transform: uppercase;
}
/* A project with its own logo puts it in the h1 in place of the avatar and
the title (wip/maquette). The svg is inline and drawn in currentColor, so it
takes the site's colour whatever colour the artwork was drawn in. The glow
is the h1's "0 0 3px" text-shadow done as a filter: text-shadow reaches
svg but not lines, so it would light the lettering and not the art. */
h1.wordmark svg {
display: block;
width: clamp(170px, 30vmin, 250px);
height: auto;
color: var(--fg);
filter: drop-shadow(0 0 3px rgba(127, 255, 0, 0.55));
}
.tagline {
color: var(--dim);
font-size: clamp(0.78rem, 2.2vmin, 0.95rem);
letter-spacing: 0.05em;
}
/* ---- Terminal panel ----
min-height:0 on is the load-bearing line — without it a flex item
refuses to shrink below its content and the panel pushes the footer
off-screen instead of scrolling. */
main {
flex: 1;
min-height: 0;
display: flex;
justify-content: center;
}
.panel {
background: var(--panel);
border-radius: 25px;
padding: clamp(1.2rem, 3.5vmin, 2.2rem);
width: 100%;
max-width: 780px;
max-height: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
/* a column by default, so a page can pin one child and let another give */
display: flex;
flex-direction: column;
/* a flex item's default min-width:auto would let one long nowrap line
(an embed snippet, a code block) push the panel wider than the page */
min-width: 0;
}
/* When the panel IS the scroll region it goes back to being a plain block:
as a flex column its children would squash to fit instead of overflowing,
and nothing would ever scroll. */
.panel.scroller {
display: block;
}
.prompt {
color: var(--dim);
font-size: clamp(0.78rem, 2vmin, 0.95rem);
margin-bottom: 1.4rem;
letter-spacing: 0.03em;
}
.prompt span {
color: var(--fg);
}
.cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--fg);
vertical-align: text-bottom;
animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* ---- The list of things ----
One shape for every listing page. The
is the bordered row;
a.entry is the main link inside it; a.dl is an optional trailing
icon button (used by the decks list):