damus.css (8085B)
1 @font-face { 2 font-family: "PoetsenOne"; 3 font-style: normal; 4 font-weight: 400; 5 font-display: swap; 6 src: url("/fonts/PoetsenOne-Regular.ttf") format("truetype"); 7 } 8 9 :root { 10 color-scheme: dark; 11 --damus-bg: #060114; 12 --damus-gradient: radial-gradient(circle at 18% 20%, rgba(248, 79, 255, 0.28) 0%, rgba(34, 5, 66, 0.82) 45%, rgba(6, 1, 20, 0.96) 100%); 13 --damus-card-bg: rgba(22, 10, 38, 0.82); 14 --damus-card-border: rgba(255, 255, 255, 0.08); 15 --damus-text: #f5f2ff; 16 --damus-muted: rgba(226, 215, 255, 0.72); 17 --damus-accent: #bd66ff; 18 --damus-accent-strong: #ff59d5; 19 --damus-highlight: rgba(189, 102, 255, 0.16); 20 --damus-font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 21 } 22 23 *, 24 *::before, 25 *::after { 26 box-sizing: border-box; 27 } 28 29 html, 30 body { 31 margin: 0; 32 padding: 0; 33 min-height: 100%; 34 } 35 36 body { 37 font-family: var(--damus-font); 38 background: var(--damus-gradient), var(--damus-bg); 39 background-attachment: fixed; 40 color: var(--damus-text); 41 line-height: 1.6; 42 letter-spacing: -0.01em; 43 } 44 45 h1, 46 h2, 47 h3, 48 h4, 49 h5, 50 h6 { 51 margin: 0; 52 font-weight: 600; 53 color: #ffffff; 54 letter-spacing: -0.02em; 55 } 56 57 p { 58 margin: 0 0 1.1em; 59 } 60 61 p:last-child { 62 margin-bottom: 0; 63 } 64 65 a { 66 color: var(--damus-accent); 67 text-decoration: none; 68 transition: color 160ms ease; 69 } 70 71 a:hover { 72 color: var(--damus-accent-strong); 73 text-decoration: underline; 74 } 75 76 .damus-app { 77 width: min(960px, 100%); 78 margin: 0 auto; 79 padding: 48px 16px 72px; 80 display: flex; 81 flex-direction: column; 82 gap: 32px; 83 } 84 85 @media (min-width: 768px) { 86 .damus-app { 87 padding: 64px 32px 96px; 88 } 89 } 90 91 .damus-header { 92 display: flex; 93 justify-content: space-between; 94 align-items: center; 95 gap: 16px; 96 } 97 98 .damus-logo-link { 99 text-decoration: none; 100 display: inline-flex; 101 align-items: center; 102 } 103 104 .damus-logo-image { 105 width: clamp(36px, 7vw, 48px); 106 height: clamp(36px, 7vw, 48px); 107 border-radius: 12px; 108 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); 109 } 110 111 .damus-header-actions { 112 display: flex; 113 flex-wrap: wrap; 114 align-items: center; 115 gap: 12px; 116 } 117 118 .damus-link { 119 color: var(--damus-muted); 120 font-weight: 600; 121 text-decoration: none; 122 } 123 124 .damus-link:hover { 125 color: #ffffff; 126 } 127 128 .damus-cta { 129 background: linear-gradient(135deg, var(--damus-accent), var(--damus-accent-strong)); 130 color: #090118; 131 border-radius: 999px; 132 padding: 0.55rem 1.35rem; 133 font-weight: 700; 134 letter-spacing: 0.02em; 135 box-shadow: 0 12px 34px rgba(189, 102, 255, 0.35); 136 transition: transform 160ms ease, box-shadow 160ms ease; 137 display: inline-flex; 138 align-items: center; 139 justify-content: center; 140 } 141 142 .damus-cta:hover { 143 transform: translateY(-1px); 144 box-shadow: 0 18px 44px rgba(189, 102, 255, 0.45); 145 text-decoration: none; 146 } 147 148 149 .damus-main { 150 display: flex; 151 flex-direction: column; 152 gap: 24px; 153 } 154 155 .damus-supporting { 156 font-size: clamp(1rem, 2.2vw, 1.2rem); 157 color: var(--damus-muted); 158 max-width: 720px; 159 } 160 161 .damus-card { 162 background: var(--damus-card-bg); 163 border: 1px solid var(--damus-card-border); 164 border-radius: 28px; 165 padding: clamp(1.75rem, 3vw, 2.5rem); 166 box-shadow: 0 25px 60px rgba(5, 0, 21, 0.5); 167 backdrop-filter: blur(24px); 168 display: flex; 169 flex-direction: column; 170 gap: 1.75rem; 171 } 172 173 .damus-section { 174 display: flex; 175 flex-direction: column; 176 gap: 18px; 177 } 178 179 .damus-section-title { 180 font-size: clamp(1.3rem, 3vw, 1.75rem); 181 font-weight: 700; 182 color: #ffffff; 183 } 184 185 .damus-profile-meta { 186 display: flex; 187 flex-direction: column; 188 gap: 0.6rem; 189 font-size: 0.95rem; 190 color: var(--damus-muted); 191 } 192 193 .damus-profile-meta-row { 194 display: flex; 195 gap: 0.65rem; 196 align-items: center; 197 flex-wrap: wrap; 198 } 199 200 .damus-meta-icon { 201 display: inline-flex; 202 align-items: center; 203 justify-content: center; 204 width: 28px; 205 height: 28px; 206 border-radius: 999px; 207 background: rgba(189, 102, 255, 0.18); 208 color: var(--damus-accent-strong); 209 } 210 211 .damus-meta-icon svg { 212 width: 18px; 213 height: 18px; 214 } 215 216 .damus-profile-meta-row a { 217 color: inherit; 218 text-decoration: none; 219 word-break: break-all; 220 } 221 222 .damus-profile-meta-row a:hover { 223 color: #ffffff; 224 text-decoration: underline; 225 } 226 227 .damus-sr-only { 228 position: absolute; 229 width: 1px; 230 height: 1px; 231 padding: 0; 232 margin: -1px; 233 overflow: hidden; 234 clip: rect(0, 0, 0, 0); 235 white-space: nowrap; 236 border: 0; 237 } 238 239 .damus-note-header, 240 .damus-profile-header { 241 display: flex; 242 align-items: center; 243 gap: 18px; 244 } 245 246 .damus-note-avatar { 247 width: 64px; 248 height: 64px; 249 border-radius: 24px; 250 border: 2px solid rgba(255, 255, 255, 0.3); 251 object-fit: cover; 252 background: rgba(255, 255, 255, 0.08); 253 } 254 255 .damus-note-author { 256 font-weight: 700; 257 font-size: 1.15rem; 258 color: #ffffff; 259 } 260 261 .damus-note-time { 262 font-size: 0.9rem; 263 color: var(--damus-muted); 264 display: block; 265 margin-top: 4px; 266 } 267 268 .damus-note-body { 269 font-size: 1.05rem; 270 line-height: 1.7; 271 word-break: break-word; 272 overflow-wrap: anywhere; 273 } 274 275 .damus-note-body img { 276 max-width: 100%; 277 border-radius: 20px; 278 margin: 1.25rem 0; 279 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); 280 } 281 282 .damus-note-body ul, 283 .damus-note-body ol { 284 padding-left: 1.25rem; 285 margin: 0 0 1.1em; 286 } 287 288 .damus-note-body blockquote { 289 margin: 0 0 1.1em; 290 padding-left: 1rem; 291 border-left: 2px solid rgba(255, 255, 255, 0.25); 292 color: rgba(255, 255, 255, 0.75); 293 } 294 295 .damus-note-body code { 296 background: rgba(255, 255, 255, 0.08); 297 padding: 0.2rem 0.45rem; 298 border-radius: 8px; 299 font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace; 300 font-size: 0.9rem; 301 } 302 303 .damus-note-body pre { 304 background: rgba(0, 0, 0, 0.35); 305 padding: 1rem; 306 border-radius: 16px; 307 margin: 1.25rem 0; 308 overflow-x: auto; 309 } 310 311 .damus-article-title { 312 font-family: "PoetsenOne", var(--damus-font); 313 font-size: clamp(2rem, 4vw, 3rem); 314 margin: 0; 315 } 316 317 .damus-article-hero { 318 max-width: 100%; 319 border-radius: 28px; 320 box-shadow: 0 24px 45px rgba(0, 0, 0, 0.35); 321 } 322 323 .damus-article-summary { 324 font-size: 1.1rem; 325 color: var(--damus-muted); 326 margin: 0; 327 } 328 329 .damus-article-topics { 330 display: flex; 331 flex-wrap: wrap; 332 gap: 8px; 333 } 334 335 .damus-article-topic { 336 background: rgba(189, 102, 255, 0.12); 337 color: #ffffff; 338 padding: 0.35rem 0.75rem; 339 border-radius: 999px; 340 font-size: 0.85rem; 341 font-weight: 600; 342 letter-spacing: 0.02em; 343 } 344 345 .damus-profile-card { 346 gap: 1.5rem; 347 } 348 349 .damus-profile-names { 350 display: flex; 351 flex-direction: column; 352 gap: 6px; 353 } 354 355 .damus-profile-handle { 356 font-size: 1rem; 357 color: var(--damus-muted); 358 } 359 360 .damus-profile-about { 361 font-size: 1.05rem; 362 line-height: 1.7; 363 color: var(--damus-muted); 364 white-space: pre-wrap; 365 word-break: break-word; 366 overflow-wrap: anywhere; 367 } 368 369 .damus-relays { 370 border-top: 1px solid rgba(255, 255, 255, 0.08); 371 padding-top: 1.25rem; 372 display: flex; 373 flex-direction: column; 374 gap: 0.65rem; 375 } 376 377 .damus-relays summary { 378 cursor: pointer; 379 font-weight: 600; 380 color: #ffffff; 381 list-style: none; 382 } 383 384 .damus-relays summary::-webkit-details-marker { 385 display: none; 386 } 387 388 .damus-relay-list { 389 display: flex; 390 flex-direction: column; 391 gap: 0.35rem; 392 margin: 0.75rem 0 0; 393 padding: 0; 394 list-style: none; 395 font-size: 0.9rem; 396 color: var(--damus-muted); 397 } 398 399 .damus-relay-role { 400 margin-left: 0.35rem; 401 font-size: 0.8rem; 402 text-transform: uppercase; 403 letter-spacing: 0.05em; 404 color: rgba(255, 255, 255, 0.55); 405 } 406 407 .damus-footer { 408 color: var(--damus-muted); 409 font-size: 0.9rem; 410 display: flex; 411 flex-direction: column; 412 gap: 8px; 413 text-align: center; 414 justify-content: center; 415 align-items: center; 416 } 417 418 .damus-footer a { 419 color: inherit; 420 } 421 422 .damus-footer a:hover { 423 color: #ffffff; 424 } 425 426 .muted-link { 427 color: var(--damus-muted); 428 } 429 430 .muted-link:hover { 431 color: #ffffff; 432 } 433 434 .muted { 435 color: var(--damus-muted); 436 } 437 438 @media (max-width: 640px) { 439 .damus-header { 440 flex-direction: column; 441 align-items: flex-start; 442 } 443 444 .damus-header-actions { 445 width: 100%; 446 align-items: flex-start; 447 } 448 449 .damus-cta { 450 width: 100%; 451 } 452 453 .damus-card { 454 border-radius: 22px; 455 padding: 1.5rem; 456 } 457 458 .damus-note-avatar { 459 width: 56px; 460 height: 56px; 461 } 462 }