/* Teletext-fluid — the portrait-phone register. Lifted from /style web teletext-fluid. ALL fluid rules are scoped under body.fluid so the strict desktop shell (teletext.css) is untouched on wide screens; the register only activates when fluid.js toggles body.fluid via matchMedia. */ /* --- Role-token theme shelf (the six presets) ------------------------------ Tokens live on so the page grid, the bezel, and the bottom nav all inherit one palette. Live even before body.fluid so a swatch can read it. */ [data-theme="ceefax"]{ /* the original eight, full saturation on black */ --bg:#000; --ink:#fff; --head:#ff0; --link:#0ff; --sect:#0f0; --alert:#f00; --dim:#5a7bff; --band:#00f; --band-ink:#ff0; --box:#f00; --box-ink:#fff; } [data-theme="amber"]{ /* viewdata terminal: one ink, value ramp */ --bg:#000; --ink:#ffb000; --head:#ffd47a; --link:#ffd47a; --sect:#ffb000; --alert:#ffb000; --dim:#9a6600; --band:#9a6600; --band-ink:#ffd47a; --box:#ffb000; --box-ink:#000; } [data-theme="green"]{ /* P1 phosphor mono */ --bg:#000; --ink:#33ff33; --head:#aaffaa; --link:#aaffaa; --sect:#33ff33; --alert:#33ff33; --dim:#119911; --band:#119911; --band-ink:#aaffaa; --box:#33ff33; --box-ink:#001500; } [data-theme="snes"]{ /* painterly 16-bit: warm/cool split, deep-indigo ground */ --bg:#1a1626; --ink:#d8dee9; --head:#e8b84b; --link:#56c2c8; --sect:#82c272; --alert:#e06a7a; --dim:#5a5475; --band:#3a3358; --band-ink:#e8b84b; --box:#e06a7a; --box-ink:#1a1626; } [data-theme="gbc"]{ /* Game Boy Color candy, near-black-blue ground */ --bg:#0c1626; --ink:#e6f0dc; --head:#ffc83d; --link:#3fc6e8; --sect:#5ad85a; --alert:#ff5a5a; --dim:#4a5a6a; --band:#16304a; --band-ink:#ffc83d; --box:#ff5a5a; --box-ink:#0c1626; } [data-theme="dmg"]{ /* original Game Boy 4-shade green ramp */ --bg:#0f380f; --ink:#9bbc0f; --head:#d6e87a; --link:#d6e87a; --sect:#9bbc0f; --alert:#9bbc0f; --dim:#306230; --band:#306230; --band-ink:#d6e87a; --box:#9bbc0f; --box-ink:#0f380f; } /* --- The locked-column shelf ----------------------------------------------- Whole counts only; --fs/--gw are fitted by fluid.js, --cols by media query. */ :root{ --cols:32; --fs:16px; --gw:100vw; } @media (max-width:360px){ :root{ --cols:30; } } /* narrow handsets */ @media (min-width:700px){ :root{ --cols:40; } } /* tablet / desktop -> native 40 */ /* --- Palette bridge --------------------------------------------------------- The shared renderer/views paint inline with the strict --tt-* palette vars. Re-point those vars at the role tokens whenever a non-ceefax theme is active, on the desktop and under fluid, so the unchanged renderer reskins; ceefax on the desktop keeps the literal :root palette. Colours only — the fluid sizing/ rendering rules below stay under body.fluid, so the desktop keeps integer-zoom and pixelated rendering under any theme. Mosaics ride currentColor. */ body[data-theme]:not([data-theme="ceefax"]), body.fluid{ --tt-black: var(--bg); --tt-red: var(--alert); --tt-green: var(--sect); --tt-yellow: var(--head); --tt-blue: var(--band); --tt-magenta: var(--dim); --tt-cyan: var(--link); --tt-white: var(--ink); background: var(--bg); } /* --- Fill-width fit (replaces integer-zoom-on-black) ------------------------ */ /* The grid fills the screen width and scrolls vertically, not a postage stamp. */ body.fluid .tt-fit{ position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); display: flex; justify-content: center; /* centres the grid */ padding: calc(40px + env(safe-area-inset-top)) 0 calc(64px + env(safe-area-inset-bottom)); /* clear bezel + nav */ scrollbar-width: none; /* grid reaches the edge */ } body.fluid .tt-fit::-webkit-scrollbar{ width:0; height:0; } /* The page carries the fitted size; drop the desktop pixel-snap so a fractional fill reads smooth rather than chewed (Teletext50 pixel-snaps). */ body.fluid .tt{ font-size: var(--fs); background: var(--bg); color: var(--ink); image-rendering: auto; -webkit-font-smoothing: auto; font-smooth: auto; text-rendering: auto; } body.fluid .tt-page{ width: var(--gw); } /* override the 40ch invariant */ body.fluid #screen{ height: auto; overflow: visible; } /* fluid scrolls; let the body grow */ /* .tt-row keeps white-space:pre (the lattice); a word-wrapping run opts in. */ body.fluid .tt-flow{ display: block; white-space: normal; overflow-wrap: break-word; } /* --- Chrome painted from the role tokens ----------------------------------- */ body.fluid .tt-header{ color: var(--ink); } body.fluid .tt-header .page{ color: var(--link); } body.fluid .tt-header .clock{ color: var(--head); } body.fluid .tt-masthead{ background: var(--band); color: var(--band-ink); } /* The page's own FASTEXT row is replaced by the bottom tab bar under fluid; the anchors stay in the DOM (hidden) as the routing + label source. */ body.fluid #tt-fastext{ display: none; } /* The strict desktop controls are bezel-redundant under fluid. */ body.fluid .tt-controls{ display: none; } /* --- Bezel (device chrome, top) ------------------------------------------- Literal inks so it stays legible while you cycle themes. */ .tt-bezel{ display: none; } body.fluid .tt-bezel{ position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); background: #0a0a0a; color: #ccc; font: 13px ui-monospace, "Courier New", monospace; } body.fluid .tt-bezel button{ border: 0; cursor: pointer; background: #1a1a1a; color: #eee; padding: .35em .6em; font: inherit; } .tt-bezel .name{ min-width: 5ch; text-align: center; } .tt-bezel .swatch{ display: inline-flex; gap: 2px; margin-left: auto; align-items: center; } .tt-bezel .swatch i{ width: 10px; height: 12px; display: inline-block; } /* --- FASTEXT as a tappable bottom tab bar --------------------------------- Each key is a full-width target over a coloured top strip in its key colour; the inverted key swaps background/ink. Shown only under body.fluid. */ .tt-navbar{ display: none; } body.fluid .tt-navbar{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; background: #0a0a0a; border-top: 1px solid var(--dim); padding-bottom: env(safe-area-inset-bottom); } body.fluid .tt-navbar .nav{ display: flex; width: 100%; max-width: 720px; } body.fluid .tt-navbar button{ flex: 1 1 0; border: 0; background: transparent; color: var(--key); border-top: 4px solid var(--key); padding: .85em .2em; font: 16px "Teletext50", ui-monospace, "Courier New", monospace; cursor: pointer; } body.fluid .tt-navbar .k-red { --key: var(--alert); } body.fluid .tt-navbar .k-green { --key: var(--sect); } body.fluid .tt-navbar .k-yellow { --key: var(--head); } body.fluid .tt-navbar .k-cyan { --key: var(--link); } body.fluid .tt-navbar button.active{ background: var(--key); color: var(--bg); }