fork of https://forged.synth.download/sd/pds-dash but with my cool and awesome customization!
synth.download theme (wow the default css sucks)
+76
-50
+76
-50
themes/synthdownload/theme.css
+76
-50
themes/synthdownload/theme.css
···
27
27
--dark-white: #FAFAFA;
28
28
29
29
--border: hsl(from var(--foreground) h s calc(l + 10));
30
-
--hover: hsl(from var(--background) h s calc(l - 20));;
30
+
--hover: hsl(from var(--background) h s calc(l - 15));
31
31
--shadow: rgba(from var(--foreground) r g b / .8);
32
32
--focused: var(--dark-purple)
33
33
}
···
71
71
color-scheme: light dark;
72
72
}
73
73
74
-
/* hide accounts that we wouldn't think is a good idea to publicly show */
74
+
/* hide accounts that don't want to appear on the frontend */
75
75
#Account *[href*="did:plc:34hq2fkdnl33le2lsefwom2s"] {
76
76
display: none;
77
77
}
···
96
96
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
97
97
text-decoration-thickness: 0.1em;
98
98
transition: 0.2s;
99
-
100
99
&:hover {
101
100
color: var(--link);
102
101
text-decoration-color: var(--accent);
103
102
text-decoration-skip-ink: none;
104
103
text-decoration-thickness: .3em;
105
-
transition: 0.2s;
106
104
}
107
105
}
108
106
···
113
111
}
114
112
115
113
#app {
116
-
max-width: 1400px;
117
-
width: 100%;
118
-
margin: 0 auto;
119
114
padding: 0;
120
115
text-align: center;
116
+
width: 100%;
121
117
}
122
118
123
119
/* Post Component */
124
120
#postContainer {
125
121
display: flex;
126
122
flex-direction: column;
127
-
border-radius: 12px;
128
-
border: 1px solid var(--border-color);
129
-
background-color: var(--content-background-color);
123
+
border-radius: .8rem;
124
+
outline: .15rem solid var(--accent);
125
+
background-color: var(--background);
130
126
margin-bottom: 20px;
131
127
overflow-wrap: break-word;
132
128
overflow: hidden;
133
-
box-shadow: var(--card-shadow);
134
-
transition: transform 0.2s ease, box-shadow 0.2s ease;
129
+
margin-left: auto;
130
+
margin-right: auto;
131
+
box-shadow: 5px 5px solid var(--shadow);
132
+
transition: .2s;
133
+
max-width: 60rem;
135
134
}
136
135
137
136
#postContainer:hover {
138
-
transform: translateY(-2px);
139
137
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
138
+
outline: .5rem solid var(--accent);
139
+
#postHeader {
140
+
border-color: var(--accent);
141
+
}
140
142
}
141
143
142
144
#postHeader {
···
144
146
flex-direction: row;
145
147
align-items: center;
146
148
justify-content: start;
147
-
background-color: var(--header-background-color);
148
-
padding: 12px 16px;
149
+
padding: .8rem;
149
150
height: 60px;
150
-
border-bottom: 1px solid var(--border-color);
151
+
border-bottom: .1rem solid var(--border);
151
152
font-weight: 600;
152
153
overflow-wrap: break-word;
154
+
transition: .2s;
153
155
}
154
156
155
157
#displayName {
156
158
display: block;
157
-
color: var(--text-color);
158
159
font-size: 1.1em;
159
160
padding: 0;
160
161
margin: 0 0 2px 0;
···
163
164
white-space: nowrap;
164
165
width: 100%;
165
166
letter-spacing: -0.01em;
167
+
text-decoration-color: transparent;
168
+
&:hover { text-decoration-color: var(--accent); }
166
169
}
167
170
168
171
#handle {
169
172
display: flex;
170
-
align-items: center;
171
-
color: #6b7280;
172
173
font-size: 0.85em;
173
174
font-weight: 400;
174
175
padding: 0;
175
176
margin: 0;
176
-
gap: 8px;
177
+
gap: .7rem;
178
+
a {
179
+
text-decoration-color: transparent;
180
+
&:hover { text-decoration-color: var(--accent); }
181
+
}
182
+
a:first-child {
183
+
opacity: .9;
184
+
}
177
185
}
178
186
179
187
#postLink {
180
-
color: var(--time-color);
181
-
font-size: 0.85em;
182
188
padding: 0;
183
189
margin: 0;
184
-
opacity: 0.9;
190
+
margin-left: auto;
191
+
opacity: 0.7;
185
192
}
186
193
187
194
#postContent {
···
189
196
text-align: start;
190
197
flex-direction: column;
191
198
padding: 16px;
192
-
background-color: var(--content-background-color);
193
-
color: var(--text-color);
199
+
background-color: var(--background);
200
+
color: var(--foreground);
194
201
overflow-wrap: break-word;
195
202
white-space: pre-line;
196
203
line-height: 1.6;
···
199
206
#replyingText,
200
207
#quotingText {
201
208
font-size: 0.8em;
202
-
margin: 0;
203
-
padding: 0 0 10px 0;
204
-
color: #6b7280;
209
+
margin-bottom: .6rem;
210
+
padding: .2rem;
211
+
border-radius: .4rem;
212
+
color: var(--foreground);
213
+
background: color-mix(in srgb, var(--hover) 50%, transparent);
214
+
opacity: .7;
215
+
transition: .2s;
216
+
width: max-content;
217
+
&:hover {
218
+
opacity: 1;
219
+
outline: .1rem solid var(--accent);
220
+
}
205
221
}
206
222
207
223
#postText {
···
218
234
font-size: 0.9em;
219
235
text-align: start;
220
236
word-break: break-word;
221
-
max-width: 80%;
237
+
width: 100%;
222
238
max-height: 95%;
223
239
overflow: hidden;
224
240
align-self: flex-start;
···
324
340
}
325
341
326
342
#accountContainer:hover {
327
-
background-color: var(--hover-bg);
343
+
background-color: var(--hover);
328
344
}
329
345
330
346
#accountName {
···
342
358
height: 48px;
343
359
margin: 0;
344
360
object-fit: cover;
345
-
border-radius: 50%;
346
-
border: 2px solid white;
347
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
361
+
border-radius: 20%;
362
+
box-shadow: 0 1px 3px var(--shadow);
348
363
}
349
364
350
365
/* App.Svelte Layout */
···
355
370
flex-direction: row;
356
371
justify-content: space-between;
357
372
align-items: center;
358
-
background-color: var(--background-color);
359
-
color: var(--text-color);
373
+
background-color: var(--background);
360
374
gap: 24px;
361
375
}
362
376
363
377
#Feed {
364
378
overflow-y: auto;
365
-
width: 65%;
366
379
height: 100vh;
367
-
padding-right: 16px;
368
-
align-self: flex-start;
380
+
width: 100%;
381
+
margin-right: 2rem;
382
+
padding-right: .6rem;
383
+
padding-left: .6rem;
369
384
}
370
385
371
386
#spacer {
···
376
391
}
377
392
378
393
#Account {
379
-
width: 35%;
394
+
max-width: 30rem;
380
395
display: flex;
381
396
flex-direction: column;
382
-
border: 1px solid var(--border-color);
383
-
background-color: var(--content-background-color);
384
-
max-height: 80vh;
385
-
padding: 24px;
386
-
margin-left: 16px;
387
-
border-radius: 12px;
388
-
box-shadow: var(--card-shadow);
397
+
max-height: 90vh;
398
+
padding: 1rem;
399
+
margin-left: 1rem;
400
+
401
+
p:nth-child(2) {
402
+
text-align: left;
403
+
}
389
404
}
390
405
391
406
#accountsList {
···
394
409
overflow-y: auto;
395
410
height: 100%;
396
411
width: 100%;
397
-
padding: 8px 0;
398
412
margin: 0;
413
+
#link {
414
+
text-decoration-color: transparent;
415
+
&:hover { text-decoration-color: var(--accent); }
416
+
#accountContainer {
417
+
border: .1rem solid var(--border);
418
+
border-radius: .8rem;
419
+
transition: .2s;
420
+
&:hover {
421
+
border-color: var(--accent);
422
+
}
423
+
}
424
+
}
399
425
}
400
426
401
427
#Header {
402
-
text-align: center;
428
+
text-align: left;
403
429
font-size: 1.8em;
404
-
margin-bottom: 16px;
430
+
margin-bottom: 0;
405
431
color: var(--accent);
406
432
}
407
433
408
434
/* Mobile Styles */
409
-
@media screen and (max-width: 768px) {
435
+
@media screen and (max-width: 1010px) {
410
436
#Content {
411
437
flex-direction: column;
412
438
width: auto;