Mercurial

diff mrjunejune/src/public/component-sandbox.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
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/src/public/component-sandbox.css	Sat Aug 08 02:08:08 2026 -0700
@@ -0,0 +1,203 @@
+@font-face {
+  font-family: "Pixel Mplus";
+  src: url("/public/fonts/pixel-mplus-12-regular.ttf") format("truetype");
+  font-display: block;
+}
+
+:root {
+  --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";
+}
+
+body {
+  box-sizing: border-box;
+  min-height: 100dvh;
+  margin: 0;
+  padding: var(--zenbu-sys-padding-xl);
+  background: var(--zenbu-sys-color-surface-page);
+  color: var(--zenbu-sys-color-text-primary);
+  font-family: var(--zenbu-sys-font-family-ui);
+}
+
+body * {
+  font-family: inherit;
+}
+
+zen-icon svg {
+  shape-rendering: crispEdges;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+}
+
+main {
+  display: grid;
+  gap: var(--zenbu-sys-space-container);
+  width: min(100%, 64rem);
+  margin-inline: auto;
+}
+
+.sandbox-heading {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+}
+
+.sandbox-heading h1 {
+  color: var(--zenbu-sys-color-action-primary-background);
+  text-shadow:
+    var(--zenbu-sys-space-icon-label)
+    var(--zenbu-sys-space-icon-label)
+    0
+    var(--zenbu-sys-color-danger-foreground);
+}
+
+.sandbox-heading :where(h1, p),
+.sandbox-card :where(h2, p),
+.sandbox-pane :where(h3, p) {
+  margin: 0;
+}
+
+.sandbox-heading p,
+.sandbox-card > p,
+.sandbox-muted {
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.sandbox-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--zenbu-sys-space-group);
+}
+
+.sandbox-layers {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--zenbu-sys-space-control);
+  margin: 0;
+}
+
+.sandbox-layers > div {
+  display: grid;
+  gap: var(--zenbu-sys-space-icon-label);
+  padding: var(--zenbu-sys-padding-md);
+  border: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-control);
+  background: var(--zenbu-sys-color-surface-sunken);
+}
+
+.sandbox-layers > div:nth-child(1) dt {
+  color: var(--zenbu-sys-color-warning-foreground);
+}
+
+.sandbox-layers > div:nth-child(2) dt {
+  color: var(--zenbu-sys-color-info-foreground);
+}
+
+.sandbox-layers > div:nth-child(3) dt {
+  color: var(--zenbu-sys-color-action-primary-background);
+}
+
+.sandbox-layers dt {
+  color: var(--zenbu-sys-color-text-primary);
+  font-weight: var(--zenbu-sys-font-weight-strong);
+}
+
+.sandbox-layers dd {
+  margin: 0;
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-sm);
+}
+
+.sandbox-rule {
+  padding: var(--zenbu-sys-padding-md);
+  border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
+    var(--zenbu-sys-color-action-primary-border);
+  background: var(--zenbu-sys-color-surface-sunken);
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.sandbox-card {
+  display: grid;
+  align-content: start;
+  gap: var(--zenbu-sys-space-group);
+  padding: var(--zenbu-sys-padding-xl);
+  border: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-container);
+  background: var(--zenbu-sys-color-surface-raised);
+  box-shadow:
+    var(--zenbu-sys-space-control)
+    var(--zenbu-sys-space-control)
+    0
+    var(--zenbu-sys-color-danger-foreground);
+}
+
+.sandbox-card > h2 {
+  color: var(--zenbu-sys-color-action-primary-background);
+}
+
+.sandbox-list {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sandbox-list li {
+  padding-bottom: var(--zenbu-sys-padding-sm);
+  border-bottom: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-border-subtle);
+}
+
+.sandbox-audit {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+  margin: var(--zenbu-sys-space-group) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sandbox-audit li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--zenbu-sys-space-control);
+  padding-block: var(--zenbu-sys-padding-sm);
+  border-top: var(--zenbu-sys-stroke-width) solid
+    var(--zenbu-sys-color-border-subtle);
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.sandbox-audit strong {
+  color: var(--zenbu-sys-color-warning-foreground);
+}
+
+.sandbox-pane {
+  display: grid;
+  align-content: start;
+  gap: var(--zenbu-sys-space-control);
+}
+
+@media (max-width: 42rem) {
+  body {
+    padding: var(--zenbu-sys-padding-lg);
+  }
+
+  .sandbox-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sandbox-layers {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}