Mercurial

diff mrjunejune/src/jrpg/jrpg.css @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents 41a49c29a28f
children
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/jrpg.css	Fri Aug 07 16:05:29 2026 -0700
+++ b/mrjunejune/src/jrpg/jrpg.css	Sat Aug 08 02:08:08 2026 -0700
@@ -41,7 +41,15 @@
   --zenbu-sys-font-family-ui: "Pixel Mplus";
   --zenbu-sys-font-family-content: "Pixel Mplus";
   --zenbu-sys-font-family-code: "Pixel Mplus";
+  --zenbu-sys-type-caption-family: "Pixel Mplus";
   --zenbu-sys-type-label-family: "Pixel Mplus";
+  --zenbu-sys-type-body-family: "Pixel Mplus";
+  --zenbu-sys-type-body-large-family: "Pixel Mplus";
+  --zenbu-sys-type-subtitle-family: "Pixel Mplus";
+  --zenbu-sys-type-title-family: "Pixel Mplus";
+  --zenbu-sys-type-page-title-family: "Pixel Mplus";
+  --zenbu-sys-type-reading-family: "Pixel Mplus";
+  --zenbu-sys-type-code-family: "Pixel Mplus";
   min-width: 20rem;
   min-height: 100dvh;
   overflow: hidden;
@@ -741,38 +749,6 @@
   box-sizing: border-box;
   width: min(82vw, 46rem);
   max-width: calc(100% - var(--zenbu-sys-space-content));
-  padding: var(--zenbu-sys-padding-xl);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  border-radius: 0;
-  background: var(--mjj-jrpg-surface-raised);
-  color: var(--mjj-jrpg-text);
-  box-shadow:
-    inset 0 0 0 var(--zenbu-sys-stroke-width)
-    var(--mjj-jrpg-accent),
-    var(--zenbu-sys-space-control)
-    var(--zenbu-sys-space-control)
-    0
-    var(--mjj-jrpg-accent);
-}
-
-.jrpg-preview-dialog dialog::backdrop {
-  background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
-}
-
-.jrpg-preview-dialog dialog[open] {
-  animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
-    var(--zenbu-sys-motion-ease-enter);
-}
-
-@keyframes mjj-jrpg-dialog-open {
-  from {
-    clip-path: inset(48% 25%);
-    transform: scaleX(0.35);
-  }
-  to {
-    clip-path: inset(0);
-    transform: scaleX(1);
-  }
 }
 
 .jrpg-dialog-heading {
@@ -780,8 +756,6 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--zenbu-sys-space-group);
-  padding-bottom: var(--zenbu-sys-padding-md);
-  border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
 }
 
 .jrpg-dialog-heading p,
@@ -800,8 +774,13 @@
 }
 
 .jrpg-dialog-heading zen-button > :where(button, a) {
+  box-sizing: border-box;
   width: auto;
   min-width: var(--zenbu-control-height);
+  height: var(--zenbu-control-height);
+  padding:
+    var(--zenbu-control-padding-block)
+    var(--zenbu-control-padding-inline);
   border-color: var(--mjj-jrpg-accent);
   background: var(--mjj-jrpg-surface);
   color: var(--mjj-jrpg-text);
@@ -812,40 +791,32 @@
   padding: 0;
 }
 
-.jrpg-preview-dialog dialog h2 {
-  margin-top: var(--zenbu-sys-space-content);
-}
-
-.jrpg-preview-dialog dialog > p {
-  margin-bottom: var(--zenbu-sys-space-content);
-}
-
 .jrpg-preview-dialog dialog.jrpg-detail-dialog {
-  width: min(94vw, 72rem);
+  width: min(92vw, 60rem);
   max-height: calc(100dvh - var(--zenbu-sys-space-container));
   overflow: hidden;
 }
 
 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--zenbu-sys-space-group);
 }
 
+mjj-window-modal .jrpg-detail-content {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  padding: var(--zenbu-sys-padding-lg);
+}
+
+mjj-content-modal .jrpg-detail-content {
+  padding: var(--zenbu-sys-padding-lg);
+}
+
 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"] {
-  width: calc(100vw - var(--zenbu-sys-space-content));
-  max-width: none;
-  height: calc(100dvh - var(--zenbu-sys-space-content));
-  max-height: none;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"][open] {
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: var(--zenbu-sys-space-control);
+  width: min(90vw, 56rem);
+  height: min(78dvh, 44rem);
 }
 
 .jrpg-detail-dialog[data-detail-mode="tools"] > h2 {
@@ -854,19 +825,14 @@
 
 .jrpg-detail-dialog[data-detail-mode="tools"] .jrpg-dialog-heading {
   padding: var(--zenbu-sys-padding-sm);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  background: var(--mjj-jrpg-surface-raised);
-  box-shadow:
-    inset 0 0 0 var(--zenbu-sys-stroke-width)
-    var(--mjj-jrpg-accent);
 }
 
 .jrpg-resume-dossier {
   min-height: 0;
-  padding: var(--zenbu-sys-padding-lg);
+  padding: 0;
   overflow: auto;
-  border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
-  background: var(--mjj-jrpg-surface-sunken);
+  border: 0;
+  background: transparent;
   scrollbar-color: var(--mjj-jrpg-frame) transparent;
 }
 
@@ -901,9 +867,10 @@
 .jrpg-resume-dossier .info {
   display: grid;
   gap: var(--zenbu-sys-space-control);
-  padding: var(--zenbu-sys-padding-lg);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary);
-  background: var(--mjj-jrpg-panel);
+  padding: 0 0 var(--zenbu-sys-padding-lg);
+  border: 0;
+  border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  background: transparent;
 }
 
 .jrpg-resume-dossier .info > p {
@@ -972,6 +939,10 @@
   text-underline-offset: var(--zenbu-sys-space-icon-label);
 }
 
+.jrpg-resume-dossier a[href="/public/resume.pdf"] {
+  display: none;
+}
+
 .jrpg-dialog-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1127,56 +1098,18 @@
 }
 
 .jrpg-tool-panes {
-  position: relative;
   box-sizing: border-box;
   display: grid;
-  grid-template-columns:
-    minmax(0, 1fr)
-    calc(var(--zenbu-sys-space-container) * 2)
-    minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: repeat(2, minmax(18rem, auto));
   gap: var(--zenbu-sys-space-control);
-  height: 100%;
+  height: auto;
   min-height: 0;
   padding: var(--zenbu-sys-padding-sm);
 }
 
 .jrpg-tool-panes::before {
-  grid-column: 2;
-  grid-row: 1;
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  background-image:
-    radial-gradient(
-      circle at 50% var(--zenbu-sys-space-content),
-      var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
-      var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
-        calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
-      transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
-    ),
-    radial-gradient(
-      circle at 50% calc(100% - var(--zenbu-sys-space-content)),
-      var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
-      var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
-        calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
-      transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
-    ),
-    linear-gradient(
-      90deg,
-      var(--mjj-jrpg-surface-sunken),
-      var(--mjj-jrpg-surface-raised) 45%,
-      var(--mjj-jrpg-frame) 50%,
-      var(--mjj-jrpg-surface-raised) 55%,
-      var(--mjj-jrpg-surface-sunken)
-    ),
-    var(--mjj-jrpg-art);
-  background-position: center;
-  background-size: auto, auto, auto, cover;
-  box-shadow:
-    inset 0 0 0 var(--zenbu-sys-stroke-width)
-    var(--mjj-jrpg-info),
-    0 0 var(--zenbu-sys-space-related)
-    color-mix(in srgb, var(--mjj-jrpg-primary) 65%, transparent);
-  content: "";
-  image-rendering: pixelated;
+  display: none;
 }
 
 .jrpg-tool-window:first-of-type {
@@ -1185,8 +1118,8 @@
 }
 
 .jrpg-tool-window:last-of-type {
-  grid-column: 3;
-  grid-row: 1;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .jrpg-tool-pane {
@@ -1981,26 +1914,10 @@
   box-sizing: border-box;
   min-width: min(22rem, calc(100vw - var(--zenbu-sys-space-content)));
   max-width: min(26rem, calc(100vw - var(--zenbu-sys-space-content)));
-  padding: var(--zenbu-sys-padding-lg);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  border-radius: 0;
-  background: var(--mjj-jrpg-surface-raised);
-  color: var(--mjj-jrpg-text);
-  box-shadow:
-    inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
-    var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0 var(--mjj-jrpg-accent);
 }
 
-.jrpg-archive-dialog::backdrop {
-  background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
-}
-
-.jrpg-archive-dialog[open] {
-  display: grid;
-  grid-template-rows: auto auto auto;
-  gap: var(--zenbu-sys-space-group);
-  animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
-    var(--zenbu-sys-motion-ease-enter);
+mjj-window-modal [data-archive-rename-dialog] {
+  height: auto;
 }
 
 .jrpg-archive-dialog-title {
@@ -2276,7 +2193,7 @@
   }
 
   /* Hamburger button: transparent overlay over baked art */
-  .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn {
+  .jrpg-mobile-destination-owner > zen-dialog > .jrpg-mobile-menu-btn {
     display: grid;
     place-items: center;
     position: absolute;
@@ -2381,10 +2298,13 @@
     cursor: pointer;
   }
 
-  .jrpg-mobile-destination-content {
+  mjj-window-modal .jrpg-mobile-destination-content {
     min-width: 0;
     min-height: 0;
-    overflow: hidden;
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: scroll;
+    scrollbar-gutter: stable;
   }
 
   .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) {
@@ -2538,27 +2458,7 @@
 .jrpg-login-dialog {
   box-sizing: border-box;
   width: min(24rem, calc(100vw - var(--zenbu-sys-space-content)));
-  padding: var(--zenbu-sys-padding-xl);
-  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
-  border-radius: 0;
-  background: var(--mjj-jrpg-surface-raised);
-  color: var(--mjj-jrpg-text);
-  box-shadow:
-    inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
-    var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0
-      var(--mjj-jrpg-accent);
-}
-
-.jrpg-login-dialog::backdrop {
-  background: color-mix(in srgb, var(--mjj-jrpg-canvas) 84%, transparent);
-}
-
-.jrpg-login-dialog[open] {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
-  gap: var(--zenbu-sys-space-group);
-  animation: mjj-jrpg-dialog-open var(--zenbu-sys-motion-duration-layout)
-    var(--zenbu-sys-motion-ease-enter);
+  height: auto;
 }
 
 .jrpg-login-dialog-header {
@@ -2566,8 +2466,6 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--zenbu-sys-space-group);
-  padding-bottom: var(--zenbu-sys-padding-md);
-  border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
 }
 
 .jrpg-login-dialog-header h2 {