@howssatoshi/quantumcss 1.4.2 → 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/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
|
@@ -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
|
],
|