@howssatoshi/quantumcss 1.4.1 → 1.4.3
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/dist/quantum.min.css +4678 -1
- package/examples/blog-template.html +282 -0
- package/examples/gaming-template.html +375 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +141 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +333 -0
- 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 +344 -0
- package/examples/starlight.html +174 -0
- package/examples/travel/index.html +267 -0
- package/examples/verify_fixes.html +51 -0
- package/examples/verify_presets.html +31 -0
- package/package.json +2 -1
- package/src/defaults.js +4 -0
- package/src/generator.js +26 -4
- package/src/starlight.js +98 -0
- package/src/styles/quantum-base.css +3 -3
- package/src/styles/quantum-components.css +164 -3
- package/src/styles/starlight.css +163 -45
|
@@ -0,0 +1,267 @@
|
|
|
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>Nebula Voyage | Starlight Travel</title>
|
|
7
|
+
<link rel="stylesheet" href="../../dist/quantum.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
background: radial-gradient(circle at top right, #08081a, #000);
|
|
11
|
+
overflow-x: hidden;
|
|
12
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
13
|
+
}
|
|
14
|
+
body.light-mode {
|
|
15
|
+
background: #f1f5f9;
|
|
16
|
+
color: #1e293b;
|
|
17
|
+
}
|
|
18
|
+
.hero-glow {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: -10%;
|
|
21
|
+
right: -10%;
|
|
22
|
+
width: 60%;
|
|
23
|
+
height: 60%;
|
|
24
|
+
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
25
|
+
filter: blur(100px);
|
|
26
|
+
z-index: 0;
|
|
27
|
+
transition: opacity 0.5s ease;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
body.light-mode .hero-glow {
|
|
31
|
+
opacity: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Theme Toggle Styling */
|
|
35
|
+
.theme-toggle {
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
width: 2.5rem;
|
|
38
|
+
height: 2.5rem;
|
|
39
|
+
border-radius: 50%;
|
|
40
|
+
transition: background 0.3s ease;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
flex-shrink: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.theme-toggle:hover {
|
|
48
|
+
background: rgba(255, 255, 255, 0.1);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
body.light-mode .theme-toggle:hover {
|
|
52
|
+
background: rgba(0, 0, 0, 0.05);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
body.light-mode .glass {
|
|
56
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
57
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
58
|
+
color: #1e293b !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sun-icon { display: none; }
|
|
62
|
+
body.light-mode .sun-icon { display: block; }
|
|
63
|
+
body.light-mode .moon-icon { display: none; }
|
|
64
|
+
|
|
65
|
+
body.light-mode .starlight-card p,
|
|
66
|
+
body.light-mode header p,
|
|
67
|
+
body.light-mode section p {
|
|
68
|
+
color: #475569;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
body.light-mode .btn-outline:hover {
|
|
72
|
+
background-color: #1e293b;
|
|
73
|
+
color: white;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
body.light-mode input[type="date"]::-webkit-calendar-picker-indicator {
|
|
77
|
+
filter: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
input[type="date"] {
|
|
81
|
+
color-scheme: dark;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
body.light-mode input[type="date"] {
|
|
85
|
+
color-scheme: light;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
body.light-mode input {
|
|
89
|
+
color: #1e293b !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
body.light-mode input::placeholder {
|
|
93
|
+
color: rgba(0, 0, 0, 0.3) !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
body.light-mode .text-starlight-blue {
|
|
97
|
+
color: #2563eb !important;
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
100
|
+
</head>
|
|
101
|
+
<body class="text-primary">
|
|
102
|
+
<div class="hero-glow"></div>
|
|
103
|
+
|
|
104
|
+
<!-- Navigation -->
|
|
105
|
+
<nav class="glass sticky top-0 z-50 border-b border-white/10">
|
|
106
|
+
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
107
|
+
<div class="text-3xl font-black tracking-tighter text-gradient-starlight uppercase">NEBULA</div>
|
|
108
|
+
<div class="hidden md:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
109
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
|
|
110
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
|
|
111
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
|
|
112
|
+
<a href="#" class="hover:text-starlight-blue transition-colors">Concierge</a>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="flex items-center gap-4">
|
|
115
|
+
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
116
|
+
<svg class="w-6 h-6 sun-icon hidden" 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>
|
|
117
|
+
<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>
|
|
118
|
+
</div>
|
|
119
|
+
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</nav>
|
|
123
|
+
|
|
124
|
+
<!-- Hero Section -->
|
|
125
|
+
<header class="container mx-auto px-6 py-16 text-center">
|
|
126
|
+
<span class="badge badge-primary mb-8 animate-fade-in px-4 py-1.5 font-black tracking-[0.2em] text-[10px]">New Frontier: Titan IX</span>
|
|
127
|
+
<h1 class="text-7xl md:text-9xl font-black mb-10 leading-none uppercase italic tracking-tighter">
|
|
128
|
+
Travel Beyond <br>
|
|
129
|
+
<span class="text-gradient-starlight">The Horizon</span>
|
|
130
|
+
</h1>
|
|
131
|
+
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-16 font-medium leading-relaxed">
|
|
132
|
+
Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
|
|
133
|
+
</p>
|
|
134
|
+
|
|
135
|
+
<!-- Search Bar -->
|
|
136
|
+
<div class="glass p-8 rounded-[2.5rem] max-w-5xl mx-auto flex flex-col md:flex-row gap-12 items-stretch shadow-2xl">
|
|
137
|
+
<div class="flex-1 flex flex-col items-start px-6">
|
|
138
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Destination</label>
|
|
139
|
+
<input type="text" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0 placeholder:text-white/10" placeholder="Where to?">
|
|
140
|
+
</div>
|
|
141
|
+
<div class="border-l border-white/10 hidden md:block"></div>
|
|
142
|
+
<div class="flex-1 flex flex-col items-start px-6">
|
|
143
|
+
<label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Departure</label>
|
|
144
|
+
<input type="date" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0" id="departure-date">
|
|
145
|
+
</div>
|
|
146
|
+
<button class="btn-starlight px-16 py-6 h-auto md:h-full text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue">Search</button>
|
|
147
|
+
</div>
|
|
148
|
+
</header>
|
|
149
|
+
|
|
150
|
+
<!-- Featured Destinations -->
|
|
151
|
+
<section class="container mx-auto px-6 py-16">
|
|
152
|
+
<div class="flex justify-between items-end mb-16">
|
|
153
|
+
<div>
|
|
154
|
+
<span class="text-orange-600 font-black uppercase text-[10px] tracking-[0.3em] mb-3 block">Recommended Sights</span>
|
|
155
|
+
<h2 class="text-5xl font-black mb-3 uppercase italic tracking-tighter">Popular Sectors</h2>
|
|
156
|
+
<p class="text-slate-400 text-lg font-medium">Curated experiences from our master explorers.</p>
|
|
157
|
+
</div>
|
|
158
|
+
<a href="#" class="text-starlight-blue text-sm font-black uppercase tracking-widest hover:underline pb-2 border-b border-starlight-blue/30">View All Clusters</a>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
|
|
162
|
+
<!-- Card 1 -->
|
|
163
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
164
|
+
<div class="h-80 bg-gray-800 relative overflow-hidden">
|
|
165
|
+
<img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" alt="Saturn" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
166
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
167
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
168
|
+
<span class="badge badge-primary bg-blue-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Orbit Sector</span>
|
|
169
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">The Cassini</h3>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="p-10">
|
|
173
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
|
|
174
|
+
<div class="flex justify-between items-center">
|
|
175
|
+
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">4.2 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ night</span></span>
|
|
176
|
+
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<!-- Card 2 -->
|
|
182
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
183
|
+
<div class="h-80 bg-gray-700 relative overflow-hidden">
|
|
184
|
+
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Alpha Centauri" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
185
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
186
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
187
|
+
<span class="badge badge-primary bg-emerald-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Deep Space</span>
|
|
188
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Biolume Forest</h3>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="p-10">
|
|
192
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Wander through the glowing flora of Proxima b in our climate-controlled bio-domes. Protective suits provided.</p>
|
|
193
|
+
<div class="flex justify-between items-center">
|
|
194
|
+
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">12.5 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ stay</span></span>
|
|
195
|
+
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<!-- Card 3 -->
|
|
201
|
+
<div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
|
|
202
|
+
<div class="h-80 bg-gray-900 relative overflow-hidden">
|
|
203
|
+
<img src="https://images.unsplash.com/photo-1614728894747-a83421e2b9c9?auto=format&fit=crop&w=800&q=80" alt="Mars" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
204
|
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
|
|
205
|
+
<div class="absolute bottom-8 left-8 z-20">
|
|
206
|
+
<span class="badge badge-primary bg-orange-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Red Planet</span>
|
|
207
|
+
<h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Valles Marineris</h3>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="p-10">
|
|
211
|
+
<p class="text-slate-400 font-medium leading-loose mb-10">Grand Canyon of Mars. Helicopter tours and dust-gliding available daily for elite members.</p>
|
|
212
|
+
<div class="flex justify-between items-center">
|
|
213
|
+
<span class="text-starlight-blue font-black text-xl italic tracking-tighter">1.8 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ tour</span></span>
|
|
214
|
+
<button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</section>
|
|
220
|
+
|
|
221
|
+
<!-- Newsletter -->
|
|
222
|
+
<section class="container mx-auto px-6 py-16">
|
|
223
|
+
<div class="glass p-16 rounded-[3rem] text-center glow-blue border-white/5 relative overflow-hidden">
|
|
224
|
+
<div class="absolute inset-0 bg-gradient-to-br from-starlight-blue/5 to-transparent"></div>
|
|
225
|
+
<h2 class="text-5xl font-black mb-6 uppercase italic tracking-tighter relative z-10">Join the Voyager Network</h2>
|
|
226
|
+
<p class="text-slate-400 text-xl font-medium mb-12 max-w-2xl mx-auto leading-relaxed relative z-10">Get early access to maiden voyages and exclusive stellar discounts directly in your comms link.</p>
|
|
227
|
+
<div class="flex flex-col md:flex-row gap-6 max-w-xl mx-auto relative z-10 items-center">
|
|
228
|
+
<input type="email" class="input-starlight h-16 flex-1 bg-white/5 border-white/10 text-white px-8 placeholder:text-white/20" placeholder="explorer@nebula.io">
|
|
229
|
+
<button class="btn-starlight px-12 h-16 text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-starlight-blue/20">Subscribe Link</button>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</section>
|
|
233
|
+
|
|
234
|
+
<!-- Footer -->
|
|
235
|
+
<footer class="border-t border-white/10 py-12 mt-20">
|
|
236
|
+
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
|
|
237
|
+
<div class="text-xl font-bold text-gradient-starlight">NEBULA</div>
|
|
238
|
+
<div class="flex space-x-6 text-sm text-muted">
|
|
239
|
+
<a href="#" class="hover:text-white">Privacy</a>
|
|
240
|
+
<a href="#" class="hover:text-white">Terms</a>
|
|
241
|
+
<a href="#" class="hover:text-white">Safety</a>
|
|
242
|
+
<a href="#" class="hover:text-white">Support</a>
|
|
243
|
+
</div>
|
|
244
|
+
<p class="text-xs text-muted">© 2026 Nebula Voyage Group. Clear skies.</p>
|
|
245
|
+
</div>
|
|
246
|
+
</footer>
|
|
247
|
+
|
|
248
|
+
<script>
|
|
249
|
+
// Theme Toggle Logic
|
|
250
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
251
|
+
if (themeBtn) {
|
|
252
|
+
themeBtn.addEventListener('click', () => {
|
|
253
|
+
document.body.classList.toggle('light-mode');
|
|
254
|
+
const isLight = document.body.classList.contains('light-mode');
|
|
255
|
+
|
|
256
|
+
// Update all icons
|
|
257
|
+
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
258
|
+
icon.classList.toggle('hidden', !isLight);
|
|
259
|
+
});
|
|
260
|
+
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
261
|
+
icon.classList.toggle('hidden', isLight);
|
|
262
|
+
});
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
</script>
|
|
266
|
+
</body>
|
|
267
|
+
</html>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Verification of Fixes</title>
|
|
6
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body class="p-10 space-y-8 bg-black text-white">
|
|
9
|
+
<nav class="sticky top-0 z-50 glass p-4 mb-8">
|
|
10
|
+
<a href="#" class="font-bold">Home</a>
|
|
11
|
+
<a href="#" class="ml-4">Blog</a>
|
|
12
|
+
<a href="#" class="ml-4">About</a>
|
|
13
|
+
</nav>
|
|
14
|
+
|
|
15
|
+
<div class="starlight-card p-10">
|
|
16
|
+
<h1 class="text-4xl mb-4">Verification of Fixes</h1>
|
|
17
|
+
|
|
18
|
+
<div class="space-y-4">
|
|
19
|
+
<p>This paragraph should have margin-top if space-y-4 works.</p>
|
|
20
|
+
<p>Another paragraph to test vertical spacing.</p>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-4">
|
|
24
|
+
<div class="lg:col-span-8 bg-blue-500 p-4">lg:grid-cols-12 test (8/12)</div>
|
|
25
|
+
<div class="lg:col-span-4 bg-red-500 p-4">lg:grid-cols-12 test (4/12)</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="mt-8 flex gap-4">
|
|
29
|
+
<span class="badge badge-primary">Primary Badge</span>
|
|
30
|
+
<span class="badge badge-secondary">Secondary Badge</span>
|
|
31
|
+
<span class="badge badge-success">Success Badge</span>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="mt-8">
|
|
35
|
+
<p>Testing <a href="#">link styling</a> within text.</p>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="mt-8 space-y-4">
|
|
39
|
+
<h3 class="text-xl">Form Elements</h3>
|
|
40
|
+
<input type="text" class="input-starlight" placeholder="Starlight Input">
|
|
41
|
+
<textarea class="textarea-starlight" placeholder="Starlight Textarea"></textarea>
|
|
42
|
+
<select class="input-starlight">
|
|
43
|
+
<option>Option 1</option>
|
|
44
|
+
<option>Option 2</option>
|
|
45
|
+
</select>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="z-50 p-4 bg-green-500 mt-4">This has z-50</div>
|
|
49
|
+
</div>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
@@ -0,0 +1,31 @@
|
|
|
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>Quantum CSS - Verify Presets</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body class="bg-gray-50 p-12">
|
|
10
|
+
<div class="max-w-4xl mx-auto space-y-12">
|
|
11
|
+
<h1 class="text-4xl font-bold">Verification: Component Presets</h1>
|
|
12
|
+
|
|
13
|
+
<div class="space-y-4">
|
|
14
|
+
<h2 class="text-xl font-semibold">Buttons</h2>
|
|
15
|
+
<div class="flex gap-4">
|
|
16
|
+
<button class="btn-primary">Primary Preset</button>
|
|
17
|
+
<button class="md:btn-primary">Responsive Primary</button>
|
|
18
|
+
<button class="btn-secondary">Secondary Preset</button>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<div class="space-y-4">
|
|
23
|
+
<h2 class="text-xl font-semibold">Cards</h2>
|
|
24
|
+
<div class="card-premium max-w-sm">
|
|
25
|
+
<h3 class="text-2xl font-bold mb-4">Premium Card</h3>
|
|
26
|
+
<p class="text-gray-600">This card uses the 'card-premium' preset defined in quantum.config.json.</p>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@howssatoshi/quantumcss",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"description": "Advanced utility-first CSS framework with JIT generation and modern components",
|
|
5
5
|
"main": "dist/quantum.min.css",
|
|
6
6
|
"bin": {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"src",
|
|
12
|
+
"examples",
|
|
12
13
|
"README.md",
|
|
13
14
|
"LICENSE"
|
|
14
15
|
],
|
package/src/defaults.js
CHANGED
|
@@ -113,6 +113,10 @@ const utilityMaps = {
|
|
|
113
113
|
'search-container': 'relative block w-full',
|
|
114
114
|
'search-input': 'pl-12 w-full',
|
|
115
115
|
'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
|
|
116
|
+
'nav-glass': {
|
|
117
|
+
property: ['background', 'backdrop-filter', '-webkit-backdrop-filter', 'border-bottom', 'width', 'display', 'flex-direction', 'padding', 'position', 'top', 'z-index'],
|
|
118
|
+
value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', '1px solid rgba(255, 255, 255, 0.1)', '100%', 'flex', 'column', '0', 'sticky', '0', '1000']
|
|
119
|
+
},
|
|
116
120
|
'starlight-nav': 'nav-glass w-full sticky top-0 z-[1000]',
|
|
117
121
|
'starlight-search': 'search-container w-full max-w-144',
|
|
118
122
|
'starlight-dashboard': 'dashboard-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
|
package/src/generator.js
CHANGED
|
@@ -86,6 +86,7 @@ function generateCSS(configPath) {
|
|
|
86
86
|
const p = parts[currentPart];
|
|
87
87
|
if (breakpoints[p]) { breakpoint = p; }
|
|
88
88
|
else if (p === 'dark') { breakpoint = 'dark'; }
|
|
89
|
+
else if (p === 'light') { breakpoint = 'light'; }
|
|
89
90
|
else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
|
|
90
91
|
else { cls = parts.slice(currentPart).join(':'); break; }
|
|
91
92
|
currentPart++;
|
|
@@ -135,7 +136,16 @@ function generateCSS(configPath) {
|
|
|
135
136
|
if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
|
|
136
137
|
else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
|
|
137
138
|
} else if (prefix === 'bg') { const color = resolveColor(valKey); if (color) { property = 'background-color'; value = color; } }
|
|
138
|
-
else if (prefix === 'z') {
|
|
139
|
+
else if (prefix === 'z') {
|
|
140
|
+
if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
|
|
141
|
+
else value = isNeg ? `-${valKey}` : valKey;
|
|
142
|
+
property = 'z-index';
|
|
143
|
+
}
|
|
144
|
+
else if (prefix === 'top') {
|
|
145
|
+
property = 'top';
|
|
146
|
+
if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
|
|
147
|
+
else value = theme.spacing[valKey] || valKey;
|
|
148
|
+
}
|
|
139
149
|
else if (prefix === 'aspect') {
|
|
140
150
|
property = ['aspect-ratio', 'width', 'height'];
|
|
141
151
|
let ratio = 'auto';
|
|
@@ -186,7 +196,11 @@ function generateCSS(configPath) {
|
|
|
186
196
|
else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
|
|
187
197
|
else v = theme.spacing[v] || v;
|
|
188
198
|
value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
|
|
189
|
-
} else if (prefix === '
|
|
199
|
+
} else if (prefix === 'shadow') {
|
|
200
|
+
if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
|
|
201
|
+
else if (valKey === '') { property = 'box-shadow'; value = theme.shadows.md || '0 4px 6px -1px rgb(0 0 0 / 0.1)'; }
|
|
202
|
+
}
|
|
203
|
+
else if (prefix === 'border') {
|
|
190
204
|
const color = resolveColor(valKey);
|
|
191
205
|
if (color) { property = 'border-color'; value = color; }
|
|
192
206
|
else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
|
|
@@ -225,11 +239,19 @@ function generateCSS(configPath) {
|
|
|
225
239
|
let selector = customSelector || `.${escapedFull}`;
|
|
226
240
|
if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
|
|
227
241
|
|
|
228
|
-
|
|
242
|
+
if (breakpoint === 'light') {
|
|
243
|
+
const block = `body.light-mode ${selector} {
|
|
229
244
|
${rules.join('\n')}
|
|
230
245
|
}
|
|
231
246
|
`;
|
|
232
|
-
|
|
247
|
+
utilities.add(block);
|
|
248
|
+
} else {
|
|
249
|
+
const block = `${selector} {
|
|
250
|
+
${rules.join('\n')}
|
|
251
|
+
}
|
|
252
|
+
`;
|
|
253
|
+
if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
|
|
254
|
+
}
|
|
233
255
|
});
|
|
234
256
|
}
|
|
235
257
|
|
package/src/starlight.js
CHANGED
|
@@ -71,6 +71,101 @@ const Starlight = {
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
|
+
},
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Initializes dropdown menus.
|
|
78
|
+
* Toggles '.active' class on '.dropdown' elements when clicked.
|
|
79
|
+
*/
|
|
80
|
+
initDropdowns() {
|
|
81
|
+
const dropdowns = document.querySelectorAll('.dropdown');
|
|
82
|
+
|
|
83
|
+
dropdowns.forEach(dropdown => {
|
|
84
|
+
const toggle = dropdown.querySelector('.dropdown-toggle') || dropdown.querySelector('button') || dropdown.querySelector('a');
|
|
85
|
+
|
|
86
|
+
if (toggle) {
|
|
87
|
+
toggle.addEventListener('click', (e) => {
|
|
88
|
+
// If it's a link that points somewhere, let it work normally
|
|
89
|
+
if (toggle.tagName === 'A' && toggle.getAttribute('href') && toggle.getAttribute('href') !== '#') {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
e.stopPropagation();
|
|
95
|
+
|
|
96
|
+
const isActive = dropdown.classList.contains('active');
|
|
97
|
+
|
|
98
|
+
// Close all other dropdowns
|
|
99
|
+
document.querySelectorAll('.dropdown.active').forEach(d => {
|
|
100
|
+
if (d !== dropdown) d.classList.remove('active');
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
dropdown.classList.toggle('active', !isActive);
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
// Close dropdowns when clicking outside
|
|
109
|
+
document.addEventListener('click', (e) => {
|
|
110
|
+
if (!e.target.closest('.dropdown')) {
|
|
111
|
+
document.querySelectorAll('.dropdown.active').forEach(d => {
|
|
112
|
+
d.classList.remove('active');
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
},
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Initializes accordion components.
|
|
120
|
+
* Toggles '.active' class on '.accordion-item' when header is clicked.
|
|
121
|
+
*/
|
|
122
|
+
initAccordions() {
|
|
123
|
+
const headers = document.querySelectorAll('.accordion-header');
|
|
124
|
+
|
|
125
|
+
headers.forEach(header => {
|
|
126
|
+
header.addEventListener('click', () => {
|
|
127
|
+
const item = header.parentElement;
|
|
128
|
+
const group = item.closest('.accordion-group');
|
|
129
|
+
const isActive = item.classList.contains('active');
|
|
130
|
+
|
|
131
|
+
// If in a group, close others
|
|
132
|
+
if (group) {
|
|
133
|
+
group.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('active'));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
item.classList.toggle('active', !isActive);
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Initializes tab components.
|
|
143
|
+
* Switches '.active' class on buttons and panels.
|
|
144
|
+
*/
|
|
145
|
+
initTabs() {
|
|
146
|
+
const tabLists = document.querySelectorAll('.tab-list');
|
|
147
|
+
|
|
148
|
+
tabLists.forEach(list => {
|
|
149
|
+
const buttons = list.querySelectorAll('.tab-button');
|
|
150
|
+
const container = list.parentElement;
|
|
151
|
+
|
|
152
|
+
buttons.forEach(button => {
|
|
153
|
+
button.addEventListener('click', () => {
|
|
154
|
+
const targetId = button.getAttribute('data-tab');
|
|
155
|
+
if (!targetId) return;
|
|
156
|
+
|
|
157
|
+
// Update buttons
|
|
158
|
+
buttons.forEach(btn => btn.classList.remove('active'));
|
|
159
|
+
button.classList.add('active');
|
|
160
|
+
|
|
161
|
+
// Update panels
|
|
162
|
+
const panels = container.querySelectorAll('.tab-panel');
|
|
163
|
+
panels.forEach(panel => {
|
|
164
|
+
panel.classList.toggle('active', panel.id === targetId);
|
|
165
|
+
});
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
});
|
|
74
169
|
}
|
|
75
170
|
};
|
|
76
171
|
|
|
@@ -82,5 +177,8 @@ if (typeof window !== 'undefined') {
|
|
|
82
177
|
Starlight.initStars();
|
|
83
178
|
}
|
|
84
179
|
Starlight.initNavigation();
|
|
180
|
+
Starlight.initDropdowns();
|
|
181
|
+
Starlight.initAccordions();
|
|
182
|
+
Starlight.initTabs();
|
|
85
183
|
});
|
|
86
184
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* QuantumCSS + Starlight UI
|
|
3
3
|
* Advanced utility-first framework with ethereal cosmic aesthetics
|
|
4
|
-
* Version: 1.4.
|
|
4
|
+
* Version: 1.4.2
|
|
5
5
|
* Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -350,8 +350,8 @@ textarea {
|
|
|
350
350
|
.bg-warning { background-color: var(--color-warning); }
|
|
351
351
|
.bg-error { background-color: var(--color-error); }
|
|
352
352
|
.bg-neutral { background-color: var(--color-neutral); }
|
|
353
|
-
.bg-white { background-color: #ffffff; }
|
|
354
|
-
.bg-black { background-color: #000000; }
|
|
353
|
+
.bg-white { background-color: #ffffff; color: #0f172a; }
|
|
354
|
+
.bg-black { background-color: #000000; color: #ffffff; }
|
|
355
355
|
|
|
356
356
|
/* Border Utilities */
|
|
357
357
|
.border-0 { border-width: 0px; }
|