pds dash for shimaenaga.veryroundbird.house (based off of pds.witchcraft.systems)
veryroundbird.house
1@font-face {
2 font-family: "Recursive Variable";
3 font-weight: 100 700;
4 src: url(/fonts/Recursive_VF_1.085.woff2) format('woff2');
5}
6
7@font-face {
8 font-family: "Space Mono";
9 font-weight: normal;
10 font-style: normal;
11 src: url(/fonts/spacemono-regular-webfont.woff2) format('woff2');
12}
13
14@font-face {
15 font-family: "Space Mono";
16 font-weight: bold;
17 font-style: normal;
18 src: url(/fonts/spacemono-bold-webfont.woff2) format('woff2');
19}
20
21@font-face {
22 font-family: "Space Mono";
23 font-weight: normal;
24 font-style: italic;
25 src: url(/fonts/spacemono-italic-webfont.woff2) format('woff2');
26}
27
28@font-face {
29 font-family: "Space Mono";
30 font-weight: bold;
31 font-style: italic;
32 src: url(/fonts/spacemono-bolditalic-webfont.woff2) format('woff2');
33}
34
35:root {
36 /* Color overrides, edit to whatever you want */
37 --primary-h: 260; /* Hue */
38 --background: #EFD7E4;
39 --foreground: #333333;
40
41 --link-color: color-mix(in srgb-linear, color-mix(in srgb-linear, var(--background), red 50%), black 25%);
42 --link-hover-color: color-mix(in srgb-linear, var(--link-color), black 25%);
43 --background-color: var(--background);
44 --header-background-color: var(--background);
45 --content-background-color: rgba(255,255,255,.5);
46 --text-color: var(--foreground);
47 --border-color: color-mix(in srgb-linear, var(--text-color), rgba(0,0,0,.15));
48 --indicator-inactive-color: var(--link-hover-color);
49 --indicator-active-color: var(--link-color);
50 --base-font-size: 14px;
51}
52
53* {
54 box-sizing: border-box;
55}
56
57body {
58 margin: 20px;
59 display: flex;
60 place-items: center;
61 min-width: 320px;
62 min-height: 100vh;
63 background-color: var(--background-color);
64 font-family: "Recursive Variable", monospace;
65 font-size: var(--base-font-size);
66 color: var(--text-color);
67 border-color: var(--border-color);
68 overflow-wrap: break-word;
69 word-wrap: normal;
70 word-break: break-word;
71 hyphens: none;
72}
73
74a {
75 font-weight: 500;
76 color: var(--link-color);
77 text-decoration: inherit;
78}
79a:hover {
80 color: var(--link-hover-color);
81 text-decoration: underline;
82}
83
84h1 {
85 font-family: "Space Mono", monospace;
86 font-size: 2em;
87 line-height: 1.1;
88 margin-bottom: 0;
89 text-align: center;
90}
91
92#app {
93 max-width: 600px;
94 width: 100%;
95 margin: 0;
96 padding: 0;
97 margin-left: auto;
98 margin-right: auto;
99 text-align: center;
100}
101
102/* Page Structure */
103#content {
104 /* split the screen in half, left for accounts, right for posts */
105 width: 100%;
106 margin: 0 auto;
107}
108
109#account {
110 text-align: center;
111 margin-bottom: 20px;
112}
113
114#accountsList {
115 display: grid;
116 grid-template-columns: repeat(12, 1fr);
117 gap: 10px;
118 overflow-y: scroll;
119 height: 100%;
120 width: 100%;
121 padding: 0px;
122 margin: 0px;
123}
124
125#feed {
126 width: 100%;
127 margin-top: 0;
128 margin-bottom: 0;
129}
130
131/* Header */
132#subtitle {
133 font-size: 1.1rem;
134 font-style: oblique 5deg;
135 margin: 0;
136}
137
138#asciiart {
139 font-size: .8rem;
140 line-height: 1;
141 margin: 0 auto;
142 display: inline-block;
143}
144
145/* Post Component */
146.postContainer {
147 border: 1px solid var(--border-color);
148 background-color: var(--background-color);
149 margin-bottom: 15px;
150 overflow-wrap: break-word;
151 overflow: hidden;
152 border-radius: 5px 5px 3px 3px;
153}
154
155.postHeader {
156 display: flex;
157 flex-direction: row;
158 align-items: center;
159 justify-content: start;
160 background-color: var(--header-background-color);
161 padding: 0px 0px;
162 height: fit-content;
163 border-bottom: 1px solid var(--border-color);
164 font-weight: bold;
165 overflow-wrap: break-word;
166 height: 60px;
167}
168
169.headerText {
170 margin-left: 10px;
171 font-size: 0.9em;
172 text-align: start;
173 word-break: break-word;
174 max-width: 80%;
175 max-height: 95%;
176 overflow: hidden;
177 align-self: flex-start;
178 margin-top: auto;
179 margin-bottom: auto;
180}
181
182.displayName {
183 display: block;
184 color: var(--text-color);
185 font-size: 1.2em;
186 padding: 0;
187 margin: 0;
188 overflow-wrap: normal;
189 word-wrap: break-word;
190 word-break: break-word;
191 text-overflow: ellipsis;
192 overflow: hidden;
193 white-space: nowrap;
194 width: 100%;
195}
196
197.handle {
198 display: block;
199 color: var(--border-color);
200 font-size: 0.8em;
201 padding: 0;
202 margin: 0;
203}
204
205.avatar {
206 height: 60px;
207 width: 60px;
208 margin: 0px;
209 margin-left: 0px;
210 overflow: hidden;
211 object-fit: cover;
212 border-right: var(--border-color) 1px solid;
213}
214
215.postLink {
216 color: var(--border-color);
217 font-size: 0.8em;
218 padding: 0;
219 margin: 0;
220}
221
222.postContent {
223 display: flex;
224 text-align: start;
225 flex-direction: column;
226 padding: 10px;
227 background-color: var(--content-background-color);
228 color: var(--text-color);
229 overflow-wrap: break-word;
230 white-space: pre-line;
231}
232
233.replyingText {
234 font-size: 0.7em;
235 margin: 0;
236 padding: 0;
237 padding-bottom: 5px;
238}
239
240.quotingText {
241 font-size: 0.7em;
242 margin: 0;
243 padding: 0;
244 padding-bottom: 5px;
245}
246
247.postText {
248 margin: 0;
249 padding: 0;
250 overflow-wrap: break-word;
251 word-wrap: normal;
252 word-break: break-word;
253 hyphens: none;
254}
255
256.carouselContainer {
257 position: relative;
258 width: 100%;
259 margin-top: 10px;
260 display: flex;
261 flex-direction: column;
262 align-items: center;
263}
264
265.carouselControls {
266 display: flex;
267 justify-content: space-between;
268 align-items: center;
269 width: 100%;
270 max-width: 500px;
271 margin-top: 5px;
272}
273
274.carouselIndicators {
275 display: flex;
276 gap: 5px;
277}
278
279.indicator {
280 width: 8px;
281 height: 8px;
282 background-color: var(--indicator-inactive-color);
283}
284
285.indicator.active {
286 background-color: var(--indicator-active-color);
287}
288
289.prevBtn,
290.nextBtn {
291 background-color: rgba(31, 17, 69, 0.7);
292 color: var(--text-color);
293 border: 1px solid var(--border-color);
294 width: 30px;
295 height: 30px;
296 cursor: pointer;
297 display: flex;
298 align-items: center;
299 justify-content: center;
300}
301
302.prevBtn:disabled,
303.nextBtn:disabled {
304 opacity: 0.5;
305 cursor: not-allowed;
306}
307
308.embedVideo {
309 width: 100%;
310 max-width: 500px;
311 margin-top: 10px;
312 align-self: center;
313}
314
315.embedImages {
316 min-width: min(100%, 500px);
317 max-width: min(100%, 500px);
318 max-height: 500px;
319 object-fit: contain;
320
321 margin: 0;
322}
323
324/* Account Component */
325.accountBtn {
326 appearance: none;
327 border: none;
328 background-color: transparent;
329 padding: 0;
330 position: relative;
331 cursor: pointer;
332}
333
334.accountContainer {
335 padding: 0px;
336 border: 1px solid var(--border-color);
337 min-height: 30px;
338 overflow: hidden;
339 border-radius: 3px;
340}
341
342.accountContainer img.avatar {
343 width: 100%;
344 height: auto;
345 border-right: none;
346 display: block;
347}
348
349.accountName {
350 margin-left: 10px;
351 font-size: 1em;
352 max-width: 80%;
353 overflow: hidden;
354 text-overflow: ellipsis;
355 white-space: nowrap;
356}
357
358.accountTooltip[popover] {
359 border: 1px var(--border-color) solid;
360 color: var(--text-color);
361 background-color: var(--content-background-color);
362 backdrop-filter: blur(5px);
363 border-radius: 3px;
364 padding: 10px;
365 text-align: left;
366 font-size: 13px;
367 width: 300px;
368}
369
370.banner {
371 position: relative;
372 margin-bottom: 10px;
373 width: calc(100% + 20px);
374 margin-left: -10px;
375 margin-right: -10px;
376 margin-top: -10px;
377}
378
379.banner img.bannerImg {
380 width: 100%;
381 height: 100px;
382 object-fit: cover;
383 display: block;
384 border-bottom: 1px var(--border-color) solid;
385}
386
387.banner .avatarInsetImg {
388 position: absolute;
389 left: 10px;
390 top: 60px;
391 border-radius: 3px;
392 border: 1px var(--border-color) solid;
393}
394
395.accountTooltip .displayName {
396 font-weight: bold;
397}
398
399.no-avatar {
400
401}
402
403/* Guestbook */
404
405#guestbook {
406 margin: 1em 0;
407}
408
409#guestbookBtn {
410 background-color: var(--link-color);
411 color: var(--background);
412 padding: 3px 5px;
413 border-radius: 5px;
414 border: none;
415 font-weight: bold;
416 font-family: inherit;
417}
418
419#guestbookBtn:hover,
420#guestbookBtn:active,
421#guestbookBtn:focus {
422 background-color: var(--link-hover-color);
423}
424
425#guestbookContents {
426 width: 100%;
427 max-width: 600px;
428 height: calc(100vh - 20px);
429 padding: 10px;
430 gap: 10px;
431 z-index: 10;
432 grid-template-rows: auto 1fr;
433}
434
435#guestbookContents:popover-open {
436 display: grid;
437}
438
439#guestbookPosts {
440 overflow: auto;
441}
442
443/* Source Link */
444
445#footer {
446 position: fixed;
447 bottom: 5px;
448 right: 5px;
449 z-index: 99;
450 opacity: .8;
451 transition: 0.3s;
452 font-size: .8em;
453 text-transform: lowercase;
454 background-color: rgba(255,255,255,.5);
455 padding: 2px 5px;
456 border-radius: 10px;
457}
458
459#footer:hover {
460 opacity: 1;
461}
462
463#loadingbirds {
464 line-height: 1;
465 text-align: center;
466 width: 100%;
467}
468
469#loadingbirds pre {
470 display: inline-block;
471 margin: 0 auto;
472 text-align: left;
473}
474
475#loadingbirds .small {
476 display: none;
477}
478
479#loadingbirds #loadingText {
480 font-family: "Space Mono", monospace;
481 text-align: center;
482 font-style: oblique 5deg;
483 font-size: 2em;
484 min-height: 1em;
485}
486
487@media screen and (max-width: 780px) {
488 #loadingbirds .small {
489 display: block;
490 }
491
492 #loadingbirds .large {
493 display: none;
494 }
495
496 #loadingbirds #loadingText {
497 font-size: 1.25em;
498 }
499}
500
501/* Responsive Styling */
502@media screen and (max-width: 600px) {
503 #accountsList {
504 grid-template-columns: repeat(6, 1fr);
505 }
506}
507
508/* Popovers */
509[popover] {
510 padding: 0;
511 max-width: 600px;
512 border: 1px var(--border-color) solid;
513 color: var(--text-color);
514 background-color: var(--content-background-color);
515 backdrop-filter: blur(5px);
516 border-radius: 5px;
517 z-index: 10;
518}
519
520[popover] iframe {
521 display: block;
522}
523
524/* Scrollbars */
525
526::-webkit-scrollbar {
527 width: 0px;
528 background: transparent;
529 padding: 0;
530 margin: 0;
531}
532::-webkit-scrollbar-thumb {
533 background: transparent;
534 border-radius: 0;
535}
536::-webkit-scrollbar-track {
537 background: transparent;
538 border-radius: 0;
539}
540::-webkit-scrollbar-corner {
541 background: transparent;
542 border-radius: 0;
543}
544::-webkit-scrollbar-button {
545 background: transparent;
546 border-radius: 0;
547}
548
549* {
550 scrollbar-width: none;
551 scrollbar-color: transparent transparent;
552 -ms-overflow-style: none; /* IE and Edge */
553 -webkit-overflow-scrolling: touch;
554 -webkit-scrollbar: none; /* Safari */
555}