@howssatoshi/quantumcss 1.7.2 → 1.7.4
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 +31 -27
- package/dist/quantum.css +2374 -0
- package/dist/quantum.min.css +1 -6442
- package/examples/admin-panel.html +12 -9
- package/examples/analytics-dashboard.html +53 -1
- package/examples/blog-template.html +34 -15
- package/examples/chat-messaging.html +12 -11
- package/examples/email-template.html +42 -19
- package/examples/gaming-template.html +7 -7
- package/examples/gradient-test.html +106 -30
- package/examples/index.html +39 -18
- package/examples/kitchen-sink.html +164 -38
- package/examples/news-template.html +13 -13
- package/examples/portfolio-resume.html +23 -8
- package/examples/shopping/index.html +15 -15
- package/examples/travel/index.html +51 -31
- package/examples/verify_fixes.html +2 -2
- package/examples/verify_presets.html +1 -1
- package/package.json +3 -1
- package/src/cli.js +160 -27
- package/src/defaults.js +41 -24
- package/src/generator.js +191 -45
- package/src/starlight.js +6 -0
- package/src/styles/quantum-base.css +16 -3
- package/src/styles/quantum-components.css +2 -70
- package/src/styles/starlight.css +92 -58
- package/src/styles/quantum-responsive.css +0 -363
|
@@ -3,51 +3,127 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
6
|
+
<title>Quantum CSS - Interactivity & Theme Test</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<style>
|
|
9
9
|
.test-box {
|
|
10
|
-
width:
|
|
11
|
-
height:
|
|
12
|
-
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 120px;
|
|
12
|
+
border-radius: 1rem;
|
|
13
13
|
display: flex;
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
color: white;
|
|
17
|
-
font-weight:
|
|
17
|
+
font-weight: 900;
|
|
18
|
+
font-size: 1.25rem;
|
|
19
|
+
text-transform: uppercase;
|
|
20
|
+
letter-spacing: 0.1em;
|
|
21
|
+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
18
22
|
}
|
|
23
|
+
|
|
24
|
+
/* Theme Styles */
|
|
25
|
+
.theme-blue-peach .hero-gradient { background: linear-gradient(to right, var(--q-color-starlight-blue), var(--q-color-starlight-peach)); }
|
|
26
|
+
.theme-purple-via .hero-gradient { background: linear-gradient(to br, #3b82f6, #a855f7, #ef4444); }
|
|
27
|
+
|
|
28
|
+
body { transition: background-color 0.5s ease; }
|
|
19
29
|
</style>
|
|
20
30
|
</head>
|
|
21
|
-
<body class="bg-starlight-deep p-10">
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
<body class="bg-starlight-deep p-10 theme-blue-peach">
|
|
32
|
+
|
|
33
|
+
<!-- Theme Toggle -->
|
|
34
|
+
<div class="mb-12 flex justify-between items-center">
|
|
35
|
+
<div>
|
|
36
|
+
<h1 class="text-white text-2xl font-black uppercase tracking-widest mb-2">Interactivity Test</h1>
|
|
37
|
+
<p class="text-slate-500 text-sm">Testing JIT Gradients, Focus Glows, and Overlays</p>
|
|
38
|
+
</div>
|
|
39
|
+
<button class="btn-starlight px-8 py-3 rounded-full font-bold" onclick="toggleTheme()">
|
|
40
|
+
Switch Visual Theme
|
|
41
|
+
</button>
|
|
24
42
|
</div>
|
|
25
|
-
|
|
26
|
-
|
|
43
|
+
|
|
44
|
+
<!-- Hero Gradient Section -->
|
|
45
|
+
<div class="mb-10">
|
|
46
|
+
<div class="hero-gradient test-box shadow-2xl">
|
|
47
|
+
Active Theme Gradient
|
|
48
|
+
</div>
|
|
27
49
|
</div>
|
|
28
|
-
|
|
29
|
-
|
|
50
|
+
|
|
51
|
+
<!-- Text Effects -->
|
|
52
|
+
<div class="mb-12">
|
|
53
|
+
<div class="text-transparent bg-clip-text bg-gradient-to-r from-starlight-orange to-starlight-peach text-6xl font-black mb-4">
|
|
54
|
+
GRADIENT TEXT
|
|
55
|
+
</div>
|
|
56
|
+
<div class="flex gap-4 items-center">
|
|
57
|
+
<div class="bg-starlight-blue_10 border border-starlight-blue_30 p-4 rounded-lg text-starlight-blue font-bold text-sm">
|
|
58
|
+
OPACITY BG + BORDER
|
|
59
|
+
</div>
|
|
60
|
+
<div class="border-4 border-red-500_50 p-4 rounded-lg font-black text-white uppercase tracking-tighter">
|
|
61
|
+
50% RED BORDER
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
30
64
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
65
|
+
|
|
66
|
+
<!-- SVG & Overlay Section -->
|
|
67
|
+
<div class="mb-12">
|
|
68
|
+
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-4">SVG Positioning Primitives</h3>
|
|
69
|
+
<div class="relative bg-slate-900 rounded-2xl overflow-hidden border border-white_5" style="width: 100%; height: 300px;">
|
|
70
|
+
<svg class="svg-fluid opacity-20" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
71
|
+
<rect x="0" y="0" width="100" height="100" fill="url(#grad)" />
|
|
72
|
+
<defs>
|
|
73
|
+
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
74
|
+
<stop offset="0%" style="stop-color:var(--q-color-starlight-blue);stop-opacity:1" />
|
|
75
|
+
<stop offset="100%" style="stop-color:var(--q-color-purple-500);stop-opacity:1" />
|
|
76
|
+
</linearGradient>
|
|
77
|
+
</defs>
|
|
78
|
+
</svg>
|
|
79
|
+
<div class="overlay-base text-white text-3xl font-black text-center w-full pointer-events-none">
|
|
80
|
+
CENTERED<br>OVERLAY
|
|
81
|
+
</div>
|
|
82
|
+
<div class="overlay-top-left p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">TOP LEFT</div>
|
|
83
|
+
<div class="overlay-bottom-right p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">BOTTOM RIGHT</div>
|
|
84
|
+
</div>
|
|
33
85
|
</div>
|
|
34
|
-
|
|
35
|
-
|
|
86
|
+
|
|
87
|
+
<!-- Focus Glow Interaction Section -->
|
|
88
|
+
<div class="mb-12">
|
|
89
|
+
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-6">Interactive Focus Primitives (Click to Test Glow)</h3>
|
|
90
|
+
|
|
91
|
+
<div class="flex flex-wrap gap-6 mb-8">
|
|
92
|
+
<button class="btn-starlight focus-glow-purple-500 px-8 py-4">Purple Glow Button</button>
|
|
93
|
+
<button class="btn-secondary focus-glow-orange-500 px-8 py-4">Orange Glow Button</button>
|
|
94
|
+
<button class="bg-white_5 p-4 rounded-xl focus-glow text-white font-bold px-8">Default Glow Button</button>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
98
|
+
<div>
|
|
99
|
+
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Purple Focus Input</label>
|
|
100
|
+
<input type="text" class="input-starlight focus-glow-purple-500 h-14" placeholder="Focus for Purple Glow...">
|
|
101
|
+
</div>
|
|
102
|
+
<div>
|
|
103
|
+
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Orange Focus Input</label>
|
|
104
|
+
<input type="text" class="input-starlight focus-glow-orange-500 h-14" placeholder="Focus for Orange Glow...">
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
36
107
|
</div>
|
|
37
108
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</linearGradient>
|
|
46
|
-
</defs>
|
|
47
|
-
</svg>
|
|
48
|
-
<div class="overlay-base text-white text-xl font-bold">Centered Overlay</div>
|
|
49
|
-
<div class="overlay-top-left p-2 bg-black/50 text-xs">Top Left</div>
|
|
50
|
-
<div class="overlay-bottom-right p-2 bg-black/50 text-xs">Bottom Right</div>
|
|
109
|
+
<!-- Plugin Extension Test -->
|
|
110
|
+
<div class="mt-20 pt-10 border-t border-white_10">
|
|
111
|
+
<h3 class="text-white text-xl font-black uppercase tracking-widest mb-6">Plugin Extension Test</h3>
|
|
112
|
+
<div class="flex gap-8 items-center">
|
|
113
|
+
<button class="btn-neon">Neon Plugin Button</button>
|
|
114
|
+
<div class="text-glow text-4xl font-black text-neon-green">NEON GLOW TEXT</div>
|
|
115
|
+
</div>
|
|
51
116
|
</div>
|
|
117
|
+
|
|
118
|
+
<script>
|
|
119
|
+
function toggleTheme() {
|
|
120
|
+
const body = document.body;
|
|
121
|
+
if (body.classList.contains('theme-blue-peach')) {
|
|
122
|
+
body.classList.replace('theme-blue-peach', 'theme-purple-via');
|
|
123
|
+
} else {
|
|
124
|
+
body.classList.replace('theme-purple-via', 'theme-blue-peach');
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
</script>
|
|
52
128
|
</body>
|
|
53
129
|
</html>
|
package/examples/index.html
CHANGED
|
@@ -38,9 +38,12 @@
|
|
|
38
38
|
</button>
|
|
39
39
|
|
|
40
40
|
<div id="dialog" class="dialog-overlay" style="display: none;">
|
|
41
|
-
<div class="dialog
|
|
42
|
-
<
|
|
43
|
-
<
|
|
41
|
+
<div class="starlight-dialog">
|
|
42
|
+
<button class="dialog-close" onclick="closeDialog()">
|
|
43
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
44
|
+
</button>
|
|
45
|
+
<div class="p-4">
|
|
46
|
+
<h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4 text-gradient-starlight">Advanced Deployment</h2>
|
|
44
47
|
<p class="text-base text-slate-400 font-medium mb-10">Configure your synchronization parameters below.</p>
|
|
45
48
|
|
|
46
49
|
<div class="mb-10">
|
|
@@ -48,9 +51,27 @@
|
|
|
48
51
|
<select class="input-starlight w-full h-14">
|
|
49
52
|
<option>Andromeda Prime</option>
|
|
50
53
|
<option>Nebula Secondary</option>
|
|
54
|
+
<option>Triangulum Core</option>
|
|
51
55
|
</select>
|
|
52
56
|
</div>
|
|
53
57
|
|
|
58
|
+
<div class="grid grid-cols-2 gap-8 mb-12">
|
|
59
|
+
<div>
|
|
60
|
+
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Node Priority</label>
|
|
61
|
+
<div class="flex gap-3">
|
|
62
|
+
<span class="badge-base bg-starlight-blue_10 text-starlight-blue border-starlight-blue_20 px-4 py-2">Alpha</span>
|
|
63
|
+
<span class="badge-base bg-white_5 text-slate-500 border-white_10 px-4 py-2">Omega</span>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div>
|
|
67
|
+
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Sync Status</label>
|
|
68
|
+
<div class="flex items-center gap-3">
|
|
69
|
+
<div class="w-2 h-2 rounded-full bg-green-500 ani-pulse"></div>
|
|
70
|
+
<span class="text-xs font-bold uppercase tracking-widest text-slate-300">Ready</span>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
54
75
|
<div class="flex gap-6 justify-end">
|
|
55
76
|
<button class="btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]" onclick="closeDialog()">Cancel</button>
|
|
56
77
|
<button class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]">Confirm Deploy</button>
|
|
@@ -61,7 +82,7 @@
|
|
|
61
82
|
|
|
62
83
|
<header class="hero container">
|
|
63
84
|
<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.7.
|
|
85
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.4</span>
|
|
65
86
|
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
66
87
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
67
88
|
A standardized, high-performance UI library.
|
|
@@ -79,7 +100,7 @@
|
|
|
79
100
|
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
80
101
|
<div class="grid-3">
|
|
81
102
|
<a href="blog-template.html" class="starlight-card">
|
|
82
|
-
<div class="h-40 bg-gradient-to-br from-blue-
|
|
103
|
+
<div class="h-40 bg-gradient-to-br from-blue-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
83
104
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
84
105
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
85
106
|
</svg>
|
|
@@ -89,7 +110,7 @@
|
|
|
89
110
|
</a>
|
|
90
111
|
|
|
91
112
|
<a href="email-template.html" class="starlight-card">
|
|
92
|
-
<div class="h-40 bg-gradient-to-br from-
|
|
113
|
+
<div class="h-40 bg-gradient-to-br from-starlight_20 to-blue-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
93
114
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
94
115
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
95
116
|
</svg>
|
|
@@ -99,7 +120,7 @@
|
|
|
99
120
|
</a>
|
|
100
121
|
|
|
101
122
|
<a href="gaming-template.html" class="starlight-card">
|
|
102
|
-
<div class="h-40 bg-gradient-to-br from-purple-
|
|
123
|
+
<div class="h-40 bg-gradient-to-br from-purple-500_20 to-pink-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
103
124
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
104
125
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
105
126
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
@@ -110,7 +131,7 @@
|
|
|
110
131
|
</a>
|
|
111
132
|
|
|
112
133
|
<a href="news-template.html" class="starlight-card">
|
|
113
|
-
<div class="h-40 bg-gradient-to-br from-orange-
|
|
134
|
+
<div class="h-40 bg-gradient-to-br from-orange-500_20 to-red-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
114
135
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
115
136
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
116
137
|
</svg>
|
|
@@ -120,7 +141,7 @@
|
|
|
120
141
|
</a>
|
|
121
142
|
|
|
122
143
|
<a href="shopping/index.html" class="starlight-card">
|
|
123
|
-
<div class="h-40 bg-gradient-to-br from-green-
|
|
144
|
+
<div class="h-40 bg-gradient-to-br from-green-500_20 to-teal-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
124
145
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
125
146
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
126
147
|
</svg>
|
|
@@ -130,7 +151,7 @@
|
|
|
130
151
|
</a>
|
|
131
152
|
|
|
132
153
|
<a href="travel/index.html" class="starlight-card">
|
|
133
|
-
<div class="h-40 bg-gradient-to-br from-cyan-
|
|
154
|
+
<div class="h-40 bg-gradient-to-br from-cyan-500_20 to-blue-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
134
155
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
135
156
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
136
157
|
</svg>
|
|
@@ -140,7 +161,7 @@
|
|
|
140
161
|
</a>
|
|
141
162
|
|
|
142
163
|
<a href="analytics-dashboard.html" class="starlight-card">
|
|
143
|
-
<div class="h-40 bg-gradient-to-br from-indigo-
|
|
164
|
+
<div class="h-40 bg-gradient-to-br from-indigo-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
144
165
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
145
166
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
146
167
|
</svg>
|
|
@@ -150,7 +171,7 @@
|
|
|
150
171
|
</a>
|
|
151
172
|
|
|
152
173
|
<a href="admin-panel.html" class="starlight-card">
|
|
153
|
-
<div class="h-40 bg-gradient-to-br from-rose-
|
|
174
|
+
<div class="h-40 bg-gradient-to-br from-rose-500_20 to-orange-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
154
175
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
155
176
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
156
177
|
</svg>
|
|
@@ -160,7 +181,7 @@
|
|
|
160
181
|
</a>
|
|
161
182
|
|
|
162
183
|
<a href="music-streaming.html" class="starlight-card">
|
|
163
|
-
<div class="h-40 bg-gradient-to-br from-pink-
|
|
184
|
+
<div class="h-40 bg-gradient-to-br from-pink-500_20 to-rose-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
164
185
|
<svg class="w-16 h-16 text-starlight" fill="currentColor" viewBox="0 0 24 24">
|
|
165
186
|
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
166
187
|
</svg>
|
|
@@ -170,7 +191,7 @@
|
|
|
170
191
|
</a>
|
|
171
192
|
|
|
172
193
|
<a href="chat-messaging.html" class="starlight-card">
|
|
173
|
-
<div class="h-40 bg-gradient-to-br from-blue-
|
|
194
|
+
<div class="h-40 bg-gradient-to-br from-blue-500_20 to-cyan-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
174
195
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
175
196
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
176
197
|
</svg>
|
|
@@ -180,7 +201,7 @@
|
|
|
180
201
|
</a>
|
|
181
202
|
|
|
182
203
|
<a href="portfolio-resume.html" class="starlight-card">
|
|
183
|
-
<div class="h-40 bg-gradient-to-br from-violet-
|
|
204
|
+
<div class="h-40 bg-gradient-to-br from-violet-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
184
205
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
185
206
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
186
207
|
</svg>
|
|
@@ -190,7 +211,7 @@
|
|
|
190
211
|
</a>
|
|
191
212
|
|
|
192
213
|
<a href="video-streaming.html" class="starlight-card">
|
|
193
|
-
<div class="h-40 bg-gradient-to-br from-red-
|
|
214
|
+
<div class="h-40 bg-gradient-to-br from-red-500_20 to-orange-500_20 rounded-xl mb-4 flex items-center justify-center">
|
|
194
215
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
195
216
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
196
217
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
@@ -246,9 +267,9 @@
|
|
|
246
267
|
<div class="starlight-card">
|
|
247
268
|
<h3 class="text-xl font-bold mb-6">Loading States</h3>
|
|
248
269
|
<div class="flex flex-col gap-4">
|
|
249
|
-
<div class="skeleton w-
|
|
270
|
+
<div class="skeleton w-3_4 h-6"></div>
|
|
250
271
|
<div class="skeleton w-full h-12"></div>
|
|
251
|
-
<div class="skeleton w-
|
|
272
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
252
273
|
</div>
|
|
253
274
|
<p class="text-xs text-muted mt-6">Visible and high-contrast in both light and dark modes.</p>
|
|
254
275
|
</div>
|