witchcraft.systems
astrra.space
+1
-1
src/lib/PostComponent.svelte
+1
-1
src/lib/PostComponent.svelte
-22
themes/colors.css
-22
themes/colors.css
···
1
-
:root {
2
-
/* Primary hue of the theme */
3
-
/* You can adjust it, or edit the values below directly */
4
-
--primary-h: 260;
5
-
6
-
/* Primary saturation and lightness of the theme, usually you shouldn't want to change those */
7
-
--primary-s: 75%;
8
-
--primary-l: 60%;
9
-
10
-
/* Derived colors using H, S, L manipulation */
11
-
/* You can set those to be static values if you want, i.e.: */
12
-
/* --link-color: #c579ff; */
13
-
--link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
14
-
--link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
15
-
--background-color: hsl(var(--primary-h), 75%, 10%);
16
-
--header-background-color: hsl(var(--primary-h), 75%, 18%);
17
-
--content-background-color: hsl(var(--primary-h), 75%, 8%);
18
-
--text-color: #fff;
19
-
--border-color: hsl(var(--primary-h), 75%, calc(var(--primary-l) * 1.05));
20
-
--indicator-inactive-color: #4a4a4a;
21
-
--indicator-active-color: var(--border-color);
22
-
}
+422
themes/default/theme.css
+422
themes/default/theme.css
···
1
+
/* Generic Default Theme for pds-dash */
2
+
3
+
:root {
4
+
/* Color overrides, edit to whatever you want */
5
+
--link-color: #3b82f6;
6
+
--link-hover-color: #2563eb;
7
+
--time-color: #8b5cf6;
8
+
--background-color: #f9fafb;
9
+
--header-background-color: #ffffff;
10
+
--content-background-color: #ffffff;
11
+
--text-color: #1f2937;
12
+
--border-color: #e5e7eb;
13
+
--indicator-inactive-color: #d1d5db;
14
+
--indicator-active-color: #6366f1;
15
+
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
16
+
--hover-bg: #f3f4f6;
17
+
--button-bg: #f9fafb;
18
+
--button-hover: #f3f4f6;
19
+
}
20
+
21
+
22
+
body {
23
+
margin: 0;
24
+
display: flex;
25
+
place-items: center;
26
+
min-width: 320px;
27
+
min-height: 100vh;
28
+
background-color: var(--background-color);
29
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
30
+
font-size: 18px;
31
+
line-height: 1.5;
32
+
color: var(--text-color);
33
+
border-color: var(--border-color);
34
+
overflow-wrap: break-word;
35
+
word-break: break-word;
36
+
hyphens: none;
37
+
}
38
+
39
+
a {
40
+
font-weight: 500;
41
+
color: var(--link-color);
42
+
text-decoration: none;
43
+
transition: color 0.15s ease;
44
+
}
45
+
a:hover {
46
+
color: var(--link-hover-color);
47
+
}
48
+
49
+
h1 {
50
+
font-size: 2.5em;
51
+
line-height: 1.2;
52
+
font-weight: 700;
53
+
}
54
+
55
+
#app {
56
+
max-width: 1400px;
57
+
width: 100%;
58
+
margin: 0 auto;
59
+
padding: 0;
60
+
text-align: center;
61
+
}
62
+
63
+
/* Post Component */
64
+
#postContainer {
65
+
display: flex;
66
+
flex-direction: column;
67
+
border-radius: 12px;
68
+
border: 1px solid var(--border-color);
69
+
background-color: var(--content-background-color);
70
+
margin-bottom: 20px;
71
+
overflow-wrap: break-word;
72
+
overflow: hidden;
73
+
box-shadow: var(--card-shadow);
74
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
75
+
}
76
+
77
+
#postContainer:hover {
78
+
transform: translateY(-2px);
79
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
80
+
}
81
+
82
+
#postHeader {
83
+
display: flex;
84
+
flex-direction: row;
85
+
align-items: center;
86
+
justify-content: start;
87
+
background-color: var(--header-background-color);
88
+
padding: 12px 16px;
89
+
height: 60px;
90
+
border-bottom: 1px solid var(--border-color);
91
+
font-weight: 600;
92
+
overflow-wrap: break-word;
93
+
}
94
+
95
+
#displayName {
96
+
display: block;
97
+
color: var(--text-color);
98
+
font-size: 1.1em;
99
+
padding: 0;
100
+
margin: 0 0 2px 0;
101
+
text-overflow: ellipsis;
102
+
overflow: hidden;
103
+
white-space: nowrap;
104
+
width: 100%;
105
+
letter-spacing: -0.01em;
106
+
}
107
+
108
+
#handle {
109
+
display: flex;
110
+
align-items: center;
111
+
color: #6b7280;
112
+
font-size: 0.85em;
113
+
font-weight: 400;
114
+
padding: 0;
115
+
margin: 0;
116
+
gap: 8px;
117
+
}
118
+
119
+
#postLink {
120
+
color: var(--time-color);
121
+
font-size: 0.85em;
122
+
padding: 0;
123
+
margin: 0;
124
+
opacity: 0.9;
125
+
}
126
+
127
+
#postContent {
128
+
display: flex;
129
+
text-align: start;
130
+
flex-direction: column;
131
+
padding: 16px;
132
+
background-color: var(--content-background-color);
133
+
color: var(--text-color);
134
+
overflow-wrap: break-word;
135
+
white-space: pre-line;
136
+
line-height: 1.6;
137
+
}
138
+
139
+
#replyingText, #quotingText {
140
+
font-size: 0.8em;
141
+
margin: 0;
142
+
padding: 0 0 10px 0;
143
+
color: #6b7280;
144
+
}
145
+
146
+
#postText {
147
+
margin: 0 0 8px 0;
148
+
padding: 0;
149
+
overflow-wrap: break-word;
150
+
word-break: break-word;
151
+
hyphens: none;
152
+
font-size: 1.05em;
153
+
}
154
+
155
+
#headerText {
156
+
margin-left: 12px;
157
+
font-size: 0.9em;
158
+
text-align: start;
159
+
word-break: break-word;
160
+
max-width: 80%;
161
+
max-height: 95%;
162
+
overflow: hidden;
163
+
align-self: flex-start;
164
+
margin-top: auto;
165
+
margin-bottom: auto;
166
+
}
167
+
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 12px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
border-radius: 8px;
176
+
overflow: hidden;
177
+
}
178
+
179
+
#carouselControls {
180
+
display: flex;
181
+
justify-content: space-between;
182
+
align-items: center;
183
+
width: 100%;
184
+
max-width: 500px;
185
+
margin-top: 10px;
186
+
}
187
+
188
+
#carouselIndicators {
189
+
display: flex;
190
+
gap: 6px;
191
+
}
192
+
193
+
.indicator {
194
+
width: 6px;
195
+
height: 6px;
196
+
background-color: var(--indicator-inactive-color);
197
+
border-radius: 50%;
198
+
transition: background-color 0.2s ease, transform 0.2s ease;
199
+
}
200
+
201
+
.indicator.active {
202
+
background-color: var(--indicator-active-color);
203
+
transform: scale(1.3);
204
+
}
205
+
206
+
#prevBtn,
207
+
#nextBtn {
208
+
background-color: var(--button-bg);
209
+
color: var(--text-color);
210
+
border: 1px solid var(--border-color);
211
+
width: 32px;
212
+
height: 32px;
213
+
cursor: pointer;
214
+
display: flex;
215
+
align-items: center;
216
+
justify-content: center;
217
+
border-radius: 50%;
218
+
transition: background-color 0.15s ease, transform 0.15s ease;
219
+
font-size: 16px;
220
+
}
221
+
222
+
#prevBtn:hover:not(:disabled),
223
+
#nextBtn:hover:not(:disabled) {
224
+
background-color: var(--button-hover);
225
+
transform: scale(1.05);
226
+
}
227
+
228
+
#prevBtn:disabled,
229
+
#nextBtn:disabled {
230
+
opacity: 0.4;
231
+
cursor: not-allowed;
232
+
}
233
+
234
+
#embedVideo {
235
+
width: 100%;
236
+
max-width: 500px;
237
+
margin-top: 12px;
238
+
align-self: center;
239
+
border-radius: 8px;
240
+
overflow: hidden;
241
+
}
242
+
243
+
#embedImages {
244
+
min-width: min(100%, 500px);
245
+
max-width: min(100%, 500px);
246
+
max-height: 500px;
247
+
object-fit: contain;
248
+
margin: 0;
249
+
border-radius: 8px;
250
+
}
251
+
252
+
/* Account Component */
253
+
#accountContainer {
254
+
display: flex;
255
+
text-align: start;
256
+
align-items: center;
257
+
background-color: var(--content-background-color);
258
+
padding: 12px;
259
+
margin-bottom: 15px;
260
+
border: 1px solid var(--border-color);
261
+
border-radius: 12px;
262
+
transition: background-color 0.15s ease;
263
+
}
264
+
265
+
#accountContainer:hover {
266
+
background-color: var(--hover-bg);
267
+
}
268
+
269
+
#accountName {
270
+
margin-left: 12px;
271
+
font-size: 0.95em;
272
+
max-width: 80%;
273
+
overflow: hidden;
274
+
text-overflow: ellipsis;
275
+
white-space: nowrap;
276
+
font-weight: 500;
277
+
}
278
+
279
+
#avatar {
280
+
width: 48px;
281
+
height: 48px;
282
+
margin: 0;
283
+
object-fit: cover;
284
+
border-radius: 50%;
285
+
border: 2px solid white;
286
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
287
+
}
288
+
289
+
/* App.Svelte Layout */
290
+
#Content {
291
+
display: flex;
292
+
width: 100%;
293
+
height: 100%;
294
+
flex-direction: row;
295
+
justify-content: space-between;
296
+
align-items: center;
297
+
background-color: var(--background-color);
298
+
color: var(--text-color);
299
+
gap: 24px;
300
+
}
301
+
302
+
#Feed {
303
+
overflow-y: auto;
304
+
width: 65%;
305
+
height: 100vh;
306
+
padding-right: 16px;
307
+
align-self: flex-start;
308
+
}
309
+
310
+
#spacer {
311
+
padding: 0;
312
+
margin: 0;
313
+
height: 10vh;
314
+
width: 100%;
315
+
}
316
+
317
+
#Account {
318
+
width: 35%;
319
+
display: flex;
320
+
flex-direction: column;
321
+
border: 1px solid var(--border-color);
322
+
background-color: var(--content-background-color);
323
+
max-height: 80vh;
324
+
padding: 24px;
325
+
margin-left: 16px;
326
+
border-radius: 12px;
327
+
box-shadow: var(--card-shadow);
328
+
}
329
+
330
+
#accountsList {
331
+
display: flex;
332
+
flex-direction: column;
333
+
overflow-y: auto;
334
+
height: 100%;
335
+
width: 100%;
336
+
padding: 8px 0;
337
+
margin: 0;
338
+
}
339
+
340
+
#Header {
341
+
text-align: center;
342
+
font-size: 1.8em;
343
+
margin-bottom: 16px;
344
+
font-weight: 700;
345
+
background: linear-gradient(to right, #3b82f6, #8b5cf6);
346
+
-webkit-background-clip: text;
347
+
-webkit-text-fill-color: transparent;
348
+
background-clip: text;
349
+
}
350
+
351
+
/* Mobile Styles */
352
+
@media screen and (max-width: 768px) {
353
+
#Content {
354
+
flex-direction: column;
355
+
width: auto;
356
+
padding: 12px;
357
+
margin-top: 0;
358
+
}
359
+
360
+
#Account {
361
+
width: calc(100% - 32px);
362
+
padding: 16px;
363
+
margin-bottom: 20px;
364
+
margin-left: 0;
365
+
margin-right: 0;
366
+
height: auto;
367
+
order: -1;
368
+
}
369
+
370
+
#Feed {
371
+
width: 100%;
372
+
margin: 0;
373
+
padding: 0;
374
+
overflow-y: visible;
375
+
}
376
+
377
+
#spacer {
378
+
height: 5vh;
379
+
}
380
+
381
+
body {
382
+
font-size: 16px;
383
+
}
384
+
385
+
#postHeader {
386
+
padding: 10px;
387
+
height: auto;
388
+
min-height: 50px;
389
+
}
390
+
}
391
+
392
+
/* Scrollbar Styles */
393
+
::-webkit-scrollbar {
394
+
width: 0px;
395
+
background: transparent;
396
+
padding: 0;
397
+
margin: 0;
398
+
}
399
+
::-webkit-scrollbar-thumb {
400
+
background: transparent;
401
+
border-radius: 0;
402
+
}
403
+
::-webkit-scrollbar-track {
404
+
background: transparent;
405
+
border-radius: 0;
406
+
}
407
+
::-webkit-scrollbar-corner {
408
+
background: transparent;
409
+
border-radius: 0;
410
+
}
411
+
::-webkit-scrollbar-button {
412
+
background: transparent;
413
+
border-radius: 0;
414
+
}
415
+
416
+
* {
417
+
scrollbar-width: none;
418
+
scrollbar-color: transparent transparent;
419
+
-ms-overflow-style: none; /* IE and Edge */
420
+
-webkit-overflow-scrolling: touch;
421
+
-webkit-scrollbar: none; /* Safari */
422
+
}
+16
themes/witchcraft/theme.css
+16
themes/witchcraft/theme.css
···
3
3
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
4
}
5
5
6
+
:root {
7
+
/* Color overrides, edit to whatever you want */
8
+
--primary-h: 260; /* Hue */
9
+
10
+
--link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
11
+
--link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
12
+
--background-color: hsl(var(--primary-h), 75%, 10%);
13
+
--header-background-color: hsl(var(--primary-h), 75%, 18%);
14
+
--content-background-color: hsl(var(--primary-h), 75%, 8%);
15
+
--text-color: #fff;
16
+
--border-color: hsl(var(--primary-h), 75%, 60%);
17
+
--indicator-inactive-color: #4a4a4a;
18
+
--indicator-active-color: var(--border-color);
19
+
}
20
+
21
+
6
22
a {
7
23
font-weight: 500;
8
24
color: var(--link-color);
+1
-2
theming.ts
+1
-2
theming.ts
···
12
12
enforce: 'pre', // Ensure this plugin runs first
13
13
transform(code, id) {
14
14
if (id.endsWith('app.css')) {
15
-
const colorsCode = Deno.readTextFileSync(Deno.cwd() + '/themes/colors.css');
16
15
// Read the theme file and replace the contents of app.css with it
17
16
// Needs full path to the file
18
17
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
···
20
19
21
20
// and add a comment at the top
22
21
const themeComment = `/* Generated from ${themeFolder} */\n`;
23
-
const themeCodeWithComment = themeComment + colorsCode + themeCode;
22
+
const themeCodeWithComment = themeComment + themeCode;
24
23
// Return the theme code as the new contents of app.css
25
24
return {
26
25
code: themeCodeWithComment,