@howssatoshi/quantumcss 1.10.1 → 1.11.0
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.
- package/README.md +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +130 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +56 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +303 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1879 -134
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
|
@@ -1,288 +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>Starlight Blog Template</title>
|
|
7
|
-
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<script src="../src/starlight.js"></script>
|
|
9
|
-
<style>
|
|
10
|
-
/* Theme Toggle Styling */
|
|
11
|
-
.theme-toggle {
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
width: 2.5rem;
|
|
14
|
-
height: 2.5rem;
|
|
15
|
-
border-radius: 50%;
|
|
16
|
-
transition: background 0.3s ease;
|
|
17
|
-
display: flex;
|
|
18
|
-
align-items: center;
|
|
19
|
-
justify-content: center;
|
|
20
|
-
flex-shrink: 0;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.theme-toggle:hover {
|
|
24
|
-
background: rgba(255, 255, 255, 0.1);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
html[data-theme="light"] .theme-toggle:hover {
|
|
28
|
-
background: rgba(0, 0, 0, 0.05);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.sun-icon { display: none; }
|
|
32
|
-
html[data-theme="light"] .sun-icon { display: block; }
|
|
33
|
-
html[data-theme="light"] .moon-icon { display: none; }
|
|
34
|
-
|
|
35
|
-
html[data-theme="light"] {
|
|
36
|
-
background-color: #f8fafc;
|
|
37
|
-
color: #1e293b;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
html[data-theme="light"] .text-primary,
|
|
41
|
-
html[data-theme="light"] h1,
|
|
42
|
-
html[data-theme="light"] h2,
|
|
43
|
-
html[data-theme="light"] h3,
|
|
44
|
-
html[data-theme="light"] h4 {
|
|
45
|
-
color: #0f172a !important;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
html[data-theme="light"] .text-secondary,
|
|
49
|
-
html[data-theme="light"] .text-muted,
|
|
50
|
-
html[data-theme="light"] .text-slate-300,
|
|
51
|
-
html[data-theme="light"] .prose,
|
|
52
|
-
html[data-theme="light"] .prose p {
|
|
53
|
-
color: #475569 !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
html[data-theme="light"] .glass {
|
|
57
|
-
background: rgba(255, 255, 255, 0.8) !important;
|
|
58
|
-
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
html[data-theme="light"] .starlight-card {
|
|
62
|
-
background: white;
|
|
63
|
-
border-color: #e2e8f0;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
html[data-theme="light"] .code-window {
|
|
67
|
-
background: #f1f5f9;
|
|
68
|
-
border-color: #e2e8f0;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
html[data-theme="light"] .code-window pre {
|
|
72
|
-
color: #1e293b;
|
|
73
|
-
}
|
|
74
|
-
body { background: transparent !important; }
|
|
75
|
-
nav, main, footer, section { position: relative; z-index: 1; }
|
|
76
|
-
</style>
|
|
77
|
-
</head>
|
|
78
|
-
<body class="bg-starlight-deep text-primary font-sans antialiased min-h-screen relative overflow-x-hidden">
|
|
79
|
-
|
|
80
|
-
<!-- Ambient Background Glows -->
|
|
81
|
-
<div class="starlight-stars">
|
|
82
|
-
<div class="star" style="top: 10%; left: 20%; --duration: 3s;"></div>
|
|
83
|
-
<div class="star" style="top: 30%; left: 80%; --duration: 4s;"></div>
|
|
84
|
-
<div class="star" style="top: 70%; left: 40%; --duration: 5s;"></div>
|
|
85
|
-
<div class="star" style="top: 50%; left: 10%; --duration: 3s;"></div>
|
|
86
|
-
<div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
<div class="fixed top-0 left-0 w-full h-full overflow-hidden z-n1 pointer-events-none">
|
|
90
|
-
<div class="absolute top-0 left-0 w-full h-full bg-gradient-radial from-primary opacity-10"></div>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
<!-- Navigation -->
|
|
94
|
-
<nav class="starlight-navbar">
|
|
95
|
-
<div class="container mx-auto px-6 h-24 flex items-center justify-between">
|
|
96
|
-
<div class="md:hidden hamburger-left">
|
|
97
|
-
<div class="hamburger">
|
|
98
|
-
<span></span>
|
|
99
|
-
<span></span>
|
|
100
|
-
<span></span>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="flex items-center gap-4">
|
|
104
|
-
<div class="w-8 h-8 rounded-full bg-starlight animate-pulse"></div>
|
|
105
|
-
<span class="text-xl font-bold text-gradient-starlight">
|
|
106
|
-
StarlightBlog
|
|
107
|
-
</span>
|
|
108
|
-
</div>
|
|
109
|
-
<div class="hidden md:flex items-center gap-8">
|
|
110
|
-
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">Home</a>
|
|
111
|
-
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">Articles</a>
|
|
112
|
-
<a href="#" class="text-sm font-medium hover:text-primary transition-colors">About</a>
|
|
113
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
114
|
-
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
115
|
-
<svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
116
|
-
</div>
|
|
117
|
-
<button class="btn-starlight btn-sm">Subscribe</button>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
<!-- Mobile Menu -->
|
|
122
|
-
<div class="nav-menu-mobile">
|
|
123
|
-
<ul class="nav-list vertical">
|
|
124
|
-
<li><a href="#" class="nav-link">Home</a></li>
|
|
125
|
-
<li><a href="#" class="nav-link">Articles</a></li>
|
|
126
|
-
<li><a href="#" class="nav-link">About</a></li>
|
|
127
|
-
<li class="pt-4 border-t border-white_5">
|
|
128
|
-
<button class="btn-starlight w-full py-3">Subscribe</button>
|
|
129
|
-
</li>
|
|
130
|
-
</ul>
|
|
131
|
-
</div>
|
|
132
|
-
</nav>
|
|
133
|
-
|
|
134
|
-
<!-- Main Content -->
|
|
135
|
-
<main class="container mx-auto px-6 py-24">
|
|
136
|
-
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
137
|
-
|
|
138
|
-
<!-- Article Column -->
|
|
139
|
-
<article class="lg:col-span-8 space-y-16">
|
|
140
|
-
|
|
141
|
-
<!-- Header -->
|
|
142
|
-
<header class="space-y-8">
|
|
143
|
-
<div class="flex items-center gap-4 text-sm text-secondary">
|
|
144
|
-
<span class="badge badge-primary">Technology</span>
|
|
145
|
-
<span>•</span>
|
|
146
|
-
<time datetime="2026-02-01">February 1, 2026</time>
|
|
147
|
-
<span>•</span>
|
|
148
|
-
<span>5 min read</span>
|
|
149
|
-
</div>
|
|
150
|
-
|
|
151
|
-
<h1 class="text-5xl md:text-7xl font-black leading-tight text-primary uppercase italic tracking-tighter">
|
|
152
|
-
The Future of <span class="text-gradient-starlight">UI Design</span>
|
|
153
|
-
</h1>
|
|
154
|
-
|
|
155
|
-
<div class="flex items-center gap-4 pt-4">
|
|
156
|
-
<img src="images/eric.png" alt="Eric Yang" class="w-12 h-12 rounded-full border border-accent_30">
|
|
157
|
-
<div>
|
|
158
|
-
<p class="font-bold text-primary uppercase text-xs tracking-widest">Eric Yang</p>
|
|
159
|
-
<p class="text-xs text-secondary font-medium">Frontend Architect</p>
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
</header>
|
|
163
|
-
|
|
164
|
-
<!-- Featured Image -->
|
|
165
|
-
<div class="rounded-2xl overflow-hidden glass p-1 group">
|
|
166
|
-
<div class="aspect-video bg-black_40 rounded-xl relative overflow-hidden">
|
|
167
|
-
<img src="images/starlight.jpg" alt="Starlight Aesthetics" class="w-full h-full object-cover">
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
|
|
171
|
-
<!-- Content -->
|
|
172
|
-
<div class="prose max-w-none text-slate-300 text-lg leading-relaxed space-y-10">
|
|
173
|
-
<p class="text-2xl text-primary font-medium">
|
|
174
|
-
Glassmorphism, neon glows, and deep gradients are making a comeback. Powered by modern CSS, they create an immersive experience.
|
|
175
|
-
</p>
|
|
176
|
-
|
|
177
|
-
<div class="space-y-6">
|
|
178
|
-
<h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter flex items-center gap-4">
|
|
179
|
-
<span class="w-2 h-10 bg-starlight rounded-full shadow-[0_0_15px_rgba(0,212,255,0.5)]"></span>
|
|
180
|
-
The Starlight Paradigm
|
|
181
|
-
</h2>
|
|
182
|
-
<p>
|
|
183
|
-
The "Starlight" aesthetic combines the ethereal beauty of space with the precision of modern interface design.
|
|
184
|
-
</p>
|
|
185
|
-
</div>
|
|
186
|
-
|
|
187
|
-
<div class="glass p-8 rounded-2xl border-accent bg-accent_5 italic text-xl text-primary">
|
|
188
|
-
"Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
|
|
189
|
-
</div>
|
|
190
|
-
|
|
191
|
-
<div class="space-y-6">
|
|
192
|
-
<h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter">Code Interface</h2>
|
|
193
|
-
<div class="code-window">
|
|
194
|
-
<div class="code-window-header">
|
|
195
|
-
<div class="code-window-controls">
|
|
196
|
-
<div class="code-window-dot bg-red-500"></div>
|
|
197
|
-
<div class="code-window-dot bg-yellow-500"></div>
|
|
198
|
-
<div class="code-window-dot bg-green-500"></div>
|
|
199
|
-
</div>
|
|
200
|
-
<span class="code-window-title">quantum.config.json</span>
|
|
201
|
-
</div>
|
|
202
|
-
<pre class="p-8 text-sm overflow-x-auto bg-white_5"><code>{
|
|
203
|
-
"theme": {
|
|
204
|
-
"extend": {
|
|
205
|
-
"colors": {
|
|
206
|
-
"starlight": "#00d4ff"
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}</code></pre>
|
|
211
|
-
</div>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<!-- Tags -->
|
|
216
|
-
<div class="flex flex-wrap gap-2 pt-8 mt-12">
|
|
217
|
-
<span class="text-muted text-sm mr-2">Tags:</span>
|
|
218
|
-
<a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">CSS</a>
|
|
219
|
-
<a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">Design</a>
|
|
220
|
-
<a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">QuantumCSS</a>
|
|
221
|
-
</div>
|
|
222
|
-
|
|
223
|
-
</article>
|
|
224
|
-
|
|
225
|
-
<!-- Sidebar -->
|
|
226
|
-
<aside class="lg:col-span-4 space-y-8">
|
|
227
|
-
|
|
228
|
-
<!-- Author Card -->
|
|
229
|
-
<div class="starlight-card">
|
|
230
|
-
<h3 class="text-lg font-bold mb-4 text-white">About the Author</h3>
|
|
231
|
-
<p class="text-secondary text-sm mb-4">
|
|
232
|
-
Eric is a frontend wizard obsessed with making the web feel more organic and alive.
|
|
233
|
-
</p>
|
|
234
|
-
<button class="btn btn-outline w-full h-12 text-sm">Follow</button>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<!-- Newsletter -->
|
|
238
|
-
<div class="glass p-6 rounded-2xl glow-blue border border-white_5">
|
|
239
|
-
<h3 class="text-lg font-bold mb-2 text-primary">Join the Newsletter</h3>
|
|
240
|
-
<p class="text-secondary text-sm mb-4">Get the latest design trends delivered to your inbox.</p>
|
|
241
|
-
<form class="space-y-3">
|
|
242
|
-
<input type="email" placeholder="your@email.com" class="input-starlight w-full bg-black_20 border-white_10">
|
|
243
|
-
<button class="btn-starlight w-full">Subscribe</button>
|
|
244
|
-
</form>
|
|
245
|
-
</div>
|
|
246
|
-
|
|
247
|
-
<!-- Recommended -->
|
|
248
|
-
<div class="space-y-4">
|
|
249
|
-
<h3 class="text-xs font-bold text-muted uppercase tracking-wider">Recommended</h3>
|
|
250
|
-
|
|
251
|
-
<a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
|
|
252
|
-
<h4 class="font-bold text-primary group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
|
|
253
|
-
<p class="text-xs text-muted mt-1">Feb 1 • 4 min read</p>
|
|
254
|
-
</a>
|
|
255
|
-
|
|
256
|
-
<a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
|
|
257
|
-
<h4 class="font-bold text-primary group-hover:text-primary transition-colors">Modern CSS Variables</h4>
|
|
258
|
-
<p class="text-xs text-muted mt-1">Jan 28 • 8 min read</p>
|
|
259
|
-
</a>
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
</aside>
|
|
263
|
-
|
|
264
|
-
</div>
|
|
265
|
-
</main>
|
|
266
|
-
|
|
267
|
-
<!-- Footer -->
|
|
268
|
-
<footer class="starlight-footer">
|
|
269
|
-
<div class="container mx-auto px-6 py-12">
|
|
270
|
-
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
271
|
-
<div class="text-muted text-sm">
|
|
272
|
-
© 2026 StarlightBlog. Powered by QuantumCSS.
|
|
273
|
-
</div>
|
|
274
|
-
<div class="flex gap-6">
|
|
275
|
-
<a href="#" class="text-muted hover:text-primary transition-colors">Privacy</a>
|
|
276
|
-
<a href="#" class="text-muted hover:text-primary transition-colors">Terms</a>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
</footer>
|
|
281
|
-
|
|
282
|
-
<script>
|
|
283
|
-
// Theme initialization is handled automatically by starlight.js
|
|
284
|
-
// Custom template logic can go here
|
|
285
|
-
</script>
|
|
286
|
-
|
|
287
|
-
</body>
|
|
288
|
-
</html>
|