aottr.dev
forked from
nekomimi.pet/wisp.place-monorepo
Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
nekomimi.pet
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>wisp.css - Example</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
10 <link rel="stylesheet" href="./wisp.css">
11</head>
12<body>
13 <header>
14 <div class="header-inner">
15 <a href="#" class="logo">wisp.css</a>
16 <nav>
17 <a href="#typography">Typography</a>
18 <a href="#components">Components</a>
19 <a href="#utilities">Utilities</a>
20 <button id="theme-toggle" class="outline" style="padding: 0.4rem 0.75rem;">
21 <span id="theme-icon">◐</span> <span id="theme-label">System</span>
22 </button>
23 </nav>
24 </div>
25 </header>
26
27 <div class="container">
28 <!-- Hero Section -->
29 <section class="text-center mb-6">
30 <h1>wisp.css</h1>
31 <p class="text-lg">A minimal, monospace-first CSS stylesheet with automatic light/dark mode.</p>
32 <div class="flex justify-center gap-3 mt-4 flex-wrap">
33 <a href="https://tangled.org/nekomimi.pet/wisp.place-monorepo/tree/main/packages/@wisp/css" class="cta-primary" target="_blank">Get Started</a>
34 <a href="https://tangled.org/nekomimi.pet/wisp.place-monorepo/blob/main/packages/@wisp/css/wisp.css" class="cta-secondary" target="_blank">View Source</a>
35 </div>
36 <div class="card mt-5" style="max-width: 600px; margin-left: auto; margin-right: auto; text-align: left;">
37 <h4 class="mb-2">CDN</h4>
38 <code class="block p-3 bg-code rounded mb-3" style="word-break: break-all;">https://sites.wisp.place/wisp.place/wisp.css/wisp.css</code>
39 <p class="text-muted text-sm mb-0">Ideally, download and serve it with your site. It's simple CSS - feel free to take it wholesale and modify as you like.</p>
40 </div>
41 </section>
42
43 <!-- Typography -->
44 <section id="typography" class="mb-6">
45 <h2>Typography</h2>
46
47 <div class="card">
48 <h1>Heading 1</h1>
49 <h2>Heading 2</h2>
50 <h3>Heading 3</h3>
51 <h4>Heading 4</h4>
52 <p>This is a paragraph with <strong>bold text</strong> and <a href="#">a link</a>. The stylesheet uses JetBrains Mono for that clean monospace aesthetic.</p>
53 <p><small>This is small text for captions or metadata.</small></p>
54 <p>Here's some <code>inline code</code> in a sentence.</p>
55 <pre><code>// Code block
56const greeting = "Hello, wisp.css!";
57console.log(greeting);</code></pre>
58 </div>
59 </section>
60
61 <!-- Buttons -->
62 <section id="buttons" class="mb-6">
63 <h2>Buttons</h2>
64
65 <div class="card">
66 <h3>Standard Buttons</h3>
67 <div class="flex gap-3 flex-wrap mb-4">
68 <button>Primary</button>
69 <button class="outline">Outline</button>
70 <button disabled>Disabled</button>
71 </div>
72
73 <h3>CTA Buttons</h3>
74 <div class="flex gap-3 flex-wrap mb-4">
75 <a href="#" class="cta-primary">CTA Primary</a>
76 <a href="#" class="cta-secondary">CTA Secondary</a>
77 </div>
78
79 <h3>Button Sizes</h3>
80 <div class="flex gap-3 items-center flex-wrap">
81 <button>Default</button>
82 <button class="btn-lg">Large</button>
83 </div>
84 </div>
85 </section>
86
87 <!-- Cards -->
88 <section id="components" class="mb-6">
89 <h2>Cards</h2>
90
91 <div class="card">
92 <h3>Default Card</h3>
93 <p class="mb-0">This is a basic card component with some content inside.</p>
94 </div>
95
96 <div class="card success">
97 <h3>Success Card</h3>
98 <p class="mb-0">Use this for positive feedback or confirmations.</p>
99 </div>
100
101 <div class="card danger">
102 <h3>Danger Card</h3>
103 <p class="mb-0">Use this for errors or destructive actions.</p>
104 </div>
105
106 <div class="card warning">
107 <h3>Warning Card</h3>
108 <p class="mb-0">Use this for warnings or important notices.</p>
109 </div>
110
111 <div class="card info">
112 <h3>Info Card</h3>
113 <p class="mb-0">Use this for informational messages.</p>
114 </div>
115
116 <div class="card thick">
117 <div class="card-flex">
118 <div class="card-icon">💡</div>
119 <div>
120 <h3 class="mt-0">Card with Icon</h3>
121 <p class="mb-0">Use <code>card-flex</code> and <code>card-icon</code> for icon layouts.</p>
122 </div>
123 </div>
124 </div>
125 </section>
126
127 <!-- Alerts -->
128 <section id="alerts" class="mb-6">
129 <h2>Alerts</h2>
130
131 <div class="alert alert-success">
132 <strong>Success!</strong> Your changes have been saved.
133 </div>
134
135 <div class="alert alert-info">
136 <strong>Info:</strong> This is some helpful information.
137 </div>
138
139 <div class="alert alert-warning">
140 <strong>Warning:</strong> Please review before continuing.
141 </div>
142
143 <div class="alert alert-danger">
144 <strong>Error:</strong> Something went wrong. Please try again.
145 </div>
146 </section>
147
148 <!-- Forms -->
149 <section id="forms" class="mb-6">
150 <h2>Forms</h2>
151
152 <div class="card">
153 <div class="mb-4">
154 <label for="name">Name</label>
155 <input type="text" id="name" placeholder="Enter your name">
156 </div>
157
158 <div class="mb-4">
159 <label for="email">Email</label>
160 <input type="email" id="email" placeholder="you@example.com">
161 </div>
162
163 <div class="mb-4">
164 <label for="message">Message</label>
165 <textarea id="message" rows="4" placeholder="Write your message..."></textarea>
166 </div>
167
168 <div class="flex gap-3">
169 <button>Submit</button>
170 <button class="outline">Cancel</button>
171 </div>
172 </div>
173 </section>
174
175 <!-- Lists -->
176 <section id="lists" class="mb-6">
177 <h2>Lists</h2>
178
179 <div class="card">
180 <h3>Ordered List</h3>
181 <ol>
182 <li>First item with automatic numbering</li>
183 <li>Second item in the list</li>
184 <li>Third item completes the set</li>
185 </ol>
186
187 <h3>Unordered List with Bullets</h3>
188 <ul>
189 <li class="flex gap-2"><span class="bullet green">•</span> Success item</li>
190 <li class="flex gap-2"><span class="bullet red">•</span> Danger item</li>
191 <li class="flex gap-2"><span class="bullet yellow">•</span> Warning item</li>
192 <li class="flex gap-2"><span class="bullet accent">•</span> Accent item</li>
193 </ul>
194 </div>
195 </section>
196
197 <!-- Spinner -->
198 <section id="spinner" class="mb-6">
199 <h2>Spinners</h2>
200
201 <div class="card">
202 <div class="flex gap-4 items-center">
203 <span class="spinner"></span>
204 <span>Default spinner</span>
205 </div>
206 <div class="flex gap-4 items-center mt-4">
207 <span class="spinner spinner-lg"></span>
208 <span>Large spinner</span>
209 </div>
210 </div>
211 </section>
212
213 <!-- Utilities -->
214 <section id="utilities" class="mb-6">
215 <h2>Utility Classes</h2>
216
217 <div class="card">
218 <h3>Text Colors</h3>
219 <p class="text-muted mb-2">text-muted - Secondary text</p>
220 <p class="text-subtle mb-2">text-subtle - Tertiary text</p>
221 <p class="text-accent mb-2">text-accent - Accent color</p>
222 <p class="text-success mb-2">text-success - Success state</p>
223 <p class="text-danger mb-2">text-danger - Danger state</p>
224 <p class="text-warning mb-0">text-warning - Warning state</p>
225 </div>
226
227 <div class="card">
228 <h3>Text Alignment</h3>
229 <p class="text-left border p-2 mb-2">text-left</p>
230 <p class="text-center border p-2 mb-2">text-center</p>
231 <p class="text-right border p-2 mb-0">text-right</p>
232 </div>
233
234 <div class="card">
235 <h3>Flexbox</h3>
236 <div class="flex justify-between items-center border p-3 mb-3">
237 <span>justify-between</span>
238 <span>items-center</span>
239 </div>
240 <div class="flex flex-col gap-2 border p-3">
241 <span>flex-col</span>
242 <span>with gap-2</span>
243 </div>
244 </div>
245
246 <div class="card">
247 <h3>Spacing</h3>
248 <div class="bg-alt p-4 mb-2">p-4 (padding)</div>
249 <div class="bg-alt p-2 mb-4">p-2 with mb-4 (margin-bottom)</div>
250 <div class="flex gap-4">
251 <div class="bg-alt p-2">gap-4</div>
252 <div class="bg-alt p-2">between</div>
253 <div class="bg-alt p-2">items</div>
254 </div>
255 </div>
256 </section>
257
258 <!-- Color Palette -->
259 <section id="colors" class="mb-6">
260 <h2>Color Palette</h2>
261 <p>Colors automatically adapt to light/dark mode via CSS custom properties.</p>
262
263 <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));" id="color-grid">
264 <div class="card text-center" data-color="--wisp-bg">
265 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-bg); border: 1px solid var(--wisp-border-light);">bg</div>
266 <small>--wisp-bg</small><br>
267 <code class="hex-code text-sm"></code>
268 </div>
269 <div class="card text-center" data-color="--wisp-bg-alt">
270 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-bg-alt);">bg-alt</div>
271 <small>--wisp-bg-alt</small><br>
272 <code class="hex-code text-sm"></code>
273 </div>
274 <div class="card text-center" data-color="--wisp-text">
275 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-text); color: var(--wisp-bg);">text</div>
276 <small>--wisp-text</small><br>
277 <code class="hex-code text-sm"></code>
278 </div>
279 <div class="card text-center" data-color="--wisp-accent">
280 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-accent); color: white;">accent</div>
281 <small>--wisp-accent</small><br>
282 <code class="hex-code text-sm"></code>
283 </div>
284 <div class="card text-center" data-color="--wisp-success">
285 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-success); color: white;">success</div>
286 <small>--wisp-success</small><br>
287 <code class="hex-code text-sm"></code>
288 </div>
289 <div class="card text-center" data-color="--wisp-danger">
290 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-danger); color: white;">danger</div>
291 <small>--wisp-danger</small><br>
292 <code class="hex-code text-sm"></code>
293 </div>
294 <div class="card text-center" data-color="--wisp-warning">
295 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-warning); color: black;">warning</div>
296 <small>--wisp-warning</small><br>
297 <code class="hex-code text-sm"></code>
298 </div>
299 <div class="card text-center" data-color="--wisp-info">
300 <div class="p-4 rounded mb-2 color-swatch" style="background: var(--wisp-info); color: white;">info</div>
301 <small>--wisp-info</small><br>
302 <code class="hex-code text-sm"></code>
303 </div>
304 </div>
305 </section>
306 </div>
307
308 <footer>
309 <div class="footer-inner">
310 <div class="footer-brand">
311 <p>wisp.css</p>
312 <p>A minimal CSS stylesheet for developers who appreciate monospace aesthetics.</p>
313 </div>
314 <div class="footer-col">
315 <h4>Docs</h4>
316 <ul>
317 <li><a href="#typography">Typography</a></li>
318 <li><a href="#components">Components</a></li>
319 <li><a href="#utilities">Utilities</a></li>
320 </ul>
321 </div>
322 <div class="footer-col">
323 <h4>Resources</h4>
324 <ul>
325 <li><a href="#">GitHub</a></li>
326 <li><a href="#">npm</a></li>
327 <li><a href="#">CDN</a></li>
328 </ul>
329 </div>
330 <div class="footer-col">
331 <h4>More</h4>
332 <ul>
333 <li><a href="#">wisp.place</a></li>
334 <li><a href="#">AT Protocol</a></li>
335 </ul>
336 </div>
337 </div>
338 <div class="footer-bottom">
339 <p>MIT License</p>
340 <nav>
341 <a href="#">GitHub</a>
342 </nav>
343 </div>
344 </footer>
345
346 <script>
347 // Theme switcher
348 const themes = ['system', 'light', 'dark']
349 const icons = { system: '◐', light: '☀', dark: '☾' }
350 const labels = { system: 'System', light: 'Light', dark: 'Dark' }
351 let currentTheme = localStorage.getItem('wisp-theme') || 'system'
352
353 function applyTheme(theme) {
354 if (theme === 'system') {
355 document.documentElement.removeAttribute('data-theme')
356 } else {
357 document.documentElement.setAttribute('data-theme', theme)
358 }
359 document.getElementById('theme-icon').textContent = icons[theme]
360 document.getElementById('theme-label').textContent = labels[theme]
361 localStorage.setItem('wisp-theme', theme)
362 setTimeout(updateHexCodes, 50)
363 }
364
365 document.getElementById('theme-toggle').addEventListener('click', () => {
366 const idx = themes.indexOf(currentTheme)
367 currentTheme = themes[(idx + 1) % themes.length]
368 applyTheme(currentTheme)
369 })
370
371 applyTheme(currentTheme)
372
373 // Hex code display
374 function rgbToHex(r, g, b) {
375 return '#' + [r, g, b].map(x => {
376 const hex = Math.round(x).toString(16)
377 return hex.length === 1 ? '0' + hex : hex
378 }).join('')
379 }
380
381 function parseColor(color) {
382 const canvas = document.createElement('canvas')
383 canvas.width = canvas.height = 1
384 const ctx = canvas.getContext('2d')
385 ctx.fillStyle = color
386 ctx.fillRect(0, 0, 1, 1)
387 const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
388 return rgbToHex(r, g, b)
389 }
390
391 function updateHexCodes() {
392 document.querySelectorAll('[data-color]').forEach(card => {
393 const varName = card.dataset.color
394 const computed = getComputedStyle(document.documentElement).getPropertyValue(varName)
395 const hex = parseColor(computed.trim())
396 card.querySelector('.hex-code').textContent = hex.toUpperCase()
397 })
398 }
399
400 // Update hex codes on load and theme change
401 updateHexCodes()
402 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateHexCodes)
403 </script>
404</body>
405</html>