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 theme (wow the default css sucks)

Ruben e940f166 8d6522e6

+76 -50
+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;