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# wisp.css
2
3A minimal, monospace-first CSS stylesheet with automatic light/dark mode. See it live on https://wisp.place or https://sites.wisp.place/wisp.place/wisp.css for a demo.
4
5## Quick Start
6
7### CDN
8```html
9<link rel="stylesheet" href="https://sites.wisp.place/wisp.place/wisp.css/wisp.css">
10```
11
12### Self-hosted
13
14Just copy `wisp.css` to your project and link to it:
15
16```html
17<link rel="stylesheet" href="/wisp.css">
18```
19
20## Features
21
22- **Automatic dark mode** via `prefers-color-scheme`
23- **CSS custom properties** for easy theming
24- **JetBrains Mono** typography
25- **Components**: cards, buttons, alerts, forms
26- **Utility classes**: spacing, flexbox, text styling
27- **Responsive** with mobile-first breakpoints
28
29## CSS Variables
30
31All variables use the `--wisp-` prefix. Unprefixed aliases are also available for convenience.
32
33### Colors
34
35```css
36--wisp-bg /* Main background */
37--wisp-bg-alt /* Alternate background (cards, etc) */
38--wisp-text /* Primary text */
39--wisp-text-muted /* Secondary text */
40--wisp-text-subtle /* Tertiary text */
41--wisp-border /* Strong borders */
42--wisp-border-light /* Light borders */
43--wisp-accent /* Accent/link color */
44--wisp-cta-bg /* Button background */
45--wisp-cta-text /* Button text */
46--wisp-code-bg /* Code block background */
47--wisp-success /* Success state */
48--wisp-danger /* Error/danger state */
49--wisp-warning /* Warning state */
50--wisp-info /* Info state */
51```
52
53### Customizing
54
55Override variables in your own CSS:
56
57```css
58:root {
59 --wisp-accent: oklch(0.65 0.20 200); /* Blue accent */
60}
61```
62
63## Components
64
65### Cards
66
67```html
68<div class="card">Basic card</div>
69<div class="card success">Success card</div>
70<div class="card danger">Danger card</div>
71<div class="card info">Info card</div>
72```
73
74### Buttons
75
76```html
77<button>Primary button</button>
78<button class="outline">Outline button</button>
79<a class="cta-primary" href="#">CTA Primary</a>
80<a class="cta-secondary" href="#">CTA Secondary</a>
81```
82
83### Alerts
84
85```html
86<div class="alert alert-success">Success message</div>
87<div class="alert alert-danger">Error message</div>
88<div class="alert alert-warning">Warning message</div>
89<div class="alert alert-info">Info message</div>
90```
91
92### Forms
93
94```html
95<label for="email">Email</label>
96<input type="email" id="email" placeholder="you@example.com">
97```
98
99## Utility Classes
100
101### Spacing
102
103- `.m-{0-4}` - margin
104- `.mt-{0-6}`, `.mb-{0-6}`, `.ml-{0-4}`, `.mr-{0-4}` - directional margin
105- `.p-{0-6}` - padding
106- `.px-{1-4}`, `.py-{1-4}` - horizontal/vertical padding
107- `.gap-{1-6}` - flex/grid gap
108
109### Flexbox
110
111- `.flex`, `.inline-flex`
112- `.flex-col`, `.flex-wrap`
113- `.items-start`, `.items-center`, `.items-end`
114- `.justify-start`, `.justify-center`, `.justify-end`, `.justify-between`
115
116### Text
117
118- `.text-left`, `.text-center`, `.text-right`
119- `.text-sm`, `.text-base`, `.text-lg`, `.text-xl`
120- `.font-normal`, `.font-medium`, `.font-semibold`, `.font-bold`
121- `.text-muted`, `.text-subtle`, `.text-accent`, `.text-success`, `.text-danger`
122
123### Display
124
125- `.hidden`, `.block`, `.inline`, `.inline-block`, `.flex`, `.grid`
126- `.hide-mobile` - hidden on screens < 768px
127- `.hide-desktop` - hidden on screens >= 769px
128
129## Layout
130
131```html
132<div class="container">
133 <!-- max-width: 900px, centered with padding -->
134</div>
135
136<div class="container-wide">
137 <!-- max-width: 1100px, centered with padding -->
138</div>
139```
140
141## License
142
143MIT