Mercurial

comparison mrjunejune/src/jrpg/jrpg.css @ 262:0f45474c1b1a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add cyberpunk JRPG blog browser Show the latest posts in the JRPG preview and render the full blog archive and sanitized post details in the Inspect modal. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Thu, 06 Aug 2026 04:08:45 -0700
parents b401627fc49e
children ee04e4e69fed
comparison
equal deleted inserted replaced
261:b401627fc49e 262:0f45474c1b1a
532 532
533 .jrpg-preview-dialog dialog > p { 533 .jrpg-preview-dialog dialog > p {
534 margin-bottom: var(--zenbu-sys-space-content); 534 margin-bottom: var(--zenbu-sys-space-content);
535 } 535 }
536 536
537 .jrpg-preview-dialog dialog.jrpg-resume-dialog { 537 .jrpg-preview-dialog dialog.jrpg-detail-dialog {
538 width: min(94vw, 72rem); 538 width: min(94vw, 72rem);
539 max-height: calc(100dvh - var(--zenbu-sys-space-container)); 539 max-height: calc(100dvh - var(--zenbu-sys-space-container));
540 overflow: hidden; 540 overflow: hidden;
541 } 541 }
542 542
543 .jrpg-preview-dialog dialog.jrpg-resume-dialog[open] { 543 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] {
544 display: grid; 544 display: grid;
545 grid-template-rows: auto auto minmax(0, 1fr) auto; 545 grid-template-rows: auto auto minmax(0, 1fr) auto;
546 gap: var(--zenbu-sys-space-group); 546 gap: var(--zenbu-sys-space-group);
547 } 547 }
548 548
554 background: var(--mjj-jrpg-surface-sunken); 554 background: var(--mjj-jrpg-surface-sunken);
555 scrollbar-color: var(--mjj-jrpg-frame) transparent; 555 scrollbar-color: var(--mjj-jrpg-frame) transparent;
556 } 556 }
557 557
558 .jrpg-resume-dossier[hidden], 558 .jrpg-resume-dossier[hidden],
559 .jrpg-blog-browser[hidden],
559 [data-dialog-copy][hidden], 560 [data-dialog-copy][hidden],
561 [data-blog-status][hidden],
560 [data-resume-status][hidden], 562 [data-resume-status][hidden],
561 [data-resume-download][hidden] { 563 [data-resume-download][hidden] {
562 display: none; 564 display: none;
563 } 565 }
564 566
653 655
654 .jrpg-dialog-actions { 656 .jrpg-dialog-actions {
655 display: grid; 657 display: grid;
656 grid-template-columns: repeat(2, minmax(0, 1fr)); 658 grid-template-columns: repeat(2, minmax(0, 1fr));
657 gap: var(--zenbu-sys-space-control); 659 gap: var(--zenbu-sys-space-control);
660 }
661
662 .jrpg-blog-browser {
663 display: grid;
664 grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
665 gap: var(--zenbu-sys-space-group);
666 min-height: 0;
667 overflow: hidden;
668 }
669
670 .jrpg-blog-browser > aside,
671 .jrpg-blog-browser > article {
672 min-height: 0;
673 padding: var(--zenbu-sys-padding-md);
674 overflow: auto;
675 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
676 background: var(--mjj-jrpg-surface-sunken);
677 scrollbar-color: var(--mjj-jrpg-frame) transparent;
678 }
679
680 .jrpg-blog-browser h3,
681 .jrpg-blog-browser [data-blog-status] {
682 margin-top: 0;
683 color: var(--mjj-jrpg-highlight);
684 }
685
686 .jrpg-blog-browser [data-blog-list] {
687 display: grid;
688 gap: var(--zenbu-sys-space-control);
689 margin: 0;
690 padding: 0;
691 list-style: none;
692 }
693
694 .jrpg-blog-browser [data-blog-list] zen-button,
695 .jrpg-blog-browser [data-blog-list] button {
696 width: 100%;
697 }
698
699 .jrpg-blog-browser [data-blog-list] button {
700 display: grid;
701 justify-items: start;
702 gap: var(--zenbu-sys-space-icon-label);
703 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
704 border-radius: 0;
705 background: var(--mjj-jrpg-panel);
706 color: var(--mjj-jrpg-primary);
707 text-align: left;
708 cursor: pointer;
709 }
710
711 .jrpg-blog-browser [data-blog-list] button:hover,
712 .jrpg-blog-browser [data-blog-list] button[aria-pressed="true"] {
713 border-color: var(--mjj-jrpg-accent);
714 background: var(--mjj-jrpg-surface-raised);
715 }
716
717 .jrpg-blog-browser [data-blog-list] small {
718 color: var(--mjj-jrpg-text-muted);
719 font-size: var(--zenbu-sys-font-size-xs);
720 }
721
722 .jrpg-blog-browser [data-blog-content] {
723 color: var(--mjj-jrpg-text);
724 line-height: var(--zenbu-sys-line-height-lg);
725 }
726
727 .jrpg-blog-browser [data-blog-content] :where(h1, h2, h3, h4) {
728 color: var(--mjj-jrpg-primary);
729 }
730
731 .jrpg-blog-browser [data-blog-content] a {
732 color: var(--mjj-jrpg-primary);
733 text-decoration-color: var(--mjj-jrpg-accent);
734 text-underline-offset: var(--zenbu-sys-space-icon-label);
735 }
736
737 .jrpg-blog-browser [data-blog-content] :where(img, video) {
738 display: block;
739 max-width: 100%;
740 height: auto;
741 margin-inline: auto;
742 }
743
744 .jrpg-blog-browser [data-blog-content] :where(pre, blockquote) {
745 max-width: 100%;
746 padding: var(--zenbu-sys-padding-md);
747 overflow: auto;
748 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
749 background: var(--mjj-jrpg-panel);
750 }
751
752 .jrpg-blog-browser [data-blog-content] code {
753 color: var(--mjj-jrpg-success);
754 white-space: pre-wrap;
755 overflow-wrap: anywhere;
658 } 756 }
659 757
660 mjj-jrpg-composer { 758 mjj-jrpg-composer {
661 grid-area: composer; 759 grid-area: composer;
662 display: block; 760 display: block;
946 1044
947 .jrpg-composer zen-button > button { 1045 .jrpg-composer zen-button > button {
948 width: 100%; 1046 width: 100%;
949 } 1047 }
950 1048
1049 .jrpg-blog-browser {
1050 grid-template-columns: 1fr;
1051 overflow: auto;
1052 }
1053
1054 .jrpg-blog-browser > aside {
1055 max-height: 16rem;
1056 }
1057
951 mjj-jrpg-menu ul { 1058 mjj-jrpg-menu ul {
952 grid-template-columns: 1fr; 1059 grid-template-columns: 1fr;
953 } 1060 }
954 1061
955 .jrpg-preview-dialog dialog { 1062 .jrpg-preview-dialog dialog {