dragon.gal
Blog platform running on ATproto
1@import "tailwindcss";
2
3/*:root {*/
4/* --width: 800px;*/
5/* --font-main: Verdana, sans-serif;*/
6/* --font-secondary: Verdana, sans-serif;*/
7/* --font-scale: 1em;*/
8/* --background-color: #fff;*/
9/* --heading-color: #222;*/
10/* --text-color: #444;*/
11/* --link-color: #3273dc;*/
12/* --visited-color: #8b6fcb;*/
13/* --code-background-color: #f2f2f2;*/
14/* --code-color: #222;*/
15/* --blockquote-color: #222;*/
16/*}*/
17
18/*html {*/
19/* font-family: var(--font-secondary);*/
20/* font-size: var(--font-scale);*/
21/* margin: auto;*/
22/* padding: 20px;*/
23/* width: 100%;*/
24/* max-width: var(--width);*/
25/* text-align: left;*/
26/* background-color: var(--background-color);*/
27/* word-wrap: break-word;*/
28/* overflow-wrap: break-word;*/
29/* line-height: 1.5;*/
30/* color: var(--text-color);*/
31/* scroll-behavior: smooth;*/
32/*}*/
33
34:root {
35 --width: 800px;
36 --font-main: Verdana, sans-serif;
37 --font-secondary: Verdana, sans-serif;
38 --font-scale: 1em;
39 --background-color: #fff;
40 --heading-color: #222;
41 --text-color: #444;
42 --link-color: #3273dc;
43 --visited-color: #8b6fcb;
44 --code-background-color: #f2f2f2;
45 --code-color: #222;
46 --blockquote-color: #222;
47}
48
49@media (prefers-color-scheme: dark) {
50 :root {
51 --background-color: #01242e;
52 --heading-color: #eee;
53 --text-color: #ddd;
54 --link-color: #8cc2dd;
55 --visited-color: #8b6fcb;
56 --code-background-color: #000;
57 --code-color: #ddd;
58 --blockquote-color: #ccc;
59 }
60}
61
62body {
63 font-family: var(--font-secondary);
64 font-size: var(--font-scale);
65 margin: auto;
66 padding: 20px;
67 max-width: var(--width);
68 text-align: left;
69 background-color: var(--background-color);
70 word-wrap: break-word;
71 overflow-wrap: break-word;
72 line-height: 1.5;
73 color: var(--text-color);
74}
75
76h1, h2, h3, h4, h5, h6 {
77 font-family: var(--font-main);
78 color: var(--heading-color);
79}
80
81h1 {
82 display: block;
83 font-size: 2em;
84 margin-top: 0.67em;
85 margin-bottom: 0.67em;
86 margin-left: 0;
87 margin-right: 0;
88 font-weight: bold;
89}
90h2 {
91 display: block;
92 font-size: 1.5em;
93 margin-top: 0.83em;
94 margin-bottom: 0.83em;
95 margin-left: 0;
96 margin-right: 0;
97 font-weight: bold;
98}
99h3 {
100 display: block;
101 font-size: 1.17em;
102 margin-top: 1em;
103 margin-bottom: 1em;
104 margin-left: 0;
105 margin-right: 0;
106 font-weight: bold;
107}
108h4 {
109 display: block;
110 margin-top: 1.33em;
111 margin-bottom: 1.33em;
112 margin-left: 0;
113 margin-right: 0;
114 font-weight: bold;
115}
116h5 {
117 display: block;
118 font-size: .83em;
119 margin-top: 1.67em;
120 margin-bottom: 1.67em;
121 margin-left: 0;
122 margin-right: 0;
123 font-weight: bold;
124}
125h6 {
126 display: block;
127 font-size: .67em;
128 margin-top: 2.33em;
129 margin-bottom: 2.33em;
130 margin-left: 0;
131 margin-right: 0;
132 font-weight: bold;
133}
134
135p {
136 margin: 1em 0;
137}
138
139a {
140 color: var(--link-color);
141 cursor: pointer;
142 text-decoration: none;
143}
144
145a:hover {
146 text-decoration: underline;
147}
148
149nav a {
150 margin-right: 8px;
151}
152
153strong, b {
154 color: var(--heading-color);
155}
156
157button {
158 margin: 0;
159 cursor: pointer;
160}
161
162main {
163 line-height: 1.6;
164}
165
166table {
167 width: 100%;
168}
169
170hr {
171 border: 0;
172 border-top: 1px dashed;
173}
174
175img {
176 max-width: 100%;
177}
178
179code {
180 font-family: monospace;
181 padding: 2px;
182 background-color: var(--code-background-color);
183 color: var(--code-color);
184 border-radius: 3px;
185}
186
187blockquote {
188 border-left: 1px solid #999;
189 color: var(--code-color);
190 padding-left: 20px;
191 font-style: italic;
192}
193
194footer {
195 padding: 25px 0;
196 text-align: center;
197}
198
199.title:hover {
200 text-decoration: none;
201}
202
203.title h1 {
204 font-size: 1.5em;
205}
206
207.inline {
208 width: auto !important;
209}
210
211.highlight, .code {
212 padding: 1px 15px;
213 background-color: var(--code-background-color);
214 color: var(--code-color);
215 border-radius: 3px;
216 margin-block-start: 1em;
217 margin-block-end: 1em;
218 overflow-x: auto;
219}
220
221ul {
222 margin-left: 3em;
223}
224
225ul > li::marker {
226 content: "• "
227}
228
229/* blog post list */
230ul.blog-posts {
231 list-style-type: none;
232 padding: unset;
233}
234
235ul.blog-posts li {
236 display: flex;
237}
238
239ul.blog-posts li span {
240 flex: 0 0 130px;
241}
242
243ul.blog-posts li a:visited {
244 color: var(--visited-color);
245}
246.title {
247 display: inline-block;
248}
249
250.bear {
251 font-weight: 400;
252 font-family: "Lucida", monospace;
253 white-space: nowrap;
254 display: inline-block;
255}
256
257.flex::before {
258 content: "ᕦʕ •ᴥ•ʔᕤ";
259 animation: blink 10s infinite;
260}
261
262.flex:hover::before {
263 content: "ᕙʕ ಠᴥಠʔᕗ";
264 animation: none;
265}
266
267.upgrade:hover .flex::before {
268 content: "ᕙʕ ಠᴥಠʔᕗ";
269 animation: none;
270 text-decoration: underline;
271}
272
273@keyframes blink {
274 0%, 96% { content: "ᕦʕ •ᴥ•ʔᕤ"; }
275 97%, 100% { content: "ᕦʕ -ᴥ-ʔᕤ"; }
276}
277
278a.account:hover {
279 text-decoration: none;
280}
281
282a.account::before {
283 content: "ʕ-ᴥ-ʔ";
284}
285
286.account:hover::before {
287 content: "ʕ•ᴥ•ʔ";
288}
289
290header nav {
291 display: flex;
292 flex-flow: row wrap;
293 justify-content: space-between;
294}
295
296header nav a:last-child {
297 margin-right: 0;
298}
299
300label {
301 font-weight: bold;
302}
303
304time {
305 font-family: monospace;
306 font-size: 15px;
307}
308
309textarea,
310input:not([type="submit"]),
311.editable {
312 background-color: #eceff4;
313 border: none;
314 line-height: 1.7;
315 outline: none;
316 color: inherit;
317 padding: 10px;
318 font-size: 18px;
319}
320
321@media (prefers-color-scheme: dark) {
322 textarea,
323 input:not([type="submit"]),
324 .editable {
325 background-color: #004052;
326 }
327}
328
329.full-width textarea,
330.full-width input:not([type="submit"], [type="checkbox"], [type="radio"]) {
331 width: calc(100% - 20px);
332}
333
334textarea:required,
335input:required:not([type="submit"]){
336 border-left: 1px solid #f99f9f;
337}
338
339input[type='checkbox'], input[type='radio'] {
340 height: 15px;
341 margin-right: 10px;
342}
343
344button {
345 margin: 5px 0;
346}
347
348button.floating {
349 position: fixed;
350 bottom: 20px;
351 right: 25px;
352}
353
354button#toggle-full-screen {
355 float: right;
356}
357
358.sticky-controls {
359 position: sticky;
360 top: 0;
361 background-color: white;
362 line-height: 0;
363 z-index: 10;
364}
365
366.helptext {
367 display: flex;
368 justify-content: space-between;
369 color: #777;
370 font-size: small;
371}
372
373.helptext.sticky {
374 position: sticky;
375 bottom: 0;
376 background-color: white;
377 padding: 3px 0;
378}
379
380@media (prefers-color-scheme: dark) {
381 .helptext.sticky,
382 .sticky-controls {
383 background-color: var(--background-color);
384 }
385}
386
387.errorlist {
388 color: #eba613;
389 font-size: small;
390}
391
392#date-range{
393 display: none;
394}
395
396#date-range:target{
397 display: block;
398}
399
400.notification {
401 width: 100%;
402 text-align: left;
403 padding: 5px 0;
404 margin-bottom: -15px;
405}
406
407.notification a {
408 margin: 0;
409}
410
411/* dashboard post list and analytics */
412ul.post-list {
413 list-style-type: none;
414 padding: unset;
415}
416
417ul.post-list li {
418 display: flex;
419 align-items: baseline;
420 padding: 10px 0;
421 border-bottom: 1px solid #eceff4;
422}
423
424ul.post-list li span {
425 flex: 0 0 130px;
426}
427
428ul.post-list li span.number {
429 flex: 0 0 50px;
430}
431
432ul.post-list li small {
433 text-align: right;
434 flex: 0 0 115px;
435}
436
437/* media center */
438
439.media-container {
440 display: flex;
441 flex-flow: row wrap;
442 gap: 5px;
443}
444.media-item {
445 text-align: center;
446 background-color: #eceff4;
447 position: relative;
448}
449.media-checkbox {
450 position: absolute;
451 top: 5px;
452 right: 5px;
453 margin: 0 !important;
454 height: unset !important;
455}
456
457/* discovery feed */
458ul.discover-posts {
459 list-style-type: none;
460 padding: unset;
461}
462
463ul.discover-posts li {
464 display: flex;
465 flex-flow: row;
466 flex-wrap: nowrap;
467 gap: 10px;
468 line-height: 1.2;
469 position: relative;
470}
471
472ul.discover-posts li span {
473 flex: 0 0 30px;
474}
475
476ul.discover-posts li a:visited {
477 color: #8b6fcb;
478}
479
480ul.discover-posts li div {
481 padding-bottom: 10px;
482}
483
484ul.discover-posts li small span, ul.discover-posts li small span a {
485 color: #777 !important;
486}
487
488
489@media (prefers-color-scheme: dark) {
490 .helptext {
491 color: #aaa;
492 }
493}