Skip to content

Commit cf9fd4a

Browse files
PhantomPixelDevPhantomPixelDev
committed
fix(typography): let heading colour variants show through the variant shell
.retro-heading-variant was declared after the eight colour variants at equal specificity, so its own background, colour and border overrode all of them. Every `.retro-heading-variant.retro-heading-*` rendered identically plain — the colours never appeared. Moved it above the colour block so the two compose. index.html - Replace two stacked headers with one hero: a single <h1>, an intro, the install command and links. The page had three <h1> elements and an <h1> nested inside a card header, doubling the chrome. - Unwrap the gallery. All 33 component cards were nested inside a card headed "Navigation Examples" — a stale label around the whole page, putting a card inside a card on every section. The markup was also unbalanced; the column and grid were never closed and the browser was auto-closing them at </body>. - Add a Utilities section. The utility layer added in 2.1 had no demo anywhere: fills, subtle tints, text colours, spacing, flex, effects. - Group the sidebar into Navigation / Layout / Content / Forms / Actions / Feedback / Disclosure, and add the missing Modals link. All 34 anchors resolve. - Demote the three carousel slide <h2>s to <h3>; they were appearing in the document outline as top-level page sections. theme-matrix - Drop the descriptive strapline from the toolbar. - Show all eight heading variants, plain and combined with the variant shell, rather than four. Also adds .retro-sidebar-group for the group labels, and a list reset so sidebar navs do not inherit the content-list markers and padding. Verified: 0 contrast failures over 2644 text nodes across 8 pages in both themes, no overflow at 1200/760/420px, and no broken sidebar anchors.
1 parent f52e118 commit cf9fd4a

5 files changed

Lines changed: 202 additions & 61 deletions

File tree

‎examples/theme-matrix.html‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
<div class="tm-bar">
5656
<strong>Theme Matrix</strong>
5757
<button class="retro-btn retro-theme-toggle">🌓 Toggle Theme</button>
58-
<span class="tm-label retro-m-0">every component touched by the readability pass, on both surfaces</span>
5958
</div>
6059

6160
<div class="tm-wrap">
@@ -162,6 +161,20 @@ <h2>Heading variants</h2>
162161
<div class="retro-heading-success">retro-heading-success</div>
163162
<div class="retro-heading-warning">retro-heading-warning</div>
164163
<div class="retro-heading-danger">retro-heading-danger</div>
164+
<div class="retro-heading-info">retro-heading-info</div>
165+
<div class="retro-heading-teal">retro-heading-teal</div>
166+
<div class="retro-heading-pink">retro-heading-pink</div>
167+
<div class="retro-heading-lime">retro-heading-lime</div>
168+
169+
<p class="tm-label retro-mt-4">combined with retro-heading-variant</p>
170+
<div class="retro-heading-variant retro-heading-primary">primary</div>
171+
<div class="retro-heading-variant retro-heading-success">success</div>
172+
<div class="retro-heading-variant retro-heading-warning">warning</div>
173+
<div class="retro-heading-variant retro-heading-danger">danger</div>
174+
<div class="retro-heading-variant retro-heading-info">info</div>
175+
<div class="retro-heading-variant retro-heading-teal">teal</div>
176+
<div class="retro-heading-variant retro-heading-pink">pink</div>
177+
<div class="retro-heading-variant retro-heading-lime">lime</div>
165178
</div>
166179

167180
<div class="tm-section">

‎index.html‎

Lines changed: 136 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -87,39 +87,72 @@
8787
<div class="retro-sidebar-header">Demo Sections</div>
8888
<nav aria-label="Demo sections navigation" class="retro-nav-vertical retro-w-full">
8989
<div class="retro-sidebar-section">
90+
<div class="retro-sidebar-group">Navigation</div>
9091
<ul>
9192
<li><a href="#section-navigation" class="retro-nav-item">Navigation</a></li>
92-
<li><a href="#section-vertical-navigation" class="retro-nav-item">Vertical Navigation</a></li>
93-
<li><a href="#section-pills-navigation" class="retro-nav-item">Pills Navigation</a></li>
94-
<li><a href="#section-toolbar-navigation" class="retro-nav-item">Toolbar Navigation</a></li>
95-
<li><a href="#section-tabbed-navigation" class="retro-nav-item">Tabbed Navigation</a></li>
96-
<li><a href="#section-underlined-navigation" class="retro-nav-item">Underlined Navigation</a></li>
97-
<li><a href="#section-button-navigation" class="retro-nav-item">Button Group Navigation</a></li>
93+
<li><a href="#section-vertical-navigation" class="retro-nav-item">Vertical</a></li>
94+
<li><a href="#section-pills-navigation" class="retro-nav-item">Pills</a></li>
95+
<li><a href="#section-toolbar-navigation" class="retro-nav-item">Toolbar</a></li>
96+
<li><a href="#section-tabbed-navigation" class="retro-nav-item">Tabbed</a></li>
97+
<li><a href="#section-underlined-navigation" class="retro-nav-item">Underlined</a></li>
98+
<li><a href="#section-button-navigation" class="retro-nav-item">Button Group</a></li>
99+
</ul>
100+
</div>
101+
<div class="retro-sidebar-section">
102+
<div class="retro-sidebar-group">Layout</div>
103+
<ul>
104+
<li><a href="#section-utilities" class="retro-nav-item">Utilities</a></li>
105+
<li><a href="#section-grid" class="retro-nav-item">Grid System</a></li>
106+
<li><a href="#section-container-queries" class="retro-nav-item">Container Queries</a></li>
107+
</ul>
108+
</div>
109+
<div class="retro-sidebar-section">
110+
<div class="retro-sidebar-group">Content</div>
111+
<ul>
112+
<li><a href="#section-typography" class="retro-nav-item">Typography</a></li>
98113
<li><a href="#section-badges" class="retro-nav-item">Badges</a></li>
99-
<li><a href="#section-buttons" class="retro-nav-item">Buttons</a></li>
100114
<li><a href="#section-cards" class="retro-nav-item">Cards</a></li>
101-
<li><a href="#section-forms" class="retro-nav-item">Forms</a></li>
115+
<li><a href="#section-lists" class="retro-nav-item">Lists</a></li>
116+
<li><a href="#section-dividers" class="retro-nav-item">Dividers</a></li>
102117
<li><a href="#section-tables" class="retro-nav-item">Tables</a></li>
103-
<li><a href="#section-grid" class="retro-nav-item">Grid System</a></li>
104-
<li><a href="#section-container-queries" class="retro-nav-item">Container Queries</a></li>
118+
</ul>
119+
</div>
120+
<div class="retro-sidebar-section">
121+
<div class="retro-sidebar-group">Forms</div>
122+
<ul>
123+
<li><a href="#section-forms" class="retro-nav-item">Form Controls</a></li>
124+
<li><a href="#section-file-upload" class="retro-nav-item">File Upload</a></li>
125+
<li><a href="#section-tag-input" class="retro-nav-item">Tag / Chip Input</a></li>
126+
<li><a href="#section-search" class="retro-nav-item">Search Bar</a></li>
127+
<li><a href="#section-rating" class="retro-nav-item">Rating Stars</a></li>
128+
<li><a href="#section-datetime" class="retro-nav-item">Date / Time Picker</a></li>
129+
</ul>
130+
</div>
131+
<div class="retro-sidebar-section">
132+
<div class="retro-sidebar-group">Actions</div>
133+
<ul>
134+
<li><a href="#section-buttons" class="retro-nav-item">Buttons</a></li>
135+
<li><a href="#section-dropdown" class="retro-nav-item">Dropdown Menu</a></li>
136+
</ul>
137+
</div>
138+
<div class="retro-sidebar-section">
139+
<div class="retro-sidebar-group">Feedback</div>
140+
<ul>
105141
<li><a href="#section-alerts" class="retro-nav-item">Alerts</a></li>
106142
<li><a href="#section-toasts" class="retro-nav-item">Toasts</a></li>
143+
<li><a href="#section-modals" class="retro-nav-item">Modals</a></li>
107144
<li><a href="#section-progress" class="retro-nav-item">Progress</a></li>
145+
<li><a href="#section-tooltips" class="retro-nav-item">Tooltips</a></li>
146+
</ul>
147+
</div>
148+
<div class="retro-sidebar-section">
149+
<div class="retro-sidebar-group">Disclosure</div>
150+
<ul>
108151
<li><a href="#section-accordion" class="retro-nav-item">Accordion</a></li>
152+
<li><a href="#section-carousel" class="retro-nav-item">Carousel</a></li>
109153
<li><a href="#section-pagination" class="retro-nav-item">Pagination</a></li>
110154
<li><a href="#section-breadcrumbs" class="retro-nav-item">Breadcrumbs</a></li>
111-
<li><a href="#section-dropdown" class="retro-nav-item">Dropdown Menu</a></li>
112-
<li><a href="#section-file-upload" class="retro-nav-item">File Upload</a></li>
113-
<li><a href="#section-tag-input" class="retro-nav-item">Tag/Chip Input</a></li>
114-
<li><a href="#section-search" class="retro-nav-item">Search Bar</a></li>
115-
<li><a href="#section-rating" class="retro-nav-item">Rating Stars</a></li>
116-
<li><a href="#section-dividers" class="retro-nav-item">Dividers</a></li>
117-
<li><a href="#section-tooltips" class="retro-nav-item">Tooltips</a></li>
118-
<li><a href="#section-lists" class="retro-nav-item">Lists</a></li>
119-
<li><a href="#section-carousel" class="retro-nav-item">Carousel</a></li>
120-
<li><a href="#section-datetime" class="retro-nav-item">Date/Time Picker</a></li>
121155
<li><a href="#section-infinite-scroll" class="retro-nav-item">Infinite Scroll</a></li>
122-
<li><a href="#section-typography" class="retro-nav-item">Typography</a></li>
123156
</ul>
124157
</div>
125158
</nav>
@@ -129,26 +162,23 @@
129162
<div class="retro-col-span-12 md:retro-col-span-9">
130163
<!-- Mobile sidebar toggle button (automatically added by JS) -->
131164
<!-- Win9x Style Layout -->
132-
<div class="retro-container retro-mb-5">
133-
<!-- Main Content Area Header -->
134-
<div class="retro-card retro-mb-3">
135-
<div class="retro-card-header">
136-
<h1 class="retro-heading-primary">RetroCSS Win9x Demo</h1>
137-
</div>
138-
<div class="retro-card-content">
139-
<p>Welcome to the RetroCSS demo page! This page showcases various components and styles inspired by the classic Win9x interface.</p>
140-
</div>
141-
</div>
142-
</div>
143-
<!-- Content window -->
165+
<!-- Hero -->
144166
<div class="retro-card retro-mb-4">
145-
<div class="retro-card-header">
146-
Navigation Examples
147-
</div>
167+
<div class="retro-card-header">RetroCSS</div>
148168
<div class="retro-card-content">
149-
<div class="retro-flex retro-justify-between retro-align-center retro-mb-4">
150-
<h1 class="retro-heading-primary retro-m-0">Components Demo</h1>
169+
<h1 class="retro-mt-0">Win9x styling for the modern web</h1>
170+
<p class="retro-max-w-prose">A CSS framework with the look of 1995 and the ergonomics of today:
171+
themeable tokens, a dark mode that actually reads, keyboard-safe components and
172+
WCAG AA contrast throughout. Every component below is on this page.</p>
173+
<pre class="retro-code"><code>npm install @phantompixeldev/retrocss</code></pre>
174+
<div class="retro-flex retro-flex-wrap retro-gap-2 retro-mt-4">
175+
<a class="retro-btn retro-btn-primary" href="documentation.html">Documentation</a>
176+
<a class="retro-btn" href="examples/theme-matrix.html">Theme Matrix</a>
177+
<a class="retro-btn" href="https://github.com/phantompixeldev/retrocss">GitHub</a>
178+
<button class="retro-btn retro-theme-toggle">🌓 Toggle Theme</button>
151179
</div>
180+
</div>
181+
</div>
152182
<div class="demo-section retro-card" id="section-navigation">
153183
<h2>🧭 Navigation</h2>
154184
<nav class="retro-nav">
@@ -1023,6 +1053,69 @@ <h2>📊 Tables</h2>
10231053
</div>
10241054
</div>
10251055

1056+
<div class="demo-section retro-card" id="section-utilities">
1057+
<h2>🧰 Utilities</h2>
1058+
<p class="retro-max-w-prose">Atomic helpers on the same tokens as the components.
1059+
<code>retro-bg-&lt;hue&gt;</code> sets the fill <em>and</em> its on-fill text colour, so a
1060+
filled panel reads correctly in both themes from one class.</p>
1061+
1062+
<h3>Backgrounds</h3>
1063+
<div class="retro-grid retro-grid-cols-2 md:retro-grid-cols-4 retro-gap-2 retro-mb-4">
1064+
<div class="retro-bg-primary retro-p-3">primary</div>
1065+
<div class="retro-bg-success retro-p-3">success</div>
1066+
<div class="retro-bg-danger retro-p-3">danger</div>
1067+
<div class="retro-bg-warning retro-p-3">warning</div>
1068+
<div class="retro-bg-info retro-p-3">info</div>
1069+
<div class="retro-bg-teal retro-p-3">teal</div>
1070+
<div class="retro-bg-pink retro-p-3">pink</div>
1071+
<div class="retro-bg-lime retro-p-3">lime</div>
1072+
</div>
1073+
1074+
<h3>Subtle tints</h3>
1075+
<div class="retro-grid retro-grid-cols-2 md:retro-grid-cols-4 retro-gap-2 retro-mb-4">
1076+
<div class="retro-bg-primary-subtle retro-p-3">primary-subtle</div>
1077+
<div class="retro-bg-success-subtle retro-p-3">success-subtle</div>
1078+
<div class="retro-bg-danger-subtle retro-p-3">danger-subtle</div>
1079+
<div class="retro-bg-warning-subtle retro-p-3">warning-subtle</div>
1080+
<div class="retro-bg-info-subtle retro-p-3">info-subtle</div>
1081+
<div class="retro-bg-teal-subtle retro-p-3">teal-subtle</div>
1082+
<div class="retro-bg-pink-subtle retro-p-3">pink-subtle</div>
1083+
<div class="retro-bg-lime-subtle retro-p-3">lime-subtle</div>
1084+
</div>
1085+
1086+
<h3>Text colours</h3>
1087+
<p class="retro-flex retro-flex-wrap retro-gap-3">
1088+
<span class="retro-text-primary">primary</span>
1089+
<span class="retro-text-success">success</span>
1090+
<span class="retro-text-danger">danger</span>
1091+
<span class="retro-text-warning">warning</span>
1092+
<span class="retro-text-info">info</span>
1093+
<span class="retro-text-teal">teal</span>
1094+
<span class="retro-text-pink">pink</span>
1095+
<span class="retro-text-lime">lime</span>
1096+
<span class="retro-text-muted">muted</span>
1097+
</p>
1098+
1099+
<h3>Spacing &amp; flex</h3>
1100+
<div class="retro-flex retro-flex-wrap retro-gap-2 retro-mb-2">
1101+
<span class="retro-badge">retro-flex</span>
1102+
<span class="retro-badge">retro-gap-2</span>
1103+
<span class="retro-badge">retro-flex-wrap</span>
1104+
<span class="retro-badge">retro-items-center</span>
1105+
<span class="retro-badge">retro-mt-4</span>
1106+
<span class="retro-badge">retro-px-5</span>
1107+
<span class="retro-badge">retro-mx-auto</span>
1108+
</div>
1109+
<p class="retro-text-muted">Margins and padding run <code>0–8</code> on a 0/4/8/12/16/24/32/40/48px scale.</p>
1110+
1111+
<h3>Effects</h3>
1112+
<div class="retro-flex retro-flex-wrap retro-gap-3">
1113+
<div class="retro-bg-light retro-p-4 retro-raised">retro-raised</div>
1114+
<div class="retro-bg-light retro-p-4 retro-sunken">retro-sunken</div>
1115+
<div class="retro-bg-light retro-p-4 retro-shadow-md">retro-shadow-md</div>
1116+
<div class="retro-bg-light retro-p-4 retro-shadow-lg">retro-shadow-lg</div>
1117+
</div>
1118+
</div>
10261119
<div class="demo-section retro-card" id="section-grid">
10271120
<h2>📐 Grid System</h2>
10281121
<h3>Basic Grid</h3>
@@ -1385,21 +1478,21 @@ <h2>🎠 Carousel / Slider</h2>
13851478
<div class="retro-carousel-track">
13861479
<div class="retro-carousel-slide">
13871480
<div class="retro-card">
1388-
<h2>Slide 1: Welcome to RetroCSS!</h2>
1481+
<h3>Slide 1: Welcome to RetroCSS!</h3>
13891482
<p>This is the first slide of the carousel. It can contain any content you want.</p>
13901483
<img src="https://placehold.co/600x400" alt="Placeholder Image">
13911484
</div>
13921485
</div>
13931486
<div class="retro-carousel-slide">
13941487
<div class="retro-card">
1395-
<h2>Slide 2: You can add any content here.</h2>
1488+
<h3>Slide 2: You can add any content here.</h3>
13961489
<p>This is the second slide of the carousel. It can contain any content you want.</p>
13971490
<img src="https://placehold.co/600x400" alt="Placeholder Image">
13981491
</div>
13991492
</div>
14001493
<div class="retro-carousel-slide">
14011494
<div class="retro-card">
1402-
<h2>Slide 3: Try the arrows or dots below.</h2>
1495+
<h3>Slide 3: Try the arrows or dots below.</h3>
14031496
<p>This is the third slide of the carousel. It can contain any content you want.</p>
14041497
<img src="https://placehold.co/600x400" alt="Placeholder Image">
14051498
</div>
@@ -1553,7 +1646,8 @@ <h3>Retro Listbox</h3>
15531646
<p><del>Deleted text</del> <ins>Inserted text</ins> <sub>sub</sub> <sup>sup</sup></p>
15541647
</div>
15551648
</div>
1556-
</div><!-- End of retro-main-grid -->
1649+
</div><!-- /content column -->
1650+
</div><!-- /retro-main-grid -->
15571651

15581652
<!-- Original Demo Modal (can be moved or kept here) -->
15591653
<div class="retro-modal" id="demoModal">

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@phantompixeldev/retrocss",
3-
"version": "2.2.0",
3+
"version": "2.3.0",
44
"description": "A Retro-Inspired CSS Framework",
55
"main": "dist/retro.css",
66
"style": "dist/retro.css",

‎src/scss/_typography.scss‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,35 @@ h3 { font-size: var(--retro-font-size-xl); }
5252
h4 { font-size: var(--retro-font-size-lg); }
5353
h5, h6 { font-size: var(--retro-font-size); }
5454

55+
/**
56+
* @name Retro Heading Variant
57+
* @group typography
58+
* @description
59+
* Monospace, uppercase heading shell. Declared before the colour variants so
60+
* that combining the two works: this used to sit after them at equal
61+
* specificity, and its own background/colour/border silently overrode all
62+
* eight, making every `.retro-heading-variant.retro-heading-*` render
63+
* identically plain.
64+
* @example html
65+
* <div class="retro-heading-variant retro-heading-success">Success</div>
66+
*/
67+
.retro-heading-variant {
68+
font-family: var(--retro-font-mono);
69+
font-size: var(--retro-font-size-2xl);
70+
font-weight: var(--retro-font-weight-bold);
71+
text-transform: uppercase;
72+
letter-spacing: 0.08em;
73+
padding: 0.5rem 1.2rem;
74+
margin-bottom: 0.5rem;
75+
color: var(--retro-text);
76+
border: 2.5px double var(--retro-border-dark);
77+
box-shadow: inset 0 2px 8px rgba(var(--retro-white-rgb), 0.53), 0 2px 0 rgba(var(--retro-black-rgb), 0.27);
78+
background: var(--retro-bg);
79+
display: flex;
80+
align-items: center;
81+
gap: 0.5em;
82+
}
83+
5584
// Heading Variants
5685
.retro-heading {
5786
&-primary,
@@ -464,22 +493,6 @@ h5, h6 { font-size: var(--retro-font-size); }
464493
}
465494
}
466495

467-
.retro-heading-variant {
468-
font-family: var(--retro-font-mono);
469-
font-size: var(--retro-font-size-2xl);
470-
font-weight: var(--retro-font-weight-bold);
471-
text-transform: uppercase;
472-
letter-spacing: 0.08em;
473-
padding: 0.5rem 1.2rem;
474-
margin-bottom: 0.5rem;
475-
color: var(--retro-text);
476-
border: 2.5px double var(--retro-border-dark);
477-
box-shadow: inset 0 2px 8px rgba(var(--retro-white-rgb), 0.53), 0 2px 0 rgba(var(--retro-black-rgb), 0.27);
478-
background: var(--retro-bg);
479-
display: flex;
480-
align-items: center;
481-
gap: 0.5em;
482-
}
483496
// NOTE: a second .retro-heading-* block used to live here with a flat pastel
484497
// palette. Same specificity, declared later, so it silently shadowed the
485498
// beveled variants above and froze them at light-mode values. Removed.

‎src/scss/components/_sidebar.scss‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,4 +136,25 @@
136136
.retro-sidebar-toggle,
137137
.retro-sidebar-overlay {
138138
display: none;
139-
}
139+
}
140+
/// The sidebar's link lists are navigation, not prose: the base `ul` rule adds
141+
/// list markers and inline padding that do not belong here.
142+
.retro-sidebar nav ul {
143+
list-style: none;
144+
margin: 0;
145+
padding-left: 0;
146+
}
147+
148+
/// Small caps label that separates groups of links in a long sidebar.
149+
.retro-sidebar-group {
150+
margin: var(--retro-spacing-sm) 0 var(--retro-spacing-xs);
151+
font-size: var(--retro-font-size-xs);
152+
font-weight: var(--retro-font-weight-bold);
153+
text-transform: uppercase;
154+
letter-spacing: 0.08em;
155+
color: var(--retro-text-muted);
156+
border-bottom: 1px solid var(--retro-border-medium);
157+
padding-bottom: 2px;
158+
}
159+
160+
.retro-sidebar-section:first-of-type .retro-sidebar-group { margin-top: 0; }

0 commit comments

Comments
 (0)