damus.css (15854B)
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-handle { 262 display: block; 263 font-size: 0.95rem; 264 font-weight: 400; 265 color: var(--damus-muted); 266 } 267 268 .damus-note-time { 269 font-size: 0.9rem; 270 color: var(--damus-muted); 271 display: block; 272 margin-top: 4px; 273 } 274 275 .damus-note-body { 276 font-size: 1.05rem; 277 line-height: 1.7; 278 word-break: break-word; 279 overflow-wrap: anywhere; 280 } 281 282 .damus-note-body img { 283 max-width: 100%; 284 border-radius: 20px; 285 margin: 1.25rem 0; 286 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); 287 } 288 289 .damus-note-body ul, 290 .damus-note-body ol { 291 padding-left: 1.25rem; 292 margin: 0 0 1.1em; 293 } 294 295 .damus-note-body blockquote { 296 margin: 0 0 1.1em; 297 padding-left: 1rem; 298 border-left: 2px solid rgba(255, 255, 255, 0.25); 299 color: rgba(255, 255, 255, 0.75); 300 } 301 302 .damus-note-body code { 303 background: rgba(255, 255, 255, 0.08); 304 padding: 0.2rem 0.45rem; 305 border-radius: 8px; 306 font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace; 307 font-size: 0.9rem; 308 } 309 310 .damus-note-body video { 311 width: 100%; 312 max-width: 100%; 313 height: auto; 314 } 315 316 .damus-note-body pre { 317 background: rgba(0, 0, 0, 0.35); 318 padding: 1rem; 319 border-radius: 16px; 320 margin: 1.25rem 0; 321 overflow-x: auto; 322 } 323 324 .damus-article-title { 325 font-family: "PoetsenOne", var(--damus-font); 326 font-size: clamp(2rem, 4vw, 3rem); 327 margin: 0; 328 } 329 330 .damus-article-hero { 331 max-width: 100%; 332 border-radius: 28px; 333 box-shadow: 0 24px 45px rgba(0, 0, 0, 0.35); 334 } 335 336 .damus-article-summary { 337 font-size: 1.1rem; 338 color: var(--damus-muted); 339 margin: 0; 340 } 341 342 .damus-article-topics { 343 display: flex; 344 flex-wrap: wrap; 345 gap: 8px; 346 } 347 348 .damus-article-topic { 349 background: rgba(189, 102, 255, 0.12); 350 color: #ffffff; 351 padding: 0.35rem 0.75rem; 352 border-radius: 999px; 353 font-size: 0.85rem; 354 font-weight: 600; 355 letter-spacing: 0.02em; 356 } 357 358 /* Draft badge for unpublished articles (kind:30024) */ 359 .damus-article-draft { 360 background: linear-gradient(135deg, #ff6b35, #f7931a); 361 color: #ffffff; 362 padding: 0.25em 0.65em; 363 border-radius: 6px; 364 font-family: var(--damus-font); 365 font-size: 0.4em; 366 font-weight: 700; 367 letter-spacing: 0.08em; 368 text-transform: uppercase; 369 margin-left: 0.75em; 370 vertical-align: middle; 371 box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); 372 } 373 374 /* NIP-84 Highlight styles (kind:9802) */ 375 .damus-highlight-text { 376 border-left: 3px solid var(--damus-accent); 377 padding-left: 1.25rem; 378 margin: 0; 379 font-style: italic; 380 font-size: 1.15rem; 381 line-height: 1.7; 382 color: var(--damus-text); 383 } 384 385 .damus-highlight-context { 386 color: var(--damus-muted); 387 font-size: 0.9rem; 388 line-height: 1.6; 389 margin-top: 1rem; 390 } 391 392 .damus-highlight-source { 393 font-size: 0.9rem; 394 margin-top: 1.25rem; 395 padding-top: 1rem; 396 border-top: 1px solid var(--damus-card-border); 397 } 398 399 .damus-highlight-source-label { 400 color: var(--damus-muted); 401 margin-right: 0.35em; 402 } 403 404 .damus-highlight-comment { 405 font-size: 1.1rem; 406 line-height: 1.6; 407 margin-bottom: 1rem; 408 } 409 410 .damus-profile-card { 411 gap: 1.5rem; 412 } 413 414 .damus-profile-names { 415 display: flex; 416 flex-direction: column; 417 gap: 6px; 418 } 419 420 .damus-profile-handle { 421 font-size: 1rem; 422 color: var(--damus-muted); 423 } 424 425 .damus-profile-about { 426 font-size: 1.05rem; 427 line-height: 1.7; 428 color: var(--damus-muted); 429 white-space: pre-wrap; 430 word-break: break-word; 431 overflow-wrap: anywhere; 432 } 433 434 .damus-relays { 435 border-top: 1px solid rgba(255, 255, 255, 0.08); 436 padding-top: 1.25rem; 437 display: flex; 438 flex-direction: column; 439 gap: 0.65rem; 440 } 441 442 .damus-relays summary { 443 cursor: pointer; 444 font-weight: 600; 445 color: #ffffff; 446 list-style: none; 447 } 448 449 .damus-relays summary::-webkit-details-marker { 450 display: none; 451 } 452 453 .damus-relay-list { 454 display: flex; 455 flex-direction: column; 456 gap: 0.35rem; 457 margin: 0.75rem 0 0; 458 padding: 0; 459 list-style: none; 460 font-size: 0.9rem; 461 color: var(--damus-muted); 462 } 463 464 .damus-relay-role { 465 margin-left: 0.35rem; 466 font-size: 0.8rem; 467 text-transform: uppercase; 468 letter-spacing: 0.05em; 469 color: rgba(255, 255, 255, 0.55); 470 } 471 472 .damus-footer { 473 color: var(--damus-muted); 474 font-size: 0.9rem; 475 display: flex; 476 flex-direction: column; 477 gap: 8px; 478 text-align: center; 479 justify-content: center; 480 align-items: center; 481 } 482 483 .damus-footer a { 484 color: inherit; 485 } 486 487 .damus-footer a:hover { 488 color: #ffffff; 489 } 490 491 .muted-link { 492 color: var(--damus-muted); 493 } 494 495 .muted-link:hover { 496 color: #ffffff; 497 } 498 499 .muted { 500 color: var(--damus-muted); 501 } 502 503 /* NIP-18 Embedded Quotes (q tags) */ 504 .damus-embedded-quotes { 505 display: flex; 506 flex-direction: column; 507 gap: 0.5rem; 508 margin-top: 0.35rem; 509 } 510 511 .damus-embedded-quote { 512 background: rgba(0, 0, 0, 0.25); 513 border: 1px solid var(--damus-card-border); 514 border-radius: 16px; 515 padding: 0.875rem 1rem; 516 transition: border-color 160ms ease; 517 text-decoration: none; 518 display: block; 519 } 520 521 .damus-embedded-quote:hover { 522 border-color: rgba(189, 102, 255, 0.3); 523 text-decoration: none; 524 } 525 526 .damus-embedded-quote-header { 527 display: flex; 528 align-items: center; 529 gap: 0.35rem; 530 margin-bottom: 0.25rem; 531 flex-wrap: wrap; 532 } 533 534 .damus-embedded-quote-avatar { 535 width: 20px; 536 height: 20px; 537 border-radius: 50%; 538 object-fit: cover; 539 flex-shrink: 0; 540 } 541 542 .damus-embedded-quote-author { 543 font-weight: 600; 544 color: #ffffff; 545 font-size: 0.9rem; 546 } 547 548 .damus-embedded-quote-username { 549 color: var(--damus-muted); 550 font-size: 0.85rem; 551 } 552 553 .damus-embedded-quote-time { 554 color: var(--damus-muted); 555 font-size: 0.85rem; 556 } 557 558 .damus-embedded-quote-type { 559 background: rgba(189, 102, 255, 0.2); 560 color: var(--damus-accent); 561 padding: 0.15em 0.5em; 562 border-radius: 4px; 563 font-size: 0.75rem; 564 font-weight: 600; 565 text-transform: uppercase; 566 letter-spacing: 0.03em; 567 margin-left: 0.5rem; 568 } 569 570 .damus-embedded-quote-type-draft { 571 background: rgba(255, 107, 53, 0.2); 572 color: #ff6b35; 573 } 574 575 .damus-embedded-quote-reply { 576 color: var(--damus-muted); 577 font-size: 0.8rem; 578 margin-bottom: 0.5rem; 579 } 580 581 /* Thread layout: CSS grid with avatar + content columns */ 582 .damus-thread-grid { 583 display: grid; 584 grid-template-columns: 42px 1fr; 585 grid-template-rows: auto auto; 586 column-gap: 0.75rem; 587 row-gap: 0.75rem; 588 } 589 590 /* Line sits in row 1 of the avatar column, stretches full row height 591 plus the row-gap. margin-top: 42px starts it below the parent avatar. 592 margin-bottom: -0.5rem extends it through the row-gap so it reaches 593 the reply avatar. */ 594 .damus-thread-line { 595 grid-column: 1; 596 grid-row: 1; 597 width: 2px; 598 background: rgba(255, 255, 255, 0.25); 599 margin: 42px auto -0.75rem; 600 align-self: stretch; 601 } 602 603 .damus-thread-pfp { 604 display: flex; 605 align-items: start; 606 justify-content: center; 607 } 608 609 .damus-thread-pfp-parent { 610 grid-column: 1; 611 grid-row: 1; 612 } 613 614 .damus-thread-pfp-reply { 615 grid-column: 1; 616 grid-row: 2; 617 } 618 619 .damus-thread-avatar { 620 width: 42px; 621 height: 42px; 622 border-radius: 50%; 623 object-fit: cover; 624 display: block; 625 } 626 627 .damus-thread-parent-content { 628 grid-column: 2; 629 grid-row: 1; 630 text-decoration: none; 631 padding-bottom: 0.75rem; 632 min-width: 0; 633 } 634 635 .damus-thread-parent-content:hover .damus-thread-parent-text { 636 color: var(--damus-text); 637 } 638 639 .damus-thread-parent-meta { 640 display: flex; 641 align-items: center; 642 gap: 0.35rem; 643 margin-bottom: 0.25rem; 644 } 645 646 .damus-thread-parent-author { 647 font-weight: 600; 648 color: #ffffff; 649 font-size: 0.95rem; 650 } 651 652 .damus-thread-parent-time { 653 color: var(--damus-muted); 654 font-size: 0.85rem; 655 } 656 657 .damus-thread-parent-text { 658 color: var(--damus-muted); 659 font-size: 0.9rem; 660 line-height: 1.5; 661 } 662 663 .damus-thread-reply-content { 664 grid-column: 2; 665 grid-row: 2; 666 min-width: 0; 667 } 668 669 .damus-thread-reply-meta { 670 display: flex; 671 align-items: center; 672 gap: 0.5rem; 673 margin-bottom: 0.25rem; 674 } 675 676 .damus-thread-reply-meta a { 677 text-decoration: none; 678 } 679 680 .damus-embedded-quote-content { 681 color: var(--damus-text); 682 font-size: 0.9rem; 683 line-height: 1.5; 684 } 685 686 .damus-embedded-quote-highlight { 687 border-left: 3px solid var(--damus-accent); 688 padding-left: 0.75rem; 689 font-style: italic; 690 } 691 692 /* Article card styling for embedded quotes */ 693 .damus-embedded-quote-article { 694 display: flex; 695 flex-direction: column; 696 } 697 698 .damus-embedded-article-image { 699 width: 100%; 700 max-height: 180px; 701 object-fit: cover; 702 border-radius: 12px; 703 margin-bottom: 0.75rem; 704 } 705 706 .damus-embedded-article-title { 707 font-weight: 700; 708 font-size: 1rem; 709 color: #ffffff; 710 line-height: 1.3; 711 margin-bottom: 0.35rem; 712 } 713 714 .damus-embedded-article-title.damus-embedded-article-draft::after { 715 content: "DRAFT"; 716 background: linear-gradient(135deg, #ff6b35, #f7931a); 717 color: #ffffff; 718 padding: 0.15em 0.4em; 719 border-radius: 4px; 720 font-size: 0.6em; 721 font-weight: 700; 722 letter-spacing: 0.05em; 723 margin-left: 0.5em; 724 vertical-align: middle; 725 } 726 727 .damus-embedded-article-summary { 728 font-size: 0.85rem; 729 color: var(--damus-muted); 730 line-height: 1.4; 731 margin-bottom: 0.5rem; 732 } 733 734 .damus-embedded-article-wordcount { 735 font-size: 0.8rem; 736 color: var(--damus-muted); 737 font-weight: 500; 738 } 739 740 .damus-embedded-quote-showmore { 741 color: var(--damus-accent); 742 font-weight: 500; 743 } 744 745 .damus-embedded-quote-urls { 746 display: flex; 747 flex-wrap: wrap; 748 gap: 0.5rem; 749 margin-top: 0.75rem; 750 } 751 752 .damus-embedded-quote-url { 753 background: rgba(255, 255, 255, 0.08); 754 color: var(--damus-muted); 755 padding: 0.4rem 0.75rem; 756 border-radius: 8px; 757 font-size: 0.8rem; 758 } 759 760 @media (max-width: 640px) { 761 .damus-header { 762 flex-direction: column; 763 align-items: flex-start; 764 } 765 766 .damus-header-actions { 767 width: 100%; 768 align-items: flex-start; 769 } 770 771 .damus-cta { 772 width: 100%; 773 } 774 775 .damus-card { 776 border-radius: 22px; 777 padding: 1.5rem; 778 } 779 780 .damus-note-avatar { 781 width: 56px; 782 height: 56px; 783 } 784 } 785 786 /* Note stats footer (replies, reposts, reactions) */ 787 .damus-note-stats { 788 display: flex; 789 align-items: center; 790 gap: 1rem; 791 margin-top: 0.75rem; 792 padding-top: 0.6rem; 793 border-top: 1px solid rgba(255, 255, 255, 0.08); 794 flex-wrap: wrap; 795 } 796 797 .damus-stat { 798 display: inline-flex; 799 align-items: center; 800 gap: 0.3rem; 801 color: var(--damus-muted); 802 font-size: 0.85rem; 803 } 804 805 .damus-stat-icon { 806 width: 1rem; 807 height: 1rem; 808 } 809 810 .damus-stat-count { 811 font-weight: 500; 812 } 813 814 /* Replies section */ 815 .damus-replies { 816 display: flex; 817 flex-direction: column; 818 gap: 2px; 819 margin-top: 0.75rem; 820 } 821 822 .damus-reply { 823 display: flex; 824 gap: 0.625rem; 825 padding: 0.75rem 1rem; 826 background: var(--damus-card-bg); 827 border: 1px solid var(--damus-card-border); 828 border-radius: 12px; 829 text-decoration: none; 830 color: var(--damus-text); 831 transition: border-color 160ms ease; 832 } 833 834 .damus-reply:hover { 835 border-color: rgba(189, 102, 255, 0.3); 836 text-decoration: none; 837 } 838 839 .damus-reply-avatar { 840 width: 32px; 841 height: 32px; 842 border-radius: 50%; 843 object-fit: cover; 844 flex-shrink: 0; 845 } 846 847 .damus-reply-body { 848 min-width: 0; 849 flex: 1; 850 } 851 852 .damus-reply-header { 853 display: flex; 854 align-items: baseline; 855 gap: 0.35rem; 856 margin-bottom: 0.15rem; 857 } 858 859 .damus-reply-author { 860 font-weight: 600; 861 font-size: 0.85rem; 862 color: #ffffff; 863 } 864 865 .damus-reply-time { 866 color: var(--damus-muted); 867 font-size: 0.8rem; 868 } 869 870 .damus-reply-content { 871 font-size: 0.9rem; 872 color: var(--damus-muted); 873 line-height: 1.5; 874 overflow: hidden; 875 display: -webkit-box; 876 -webkit-line-clamp: 3; 877 -webkit-box-orient: vertical; 878 }