@howssatoshi/quantumcss 1.4.3 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -7
- package/dist/quantum.min.css +588 -381
- package/examples/blog-template.html +2 -16
- package/examples/gaming-template.html +0 -20
- package/examples/index.html +5 -8
- package/examples/kitchen-sink.html +1 -1
- package/examples/news-template.html +64 -80
- package/examples/shopping/index.html +48 -40
- package/examples/starlight.html +6 -73
- package/examples/theme-test.html +174 -0
- package/examples/travel/index.html +7 -17
- package/examples/verify_fixes.html +1 -0
- package/examples/verify_presets.html +2 -1
- package/package.json +7 -1
- package/src/defaults.js +5 -0
- package/src/generator.js +27 -8
- package/src/starlight.js +406 -15
- package/src/styles/quantum-animations.css +3 -2
- package/src/styles/quantum-base.css +299 -95
- package/src/styles/quantum-components.css +51 -50
- package/src/styles/quantum-responsive.css +5 -4
- package/src/styles/starlight.css +184 -184
|
@@ -260,22 +260,8 @@
|
|
|
260
260
|
</footer>
|
|
261
261
|
|
|
262
262
|
<script>
|
|
263
|
-
// Theme
|
|
264
|
-
|
|
265
|
-
if (themeBtn) {
|
|
266
|
-
themeBtn.addEventListener('click', () => {
|
|
267
|
-
document.body.classList.toggle('light-mode');
|
|
268
|
-
const isLight = document.body.classList.contains('light-mode');
|
|
269
|
-
|
|
270
|
-
// Update all icons
|
|
271
|
-
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
272
|
-
icon.classList.toggle('hidden', !isLight);
|
|
273
|
-
});
|
|
274
|
-
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
275
|
-
icon.classList.toggle('hidden', isLight);
|
|
276
|
-
});
|
|
277
|
-
});
|
|
278
|
-
}
|
|
263
|
+
// Theme initialization is handled automatically by starlight.js
|
|
264
|
+
// Custom template logic can go here
|
|
279
265
|
</script>
|
|
280
266
|
|
|
281
267
|
</body>
|
|
@@ -333,26 +333,6 @@
|
|
|
333
333
|
|
|
334
334
|
<script src="../src/starlight.js"></script>
|
|
335
335
|
<script>
|
|
336
|
-
const themeBtns = [document.getElementById('theme-btn'), document.getElementById('theme-btn-mobile')];
|
|
337
|
-
|
|
338
|
-
// Theme Toggle Logic
|
|
339
|
-
themeBtns.forEach(btn => {
|
|
340
|
-
if (btn) {
|
|
341
|
-
btn.addEventListener('click', () => {
|
|
342
|
-
document.body.classList.toggle('light-mode');
|
|
343
|
-
const isLight = document.body.classList.contains('light-mode');
|
|
344
|
-
|
|
345
|
-
// Update all icons
|
|
346
|
-
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
347
|
-
icon.classList.toggle('hidden', !isLight);
|
|
348
|
-
});
|
|
349
|
-
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
350
|
-
icon.classList.toggle('hidden', isLight);
|
|
351
|
-
});
|
|
352
|
-
});
|
|
353
|
-
}
|
|
354
|
-
});
|
|
355
|
-
|
|
356
336
|
// Accordion Logic
|
|
357
337
|
document.querySelectorAll('.accordion-header').forEach(header => {
|
|
358
338
|
header.addEventListener('click', () => {
|
package/examples/index.html
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
}
|
|
21
21
|
.theme-toggle:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
|
|
22
|
-
|
|
22
|
+
html[data-theme="light"] .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|
23
23
|
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
|
|
24
24
|
.hidden { display: none; }
|
|
25
25
|
</style>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
|
|
62
62
|
<header class="hero container">
|
|
63
63
|
<div class="pt-8 pb-12 text-center">
|
|
64
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.
|
|
64
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.5.1</span>
|
|
65
65
|
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
66
66
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
67
67
|
A standardized, high-performance UI library.
|
|
@@ -128,14 +128,11 @@
|
|
|
128
128
|
</main>
|
|
129
129
|
|
|
130
130
|
<script>
|
|
131
|
-
function toggleTheme() {
|
|
132
|
-
document.body.classList.toggle('light-mode');
|
|
133
|
-
const isLight = document.body.classList.contains('light-mode');
|
|
134
|
-
document.querySelector('.sun-icon').classList.toggle('hidden', !isLight);
|
|
135
|
-
document.querySelector('.moon-icon').classList.toggle('hidden', isLight);
|
|
136
|
-
}
|
|
137
131
|
function openDialog() { document.getElementById('dialog').style.display = 'flex'; }
|
|
138
132
|
function closeDialog() { document.getElementById('dialog').style.display = 'none'; }
|
|
133
|
+
|
|
134
|
+
// Theme initialization and system preference detection are now handled
|
|
135
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
139
136
|
</script>
|
|
140
137
|
</body>
|
|
141
138
|
</html>
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
</style>
|
|
36
36
|
</head>
|
|
37
37
|
<body class="p-8">
|
|
38
|
-
<button class="theme-toggle" onclick="
|
|
38
|
+
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
39
39
|
<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>
|
|
40
40
|
<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>
|
|
41
41
|
</button>
|
|
@@ -5,15 +5,21 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Quantum News | Decoding the Future</title>
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
8
9
|
<style>
|
|
9
|
-
|
|
10
|
-
body
|
|
10
|
+
/* Base / Dark Mode (Default) */
|
|
11
|
+
body {
|
|
12
|
+
background-color: #020617;
|
|
13
|
+
color: #f1f5f9;
|
|
14
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
15
|
+
}
|
|
16
|
+
|
|
11
17
|
.news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
|
|
12
18
|
@media (min-width: 1024px) {
|
|
13
19
|
.news-grid { grid-template-columns: 3fr 1fr; }
|
|
14
20
|
}
|
|
15
21
|
.featured-card { position: relative; overflow: hidden; border-radius: 1rem; }
|
|
16
|
-
.featured-card img { width: 100%; height: 600px; object-
|
|
22
|
+
.featured-card img { width: 100%; height: 600px; object-fit: cover; transition: transform 0.5s ease; }
|
|
17
23
|
.featured-card:hover img { transform: scale(1.03); }
|
|
18
24
|
.featured-overlay {
|
|
19
25
|
position: absolute;
|
|
@@ -29,66 +35,64 @@
|
|
|
29
35
|
width: 2.5rem;
|
|
30
36
|
height: 2.5rem;
|
|
31
37
|
border-radius: 50%;
|
|
32
|
-
transition:
|
|
38
|
+
transition: all 0.3s ease;
|
|
33
39
|
display: flex;
|
|
34
40
|
align-items: center;
|
|
35
41
|
justify-content: center;
|
|
36
42
|
flex-shrink: 0;
|
|
43
|
+
color: #f1f5f9;
|
|
37
44
|
}
|
|
38
45
|
|
|
39
46
|
.theme-toggle:hover {
|
|
40
47
|
background: rgba(255, 255, 255, 0.1);
|
|
41
48
|
}
|
|
42
49
|
|
|
43
|
-
|
|
44
|
-
background: rgba(0, 0, 0, 0.05);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
nav {
|
|
48
|
-
background-color: #020617 !important;
|
|
49
|
-
border-bottom-color: #f1f5f9 !important;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
body.light-mode nav {
|
|
53
|
-
background-color: #ffffff !important;
|
|
54
|
-
border-bottom-color: #0f172a !important;
|
|
55
|
-
}
|
|
56
|
-
|
|
50
|
+
/* Dark Mode Styles (Default Overrides) */
|
|
57
51
|
.bg-white {
|
|
58
52
|
background-color: #020617 !important;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
body.light-mode .bg-white {
|
|
62
|
-
background-color: #ffffff !important;
|
|
53
|
+
color: #f1f5f9 !important;
|
|
63
54
|
}
|
|
64
55
|
|
|
65
56
|
.bg-slate-50 {
|
|
66
57
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
67
58
|
}
|
|
68
59
|
|
|
69
|
-
|
|
70
|
-
background-color: #
|
|
60
|
+
.bg-slate-900 {
|
|
61
|
+
background-color: #f1f5f9 !important;
|
|
62
|
+
color: #020617 !important;
|
|
71
63
|
}
|
|
72
64
|
|
|
73
65
|
.border-slate-100 {
|
|
74
66
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
75
67
|
}
|
|
76
68
|
|
|
77
|
-
body.light-mode .border-slate-100 {
|
|
78
|
-
border-color: #f1f5f9 !important;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
69
|
.text-slate-900,
|
|
82
70
|
.text-slate-500 {
|
|
83
71
|
color: #f1f5f9 !important;
|
|
84
72
|
}
|
|
85
73
|
|
|
86
|
-
|
|
87
|
-
|
|
74
|
+
.text-blue-600 {
|
|
75
|
+
color: #60a5fa !important;
|
|
76
|
+
}
|
|
88
77
|
|
|
89
|
-
|
|
90
|
-
background-color: #
|
|
91
|
-
color:
|
|
78
|
+
nav {
|
|
79
|
+
background-color: #020617 !important;
|
|
80
|
+
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Light Mode Overrides */
|
|
84
|
+
body.light-mode {
|
|
85
|
+
background-color: #ffffff;
|
|
86
|
+
color: #0f172a;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
body.light-mode .bg-white {
|
|
90
|
+
background-color: #ffffff !important;
|
|
91
|
+
color: #0f172a !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.light-mode .bg-slate-50 {
|
|
95
|
+
background-color: #f8fafc !important;
|
|
92
96
|
}
|
|
93
97
|
|
|
94
98
|
body.light-mode .bg-slate-900 {
|
|
@@ -96,29 +100,34 @@
|
|
|
96
100
|
color: #ffffff !important;
|
|
97
101
|
}
|
|
98
102
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
color: rgba(255, 255, 255, 0.2) !important;
|
|
103
|
+
body.light-mode .border-slate-100 {
|
|
104
|
+
border-color: #f1f5f9 !important;
|
|
102
105
|
}
|
|
103
106
|
|
|
104
|
-
body.light-mode .text-slate-
|
|
105
|
-
|
|
107
|
+
body.light-mode .text-slate-900 { color: #0f172a !important; }
|
|
108
|
+
body.light-mode .text-slate-500 { color: #64748b !important; }
|
|
109
|
+
body.light-mode .text-blue-600 { color: #2563eb !important; }
|
|
110
|
+
|
|
111
|
+
body.light-mode nav {
|
|
112
|
+
background-color: #ffffff !important;
|
|
113
|
+
border-bottom-color: #0f172a !important;
|
|
106
114
|
}
|
|
107
115
|
|
|
108
|
-
.
|
|
109
|
-
color: #
|
|
116
|
+
body.light-mode .theme-toggle {
|
|
117
|
+
color: #0f172a;
|
|
110
118
|
}
|
|
111
119
|
|
|
112
|
-
body.light-mode .
|
|
113
|
-
|
|
120
|
+
body.light-mode .theme-toggle:hover {
|
|
121
|
+
background: rgba(0, 0, 0, 0.05);
|
|
114
122
|
}
|
|
115
123
|
|
|
116
|
-
|
|
117
|
-
|
|
124
|
+
/* Component Visibility */
|
|
125
|
+
.text-slate-100 {
|
|
126
|
+
color: rgba(255, 255, 255, 0.2) !important;
|
|
118
127
|
}
|
|
119
128
|
|
|
120
|
-
body.light-mode .
|
|
121
|
-
color: #
|
|
129
|
+
body.light-mode .text-slate-100 {
|
|
130
|
+
color: #cbd5e1 !important;
|
|
122
131
|
}
|
|
123
132
|
|
|
124
133
|
/* Glassy Hover for Icons */
|
|
@@ -132,22 +141,11 @@
|
|
|
132
141
|
backdrop-filter: blur(4px);
|
|
133
142
|
}
|
|
134
143
|
|
|
135
|
-
|
|
136
|
-
footer a:hover {
|
|
137
|
-
color: #93c5fd !important;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
body.light-mode footer a:hover {
|
|
141
|
-
color: #ea580c !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.moon-icon { display: block; }
|
|
145
|
-
body.light-mode .moon-icon { display: none; }
|
|
146
|
-
body.light-mode .sun-icon { display: block; }
|
|
147
|
-
.sun-icon { display: none; }
|
|
144
|
+
footer a:hover { color: #60a5fa !important; }
|
|
145
|
+
body.light-mode footer a:hover { color: #2563eb !important; }
|
|
148
146
|
</style>
|
|
149
147
|
</head>
|
|
150
|
-
<body class="font-sans antialiased
|
|
148
|
+
<body class="font-sans antialiased">
|
|
151
149
|
<!-- Top Bar -->
|
|
152
150
|
<div class="border-b border-slate-100 py-2 bg-slate-50">
|
|
153
151
|
<div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
|
|
@@ -163,7 +161,7 @@
|
|
|
163
161
|
<!-- Navigation -->
|
|
164
162
|
<nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
|
|
165
163
|
<div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
166
|
-
<div class="text-4xl font-black tracking-tighter uppercase italic">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
164
|
+
<div class="text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
167
165
|
<div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
|
|
168
166
|
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
|
|
169
167
|
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
|
|
@@ -172,10 +170,10 @@
|
|
|
172
170
|
<a href="#" class="text-blue-600">Live Updates</a>
|
|
173
171
|
</div>
|
|
174
172
|
<div class="flex items-center gap-4">
|
|
175
|
-
<button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors">
|
|
173
|
+
<button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors text-primary">
|
|
176
174
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
177
175
|
</button>
|
|
178
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
176
|
+
<div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
|
|
179
177
|
<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>
|
|
180
178
|
<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>
|
|
181
179
|
</div>
|
|
@@ -275,7 +273,7 @@
|
|
|
275
273
|
<footer class="bg-slate-900 text-white py-20 mt-24">
|
|
276
274
|
<div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
|
|
277
275
|
<div class="col-span-1 md:col-span-2">
|
|
278
|
-
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
276
|
+
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
279
277
|
<p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>
|
|
280
278
|
</div>
|
|
281
279
|
<div>
|
|
@@ -312,22 +310,8 @@
|
|
|
312
310
|
}
|
|
313
311
|
</style>
|
|
314
312
|
<script>
|
|
315
|
-
// Theme
|
|
316
|
-
|
|
317
|
-
if (themeBtn) {
|
|
318
|
-
themeBtn.addEventListener('click', () => {
|
|
319
|
-
document.body.classList.toggle('light-mode');
|
|
320
|
-
const isLight = document.body.classList.contains('light-mode');
|
|
321
|
-
|
|
322
|
-
// Update all icons
|
|
323
|
-
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
324
|
-
icon.style.display = isLight ? 'block' : 'none';
|
|
325
|
-
});
|
|
326
|
-
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
327
|
-
icon.style.display = isLight ? 'none' : 'block';
|
|
328
|
-
});
|
|
329
|
-
});
|
|
330
|
-
}
|
|
313
|
+
// Theme initialization and management is now handled
|
|
314
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
331
315
|
</script>
|
|
332
316
|
</body>
|
|
333
317
|
</html>
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Quantum Store | Future of Fashion</title>
|
|
7
7
|
<link rel="stylesheet" href="../../dist/quantum.min.css">
|
|
8
|
+
<script src="../../src/starlight.js"></script>
|
|
8
9
|
<style>
|
|
9
10
|
body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
|
|
10
11
|
body.dark-mode { background-color: #020617; color: #f1f5f9; }
|
|
@@ -47,71 +48,93 @@
|
|
|
47
48
|
background: rgba(255, 255, 255, 0.1);
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
body.dark-mode .bg-white
|
|
51
|
+
body.dark-mode .bg-white,
|
|
52
|
+
html[data-theme="dark"] .bg-white {
|
|
51
53
|
background-color: #0f172a !important;
|
|
52
54
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
55
|
+
color: #f1f5f9 !important;
|
|
53
56
|
}
|
|
54
57
|
|
|
55
|
-
body.dark-mode .bg-white\/80
|
|
58
|
+
body.dark-mode .bg-white\/80,
|
|
59
|
+
html[data-theme="dark"] .bg-white\/80 {
|
|
56
60
|
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
57
61
|
}
|
|
58
62
|
|
|
59
|
-
body.dark-mode .glass
|
|
63
|
+
body.dark-mode .glass,
|
|
64
|
+
html[data-theme="dark"] .glass {
|
|
60
65
|
background-color: rgba(255, 255, 255, 0.08) !important;
|
|
61
66
|
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
62
67
|
}
|
|
63
68
|
|
|
64
|
-
body.dark-mode .bg-slate-100
|
|
69
|
+
body.dark-mode .bg-slate-100,
|
|
70
|
+
html[data-theme="dark"] .bg-slate-100 {
|
|
65
71
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
body.dark-mode .border-slate-100
|
|
74
|
+
body.dark-mode .border-slate-100,
|
|
75
|
+
html[data-theme="dark"] .border-slate-100 {
|
|
69
76
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
70
77
|
}
|
|
71
78
|
|
|
72
|
-
body.dark-mode nav
|
|
79
|
+
body.dark-mode nav,
|
|
80
|
+
html[data-theme="dark"] nav {
|
|
73
81
|
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
74
82
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
75
83
|
}
|
|
76
84
|
|
|
77
|
-
body.light-mode footer
|
|
85
|
+
body.light-mode footer,
|
|
86
|
+
html[data-theme="light"] footer {
|
|
78
87
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
79
88
|
backdrop-filter: blur(20px);
|
|
80
89
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
81
90
|
color: #1e293b !important;
|
|
82
91
|
}
|
|
83
92
|
|
|
84
|
-
body.light-mode footer h5
|
|
93
|
+
body.light-mode footer h5,
|
|
94
|
+
html[data-theme="light"] footer h5 {
|
|
85
95
|
color: #64748b !important;
|
|
86
96
|
}
|
|
87
97
|
|
|
88
|
-
body.light-mode footer a
|
|
98
|
+
body.light-mode footer a,
|
|
99
|
+
html[data-theme="light"] footer a {
|
|
89
100
|
color: #475569 !important;
|
|
90
101
|
}
|
|
91
102
|
|
|
92
|
-
body.light-mode footer a:hover
|
|
103
|
+
body.light-mode footer a:hover,
|
|
104
|
+
html[data-theme="light"] footer a:hover {
|
|
93
105
|
color: #ea580c !important;
|
|
94
106
|
}
|
|
95
107
|
|
|
96
|
-
body.light-mode footer .text-orange-600
|
|
108
|
+
body.light-mode footer .text-orange-600,
|
|
109
|
+
html[data-theme="light"] footer .text-orange-600 {
|
|
97
110
|
color: #ea580c !important;
|
|
98
111
|
}
|
|
99
112
|
|
|
100
|
-
body.light-mode footer .bg-slate-950
|
|
113
|
+
body.light-mode footer .bg-slate-950,
|
|
114
|
+
html[data-theme="light"] footer .bg-slate-950 {
|
|
101
115
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
102
116
|
}
|
|
103
117
|
|
|
104
|
-
body.dark-mode .text-slate-900
|
|
118
|
+
body.dark-mode .text-slate-900,
|
|
119
|
+
body.dark-mode .text-slate-600,
|
|
120
|
+
body.dark-mode .text-slate-500,
|
|
121
|
+
html[data-theme="dark"] .text-slate-900,
|
|
122
|
+
html[data-theme="dark"] .text-slate-600,
|
|
123
|
+
html[data-theme="dark"] .text-slate-500 {
|
|
105
124
|
color: #f1f5f9 !important;
|
|
106
125
|
}
|
|
107
126
|
|
|
108
|
-
.
|
|
109
|
-
body.
|
|
110
|
-
body.
|
|
111
|
-
.
|
|
127
|
+
body.light-mode .text-slate-900,
|
|
128
|
+
body.light-mode .text-slate-600,
|
|
129
|
+
body.light-mode .text-slate-500,
|
|
130
|
+
html[data-theme="light"] .text-slate-900,
|
|
131
|
+
html[data-theme="light"] .text-slate-600,
|
|
132
|
+
html[data-theme="light"] .text-slate-500 {
|
|
133
|
+
color: #0f172a !important;
|
|
134
|
+
}
|
|
112
135
|
</style>
|
|
113
136
|
</head>
|
|
114
|
-
<body class="
|
|
137
|
+
<body class="">
|
|
115
138
|
<!-- Announcement Bar -->
|
|
116
139
|
<div class="bg-slate-900 text-white py-3 text-center text-[10px] font-black tracking-[0.3em] uppercase">
|
|
117
140
|
Interstellar Shipping Enabled • New Drops Every Sunday
|
|
@@ -120,7 +143,7 @@
|
|
|
120
143
|
<!-- Navigation -->
|
|
121
144
|
<nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
|
|
122
145
|
<div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
|
|
123
|
-
<div class="text-2xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
146
|
+
<div class="text-2xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
124
147
|
<div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
125
148
|
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Men</a>
|
|
126
149
|
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Women</a>
|
|
@@ -128,12 +151,12 @@
|
|
|
128
151
|
<a href="#" class="text-orange-600 font-bold">Limited</a>
|
|
129
152
|
</div>
|
|
130
153
|
<div class="flex items-center space-x-6">
|
|
131
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
154
|
+
<div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
|
|
132
155
|
<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>
|
|
133
156
|
<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>
|
|
134
157
|
</div>
|
|
135
158
|
<div class="relative group">
|
|
136
|
-
<a href="#" class="text-
|
|
159
|
+
<a href="#" class="text-primary w-10 h-10 flex items-center justify-center bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
|
|
137
160
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
|
138
161
|
<span class="absolute -top-1 -right-1 bg-orange-600 text-white text-[9px] w-5 h-5 rounded-full flex items-center justify-center font-black shadow-lg border-2 border-white">3</span>
|
|
139
162
|
</a>
|
|
@@ -278,7 +301,7 @@
|
|
|
278
301
|
<div class="max-w-[1440px] mx-auto px-8">
|
|
279
302
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
280
303
|
<div class="lg:col-span-4 space-y-8">
|
|
281
|
-
<div class="text-4xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
304
|
+
<div class="text-4xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
282
305
|
<p class="text-slate-400 text-sm font-medium leading-loose max-w-sm">Redefining human aesthetics for the digital era through synthetic fiber and light integration.</p>
|
|
283
306
|
</div>
|
|
284
307
|
<div class="lg:col-span-2">
|
|
@@ -313,24 +336,6 @@
|
|
|
313
336
|
</footer>
|
|
314
337
|
|
|
315
338
|
<script>
|
|
316
|
-
// Theme Toggle Logic
|
|
317
|
-
const themeBtn = document.getElementById('theme-btn');
|
|
318
|
-
if (themeBtn) {
|
|
319
|
-
themeBtn.addEventListener('click', () => {
|
|
320
|
-
document.body.classList.toggle('light-mode');
|
|
321
|
-
document.body.classList.toggle('dark-mode');
|
|
322
|
-
const isDark = document.body.classList.contains('dark-mode');
|
|
323
|
-
|
|
324
|
-
// Update all icons
|
|
325
|
-
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
326
|
-
icon.style.display = isDark ? 'none' : 'block';
|
|
327
|
-
});
|
|
328
|
-
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
329
|
-
icon.style.display = isDark ? 'block' : 'none';
|
|
330
|
-
});
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
|
|
334
339
|
// Color Swatch Selection
|
|
335
340
|
const swatches = document.querySelectorAll('.color-swatch');
|
|
336
341
|
swatches.forEach(swatch => {
|
|
@@ -339,6 +344,9 @@
|
|
|
339
344
|
swatch.classList.add('selected');
|
|
340
345
|
});
|
|
341
346
|
});
|
|
347
|
+
|
|
348
|
+
// Theme initialization and management is now handled
|
|
349
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
342
350
|
</script>
|
|
343
351
|
</body>
|
|
344
352
|
</html>
|
package/examples/starlight.html
CHANGED
|
@@ -5,73 +5,20 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Starlight AI - Design System</title>
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
8
9
|
<style>
|
|
9
10
|
body {
|
|
10
11
|
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
|
|
11
|
-
color: white;
|
|
12
12
|
min-height: 100vh;
|
|
13
13
|
overflow-x: hidden;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
top: -10%;
|
|
19
|
-
right: -10%;
|
|
20
|
-
width: 50%;
|
|
21
|
-
height: 50%;
|
|
22
|
-
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
23
|
-
filter: blur(60px);
|
|
24
|
-
z-index: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.hero-glow-2 {
|
|
28
|
-
position: absolute;
|
|
29
|
-
bottom: -10%;
|
|
30
|
-
left: -10%;
|
|
31
|
-
width: 50%;
|
|
32
|
-
height: 50%;
|
|
33
|
-
background: radial-gradient(circle, rgba(255, 179, 138, 0.1) 0%, transparent 70%);
|
|
34
|
-
filter: blur(60px);
|
|
35
|
-
z-index: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.float {
|
|
39
|
-
animation: float 6s ease-in-out infinite;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@keyframes float {
|
|
43
|
-
0% { transform: translateY(0px); }
|
|
44
|
-
50% { transform: translateY(-20px); }
|
|
45
|
-
100% { transform: translateY(0px); }
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Theme Toggle Styling */
|
|
49
|
-
.theme-toggle {
|
|
50
|
-
position: fixed;
|
|
51
|
-
top: 2rem;
|
|
52
|
-
right: 2rem;
|
|
53
|
-
z-index: 100;
|
|
54
|
-
cursor: pointer;
|
|
55
|
-
width: 2.5rem;
|
|
56
|
-
height: 2.5rem;
|
|
57
|
-
border-radius: 50%;
|
|
58
|
-
transition: background 0.3s ease;
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
justify-content: center;
|
|
62
|
-
flex-shrink: 0;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.theme-toggle:hover {
|
|
66
|
-
background: rgba(255, 255, 255, 0.1);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
body.light-mode .theme-toggle:hover {
|
|
70
|
-
background: rgba(0, 0, 0, 0.05);
|
|
16
|
+
body.dark-mode {
|
|
17
|
+
color: #f1f5f9;
|
|
71
18
|
}
|
|
72
19
|
|
|
73
20
|
body.light-mode {
|
|
74
|
-
background: #f1f5f9;
|
|
21
|
+
background: #f1f5f9 !important;
|
|
75
22
|
color: #1e293b;
|
|
76
23
|
}
|
|
77
24
|
|
|
@@ -153,22 +100,8 @@
|
|
|
153
100
|
</div>
|
|
154
101
|
|
|
155
102
|
<script>
|
|
156
|
-
// Theme
|
|
157
|
-
|
|
158
|
-
if (themeBtn) {
|
|
159
|
-
themeBtn.addEventListener('click', () => {
|
|
160
|
-
document.body.classList.toggle('light-mode');
|
|
161
|
-
const isLight = document.body.classList.contains('light-mode');
|
|
162
|
-
|
|
163
|
-
// Update all icons
|
|
164
|
-
document.querySelectorAll('.sun-icon').forEach(icon => {
|
|
165
|
-
icon.classList.toggle('hidden', !isLight);
|
|
166
|
-
});
|
|
167
|
-
document.querySelectorAll('.moon-icon').forEach(icon => {
|
|
168
|
-
icon.classList.toggle('hidden', isLight);
|
|
169
|
-
});
|
|
170
|
-
});
|
|
171
|
-
}
|
|
103
|
+
// Theme initialization and management is now handled
|
|
104
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
172
105
|
</script>
|
|
173
106
|
</body>
|
|
174
107
|
</html>
|