atproto blogging
nonbinary.computer
1/* Entry page layout - centered content with sidenote margin */
2.entry-page {
3 --content-width: 95ch;
4 --sidenote-width: 14rem;
5 --sidenote-gap: 1.5rem;
6
7 display: flex;
8 flex-direction: column;
9 min-height: 100vh;
10 background: var(--color-base);
11}
12
13/* Header with inline nav + metadata */
14.entry-header {
15 display: flex;
16 align-items: baseline;
17 justify-content: center;
18 gap: 1rem;
19 padding: 1.5rem 1rem;
20 max-width: calc(var(--content-width) + var(--sidenote-width) + var(--sidenote-gap) + 10rem);
21 margin: 0 auto;
22 width: 100%;
23 box-sizing: border-box;
24}
25
26/* Nav links in header - minimal style */
27.nav-button {
28 display: flex;
29 align-items: center;
30 gap: 0.5rem;
31 color: var(--color-subtle);
32 text-decoration: none;
33 font-size: 0.9rem;
34 white-space: nowrap;
35 transition: color 0.2s ease;
36}
37
38.entry-header .nav-button:hover {
39 color: var(--color-primary);
40}
41
42.entry-header .nav-button-prev,
43.entry-header .nav-placeholder:first-child {
44 flex: 1;
45 min-width: 0;
46}
47
48.entry-header .nav-button-next,
49.entry-header .nav-placeholder:last-child {
50 flex: 1;
51 min-width: 0;
52 justify-content: flex-end;
53}
54
55.entry-header .nav-arrow {
56 font-weight: 600;
57 color: var(--color-primary);
58 flex-shrink: 0;
59}
60
61.entry-header .nav-title {
62 overflow: hidden;
63 text-overflow: ellipsis;
64}
65
66/* Metadata anchored to content width */
67.entry-header .entry-metadata {
68 width: min(var(--content-width), 100%);
69 flex-shrink: 1;
70 margin: 0;
71 padding: 0;
72 border: none;
73}
74
75/* Main content area */
76.entry-content-wrapper {
77 flex: 1;
78 display: flex;
79 justify-content: center;
80 padding: 0 1rem;
81}
82
83.entry-content-main {
84 width: var(--content-width);
85 max-width: 100%;
86 position: relative;
87}
88
89/* Sidenote layout handled by css.rs body padding */
90
91/* Footer navigation */
92.entry-footer-nav {
93 display: flex;
94 justify-content: space-between;
95 align-items: stretch;
96 gap: 2rem;
97 max-width: calc(var(--content-width) + 20rem);
98 margin: 4rem auto 2rem;
99 padding: 0 1rem;
100 width: 100%;
101 box-sizing: border-box;
102}
103
104.entry-footer-nav .nav-button-prev {
105 align-items: flex-start;
106 text-align: start;
107}
108
109.entry-footer-nav .nav-button-next {
110 align-items: flex-end;
111 text-align: end;
112 margin-inline-start: auto;
113}
114
115.entry-footer-nav .nav-arrow {
116 font-size: 1.25rem;
117 font-weight: bold;
118 color: var(--color-primary);
119}
120
121.entry-footer-nav .nav-title {
122 font-size: 0.95rem;
123 font-weight: 500;
124 line-height: 1.4;
125}
126
127/* Entry metadata in header context */
128.entry-header .entry-metadata .entry-title {
129 font-size: 1.75rem;
130 margin: 0 0 0.5rem 0;
131}
132
133.entry-header .entry-metadata .entry-header-row {
134 flex-wrap: wrap;
135}
136
137/* Standalone entry metadata (when not in header) */
138.entry-metadata {
139 margin-bottom: calc(1rem * var(--spacing-scale, 1.5));
140 padding-bottom: calc(0.5rem * var(--spacing-scale, 1.5));
141 border-bottom: 2px solid var(--color-border);
142}
143
144.entry-header-row {
145 display: flex;
146 align-items: baseline;
147 justify-content: space-between;
148 gap: 1rem;
149}
150
151.entry-title {
152 margin-bottom: calc(1rem * var(--spacing-scale, 1.5));
153 margin-top: calc(1rem * var(--spacing-scale, 1.5));
154 color: var(--color-text);
155 flex: 1;
156}
157
158.entry-meta-info {
159 display: flex;
160 flex-wrap: wrap;
161 gap: calc(0.25rem * var(--spacing-scale, 1.5)) calc(1rem * var(--spacing-scale, 1.5));
162 font-size: 0.95rem;
163 color: var(--color-subtle);
164}
165
166.entry-authors,
167.entry-date,
168.entry-tags,
169.entry-reading-stats {
170 display: flex;
171 align-items: center;
172 font-family: var(--font-ui);
173 gap: 0.5rem;
174}
175
176.entry-reading-stats {
177 color: var(--color-subtle);
178 margin-inline-start: auto;
179 margin-top: 0.25rem;
180}
181
182.entry-reading-stats .word-count::after {
183 content: "·";
184 margin-inline-start: 0.5rem;
185}
186
187.entry-date {
188 margin-inline-start: auto;
189 font-weight: 400;
190 align-items: last baseline;
191 color: var(--color-subtle);
192}
193
194.meta-label {
195 font-weight: 400;
196 color: var(--color-subtle);
197}
198
199.author-name {
200 color: var(--color-link);
201 font-weight: 450;
202 text-decoration: none;
203 transition: color 0.2s ease;
204}
205
206.author-name:hover {
207 color: var(--color-emphasis);
208 text-decoration: underline;
209}
210
211.entry-meta-secondary {
212 display: flex;
213 flex-wrap: wrap;
214 align-items: center;
215 gap: 0.5rem 1rem;
216 flex-basis: 100%;
217}
218
219.entry-tags {
220 display: flex;
221 gap: 0.5rem;
222 flex-wrap: wrap;
223}
224
225.entry-tag {
226 padding: 0.25rem 0.5rem;
227 font-size: 0.85rem;
228 color: var(--color-subtle);
229 background-color: var(--color-surface);
230 border: 1px solid var(--color-border);
231 text-decoration: none;
232 transition:
233 color 0.2s ease,
234 border-color 0.2s ease;
235}
236
237.entry-tag:hover {
238 color: var(--color-tertiary);
239 border-color: var(--color-tertiary);
240}
241
242/* Content styling */
243.entry-content-main ::selection {
244 background: var(--color-highlight);
245 color: var(--color-text);
246}
247
248.entry-content-main code {
249 background: var(--color-surface);
250}
251
252.entry-content-main pre code {
253 background: var(--color-surface);
254}
255
256.entry-content-main blockquote {
257 border-inline-start-color: var(--color-secondary);
258 background: var(--color-surface);
259}
260
261.entry-content-main table th {
262 background: var(--color-surface);
263 border-color: var(--color-border);
264}
265
266.entry-content-main table td {
267 border-color: var(--color-border);
268}
269
270.entry-content-main table tr:hover {
271 background: var(--color-surface);
272}
273
274/* TODO: footnote ordering needs non-flex solution for aside reflow to work */
275
276/* Subtitle (for external blog posts like WhiteWind) */
277.entry-subtitle {
278 font-size: 1.1rem;
279 font-style: italic;
280 color: var(--color-subtle);
281 margin: 0 0 1rem 0;
282 line-height: 1.5;
283}
284
285/* Meta row (simpler alternative to entry-meta-info) */
286.entry-meta-row {
287 display: flex;
288 flex-wrap: wrap;
289 gap: 0.5rem 1rem;
290 font-size: 0.95rem;
291 font-family: var(--font-ui);
292 color: var(--color-subtle);
293 align-items: center;
294}
295
296.entry-meta-row .entry-author a {
297 color: var(--color-link);
298 text-decoration: none;
299}
300
301.entry-meta-row .entry-author a:hover {
302 text-decoration: underline;
303}
304
305.entry-meta-row .entry-stats {
306 margin-inline-start: auto;
307}
308
309/* External source badge */
310.entry-source {
311 margin-top: 0.75rem;
312}
313
314.source-badge {
315 display: inline-block;
316 padding: 0.25rem 0.75rem;
317 font-size: 0.85rem;
318 font-family: var(--font-ui);
319 color: var(--color-subtle);
320 background: var(--color-surface);
321 border: 1px solid var(--color-border);
322 border-radius: 4px;
323 text-decoration: none;
324 transition:
325 color 0.2s ease,
326 border-color 0.2s ease;
327}
328
329.source-badge:hover {
330 color: var(--color-primary);
331 border-color: var(--color-primary);
332}
333
334/* Responsive: tablet */
335@media (max-width: 1200px) {
336 .entry-header {
337 flex-wrap: wrap;
338 }
339
340 .entry-header .entry-metadata {
341 order: -1;
342 flex-basis: 100%;
343 max-width: none;
344 }
345
346 .entry-header .nav-button-prev {
347 order: 0;
348 }
349
350 .entry-header .nav-button-next {
351 order: 1;
352 margin-inline-start: auto;
353 }
354}
355
356/* Responsive: narrower */
357@media (max-width: 900px) {
358 .entry-header .nav-title {
359 max-width: 8rem;
360 }
361}
362
363/* Responsive: mobile */
364@media (max-width: 768px) {
365 .entry-header {
366 flex-direction: column;
367 align-items: stretch;
368 gap: 0.5rem;
369 }
370
371 .entry-footer-nav {
372 flex-direction: column;
373 gap: 1rem;
374 margin-top: 2rem;
375 }
376}
377
378/* Small mobile */
379@media (max-width: 480px) {
380 .entry-content-main {
381 padding: 0 0.75rem;
382 }
383
384 .entry-metadata {
385 margin-bottom: 1rem;
386 padding-bottom: 0.75rem;
387 }
388
389 .entry-title {
390 font-size: 1.65rem;
391 margin-top: 0.5rem;
392 margin-bottom: 0.75rem;
393 }
394
395 .entry-meta-info {
396 gap: 0.75rem;
397 font-size: 0.85rem;
398 }
399}