@whykusanagi/corrupted-theme 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/README.md +118 -7
  3. package/package.json +1 -1
  4. package/src/css/components.css +101 -2
  5. package/src/css/theme.css +0 -102
  6. package/src/css/variables.css +1 -1
package/CHANGELOG.md CHANGED
@@ -21,6 +21,48 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
21
21
 
22
22
  ---
23
23
 
24
+ ## [0.1.1] - 2025-11-26
25
+
26
+ ### Fixed
27
+
28
+ #### Navbar Z-Index Issue
29
+ - **Changed:** `--z-navbar` from `500` to `1000` in `variables.css`
30
+ - **Why:** Navbar was appearing behind content when using video backgrounds with `.app-shell` structure
31
+ - **Impact:** Navbar now always renders above all content layers
32
+
33
+ #### Navbar Styles Not Available with Modular Imports
34
+ - **Moved:** All navbar styles (`nav.navbar`, `.navbar-content`, `.navbar-logo`, `.navbar-links`) from `theme.css` to `components.css`
35
+ - **Why:** When using modular imports (as documented), navbar styles were missing because they only existed in `theme.css`
36
+ - **Impact:** Navbar now works correctly with both single-file and modular import methods
37
+
38
+ ### Changed
39
+
40
+ #### Documentation Improvements
41
+ - **Added:** "Video Backgrounds with Navigation" section to README
42
+ - Proper navbar placement outside `.app-shell` for z-index stacking
43
+ - Complete z-index hierarchy table with all tokens
44
+ - HTML structure example for video backgrounds with navigation
45
+
46
+ - **Added:** "HTML Import Methods" section to README
47
+ - Method 1: Single file import (recommended)
48
+ - Method 2: Modular imports with correct dependency order
49
+ - CSS `@import` syntax examples
50
+ - HTML `<link>` tag syntax examples
51
+ - Explanation of why import order matters
52
+
53
+ #### CSS Architecture
54
+ - Navbar responsive styles consolidated in `components.css`
55
+ - Removed duplicate navbar styles from `theme.css`
56
+ - Z-index values now use CSS custom properties consistently (`var(--z-negative)`, `var(--z-background)`, etc.)
57
+
58
+ ### Files Modified
59
+ - `src/css/variables.css` - Z-index value change
60
+ - `src/css/components.css` - Added navbar base styles and responsive styles
61
+ - `src/css/theme.css` - Removed navbar styles (now imported via components.css)
62
+ - `README.md` - Enhanced documentation
63
+
64
+ ---
65
+
24
66
  ## [0.1.0] - 2025-11-23
25
67
 
26
68
  ### Added
package/README.md CHANGED
@@ -76,6 +76,16 @@ Copy `src/css` into your project (or use `dist/theme.min.css`) and import it loc
76
76
  - `npm run dev:proxy` – Celeste proxy (port 5000)
77
77
 
78
78
  ## Base Layout & Background
79
+
80
+ ### Static Background
81
+ ```html
82
+ <body>
83
+ <div class="glass-backdrop"></div>
84
+ <main class="app-shell"><!-- your glass UI --></main>
85
+ </body>
86
+ ```
87
+
88
+ ### Video Background
79
89
  ```html
80
90
  <body>
81
91
  <video class="background-media" autoplay muted loop playsinline>
@@ -85,27 +95,128 @@ Copy `src/css` into your project (or use `dist/theme.min.css`) and import it loc
85
95
  <main class="app-shell"><!-- your glass UI --></main>
86
96
  </body>
87
97
  ```
98
+
99
+ ### Required CSS
88
100
  ```css
89
101
  html, body { min-height: 100vh; background: var(--bg); margin: 0; }
90
- .background-media { position: fixed; inset: 0; object-fit: cover; z-index: -2; }
91
- .glass-backdrop { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,0,16,.85), rgba(10,10,10,.9)); z-index: -1; }
92
- .app-shell { position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 3rem); backdrop-filter: blur(0); }
102
+ .background-media { position: fixed; inset: 0; object-fit: cover; z-index: var(--z-negative); }
103
+ .glass-backdrop { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,0,16,.85), rgba(10,10,10,.9)); z-index: var(--z-background); }
104
+ .app-shell { position: relative; z-index: var(--z-elevated); padding: clamp(1.5rem, 3vw, 3rem); backdrop-filter: blur(0); }
105
+ ```
106
+
107
+ ### Video Backgrounds with Navigation
108
+
109
+ When using video backgrounds, place the navbar **outside** `.app-shell` for proper z-index stacking:
110
+
111
+ ```html
112
+ <body>
113
+ <!-- Background layer -->
114
+ <video class="background-media" autoplay muted loop playsinline>
115
+ <source src="/media/corruption-loop.mp4" type="video/mp4" />
116
+ </video>
117
+ <div class="glass-backdrop"></div>
118
+
119
+ <!-- Navigation MUST be outside app-shell for proper stacking -->
120
+ <nav class="navbar">
121
+ <div class="navbar-content">
122
+ <a class="navbar-logo" href="/">Brand</a>
123
+ <ul class="navbar-links">
124
+ <li><a href="#home" class="active">Home</a></li>
125
+ <li><a href="#about">About</a></li>
126
+ <li><a href="#contact">Contact</a></li>
127
+ </ul>
128
+ </div>
129
+ </nav>
130
+
131
+ <!-- Main content -->
132
+ <main class="app-shell">
133
+ <!-- your glass UI components -->
134
+ </main>
135
+ </body>
93
136
  ```
94
- Use `.app-shell` as the only stacking context above the backdrop so containers never block the video/image layer.
137
+
138
+ ### Z-Index Hierarchy
139
+
140
+ The theme uses a systematic z-index scale defined in `variables.css`:
141
+
142
+ | Token | Value | Purpose |
143
+ |-------|-------|---------|
144
+ | `--z-negative` | `-2` | Background media (video/image) |
145
+ | `--z-background` | `-1` | Glass backdrop overlay |
146
+ | `--z-base` | `0` | Default stacking |
147
+ | `--z-elevated` | `1` | App shell and content |
148
+ | `--z-navbar` | `1000` | Navigation (always above content) |
149
+ | `--z-modal` | `1000` | Modals and overlays |
150
+
151
+ > **Important:** The navbar uses `z-index: 1000` to ensure it always appears above all content, including video backgrounds and elevated containers.
95
152
 
96
153
  ## CSS & JS Imports
154
+
155
+ ### Method 1: Single File Import (Recommended)
156
+
157
+ The simplest approach — import everything in one line:
158
+
159
+ ```html
160
+ <!-- HTML -->
161
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/dist/theme.min.css">
162
+ ```
163
+
164
+ ```css
165
+ /* CSS */
166
+ @import '@whykusanagi/corrupted-theme';
167
+ ```
168
+
169
+ ✅ **Recommended for most projects.** Includes all styles in the correct order automatically.
170
+
171
+ ### Method 2: Modular Imports (Advanced)
172
+
173
+ Import only the modules you need for smaller bundle sizes.
174
+
175
+ > ⚠️ **CRITICAL: Import order matters!** Modules have dependencies that require specific ordering.
176
+
177
+ #### CSS @import Syntax
178
+ ```css
179
+ /* Correct order (matches theme.css structure) */
180
+ @import '@whykusanagi/corrupted-theme/variables'; /* 1. Foundation tokens */
181
+ @import '@whykusanagi/corrupted-theme/typography'; /* 2. Font styles */
182
+ @import '@whykusanagi/corrupted-theme/glassmorphism'; /* 3. Glass effects */
183
+ @import '@whykusanagi/corrupted-theme/animations'; /* 4. Keyframes - MUST come before components */
184
+ @import '@whykusanagi/corrupted-theme/components'; /* 5. UI components - MUST come after animations */
185
+ @import '@whykusanagi/corrupted-theme/utilities'; /* 6. Utility classes */
186
+ ```
187
+
188
+ #### HTML Link Tags
97
189
  ```html
98
- <link rel="stylesheet" href="@whykusanagi/corrupted-theme/dist/theme.min.css">
190
+ <!-- Correct order (matches theme.css structure) -->
191
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/variables.css">
192
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/typography.css">
193
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/glassmorphism.css">
194
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/animations.css"> <!-- MUST come before components -->
195
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/components.css"> <!-- MUST come after animations -->
196
+ <link rel="stylesheet" href="node_modules/@whykusanagi/corrupted-theme/src/css/utilities.css">
197
+ ```
198
+
199
+ #### Why Order Matters
200
+ - `components.css` uses animation keyframes defined in `animations.css`
201
+ - If `components.css` loads before `animations.css`, spinner and loading animations won't work
202
+ - Always verify order by checking `src/css/theme.css` (shows canonical import structure)
203
+
204
+ ### JavaScript Imports
205
+
206
+ ```html
207
+ <!-- HTML -->
99
208
  <script type="module" src="@whykusanagi/corrupted-theme/src/lib/corrupted-text.js"></script>
100
209
  <script type="module" src="@whykusanagi/corrupted-theme/src/lib/corruption-loading.js"></script>
101
210
  ```
211
+
102
212
  ```js
213
+ // ES Modules
103
214
  import { initCorruptedText } from '@whykusanagi/corrupted-theme/src/lib/corrupted-text.js';
104
215
  import { showCorruptionLoading } from '@whykusanagi/corrupted-theme/src/lib/corruption-loading.js';
105
216
 
106
217
  document.addEventListener('DOMContentLoaded', () => {
107
- initCorruptedText(); // re-init if you stream new DOM
108
- // showCorruptionLoading({ force: true }); // force-run outside 72h cadence
218
+ initCorruptedText(); // Initialize glitch text effects
219
+ // showCorruptionLoading({ force: true }); // Force loader outside 72h cadence
109
220
  });
110
221
  ```
111
222
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whykusanagi/corrupted-theme",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "type": "module",
5
5
  "description": "A dark, glassmorphic design system with pink/purple accents. Perfect for creating modern, visually striking web applications.",
6
6
  "main": "src/css/theme.css",
package/src/css/components.css CHANGED
@@ -781,9 +781,91 @@ pre .code-inline {
781
781
  transform: translateY(-50%) translateX(0);
782
782
  }
783
783
 
784
- /* ========== NAVIGATION MENUS ========== */
784
+ /* ========== NAVIGATION ========== */
785
785
 
786
- /* Navbar - Already defined in theme.css, but adding explicit menu variants */
786
+ nav.navbar {
787
+ position: sticky;
788
+ top: 0;
789
+ z-index: var(--z-navbar);
790
+ background: rgba(10, 10, 10, 0.95);
791
+ border-bottom: 1px solid var(--border);
792
+ backdrop-filter: blur(15px);
793
+ padding: 0;
794
+ }
795
+
796
+ .navbar-content {
797
+ max-width: 1400px;
798
+ margin: 0 auto;
799
+ padding: 1rem 2rem;
800
+ display: flex;
801
+ justify-content: space-between;
802
+ align-items: center;
803
+ gap: 2rem;
804
+ }
805
+
806
+ .navbar-logo {
807
+ font-size: 1.25rem;
808
+ font-weight: 700;
809
+ color: var(--accent);
810
+ text-decoration: none;
811
+ transition: all var(--transition-normal);
812
+ display: flex;
813
+ align-items: center;
814
+ gap: 0.5rem;
815
+ min-width: fit-content;
816
+ }
817
+
818
+ .navbar-logo:hover {
819
+ color: var(--accent-light);
820
+ transform: translateY(-2px);
821
+ }
822
+
823
+ .navbar-links {
824
+ display: flex;
825
+ gap: 1.5rem;
826
+ list-style: none;
827
+ margin: 0;
828
+ padding: 0;
829
+ align-items: center;
830
+ flex-wrap: wrap;
831
+ }
832
+
833
+ .navbar-links a {
834
+ color: var(--text-secondary);
835
+ text-decoration: none;
836
+ font-size: 0.95rem;
837
+ font-weight: 500;
838
+ transition: all var(--transition-normal);
839
+ padding: 0.5rem 0;
840
+ position: relative;
841
+ }
842
+
843
+ .navbar-links a::after {
844
+ content: '';
845
+ position: absolute;
846
+ bottom: -2px;
847
+ left: 0;
848
+ width: 0;
849
+ height: 2px;
850
+ background: var(--accent);
851
+ transition: width var(--transition-normal);
852
+ }
853
+
854
+ .navbar-links a:hover {
855
+ color: var(--accent);
856
+ }
857
+
858
+ .navbar-links a:hover::after {
859
+ width: 100%;
860
+ }
861
+
862
+ .navbar-links a.active {
863
+ color: var(--accent);
864
+ }
865
+
866
+ .navbar-links a.active::after {
867
+ width: 100%;
868
+ }
787
869
 
788
870
  /* Mobile Menu Toggle */
789
871
  .navbar-toggle {
@@ -1389,6 +1471,23 @@ pre .code-inline {
1389
1471
  right: 0;
1390
1472
  }
1391
1473
 
1474
+ /* Navbar responsive */
1475
+ .navbar-content {
1476
+ flex-direction: column;
1477
+ gap: 1rem;
1478
+ padding: 1rem;
1479
+ }
1480
+
1481
+ .navbar-links {
1482
+ gap: 1rem;
1483
+ justify-content: center;
1484
+ width: 100%;
1485
+ }
1486
+
1487
+ .navbar-links a {
1488
+ font-size: 0.9rem;
1489
+ }
1490
+
1392
1491
  .navbar-toggle {
1393
1492
  display: block;
1394
1493
  }
package/src/css/theme.css CHANGED
@@ -150,92 +150,6 @@ footer a:hover {
150
150
  color: var(--accent);
151
151
  }
152
152
 
153
- /* ========== NAVIGATION ========== */
154
-
155
- nav.navbar {
156
- position: sticky;
157
- top: 0;
158
- z-index: var(--z-navbar);
159
- background: rgba(10, 10, 10, 0.95);
160
- border-bottom: 1px solid var(--border);
161
- backdrop-filter: blur(15px);
162
- padding: 0;
163
- }
164
-
165
- .navbar-content {
166
- max-width: 1400px;
167
- margin: 0 auto;
168
- padding: 1rem 2rem;
169
- display: flex;
170
- justify-content: space-between;
171
- align-items: center;
172
- gap: 2rem;
173
- }
174
-
175
- .navbar-logo {
176
- font-size: 1.25rem;
177
- font-weight: 700;
178
- color: var(--accent);
179
- text-decoration: none;
180
- transition: all var(--transition-normal);
181
- display: flex;
182
- align-items: center;
183
- gap: 0.5rem;
184
- min-width: fit-content;
185
- }
186
-
187
- .navbar-logo:hover {
188
- color: var(--accent-light);
189
- transform: translateY(-2px);
190
- }
191
-
192
- .navbar-links {
193
- display: flex;
194
- gap: 1.5rem;
195
- list-style: none;
196
- margin: 0;
197
- padding: 0;
198
- align-items: center;
199
- flex-wrap: wrap;
200
- }
201
-
202
- .navbar-links a {
203
- color: var(--text-secondary);
204
- text-decoration: none;
205
- font-size: 0.95rem;
206
- font-weight: 500;
207
- transition: all var(--transition-normal);
208
- padding: 0.5rem 0;
209
- position: relative;
210
- }
211
-
212
- .navbar-links a::after {
213
- content: '';
214
- position: absolute;
215
- bottom: -2px;
216
- left: 0;
217
- width: 0;
218
- height: 2px;
219
- background: var(--accent);
220
- transition: width var(--transition-normal);
221
- }
222
-
223
- .navbar-links a:hover {
224
- color: var(--accent);
225
- }
226
-
227
- .navbar-links a:hover::after {
228
- width: 100%;
229
- }
230
-
231
- .navbar-links a.active {
232
- color: var(--accent);
233
- }
234
-
235
- .navbar-links a.active::after {
236
- width: 100%;
237
- }
238
-
239
153
  /* ========== SECTIONS ========== */
240
154
 
241
155
  .section {
@@ -375,22 +289,6 @@ nav.navbar {
375
289
  .grid-4 {
376
290
  grid-template-columns: 1fr;
377
291
  }
378
-
379
- .navbar-content {
380
- flex-direction: column;
381
- gap: 1rem;
382
- padding: 1rem;
383
- }
384
-
385
- .navbar-links {
386
- gap: 1rem;
387
- justify-content: center;
388
- width: 100%;
389
- }
390
-
391
- .navbar-links a {
392
- font-size: 0.9rem;
393
- }
394
292
  }
395
293
 
396
294
  /* ========== CONTENT OVERLAYS & SPECIAL EFFECTS ========== */
package/src/css/variables.css CHANGED
@@ -57,7 +57,7 @@
57
57
  --z-background: -1;
58
58
  --z-base: 0;
59
59
  --z-elevated: 1;
60
- --z-navbar: 500;
60
+ --z-navbar: 1000;
61
61
  --z-modal: 1000;
62
62
  }
63
63