Skip to content

Releases: PhantomPixelDev/RetroCSS

6.0.4 — dark-mode headers follow the accent, headings step properly

Choose a tag to compare

@PhantomPixelDev PhantomPixelDev released this 08 Sep 12:49

Fixed

  • Card and modal headers were the wrong colour in dark mode. Both were a hardcoded #1a237e — the light theme's navy, left behind when the dark palette moved on — so a card header was the one piece of chrome that did not follow the accent: light-blue title bars on the sidebar and over code blocks, a stray navy one on every card and dialog. Both now read --retro-primary / --retro-primary-fg, so re-theming the accent re-themes them too.
  • Headings were bold at nearly the same size all the way down. h5 and h6 were both 16px bold, so the last two levels of an outline could not be told apart, and h2 carried h1's panel and accent bar, which made every section open with a second title bar. The scale steps 30 / 24 / 20 / 18 / 16 / 14 now, h2 is ruled off with the bevelled hairline the framework already draws under a card header, and h6 is small caps. .retro-h1 … .retro-h6 match.

Reverting either is one declaration; see MIGRATION.md.

All five gates pass: 36 unit tests, 370 token pairs at AA, the stylesheet gate, 140 rendered-page checks, 20 keyboard loads.

6.0.3 — one nav, one shell, one footer, and a dropdown that stays inside the page

Choose a tag to compare

@PhantomPixelDev PhantomPixelDev released this 08 Sep 12:18

Fixed

  • A closed dropdown menu could widen the page. visibility: hidden hides a box but keeps it, and an absolutely positioned box still counts toward the document's scrollable overflow — so a menu as wide as its longest item pushed the document 35px past a 420px viewport, in RTL where it opens toward the other edge, for a menu nobody could see. A closed menu now collapses to nothing; an open one is capped at the viewport.

Site

  • Every page carries the same chrome. The ten pages had three different navs — the home page and docs had an Examples dropdown in a centred shell, the seven examples had a flat link in a full-bleed container, and the RTL page had four Arabic links inside its 900px content wrapper — and five different footer positions. All ten now emit the same nav block, above the same rule, with the footer lifted to body level in the same shell: nav 56..1344, shell 40..1360, footer 56..1344 at a 1400px viewport.
  • .example-footer is drawn like .site-footer, so the examples stop reading as a different site from the one linking to them.
  • Fixed an unclosed .retro-main-layout on the home page that had swallowed the footer into the content column.

All five gates pass: 36 unit tests, 370 token pairs at AA, the stylesheet gate, 140 rendered-page checks, 20 keyboard loads.

6.0.1 — sidebar corrections, and one stylesheet for the site

Choose a tag to compare

@PhantomPixelDev PhantomPixelDev released this 08 Sep 11:42

Fixes to what 6.0.0 shipped, plus the end of the site's duplicated CSS.

Fixed

  • The sidebar panel stretched to the full viewport, so a short contents list sat at the top of a tall empty box and a long one scrolled inside a panel that gave no sign it could. It is content-height now, capped at the viewport.
  • A panel that does scroll draws a Win9x scrollbar — square track, bevelled thumb, both from tokens — instead of the platform's thin modern overlay bar.
  • A nav or list inside the sidebar drew its own frame inside the panel's frame inside the column. The panel is the frame; its contents are separated by hairlines and by group bands bled to the panel's edges.
  • Sidebar rows were body-sized with full nav padding, so a forty-link contents ran 1500px. They are list rows now.
  • The title bar stays pinned while the panel scrolls, as a window's does.

Site

  • The home page, the documentation and all eight examples share one site.css and carry no inline style block. They had a copy each of the same page CSS, which had drifted — the home page ran full-bleed while the docs were centred at 1320px, the footer was duplicated seven times and the whole sign-in layout twice. Every page now uses the same shell, --retro-container-xxl.

All five gates pass: 36 unit tests, 370 token pairs at AA, the stylesheet gate, 140 rendered-page checks, 20 keyboard loads.

6.0.0 — readable danger, readable progress, a sidebar that looks like a panel

Choose a tag to compare

@PhantomPixelDev PhantomPixelDev released this 08 Sep 11:06

Three things you can see, which is what makes this a major. Nothing is renamed, nothing is removed, and every change is a default you can put back in one declaration — see MIGRATION.md.

Changed

  • --retro-danger is #cc0000, and its on-fill text is white. The fill was pure #ff0000, where white scores 4.00:1 and black 5.25:1 — so every danger button, badge, alert and toast carried black text. That passes the arithmetic and reads like a label printed on a fire extinguisher. On #cc0000 white scores 5.89:1. Hover and active moved with it. Old pair: :root { --retro-danger: #ff0000; --retro-danger-fg: #000; }
  • The progress label carries a plate. It straddles the filled bar and the empty track, which are always opposite in lightness, and the text-shadow halo lost against the striped navy bar. The label now sits on a small bordered plate in the track colour.
  • The sidebar is a panel. Raised chassis, a title bar painted like the one over a code block, group bands framed as the head of the list they introduce, sidebar lists framed like the navs beside them, and one rhythm spacing the widgets.

Added

  • [aria-current] lights a .retro-nav-item the way .active does — a router or static site generator marks the current page that way and used to get no highlight.

Documentation

  • A trademark notice. RetroCSS imitates the look of mid-1990s desktop software; it is independent, unaffiliated and unendorsed, and ships no Microsoft artwork, icon, font or code. Product-facing copy now says Win9x or mid-90s desktop; prose explaining how Windows itself behaved still names it, because that is what those sentences are about.

All five gates pass: 36 unit tests, 370 token pairs at AA, the stylesheet gate, 140 rendered-page checks, 20 keyboard loads.