gullu-css 1.0.0 โ†’ 1.0.2

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 (3) hide show
  1. package/README.md +30 -16
  2. package/package.json +1 -1
  3. package/index.html +0 -588
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # CleanCSS Engine
1
+ # Gullu CSS Engine
2
2
 
3
3
  A blazing-fast, **zero-build** runtime utility CSS engine.
4
4
 
5
- Instead of waiting for Webpack or Vite to compile hundreds of gigabytes of node modules, **CleanCSS Engine operates entirely in the browser at runtime**. By leveraging modern browser JavaScript, CleanCSS reads your utility classes natively and injects styles dynamically. No complicated configurations. No PostCSS process. Just instantly applied styles.
5
+ Instead of waiting for Webpack or Vite to compile hundreds of gigabytes of node modules, **Gullu CSS Engine operates entirely in the browser at runtime**. By leveraging modern browser JavaScript, Gullu CSS reads your utility classes natively and injects styles dynamically. No complicated configurations. No PostCSS process. Just instantly applied styles.
6
6
 
7
7
  ## ๐Ÿš€ Features
8
8
  - **Zero Build Step:** Runs 100% in browser JS. No build pipelines.
@@ -17,10 +17,10 @@ Instead of waiting for Webpack or Vite to compile hundreds of gigabytes of node
17
17
 
18
18
  To install via npm:
19
19
  ```bash
20
- npm install clean-css-engine
20
+ npm install gullu-css
21
21
  ```
22
22
 
23
- *(Note: Replace `clean-css-engine` with the exact scoped name you push to npm).*
23
+ *(Note: Replace `gullu-css` with the exact scoped name you push to npm).*
24
24
 
25
25
  ---
26
26
 
@@ -29,26 +29,40 @@ npm install clean-css-engine
29
29
  Because it's an ES6 module, you can easily drop it into standard HTML, React, Vue, Next.js, or any modern framework.
30
30
 
31
31
  ### Vanilla JS / HTML
32
+ Browsers natively require a path to the file when using HTML ES Modules. To get that crisp `import "gullu-css"` look, you can use an **Import Map**.
33
+
32
34
  ```html
33
- <!-- Inside index.html -->
35
+ <!-- Register local NPM package in Import Map -->
36
+ <script type="importmap">
37
+ {
38
+ "imports": {
39
+ "gullu-css": "./node_modules/gullu-css/main.js"
40
+ }
41
+ }
42
+ </script>
43
+
34
44
  <script type="module">
35
- import { initEngine } from "./node_modules/clean-css-engine/main.js";
36
-
37
- // Call the engine to compile all styles
45
+ // Now you can cleanly import it exactly like you would in React!
46
+ import { initEngine } from "gullu-css";
38
47
  initEngine();
39
48
  </script>
49
+ ```
40
50
 
41
- <!-- Build interfaces instantly! -->
42
- <div class="bg-emerald-500 text-white p-6 rounded-lg shadow-lg d-flex items-center gap-4">
43
- <h1 class="text-2xl font-bold">Hello World!</h1>
44
- </div>
51
+ ### โšก Use via CDN (No NPM Required)
52
+ Don't want to use NPM at all? You can load Gullu CSS straight from `unpkg` as a module directly in your HTML!
53
+
54
+ ```html
55
+ <script type="module">
56
+ import { initEngine } from "https://unpkg.com/gullu-css@1.0.1/main.js";
57
+ initEngine();
58
+ </script>
45
59
  ```
46
60
 
47
61
  ### React / Next.js
48
62
  You can trigger the engine during page mount or context initialization:
49
63
  ```jsx
50
64
  import { useEffect } from 'react';
51
- import { initEngine } from 'clean-css-engine';
65
+ import { initEngine } from 'gullu-css';
52
66
 
53
67
  export default function App() {
54
68
  useEffect(() => {
@@ -58,7 +72,7 @@ export default function App() {
58
72
 
59
73
  return (
60
74
  <div className="bg-slate-900 w-screen h-screen d-flex items-center justify-center">
61
- <h1 className="text-4xl font-bold text-emerald-400">Powered by CleanCSS</h1>
75
+ <h1 className="text-4xl font-bold text-emerald-400">Powered by Gullu CSS</h1>
62
76
  </div>
63
77
  );
64
78
  }
@@ -68,7 +82,7 @@ export default function App() {
68
82
 
69
83
  ## ๐Ÿ“– API & Feature Reference
70
84
 
71
- Below is a complete reference of the modules and utility classes processed by CleanCSS:
85
+ Below is a complete reference of the modules and utility classes processed by Gullu CSS:
72
86
 
73
87
  ### 1. Typography
74
88
  Control all text styling properties with simple prefixes.
@@ -122,7 +136,7 @@ Sometimes you need to escape the token system. Whenever that happens, cleanly us
122
136
  ---
123
137
 
124
138
  ## โš™๏ธ Architecture Core
125
- CleanCSS is built to be maximally performant at runtime. When `initEngine()` runs, it gathers the DOM layer into `document.querySelectorAll("[class]")` and iterates through standard HTML classes mapping directly up to our array of isolated rule tests (located in cleanly decoupled feature files: `layout.js`, `typography.js`, etc.). If a rule hits dynamically, it instantly overrides the element's inline `.style`, avoiding reflow latency whenever feasible.
139
+ Gullu CSS is built to be maximally performant at runtime. When `initEngine()` runs, it gathers the DOM layer into `document.querySelectorAll("[class]")` and iterates through standard HTML classes mapping directly up to our array of isolated rule tests (located in cleanly decoupled feature files: `layout.js`, `typography.js`, etc.). If a rule hits dynamically, it instantly overrides the element's inline `.style`, avoiding reflow latency whenever feasible.
126
140
 
127
141
  ---
128
142
  ### Building the Future of Styling.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gullu-css",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A zero-build, ultra-fast runtime utility CSS engine.",
5
5
  "main": "main.js",
6
6
  "type": "module",
package/index.html DELETED
@@ -1,588 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CleanCSS โ€” Utility Engine Docs</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
10
- <style>
11
- /* Minimal browser reset only โ€” zero design CSS here */
12
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
13
- body { font-family: 'Plus Jakarta Sans', sans-serif; }
14
- code, pre { font-family: 'JetBrains Mono', monospace; }
15
- a { text-decoration: none; color: inherit; }
16
-
17
- /* Scroll behavior */
18
- html { scroll-behavior: smooth; }
19
-
20
- /* Sticky top helper */
21
- .sticky-nav { position: sticky; top: 0; z-index: 100; }
22
-
23
- /* Accent glow using box-shadow โ€” allowed as its a browser enhancement */
24
- .glow-green { box-shadow: 0 0 32px 0 rgba(52,211,153,0.20); }
25
- .glow-green-sm { box-shadow: 0 0 12px 0 rgba(52,211,153,0.25); }
26
-
27
- /* Code block scroll */
28
- .code-scroll { overflow-x: auto; white-space: pre; }
29
-
30
- /* Sidebar fixed layout */
31
- .layout-wrapper { display: flex; align-items: flex-start; }
32
- .sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
33
- .main-content { flex: 1; min-width: 0; }
34
-
35
- /* Nav link states */
36
- .sidebar-link { display: block; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s; }
37
- .sidebar-link:hover { background: rgba(52,211,153,0.1); color: #34d399; }
38
- .sidebar-link.active { background: rgba(52,211,153,0.15); color: #34d399; font-weight: 600; }
39
-
40
- /* Token grid */
41
- .token-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; transition: background 0.15s; }
42
- .token-row:hover { background: rgba(255,255,255,0.04); }
43
-
44
- /* Copy button */
45
- .copy-btn { position: absolute; top: 12px; right: 12px; cursor: pointer; border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); color: #34d399; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.2s, color 0.2s; }
46
- .copy-btn:hover { background: rgba(52,211,153,0.2); }
47
- .copy-btn.copied { background: rgba(52,211,153,0.3); color: #fff; }
48
- </style>
49
- </head>
50
- <body class="bg-slate-950">
51
-
52
- <!-- โ”€โ”€โ”€ NAVBAR โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
53
- <nav class="sticky-nav bg-slate-900 shadow-md">
54
- <div class="d-flex items-center justify-between p-4 pl-8 pr-8 w-full">
55
- <!-- Logo -->
56
- <div class="d-flex items-center gap-4">
57
- <div class="w-10 h-10 rounded-lg bg-emerald-500 d-flex items-center justify-center glow-green-sm">
58
- <span class="text-white font-bold text-base">C</span>
59
- </div>
60
- <span class="text-xl font-bold text-white">Clean<span class="text-emerald-400">CSS</span></span>
61
- <span class="text-xs font-medium text-emerald-400 bg-emerald-400 rounded-full pl-2 pr-2" style="background:rgba(52,211,153,0.12); padding-top:3px; padding-bottom:3px;">v2.0</span>
62
- </div>
63
- <!-- Nav Links -->
64
- <div class="d-flex gap-6 items-center">
65
- <a href="#backgrounds" class="text-gray-500 font-medium cursor-pointer transition text-sm">Backgrounds</a>
66
- <a href="#layout" class="text-gray-500 font-medium cursor-pointer transition text-sm">Layout</a>
67
- <a href="#images" class="text-gray-500 font-medium cursor-pointer transition text-sm">Images</a>
68
- <a href="#typography" class="text-gray-500 font-medium cursor-pointer transition text-sm">Typography</a>
69
- </div>
70
- </div>
71
- </nav>
72
-
73
- <!-- โ”€โ”€โ”€ HERO โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
74
- <div class="bg-slate-900 p-16" style="padding-top:80px; padding-bottom:80px; text-align:center;">
75
- <div class="d-flex flex-col items-center gap-4 max-w-lg m-auto">
76
- <div class="d-inline-flex items-center gap-2 rounded-full p-1 pl-4 pr-4" style="background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25);">
77
- <span class="w-2 h-2 rounded-full bg-emerald-400" style="display:inline-block"></span>
78
- <span class="text-emerald-400 text-sm font-medium">Utility-First CSS Engine</span>
79
- </div>
80
- <h1 class="text-5xl font-bold text-white" style="line-height:1.15; margin-top: 12px;">
81
- Style with classes.<br>
82
- <span class="text-emerald-400">Zero stylesheet.</span>
83
- </h1>
84
- <p class="text-gray-500 font-medium" style="max-width:520px; line-height:1.7; margin-top:8px; font-size:17px;">
85
- CleanCSS is a runtime utility engine that reads class names directly
86
- and applies styles in JavaScript โ€” no build step, no stylesheet, no framework required.
87
- </p>
88
- <!-- Stats -->
89
- <div class="d-flex gap-8 m-auto" style="margin-top: 40px;">
90
- <div class="text-center">
91
- <div class="text-3xl font-bold text-emerald-400">200+</div>
92
- <div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">Color Tokens</div>
93
- </div>
94
- <div class="text-center">
95
- <div class="text-3xl font-bold text-emerald-400">7</div>
96
- <div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">Core Modules</div>
97
- </div>
98
- <div class="text-center">
99
- <div class="text-3xl font-bold text-emerald-400">0</div>
100
- <div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">CSS Files</div>
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
-
106
- <!-- โ”€โ”€โ”€ PAGE LAYOUT โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
107
- <div class="layout-wrapper max-w-lg m-auto" style="padding-left:16px; padding-right:16px; gap: 32px;">
108
-
109
- <!-- Sidebar -->
110
- <aside class="sidebar p-6" style="padding-top:32px;">
111
- <p class="text-gray-500 text-xs font-bold" style="text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px;">Documentation</p>
112
- <a href="#backgrounds" class="sidebar-link text-gray-500 text-sm">๐ŸŽจ Background Colors</a>
113
- <a href="#typography" class="sidebar-link text-gray-500 text-sm">โœ๏ธ Typography</a>
114
- <a href="#layout" class="sidebar-link text-gray-500 text-sm">๐Ÿ“ Layout & Flex</a>
115
- <a href="#spacing" class="sidebar-link text-gray-500 text-sm">๐Ÿ“ Spacing</a>
116
- <a href="#sizing" class="sidebar-link text-gray-500 text-sm">๐Ÿ“ฆ Sizing & Borders</a>
117
- <a href="#images" class="sidebar-link text-gray-500 text-sm">๐Ÿ–ผ Image Engine</a>
118
- <a href="#effects" class="sidebar-link text-gray-500 text-sm">โœจ Effects</a>
119
- <a href="#arbitrary" class="sidebar-link text-gray-500 text-sm">โšก Arbitrary Values</a>
120
- </aside>
121
-
122
- <!-- Main Content -->
123
- <main class="main-content" style="padding: 32px 0 80px 0;">
124
-
125
- <!-- โ”€โ”€ SECTION: Backgrounds โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
126
- <section id="backgrounds" style="margin-bottom: 72px;">
127
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
128
- <span class="text-2xl">๐ŸŽจ</span>
129
- <h2 class="text-3xl font-bold text-white">Background Colors</h2>
130
- </div>
131
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Apply background colors using semantic tokens. The engine maps every class to an <span class="text-emerald-400 font-bold">oklch</span> value for perceptual uniformity.</p>
132
-
133
- <!-- Code Block -->
134
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
135
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
136
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
137
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
138
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
139
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
140
- </div>
141
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Standard semantic colors --&gt;
142
- &lt;div class="<span style="color:#34d399">bg-emerald-500</span>"&gt;&lt;/div&gt;
143
- &lt;div class="<span style="color:#34d399">bg-blue-700</span>"&gt;&lt;/div&gt;
144
- &lt;div class="<span style="color:#34d399">bg-red-300</span>"&gt;&lt;/div&gt;
145
- &lt;div class="<span style="color:#34d399">bg-slate-900</span>"&gt;&lt;/div&gt;
146
-
147
- &lt;!-- Special values --&gt;
148
- &lt;div class="<span style="color:#34d399">bg-white</span>"&gt;&lt;/div&gt;
149
- &lt;div class="<span style="color:#34d399">bg-black</span>"&gt;&lt;/div&gt;
150
- &lt;div class="<span style="color:#34d399">bg-transparent</span>"&gt;&lt;/div&gt;</pre>
151
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
152
- </div>
153
-
154
- <!-- Color Swatches -->
155
- <p class="text-gray-500 text-sm font-medium" style="margin-bottom:12px;">Available color palettes:</p>
156
- <div class="d-flex flex-wrap gap-3" style="margin-bottom:16px;">
157
- <div class="w-10 h-10 rounded-md bg-emerald-400 shadow-md glow-green-sm" title="emerald-400"></div>
158
- <div class="w-10 h-10 rounded-md bg-emerald-500 shadow-md" title="emerald-500"></div>
159
- <div class="w-10 h-10 rounded-md bg-emerald-700 shadow-md" title="emerald-700"></div>
160
- <div class="w-10 h-10 rounded-md bg-teal-500 shadow-md" title="teal-500"></div>
161
- <div class="w-10 h-10 rounded-md bg-blue-400 shadow-md" title="blue-400"></div>
162
- <div class="w-10 h-10 rounded-md bg-blue-600 shadow-md" title="blue-600"></div>
163
- <div class="w-10 h-10 rounded-md bg-sky-500 shadow-md" title="sky-500"></div>
164
- <div class="w-10 h-10 rounded-md bg-violet-500 shadow-md" title="violet-500" style="background: oklch(60.6% 0.25 292.717)"></div>
165
- <div class="w-10 h-10 rounded-md bg-red-500 shadow-md" title="red-500"></div>
166
- <div class="w-10 h-10 rounded-md bg-orange-500 shadow-md" title="orange-500"></div>
167
- <div class="w-10 h-10 rounded-md bg-amber-400 shadow-md" title="amber-400"></div>
168
- <div class="w-10 h-10 rounded-md bg-yellow-400 shadow-md" title="yellow-400"></div>
169
- <div class="w-10 h-10 rounded-md bg-slate-500 shadow-md" title="slate-500"></div>
170
- <div class="w-10 h-10 rounded-md bg-gray-500 shadow-md" title="gray-500"></div>
171
- <div class="w-10 h-10 rounded-md bg-zinc-800 shadow-md" title="zinc-800"></div>
172
- </div>
173
- <div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
174
- <p class="text-emerald-400 text-sm font-bold" style="margin-bottom:4px;">๐Ÿ’ก Scale</p>
175
- <p class="text-gray-500 text-sm">Each color family (red, blue, green, slate, etc.) has 11 shades: <span class="text-white">50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950</span></p>
176
- </div>
177
- </section>
178
-
179
-
180
-
181
- <!-- โ”€โ”€ SECTION: Typography โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
182
- <section id="typography" style="margin-bottom: 72px;">
183
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
184
- <span class="text-2xl">โœ๏ธ</span>
185
- <h2 class="text-3xl font-bold text-white">Typography</h2>
186
- </div>
187
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control font size, weight, color and alignment using class prefixes.</p>
188
-
189
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
190
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
191
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
192
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
193
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
194
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
195
- </div>
196
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Font sizes --&gt;
197
- &lt;h1 class="<span style="color:#34d399">text-6xl font-bold</span>"&gt;Huge Heading&lt;/h1&gt;
198
- &lt;h2 class="<span style="color:#34d399">text-3xl font-bold</span>"&gt;Section Title&lt;/h2&gt;
199
- &lt;p class="<span style="color:#34d399">text-base font-medium</span>"&gt;Body text&lt;/p&gt;
200
- &lt;small class="<span style="color:#34d399">text-sm</span>"&gt;Small label&lt;/small&gt;
201
-
202
- &lt;!-- Text colors --&gt;
203
- &lt;span class="<span style="color:#34d399">text-white</span>"&gt;White&lt;/span&gt;
204
- &lt;span class="<span style="color:#34d399">text-gray</span>"&gt;Gray&lt;/span&gt;
205
- &lt;span class="<span style="color:#34d399">text-blue-500</span>"&gt;Blue 500&lt;/span&gt;
206
-
207
- &lt;!-- Alignment --&gt;
208
- &lt;p class="<span style="color:#34d399">text-center</span>"&gt;Centered&lt;/p&gt;
209
- &lt;p class="<span style="color:#34d399">text-right</span>"&gt;Right-aligned&lt;/p&gt;</pre>
210
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
211
- </div>
212
-
213
- <!-- Live demos -->
214
- <div class="rounded-xl bg-slate-900 p-8 shadow-md d-flex flex-col gap-4" style="border:1px solid rgba(255,255,255,0.06);">
215
- <span class="text-white font-bold" style="font-size:48px; line-height:1;">text-5xl</span>
216
- <span class="text-white font-bold" style="font-size:30px;">text-3xl</span>
217
- <span class="text-white font-bold" style="font-size:20px;">text-xl</span>
218
- <span class="text-white" style="font-size:16px;">text-base โ€” Regular paragraph</span>
219
- <span class="text-gray-500" style="font-size:14px;">text-sm text-gray-500 โ€” Muted metadata</span>
220
- </div>
221
-
222
- <!-- Size table -->
223
- <div class="rounded-lg p-4 d-flex flex-col gap-2" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15); margin-top:16px;">
224
- <p class="text-emerald-400 text-sm font-bold" style="margin-bottom:6px;">Size Scale</p>
225
- <div class="d-flex flex-wrap gap-2">
226
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-xs (12px)</span>
227
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-sm (12px)</span>
228
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-base (16px)</span>
229
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-lg (18px)</span>
230
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-xl (20px)</span>
231
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-2xl (24px)</span>
232
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-4xl (36px)</span>
233
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-6xl (60px)</span>
234
- </div>
235
- </div>
236
- </section>
237
-
238
- <!-- โ”€โ”€ SECTION: Layout โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
239
- <section id="layout" style="margin-bottom: 72px;">
240
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
241
- <span class="text-2xl">๐Ÿ“</span>
242
- <h2 class="text-3xl font-bold text-white">Layout & Flexbox</h2>
243
- </div>
244
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Construct flexible layouts using display, direction, wrapping, and alignment class prefixes.</p>
245
-
246
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
247
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
248
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
249
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
250
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
251
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
252
- </div>
253
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Flex container --&gt;
254
- &lt;div class="<span style="color:#34d399">d-flex items-center justify-between gap-4</span>"&gt;
255
- &lt;div&gt;Left&lt;/div&gt;
256
- &lt;div&gt;Right&lt;/div&gt;
257
- &lt;/div&gt;
258
-
259
- &lt;!-- Column layout --&gt;
260
- &lt;div class="<span style="color:#34d399">d-flex flex-col gap-6</span>"&gt;
261
- &lt;div&gt;Item 1&lt;/div&gt;
262
- &lt;div&gt;Item 2&lt;/div&gt;
263
- &lt;/div&gt;
264
-
265
- &lt;!-- Wrapping --&gt;
266
- &lt;div class="<span style="color:#34d399">d-flex flex-wrap gap-4</span>"&gt; ... &lt;/div&gt;</pre>
267
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
268
- </div>
269
-
270
- <div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
271
- <p class="text-emerald-400 text-sm font-bold" style="margin-bottom:8px;">Reference</p>
272
- <div class="d-flex flex-col gap-2">
273
- <div class="token-row">
274
- <code class="text-emerald-400 text-xs">d-flex</code>
275
- <span class="text-gray-500 text-xs">โ†’ display: flex</span>
276
- </div>
277
- <div class="token-row">
278
- <code class="text-emerald-400 text-xs">d-inline-flex</code>
279
- <span class="text-gray-500 text-xs">โ†’ display: inline-flex</span>
280
- </div>
281
- <div class="token-row">
282
- <code class="text-emerald-400 text-xs">flex-col / flex-row</code>
283
- <span class="text-gray-500 text-xs">โ†’ flex-direction</span>
284
- </div>
285
- <div class="token-row">
286
- <code class="text-emerald-400 text-xs">items-center / items-start / items-end</code>
287
- <span class="text-gray-500 text-xs">โ†’ align-items</span>
288
- </div>
289
- <div class="token-row">
290
- <code class="text-emerald-400 text-xs">justify-center / justify-between / justify-around</code>
291
- <span class="text-gray-500 text-xs">โ†’ justify-content</span>
292
- </div>
293
- <div class="token-row">
294
- <code class="text-emerald-400 text-xs">flex-wrap / flex-nowrap</code>
295
- <span class="text-gray-500 text-xs">โ†’ flex-wrap</span>
296
- </div>
297
- <div class="token-row">
298
- <code class="text-emerald-400 text-xs">gap-4 / gap-8</code>
299
- <span class="text-gray-500 text-xs">โ†’ gap (mapped via spacing tokens)</span>
300
- </div>
301
- </div>
302
- </div>
303
- </section>
304
-
305
- <!-- โ”€โ”€ SECTION: Spacing โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
306
- <section id="spacing" style="margin-bottom: 72px;">
307
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
308
- <span class="text-2xl">๐Ÿ“</span>
309
- <h2 class="text-3xl font-bold text-white">Spacing</h2>
310
- </div>
311
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control padding and margin with directional shorthand. All values map through the spacing token registry.</p>
312
-
313
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
314
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
315
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
316
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
317
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
318
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
319
- </div>
320
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- All sides --&gt;
321
- &lt;div class="<span style="color:#34d399">p-4</span>"&gt; ... &lt;/div&gt; &lt;!-- padding: 16px --&gt;
322
- &lt;div class="<span style="color:#34d399">m-8</span>"&gt; ... &lt;/div&gt; &lt;!-- margin: 32px --&gt;
323
-
324
- &lt;!-- Per side --&gt;
325
- &lt;div class="<span style="color:#34d399">pt-4 pb-6 pl-8 pr-2</span>"&gt; ... &lt;/div&gt;
326
- &lt;div class="<span style="color:#34d399">mt-4 mb-12</span>"&gt; ... &lt;/div&gt;</pre>
327
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
328
- </div>
329
-
330
- <div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
331
- <p class="text-emerald-400 text-sm font-bold" style="margin-bottom:8px;">Spacing Scale (px)</p>
332
- <div class="d-flex flex-wrap gap-2">
333
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">0 โ†’ 0px</span>
334
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">1 โ†’ 4px</span>
335
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">2 โ†’ 8px</span>
336
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">3 โ†’ 12px</span>
337
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">4 โ†’ 16px</span>
338
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">6 โ†’ 24px</span>
339
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">8 โ†’ 32px</span>
340
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">12 โ†’ 48px</span>
341
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">16 โ†’ 64px</span>
342
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">20 โ†’ 80px</span>
343
- <span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">24 โ†’ 96px</span>
344
- </div>
345
- </div>
346
- </section>
347
-
348
- <!-- โ”€โ”€ SECTION: Sizing & Borders โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
349
- <section id="sizing" style="margin-bottom: 72px;">
350
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
351
- <span class="text-2xl">๐Ÿ“ฆ</span>
352
- <h2 class="text-3xl font-bold text-white">Sizing & Borders</h2>
353
- </div>
354
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Set element dimensions and control border radius, width, and color via utility classes.</p>
355
-
356
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
357
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
358
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
359
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
360
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
361
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
362
- </div>
363
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Width & Height --&gt;
364
- &lt;div class="<span style="color:#34d399">w-full h-32</span>"&gt; ... &lt;/div&gt;
365
- &lt;div class="<span style="color:#34d399">w-screen h-screen</span>"&gt; ... &lt;/div&gt;
366
- &lt;div class="<span style="color:#34d399">max-w-lg m-auto</span>"&gt; ... &lt;/div&gt;
367
-
368
- &lt;!-- Border Radius --&gt;
369
- &lt;div class="<span style="color:#34d399">rounded-sm</span>"&gt;&lt;/div&gt; &lt;!-- 4px --&gt;
370
- &lt;div class="<span style="color:#34d399">rounded-lg</span>"&gt;&lt;/div&gt; &lt;!-- 12px --&gt;
371
- &lt;div class="<span style="color:#34d399">rounded-full</span>"&gt;&lt;/div&gt; &lt;!-- 9999px --&gt;
372
-
373
- &lt;!-- Borders --&gt;
374
- &lt;div class="<span style="color:#34d399">border-2 border-emerald-500 rounded-md</span>"&gt;&lt;/div&gt;</pre>
375
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
376
- </div>
377
-
378
- <!-- Live border demo -->
379
- <div class="d-flex gap-4 flex-wrap" style="margin-bottom:16px;">
380
- <div class="w-16 h-16 bg-slate-800 rounded-sm d-flex items-center justify-center">
381
- <span class="text-emerald-400 text-xs font-bold">sm</span>
382
- </div>
383
- <div class="w-16 h-16 bg-slate-800 rounded-md d-flex items-center justify-center">
384
- <span class="text-emerald-400 text-xs font-bold">md</span>
385
- </div>
386
- <div class="w-16 h-16 bg-slate-800 rounded-lg d-flex items-center justify-center">
387
- <span class="text-emerald-400 text-xs font-bold">lg</span>
388
- </div>
389
- <div class="w-16 h-16 bg-slate-800 rounded-xl d-flex items-center justify-center">
390
- <span class="text-emerald-400 text-xs font-bold">xl</span>
391
- </div>
392
- <div class="w-16 h-16 bg-slate-800 rounded-full d-flex items-center justify-center">
393
- <span class="text-emerald-400 text-xs font-bold">full</span>
394
- </div>
395
- <div class="w-20 h-16 bg-slate-900 rounded-lg d-flex items-center justify-center" style="border: 2px solid rgba(52,211,153,0.5);">
396
- <span class="text-emerald-400 text-xs font-bold">border</span>
397
- </div>
398
- </div>
399
- </section>
400
-
401
- <!-- โ”€โ”€ SECTION: Image Engine โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
402
- <section id="images" style="margin-bottom: 72px;">
403
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
404
- <span class="text-2xl">๐Ÿ–ผ</span>
405
- <h2 class="text-3xl font-bold text-white">Image Engine</h2>
406
- </div>
407
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control background images, sizing, positioning, and object-fit for native img elements โ€” all via utility class names.</p>
408
-
409
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
410
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
411
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
412
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
413
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
414
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
415
- </div>
416
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Background Image (arbitrary URL) --&gt;
417
- &lt;div class="<span style="color:#34d399">bg-[url('https://example.com/photo.jpg')] bg-cover bg-center</span>"
418
- style="height:200px"&gt;
419
- &lt;/div&gt;
420
-
421
- &lt;!-- Object Fit for &lt;img&gt; elements --&gt;
422
- &lt;img class="<span style="color:#34d399">object-cover object-center</span>" src="..." /&gt;
423
- &lt;img class="<span style="color:#34d399">object-contain</span>" src="..." /&gt;
424
-
425
- &lt;!-- Background Size and Position --&gt;
426
- &lt;div class="<span style="color:#34d399">bg-cover bg-top bg-no-repeat</span>"&gt;&lt;/div&gt;
427
- &lt;div class="<span style="color:#34d399">bg-auto bg-center bg-repeat</span>"&gt;&lt;/div&gt;</pre>
428
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
429
- </div>
430
-
431
- <!-- Live Image demo -->
432
- <div class="d-flex gap-4 w-full" style="margin-bottom:16px; height:220px;">
433
- <div class="rounded-xl shadow-lg glow-green" style="flex:1; background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&auto=format'); background-size:cover; background-position:center;">
434
- </div>
435
- <div class="rounded-xl bg-slate-900 p-6 d-flex flex-col justify-center shadow-md" style="flex:1; border:1px solid rgba(255,255,255,0.06);">
436
- <div class="d-flex flex-col gap-3">
437
- <div><code class="text-emerald-400 text-xs">bg-cover</code> <span class="text-gray-500 text-xs">โ†’ background-size: cover</span></div>
438
- <div><code class="text-emerald-400 text-xs">bg-contain</code> <span class="text-gray-500 text-xs">โ†’ background-size: contain</span></div>
439
- <div><code class="text-emerald-400 text-xs">bg-center</code> <span class="text-gray-500 text-xs">โ†’ background-position: center</span></div>
440
- <div><code class="text-emerald-400 text-xs">bg-no-repeat</code> <span class="text-gray-500 text-xs">โ†’ background-repeat: no-repeat</span></div>
441
- <div><code class="text-emerald-400 text-xs">object-cover</code> <span class="text-gray-500 text-xs">โ†’ object-fit: cover</span></div>
442
- </div>
443
- </div>
444
- </div>
445
- </section>
446
-
447
- <!-- โ”€โ”€ SECTION: Effects โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
448
- <section id="effects" style="margin-bottom: 72px;">
449
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
450
- <span class="text-2xl">โœจ</span>
451
- <h2 class="text-3xl font-bold text-white">Effects & Misc</h2>
452
- </div>
453
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Shadows, transitions, opacity, overflow and cursor utilities for interaction effects.</p>
454
-
455
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
456
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
457
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
458
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
459
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
460
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
461
- </div>
462
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Shadows --&gt;
463
- &lt;div class="<span style="color:#34d399">shadow-sm</span>"&gt; subtle &lt;/div&gt;
464
- &lt;div class="<span style="color:#34d399">shadow-md</span>"&gt; normal &lt;/div&gt;
465
- &lt;div class="<span style="color:#34d399">shadow-lg</span>"&gt; pronounced &lt;/div&gt;
466
-
467
- &lt;!-- Opacity --&gt;
468
- &lt;div class="<span style="color:#34d399">opacity-50</span>"&gt;50%&lt;/div&gt;
469
- &lt;div class="<span style="color:#34d399">opacity-75</span>"&gt;75%&lt;/div&gt;
470
-
471
- &lt;!-- Cursor & Overflow --&gt;
472
- &lt;button class="<span style="color:#34d399">cursor-pointer transition</span>"&gt;Click me&lt;/button&gt;
473
- &lt;div class="<span style="color:#34d399">overflow-hidden</span>"&gt; ... &lt;/div&gt;</pre>
474
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
475
- </div>
476
-
477
- <div class="d-flex gap-4 flex-wrap" style="margin-bottom:16px;">
478
- <div class="rounded-xl bg-slate-800 p-6 shadow-sm d-flex items-center justify-center">
479
- <span class="text-white text-sm font-medium">shadow-sm</span>
480
- </div>
481
- <div class="rounded-xl bg-slate-800 p-6 shadow-md d-flex items-center justify-center">
482
- <span class="text-white text-sm font-medium">shadow-md</span>
483
- </div>
484
- <div class="rounded-xl bg-slate-800 p-6 shadow-lg d-flex items-center justify-center">
485
- <span class="text-white text-sm font-medium">shadow-lg</span>
486
- </div>
487
- </div>
488
- </section>
489
-
490
- <!-- โ”€โ”€ SECTION: Arbitrary Values โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
491
- <section id="arbitrary" style="margin-bottom: 72px;">
492
- <div class="d-flex items-center gap-3" style="margin-bottom:8px;">
493
- <span class="text-2xl">โšก</span>
494
- <h2 class="text-3xl font-bold text-white">Arbitrary Values</h2>
495
- </div>
496
- <p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Break out of the token system for one-off values using bracket <span class="text-emerald-400">[ ]</span> syntax. Works for colors, URLs, gradients and sizes.</p>
497
-
498
- <div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
499
- <div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
500
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
501
- <div class="w-3 h-3 rounded-full bg-amber-400"></div>
502
- <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
503
- <span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
504
- </div>
505
- <pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;">&lt;!-- Arbitrary background color --&gt;
506
- &lt;div class="<span style="color:#34d399">bg-[#ff6b6b]</span>"&gt;&lt;/div&gt;
507
- &lt;div class="<span style="color:#34d399">bg-[oklch(65%_0.2_145)]</span>"&gt;&lt;/div&gt;
508
-
509
- &lt;!-- Arbitrary text size --&gt;
510
- &lt;p class="<span style="color:#34d399">text-[35px]</span>"&gt;Custom size&lt;/p&gt;
511
-
512
- &lt;!-- Arbitrary background image --&gt;
513
- &lt;div class="<span style="color:#34d399">bg-[url('https://example.com/bg.jpg')]</span>"&gt;&lt;/div&gt;
514
-
515
- &lt;!-- CSS Variables --&gt;
516
- &lt;style&gt;:root { --brand: #34d399; }&lt;/style&gt;
517
- &lt;div class="<span style="color:#34d399">bg-(--brand)</span>"&gt;&lt;/div&gt;</pre>
518
- <button class="copy-btn" onclick="copyCode(this)">Copy</button>
519
- </div>
520
-
521
- <!-- Demos -->
522
- <div class="d-flex flex-wrap gap-3" style="margin-bottom:16px;">
523
- <div class="w-20 h-20 rounded-lg bg-[#ff6b6b] shadow-md d-flex items-center justify-center">
524
- <span class="text-white text-xs font-bold">#ff6b6b</span>
525
- </div>
526
- <div class="w-20 h-20 rounded-lg bg-[#6c5ce7] shadow-md d-flex items-center justify-center">
527
- <span class="text-white text-xs font-bold">#6c5ce7</span>
528
- </div>
529
- <div class="w-20 h-20 rounded-lg bg-[#00cec9] shadow-md d-flex items-center justify-center">
530
- <span class="text-white text-xs font-bold">#00cec9</span>
531
- </div>
532
- <div class="w-20 h-20 rounded-lg bg-[#fdcb6e] shadow-md d-flex items-center justify-center">
533
- <span class="text-white text-xs font-bold">#fdcb6e</span>
534
- </div>
535
- </div>
536
- </section>
537
-
538
- </main>
539
- </div>
540
-
541
- <!-- โ”€โ”€โ”€ FOOTER โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -->
542
- <div class="bg-slate-900 w-full" style="border-top: 1px solid rgba(255,255,255,0.06);">
543
- <div class="max-w-lg m-auto p-8 d-flex items-center justify-between">
544
- <div class="d-flex items-center gap-3">
545
- <div class="w-8 h-8 rounded-lg bg-emerald-500 d-flex items-center justify-center">
546
- <span class="text-white font-bold text-xs">C</span>
547
- </div>
548
- <span class="text-white font-bold">CleanCSS</span>
549
- <span class="text-gray-500 text-sm">v2.0</span>
550
- </div>
551
- <p class="text-gray-500 text-sm font-medium">Built with Custom Utility Engine &copy; 2026 ยท Zero raw CSS.</p>
552
- </div>
553
- </div>
554
-
555
- <script type="module">
556
- import { initEngine } from "./main.js";
557
- initEngine();
558
- </script>
559
- <script>
560
- function copyCode(btn) {
561
- const pre = btn.previousElementSibling;
562
- const text = pre.innerText;
563
- navigator.clipboard.writeText(text).then(() => {
564
- btn.textContent = 'Copied!';
565
- btn.classList.add('copied');
566
- setTimeout(() => {
567
- btn.textContent = 'Copy';
568
- btn.classList.remove('copied');
569
- }, 2000);
570
- });
571
- }
572
-
573
- // Active sidebar link on scroll
574
- const sections = document.querySelectorAll('section[id]');
575
- const links = document.querySelectorAll('.sidebar-link');
576
- window.addEventListener('scroll', () => {
577
- let current = '';
578
- sections.forEach(sec => {
579
- if (window.scrollY >= sec.offsetTop - 120) current = sec.id;
580
- });
581
- links.forEach(link => {
582
- link.classList.remove('active');
583
- if (link.getAttribute('href') === '#' + current) link.classList.add('active');
584
- });
585
- });
586
- </script>
587
- </body>
588
- </html>