fork of https://forged.synth.download/sd/pds-dash but with my cool and awesome customization!
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

synth.download basic customizations

Ruben f7127854 c348ed5d

+487 -2
+1 -1
index.html
··· 3 3 <head> 4 4 <meta charset="UTF-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 - <title>ATProto PDS</title> 6 + <title>Synth.Download PDS</title> 7 7 </head> 8 8 <body> 9 9 <div id="app"></div>
+1 -1
src/App.svelte
··· 59 59 <p>Loading...</p> 60 60 {:then accountsData} 61 61 <div id="Account"> 62 - <h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1> 62 + <h1 onclick={carameldansenfusion} id="Header">Synth.Download PDS</h1> 63 63 <p>Home to {accountsData.length} accounts</p> 64 64 <div id="accountsList"> 65 65 {#each accountsData as accountObject}
+485
themes/synthdownload/theme.css
··· 1 + /* Synth.Download-alike for pds-dash */ 2 + 3 + /* Ayu Light */ 4 + @media (prefers-color-scheme: light) { 5 + :root { 6 + --background: #fafafa; 7 + --foreground: #575f66; 8 + --accent: #f2ae49; 9 + --link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */ 10 + 11 + --black: #8A9199; 12 + --red: #F51818; 13 + --green: #86B300; 14 + --yellow: #F2AE49; 15 + --blue: #399EE6; 16 + --purple: #A37ACC; 17 + --cyan: #4CBF99; 18 + --white: #FAFAFA; 19 + 20 + --dark-black: #575F66; 21 + --dark-red: #F51818; 22 + --dark-green: #86B300; 23 + --dark-yellow: #F2AE49; 24 + --dark-blue: #399EE6; 25 + --dark-purple: #A37ACC; 26 + --dark-cyan: #4CBF99; 27 + --dark-white: #FAFAFA; 28 + 29 + --border: hsl(from var(--foreground) h s calc(l + 10)); 30 + --hover: hsl(from var(--background) h s calc(l - 20));; 31 + --shadow: rgba(from var(--foreground) r g b / .8); 32 + --focused: var(--dark-purple) 33 + } 34 + } 35 + 36 + /* Astrodark */ 37 + @media (prefers-color-scheme: dark) { 38 + :root { 39 + --background: #1a1d23; 40 + --foreground: #caccd3; 41 + --accent: #efbd58; 42 + --link: var(--accent); 43 + 44 + --black: #576176; 45 + --red: #FAA5AB; 46 + --green: #A5CD84; 47 + --yellow: #EFBD58; 48 + --blue: #8DC3F1; 49 + --purple: #DEAEED; 50 + --cyan: #27FFDF; 51 + --white: #CACCD3; 52 + 53 + --dark-black: #111317; 54 + --dark-red: #F8747E; 55 + --dark-green: #75AD47; 56 + --dark-yellow: #D09214; 57 + --dark-blue: #50A4E9; 58 + --dark-purple: #CC83E3; 59 + --dark-cyan: #00B298; 60 + --dark-white: #ADB0BB; 61 + 62 + --border: hsl(from var(--background) h s calc(l + 40)); 63 + --hover: hsl(from var(--background) h s calc(l + 20)); 64 + ; 65 + --shadow: rgba(from var(--background) r g b / .8); 66 + --focused: var(--dark-purple) 67 + } 68 + } 69 + 70 + :root { 71 + color-scheme: light dark; 72 + } 73 + 74 + /* hide accounts that we wouldn't think is a good idea to publicly show */ 75 + #Account *[href*="did:plc:34hq2fkdnl33le2lsefwom2s"] { 76 + display: none; 77 + } 78 + 79 + body { 80 + margin: 0; 81 + display: flex; 82 + place-items: center; 83 + background-color: var(--background); 84 + font-family: monospace, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 85 + font-size: 1.05rem; 86 + line-height: 1.5; 87 + color: var(--foreground); 88 + border-color: var(--border); 89 + overflow-wrap: break-word; 90 + word-break: break-word; 91 + hyphens: none; 92 + } 93 + 94 + a { 95 + color: var(--foreground); 96 + text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); 97 + text-decoration-thickness: 0.1em; 98 + transition: 0.2s; 99 + 100 + &:hover { 101 + color: var(--link); 102 + text-decoration-color: var(--accent); 103 + text-decoration-skip-ink: none; 104 + text-decoration-thickness: .3em; 105 + transition: 0.2s; 106 + } 107 + } 108 + 109 + h1 { 110 + font-size: 2.5em; 111 + line-height: 1.2; 112 + font-weight: 700; 113 + } 114 + 115 + #app { 116 + max-width: 1400px; 117 + width: 100%; 118 + margin: 0 auto; 119 + padding: 0; 120 + text-align: center; 121 + } 122 + 123 + /* Post Component */ 124 + #postContainer { 125 + display: flex; 126 + flex-direction: column; 127 + border-radius: 12px; 128 + border: 1px solid var(--border-color); 129 + background-color: var(--content-background-color); 130 + margin-bottom: 20px; 131 + overflow-wrap: break-word; 132 + overflow: hidden; 133 + box-shadow: var(--card-shadow); 134 + transition: transform 0.2s ease, box-shadow 0.2s ease; 135 + } 136 + 137 + #postContainer:hover { 138 + transform: translateY(-2px); 139 + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 140 + } 141 + 142 + #postHeader { 143 + display: flex; 144 + flex-direction: row; 145 + align-items: center; 146 + justify-content: start; 147 + background-color: var(--header-background-color); 148 + padding: 12px 16px; 149 + height: 60px; 150 + border-bottom: 1px solid var(--border-color); 151 + font-weight: 600; 152 + overflow-wrap: break-word; 153 + } 154 + 155 + #displayName { 156 + display: block; 157 + color: var(--text-color); 158 + font-size: 1.1em; 159 + padding: 0; 160 + margin: 0 0 2px 0; 161 + text-overflow: ellipsis; 162 + overflow: hidden; 163 + white-space: nowrap; 164 + width: 100%; 165 + letter-spacing: -0.01em; 166 + } 167 + 168 + #handle { 169 + display: flex; 170 + align-items: center; 171 + color: #6b7280; 172 + font-size: 0.85em; 173 + font-weight: 400; 174 + padding: 0; 175 + margin: 0; 176 + gap: 8px; 177 + } 178 + 179 + #postLink { 180 + color: var(--time-color); 181 + font-size: 0.85em; 182 + padding: 0; 183 + margin: 0; 184 + opacity: 0.9; 185 + } 186 + 187 + #postContent { 188 + display: flex; 189 + text-align: start; 190 + flex-direction: column; 191 + padding: 16px; 192 + background-color: var(--content-background-color); 193 + color: var(--text-color); 194 + overflow-wrap: break-word; 195 + white-space: pre-line; 196 + line-height: 1.6; 197 + } 198 + 199 + #replyingText, 200 + #quotingText { 201 + font-size: 0.8em; 202 + margin: 0; 203 + padding: 0 0 10px 0; 204 + color: #6b7280; 205 + } 206 + 207 + #postText { 208 + margin: 0 0 8px 0; 209 + padding: 0; 210 + overflow-wrap: break-word; 211 + word-break: break-word; 212 + hyphens: none; 213 + font-size: 1.05em; 214 + } 215 + 216 + #headerText { 217 + margin-left: 12px; 218 + font-size: 0.9em; 219 + text-align: start; 220 + word-break: break-word; 221 + max-width: 80%; 222 + max-height: 95%; 223 + overflow: hidden; 224 + align-self: flex-start; 225 + margin-top: auto; 226 + margin-bottom: auto; 227 + } 228 + 229 + #carouselContainer { 230 + position: relative; 231 + width: 100%; 232 + margin-top: 12px; 233 + display: flex; 234 + flex-direction: column; 235 + align-items: center; 236 + border-radius: 8px; 237 + overflow: hidden; 238 + } 239 + 240 + #carouselControls { 241 + display: flex; 242 + justify-content: space-between; 243 + align-items: center; 244 + width: 100%; 245 + max-width: 500px; 246 + margin-top: 10px; 247 + } 248 + 249 + #carouselIndicators { 250 + display: flex; 251 + gap: 6px; 252 + } 253 + 254 + .indicator { 255 + width: 6px; 256 + height: 6px; 257 + background-color: var(--indicator-inactive-color); 258 + border-radius: 50%; 259 + transition: background-color 0.2s ease, transform 0.2s ease; 260 + } 261 + 262 + .indicator.active { 263 + background-color: var(--indicator-active-color); 264 + transform: scale(1.3); 265 + } 266 + 267 + #prevBtn, 268 + #nextBtn { 269 + background-color: var(--button-bg); 270 + color: var(--text-color); 271 + border: 1px solid var(--border-color); 272 + width: 32px; 273 + height: 32px; 274 + cursor: pointer; 275 + display: flex; 276 + align-items: center; 277 + justify-content: center; 278 + border-radius: 50%; 279 + transition: background-color 0.15s ease, transform 0.15s ease; 280 + font-size: 16px; 281 + } 282 + 283 + #prevBtn:hover:not(:disabled), 284 + #nextBtn:hover:not(:disabled) { 285 + background-color: var(--button-hover); 286 + transform: scale(1.05); 287 + } 288 + 289 + #prevBtn:disabled, 290 + #nextBtn:disabled { 291 + opacity: 0.4; 292 + cursor: not-allowed; 293 + } 294 + 295 + #embedVideo { 296 + width: 100%; 297 + max-width: 500px; 298 + margin-top: 12px; 299 + align-self: center; 300 + border-radius: 8px; 301 + overflow: hidden; 302 + } 303 + 304 + #embedImages { 305 + min-width: min(100%, 500px); 306 + max-width: min(100%, 500px); 307 + max-height: 500px; 308 + object-fit: contain; 309 + margin: 0; 310 + border-radius: 8px; 311 + } 312 + 313 + /* Account Component */ 314 + #accountContainer { 315 + display: flex; 316 + text-align: start; 317 + align-items: center; 318 + background-color: var(--content-background-color); 319 + padding: 12px; 320 + margin-bottom: 15px; 321 + border: 1px solid var(--border-color); 322 + border-radius: 12px; 323 + transition: background-color 0.15s ease; 324 + } 325 + 326 + #accountContainer:hover { 327 + background-color: var(--hover-bg); 328 + } 329 + 330 + #accountName { 331 + margin-left: 12px; 332 + font-size: 0.95em; 333 + max-width: 80%; 334 + overflow: hidden; 335 + text-overflow: ellipsis; 336 + white-space: nowrap; 337 + font-weight: 500; 338 + } 339 + 340 + #avatar { 341 + width: 48px; 342 + height: 48px; 343 + margin: 0; 344 + object-fit: cover; 345 + border-radius: 50%; 346 + border: 2px solid white; 347 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 348 + } 349 + 350 + /* App.Svelte Layout */ 351 + #Content { 352 + display: flex; 353 + width: 100%; 354 + height: 100%; 355 + flex-direction: row; 356 + justify-content: space-between; 357 + align-items: center; 358 + background-color: var(--background-color); 359 + color: var(--text-color); 360 + gap: 24px; 361 + } 362 + 363 + #Feed { 364 + overflow-y: auto; 365 + width: 65%; 366 + height: 100vh; 367 + padding-right: 16px; 368 + align-self: flex-start; 369 + } 370 + 371 + #spacer { 372 + padding: 0; 373 + margin: 0; 374 + height: 10vh; 375 + width: 100%; 376 + } 377 + 378 + #Account { 379 + width: 35%; 380 + display: flex; 381 + 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); 389 + } 390 + 391 + #accountsList { 392 + display: flex; 393 + flex-direction: column; 394 + overflow-y: auto; 395 + height: 100%; 396 + width: 100%; 397 + padding: 8px 0; 398 + margin: 0; 399 + } 400 + 401 + #Header { 402 + text-align: center; 403 + font-size: 1.8em; 404 + margin-bottom: 16px; 405 + color: var(--accent); 406 + } 407 + 408 + /* Mobile Styles */ 409 + @media screen and (max-width: 768px) { 410 + #Content { 411 + flex-direction: column; 412 + width: auto; 413 + padding: 12px; 414 + margin-top: 0; 415 + } 416 + 417 + #Account { 418 + width: calc(100% - 32px); 419 + padding: 16px; 420 + margin-bottom: 20px; 421 + margin-left: 0; 422 + margin-right: 0; 423 + height: auto; 424 + order: -1; 425 + } 426 + 427 + #Feed { 428 + width: 100%; 429 + margin: 0; 430 + padding: 0; 431 + overflow-y: visible; 432 + } 433 + 434 + #spacer { 435 + height: 5vh; 436 + } 437 + 438 + body { 439 + font-size: 16px; 440 + } 441 + 442 + #postHeader { 443 + padding: 10px; 444 + height: auto; 445 + min-height: 50px; 446 + } 447 + } 448 + 449 + /* Scrollbar Styles */ 450 + ::-webkit-scrollbar { 451 + width: 0px; 452 + background: transparent; 453 + padding: 0; 454 + margin: 0; 455 + } 456 + 457 + ::-webkit-scrollbar-thumb { 458 + background: transparent; 459 + border-radius: 0; 460 + } 461 + 462 + ::-webkit-scrollbar-track { 463 + background: transparent; 464 + border-radius: 0; 465 + } 466 + 467 + ::-webkit-scrollbar-corner { 468 + background: transparent; 469 + border-radius: 0; 470 + } 471 + 472 + ::-webkit-scrollbar-button { 473 + background: transparent; 474 + border-radius: 0; 475 + } 476 + 477 + * { 478 + scrollbar-width: none; 479 + scrollbar-color: transparent transparent; 480 + -ms-overflow-style: none; 481 + /* IE and Edge */ 482 + -webkit-overflow-scrolling: touch; 483 + -webkit-scrollbar: none; 484 + /* Safari */ 485 + }