atproto blogging
nonbinary.computer
1/* CSS Reset */
2*, *::before, *::after {
3 box-sizing: border-box;
4 margin: 0;
5 padding: 0;
6}
7
8/* CSS Variables - Light Mode (default) */
9:root {
10 --color-base: #faf4ed;
11 --color-surface: #fffaf3;
12 --color-overlay: #f2e9e1;
13 --color-text: #575279;
14 --color-muted: #9893a5;
15 --color-subtle: #797593;
16 --color-emphasis: #575279;
17 --color-primary: #907aa9;
18 --color-secondary: #56949f;
19 --color-tertiary: #286983;
20 --color-error: #b4637a;
21 --color-warning: #ea9d34;
22 --color-success: #286983;
23 --color-border: #dfdad9;
24 --color-link: #d7827e;
25 --color-highlight: #cecacd;
26
27 --font-body: 'IBM Plex', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
28 --font-heading: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
29 --font-mono: 'IBM Plex Mono', 'Berkeley Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
30
31 --spacing-base: 16px;
32 --spacing-line-height: 1.6;
33 --spacing-scale: 1.25;
34}
35
36/* CSS Variables - Dark Mode */
37@media (prefers-color-scheme: dark) {
38 :root {
39 --color-base: #191724;
40 --color-surface: #1f1d2e;
41 --color-overlay: #26233a;
42 --color-text: #e0def4;
43 --color-muted: #6e6a86;
44 --color-subtle: #908caa;
45 --color-emphasis: #e0def4;
46 --color-primary: #c4a7e7;
47 --color-secondary: #9ccfd8;
48 --color-tertiary: #ebbcba;
49 --color-error: #eb6f92;
50 --color-warning: #f6c177;
51 --color-success: #31748f;
52 --color-border: #403d52;
53 --color-link: #ebbcba;
54 --color-highlight: #524f67;
55 }
56}
57
58/* Base Styles */
59html {
60 font-size: var(--spacing-base);
61 line-height: var(--spacing-line-height);
62}
63
64body {
65 font-family: var(--font-body);
66 color: var(--color-text);
67 background-color: var(--color-base);
68 max-width: 90ch;
69 margin: 0 auto;
70 padding: 2rem 1rem;
71}
72
73/* Typography */
74h1, h2, h3, h4, h5, h6 {
75 font-family: var(--font-heading);
76 margin-top: calc(1rem * var(--spacing-scale));
77 margin-bottom: 0.5rem;
78 line-height: 1.2;
79}
80
81h1 {
82 font-size: 2rem;
83 color: var(--color-secondary);
84}
85h2 {
86 font-size: 1.5rem;
87 color: var(--color-primary);
88}
89h3 {
90 font-size: 1.25rem;
91 color: var(--color-secondary);
92}
93h4 {
94 font-size: 1.2rem;
95 color: var(--color-tertiary);
96}
97h5 {
98 font-size: 1.125rem;
99 color: var(--color-secondary);
100}
101h6 { font-size: 1rem; }
102
103p {
104 margin-bottom: 1rem;
105}
106
107a {
108 color: var(--color-link);
109 text-decoration: none;
110}
111
112a:hover {
113 color: var(--color-emphasis);
114 text-decoration: underline;
115}
116
117/* Selection */
118::selection {
119 background: var(--color-highlight);
120 color: var(--color-text);
121}
122
123/* Lists */
124ul, ol {
125 margin-left: 2rem;
126 margin-bottom: 1rem;
127}
128
129li {
130 margin-bottom: 0.25rem;
131}
132
133/* Code */
134code {
135 font-family: var(--font-mono);
136 background: var(--color-surface);
137 padding: 0.125rem 0.25rem;
138 border-radius: 4px;
139 font-size: 0.9em;
140}
141
142pre {
143 overflow-x: auto;
144 margin-bottom: 1rem;
145 border-radius: 5px;
146 border: 1px solid var(--color-border);
147 box-sizing: border-box;
148}
149
150/* Code blocks inside pre are handled by syntax theme */
151pre code {
152 display: block;
153 width: fit-content;
154 min-width: 100%;
155 padding: 1rem;
156 background: var(--color-surface);
157}
158
159/* Math */
160.math {
161 font-family: var(--font-mono);
162}
163
164.math-display {
165 display: block;
166 margin: 1rem 0;
167 text-align: center;
168}
169
170/* Blockquotes */
171blockquote {
172 border-left: 2px solid var(--color-secondary);
173 background: var(--color-surface);
174 padding-left: 1rem;
175 padding-right: 1rem;
176 padding-top: 0.5rem;
177 padding-bottom: 0.04rem;
178 margin: 1rem 0;
179 font-size: 0.95em;
180 border-bottom-right-radius: 5px;
181 border-top-right-radius: 5px;
182}
183}
184
185/* Tables */
186table {
187 border-collapse: collapse;
188 width: 100%;
189 margin-bottom: 1rem;
190}
191
192th, td {
193 border: 1px solid var(--color-border);
194 padding: 0.5rem;
195 text-align: left;
196}
197
198th {
199 background: var(--color-surface);
200 font-weight: 600;
201}
202
203tr:hover {
204 background: var(--color-surface);
205}
206
207/* Footnotes */
208.footnote-reference {
209 font-size: 0.8em;
210 color: var(--color-subtle);
211}
212
213.footnote-definition {
214 margin-top: 2rem;
215 padding-top: 0.5rem;
216 border-top: 1px solid var(--color-border);
217 font-size: 0.9em;
218}
219
220.footnote-definition-label {
221 font-weight: 600;
222 margin-right: 0.5rem;
223 color: var(--color-primary);
224}
225
226/* Images */
227img {
228 max-width: 100%;
229 height: auto;
230 display: block;
231 margin: 1rem 0;
232 border-radius: 4px;
233}
234
235/* Horizontal Rule */
236hr {
237 border: none;
238 border-top: 2px solid var(--color-border);
239 margin: 2rem 0;
240}