atproto blogging
nonbinary.computer
1/* Default theme variables for non-notebook pages */
2/* These match the Rose Pine light/dark defaults */
3
4/* ==========================================================================
5 FONT FACES
6 Note: Dioxus serves all assets from /assets/ regardless of subdirectory
7 ========================================================================== */
8
9/* --- Ioskeley Mono (monospace) --- */
10@font-face {
11 font-family: "Ioskeley Mono";
12 font-style: normal;
13 font-weight: normal;
14 src: url("/assets/IoskeleyMono-Regular.woff2") format("woff2");
15}
16@font-face {
17 font-family: "Ioskeley Mono";
18 font-style: normal;
19 font-weight: lighter;
20 src: url("/assets/IoskeleyMono-Light.woff2") format("woff2");
21}
22@font-face {
23 font-family: "Ioskeley Mono";
24 font-style: italic;
25 font-weight: lighter;
26 src: url("/assets/IoskeleyMono-LightItalic.woff2") format("woff2");
27}
28@font-face {
29 font-family: "Ioskeley Mono";
30 font-style: normal;
31 font-weight: bold;
32 src: url("/assets/IoskeleyMono-Bold.woff2") format("woff2");
33}
34@font-face {
35 font-family: "Ioskeley Mono";
36 font-style: italic;
37 font-weight: normal;
38 src: url("/assets/IoskeleyMono-Italic.woff2") format("woff2");
39}
40@font-face {
41 font-family: "Ioskeley Mono";
42 font-style: italic;
43 font-weight: bold;
44 src: url("/assets/IoskeleyMono-BoldItalic.woff2") format("woff2");
45}
46
47/* --- Adobe Caslon Pro (serif) --- */
48@font-face {
49 font-family: "Adobe Caslon Pro";
50 font-style: normal;
51 font-weight: normal;
52 src: url("/assets/AdobeCaslonPro-Regular.ttf") format("truetype");
53}
54
55@font-face {
56 font-family: "Adobe Caslon Pro";
57 font-style: normal;
58 font-weight: bold;
59 src: url("/assets/AdobeCaslonPro-Bold.ttf") format("truetype");
60}
61
62@font-face {
63 font-family: "Adobe Caslon Pro";
64 font-style: italic;
65 font-weight: normal;
66 src: url("/assets/AdobeCaslonPro-Italic.ttf") format("truetype");
67}
68
69@font-face {
70 font-family: "Adobe Caslon Pro";
71 font-style: italic;
72 font-weight: bold;
73 src: url("/assets/AdobeCaslonPro-BoldItalic.ttf") format("truetype");
74}
75
76/* --- Latin Modern Roman (serif) --- */
77@font-face {
78 font-family: "Latin Modern Roman";
79 font-style: normal;
80 font-weight: normal;
81 src: url("/assets/LatinModernRoman-Regular.otf") format("opentype");
82}
83@font-face {
84 font-family: "Latin Modern Roman";
85 font-style: normal;
86 font-weight: bold;
87 src: url("/assets/LatinModernRoman-Bold.otf") format("opentype");
88}
89@font-face {
90 font-family: "Latin Modern Roman";
91 font-style: italic;
92 font-weight: normal;
93 src: url("/assets/LatinModernRoman-Italic.otf") format("opentype");
94}
95@font-face {
96 font-family: "Latin Modern Roman";
97 font-style: italic;
98 font-weight: bold;
99 src: url("/assets/LatinModernRoman-BoldItalic.otf") format("opentype");
100}
101
102/* --- Computer Modern Serif --- */
103@font-face {
104 font-family: "CM Serif";
105 font-style: normal;
106 font-weight: normal;
107 src: url("/assets/CMSerif-Regular.woff") format("woff");
108}
109@font-face {
110 font-family: "CM Serif";
111 font-style: normal;
112 font-weight: bold;
113 src: url("/assets/CMSerif-Bold.woff") format("woff");
114}
115@font-face {
116 font-family: "CM Serif";
117 font-style: italic;
118 font-weight: normal;
119 src: url("/assets/CMSerif-Italic.woff") format("woff");
120}
121@font-face {
122 font-family: "CM Serif";
123 font-style: italic;
124 font-weight: bold;
125 src: url("/assets/CMSerif-BoldItalic.woff") format("woff");
126}
127
128/* --- Computer Modern Sans --- */
129@font-face {
130 font-family: "CM Sans";
131 font-style: normal;
132 font-weight: normal;
133 src: url("/assets/CMSans-Regular.woff") format("woff");
134}
135@font-face {
136 font-family: "CM Sans";
137 font-style: normal;
138 font-weight: bold;
139 src: url("/assets/CMSans-Bold.woff") format("woff");
140}
141@font-face {
142 font-family: "CM Sans";
143 font-style: italic;
144 font-weight: normal;
145 src: url("/assets/CMSans-Italic.woff") format("woff");
146}
147@font-face {
148 font-family: "CM Sans";
149 font-style: italic;
150 font-weight: bold;
151 src: url("/assets/CMSans-BoldItalic.woff") format("woff");
152}
153
154/* --- Junction (geometric sans) --- */
155@font-face {
156 font-family: "Junction";
157 font-style: normal;
158 font-weight: 300;
159 src: url("/assets/Junction-Light.woff") format("woff");
160}
161@font-face {
162 font-family: "Junction";
163 font-style: normal;
164 font-weight: normal;
165 src: url("/assets/Junction-Regular.woff") format("woff");
166}
167@font-face {
168 font-family: "Junction";
169 font-style: normal;
170 font-weight: bold;
171 src: url("/assets/Junction-Bold.woff") format("woff");
172}
173
174/* --- Proza Libre (humanist sans) --- */
175@font-face {
176 font-family: "Proza Libre";
177 font-style: normal;
178 font-weight: normal;
179 src: url("/assets/ProzaLibre-Regular.woff2") format("woff2");
180}
181@font-face {
182 font-family: "Proza Libre";
183 font-style: italic;
184 font-weight: normal;
185 src: url("/assets/ProzaLibre-Italic.woff2") format("woff2");
186}
187@font-face {
188 font-family: "Proza Libre";
189 font-style: normal;
190 font-weight: 500;
191 src: url("/assets/ProzaLibre-Medium.woff2") format("woff2");
192}
193@font-face {
194 font-family: "Proza Libre";
195 font-style: normal;
196 font-weight: 600;
197 src: url("/assets/ProzaLibre-SemiBold.woff2") format("woff2");
198}
199@font-face {
200 font-family: "Proza Libre";
201 font-style: normal;
202 font-weight: bold;
203 src: url("/assets/ProzaLibre-Bold.woff2") format("woff2");
204}
205@font-face {
206 font-family: "Proza Libre";
207 font-style: italic;
208 font-weight: bold;
209 src: url("/assets/ProzaLibre-BoldItalic.woff2") format("woff2");
210}
211
212/* ==========================================================================
213 CSS VARIABLES - LIGHT MODE
214
215 CONTRAST OPTIONS: Uncomment ONE of the following sections
216 - ORIGINAL: Rose Pine Dawn defaults (soft, low contrast)
217 - MILD: ~25% darker text, subtle improvement
218 - MODERATE: ~40% darker text, noticeably better contrast
219 ========================================================================== */
220
221/* --- ORIGINAL ROSE PINE DAWN (uncomment to restore) ---
222:root {
223 --color-base: #faf4ed;
224 --color-surface: #fffaf3;
225 --color-overlay: #f2e9e1;
226 --color-text: #575279;
227 --color-muted: #9893a5;
228 --color-subtle: #797593;
229 --color-emphasis: #403d52;
230 --color-primary: #907aa9;
231 --color-secondary: #56949f;
232 --color-tertiary: #286983;
233 --color-error: #b4637a;
234 --color-warning: #ea9d34;
235 --color-success: #286983;
236 --color-border: #908caa;
237 --color-link: #d7827e;
238 --color-highlight: #cecacd;
239
240 --font-ui: "Proza Libre", "Junction", system-ui, -apple-system, sans-serif;
241 --font-body: "IBM Plex Sans", system-ui, sans-serif;
242 --font-heading: "IBM Plex Sans", system-ui, sans-serif;
243 --font-mono: "Ioskeley Mono", "IBM Plex Mono", Consolas, monospace;
244
245 --spacing-base: 16px;
246 --spacing-line-height: 1.6;
247 --spacing-scale: 1.25;
248}
249*/
250
251/* --- MILD CONTRAST (uncomment to use) ---
252:root {
253 --color-base: #faf4ed;
254 --color-surface: #fffaf3;
255 --color-overlay: #f2e9e1;
256 --color-text: #453f5c;
257 --color-muted: #7a7589;
258 --color-subtle: #5f5a73;
259 --color-emphasis: #2d2a3d;
260 --color-primary: #907aa9;
261 --color-secondary: #56949f;
262 --color-tertiary: #286983;
263 --color-error: #b4637a;
264 --color-warning: #ea9d34;
265 --color-success: #286983;
266 --color-border: #908caa;
267 --color-link: #d7827e;
268 --color-highlight: #cecacd;
269
270 --font-ui: "Proza Libre", "Junction", system-ui, -apple-system, sans-serif;
271 --font-body: "Latin Modern Roman", "Adobe Caslon Pro", "CM Serif", Georgia, serif;
272 --font-heading: "Proza Libre", "Junction", "CM Sans", system-ui, sans-serif;
273 --font-mono: "Ioskeley Mono", "IBM Plex Mono", "Berkeley Mono", Consolas, monospace;
274
275 --spacing-base: 16px;
276 --spacing-line-height: 1.6;
277 --spacing-scale: 1.25;
278}
279*/
280
281/* --- MODERATE CONTRAST (active) --- */
282:root {
283 --color-base: #faf4ed;
284 --color-surface: #fffaf3;
285 --color-overlay: #f2e9e1;
286 /* Text colors darkened for better contrast */
287 --color-text: #1f1d2e;
288 --color-muted: #635e74;
289 --color-subtle: #4a4560;
290 --color-emphasis: #1e1a2d;
291 /* Accent colors kept at original Rose Pine Dawn values */
292 --color-primary: #907aa9;
293 --color-secondary: #56949f;
294 --color-tertiary: #286983;
295 --color-error: #b4637a;
296 --color-warning: #ea9d34;
297 --color-success: #286983;
298 --color-border: #908caa;
299 --color-link: #d7827e;
300 --color-highlight: #cecacd;
301
302 /* UI FONT - Fixed sans stack for all UI elements (buttons, nav, labels, etc.)
303 This does NOT follow theme - keeps UI consistent across all content themes */
304 --font-ui: "CM Sans", "Junction", "Proza Libre", system-ui, -apple-system, sans-serif;
305
306 /* CONTENT FONT STACKS - Edit these to try different combinations
307 Sans options: "Proza Libre", "Junction", "CM Sans", "IBM Plex Sans"
308 Serif options: "Latin Modern Roman", "Adobe Caslon Pro", "CM Serif"
309 */
310 --font-body: "Adobe Caslon Pro", "Latin Modern Roman", "CM Serif", Georgia, serif;
311 --font-heading: "IBM Plex Sans", "CM Sans", "Junction", "Proza Libre", system-ui, sans-serif;
312 --font-mono: "Ioskeley Mono", "IBM Plex Mono", "Berkeley Mono", Consolas, monospace;
313
314 --spacing-base: 16px;
315 --spacing-line-height: 1.6;
316 --spacing-scale: 1.25;
317}
318
319/* CSS Variables - Dark Mode */
320@media (prefers-color-scheme: dark) {
321 :root {
322 --color-base: #191724;
323 --color-surface: #1f1d2e;
324 --color-overlay: #26233a;
325 --color-text: #e0def4;
326 --color-muted: #6e6a86;
327 --color-subtle: #908caa;
328 --color-emphasis: #e0def4;
329 --color-primary: #c4a7e7;
330 --color-secondary: #3e8fb0;
331 --color-tertiary: #9ccfd8;
332 --color-error: #eb6f92;
333 --color-warning: #f6c177;
334 --color-success: #31748f;
335 --color-border: #403d52;
336 --color-link: #ebbcba;
337 --color-highlight: #524f67;
338 }
339}