supadeck 0.0.5 → 0.0.7

package/dist/runtime/themes/base/theme.css

@@ -1,245 +1,283 @@
 @import "tailwindcss";
 
 :root {
-  --color-background: #f3f0ea;
-  --color-foreground: #1f1b16;
-  --color-muted: #6b6257;
-  --color-accent: #b85c38;
-  --color-border: rgba(31, 27, 22, 0.12);
-  --color-code-bg: rgba(31, 27, 22, 0.06);
-  --radius-lg: 1.5rem;
-  --radius-xl: 2.25rem;
-  --font-sans: "Instrument Sans", "Inter", sans-serif;
-  --font-display: "Fraunces", "Georgia", serif;
-  --slide-aspect-ratio: 16 / 9;
+   --color-background: #f3f0ea;
+   --color-foreground: #1f1b16;
+   --color-muted: #6b6257;
+   --color-accent: #b85c38;
+   --color-border: rgba(31, 27, 22, 0.12);
+   --color-code-bg: rgba(31, 27, 22, 0.06);
+   --radius-lg: 1.5rem;
+   --radius-xl: 2.25rem;
+   --font-sans: "Instrument Sans", "Inter", sans-serif;
+   --font-display: "Fraunces", "Georgia", serif;
+   --slide-aspect-ratio: 16 / 9;
 }
 
 * {
-  box-sizing: border-box;
+   box-sizing: border-box;
 }
 
 html,
 body,
 #root {
-  min-height: 100%;
-  margin: 0;
+   min-height: 100%;
+   margin: 0;
 }
 
 body {
-  min-height: 100vh;
-  font-family: var(--font-sans);
-  color: var(--color-foreground);
-  background:
-    radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 28%),
-    linear-gradient(145deg, color-mix(in srgb, var(--color-background) 92%, white), var(--color-background));
+   min-height: 100vh;
+   font-family: var(--font-sans);
+   color: var(--color-foreground);
+   background: radial-gradient(
+         circle at top left,
+         color-mix(in srgb, var(--color-accent) 16%, transparent),
+         transparent 28%
+      ),
+      linear-gradient(
+         145deg,
+         color-mix(in srgb, var(--color-background) 92%, white),
+         var(--color-background)
+      );
 }
 
 button {
-  font: inherit;
+   font: inherit;
+}
+
+.deck-code-block {
+   overflow-x: auto;
+}
+
+.deck-code-block,
+.deck-code-block code {
+   background: transparent !important;
+}
+
+.deck-code-content {
+   display: block;
+   min-width: max-content;
+   font-family: "SF Mono", "Fira Code", "IBM Plex Mono", monospace;
+   font-size: 0.95em;
+   line-height: 1;
+}
+
+.deck-code-content .line {
+   display: block;
 }
 
 .app-shell {
-  display: grid;
-  min-height: 100vh;
-  grid-template-rows: auto 1fr auto;
-  gap: 1.5rem;
-  padding: 1.5rem;
+   display: grid;
+   min-height: 100vh;
+   grid-template-rows: auto 1fr auto;
+   gap: 1.5rem;
+   padding: 1.5rem;
 }
 
 .deck-chrome {
-  display: grid;
-  gap: 0.75rem;
+   display: grid;
+   gap: 0.75rem;
 }
 
 .deck-title {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--color-muted);
+   font-family: var(--font-display);
+   font-size: 1rem;
+   font-weight: 700;
+   letter-spacing: 0.18em;
+   text-transform: uppercase;
+   color: var(--color-muted);
 }
 
 .deck-progress {
-  overflow: hidden;
-  height: 0.4rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+   overflow: hidden;
+   height: 0.4rem;
+   border-radius: 999px;
+   background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
 }
 
 .deck-progress-bar {
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, white));
-  transition: width 240ms ease;
+   height: 100%;
+   border-radius: inherit;
+   background: linear-gradient(
+      90deg,
+      var(--color-accent),
+      color-mix(in srgb, var(--color-accent) 55%, white)
+   );
+   transition: width 240ms ease;
 }
 
 .deck-stage {
-  display: grid;
-  place-items: center;
+   display: grid;
+   place-items: center;
 }
 
 .slide-frame {
-  width: min(100%, 1440px);
-  aspect-ratio: var(--slide-aspect-ratio);
-  transition: transform 220ms ease, opacity 220ms ease;
+   width: min(100%, 1440px);
+   aspect-ratio: var(--slide-aspect-ratio);
+   transition: transform 220ms ease, opacity 220ms ease;
 }
 
 .slide-surface {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  height: 100%;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 96%, white), color-mix(in srgb, var(--color-background) 86%, transparent)),
-    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 32%);
-  box-shadow:
-    0 30px 80px rgba(15, 23, 42, 0.16),
-    inset 0 1px 0 rgba(255, 255, 255, 0.45);
+   display: grid;
+   grid-template-rows: 1fr auto;
+   height: 100%;
+   overflow: hidden;
+   border: 1px solid var(--color-border);
+   border-radius: var(--radius-xl);
+   background: linear-gradient(
+         180deg,
+         color-mix(in srgb, var(--color-background) 96%, white),
+         color-mix(in srgb, var(--color-background) 86%, transparent)
+      ),
+      radial-gradient(
+         circle at top right,
+         color-mix(in srgb, var(--color-accent) 10%, transparent),
+         transparent 32%
+      );
+   box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
 .slide-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1.5rem;
-  padding: clamp(1.5rem, 4vw, 4rem);
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   gap: 1.5rem;
+   padding: clamp(1.5rem, 4vw, 4rem);
 }
 
 .slide-content > :first-child {
-  margin-top: 0;
+   margin-top: 0;
 }
 
 .slide-content > :last-child {
-  margin-bottom: 0;
+   margin-bottom: 0;
 }
 
 .deck-table-wrap {
-  width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--color-background) 92%, white);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+   width: 100%;
+   overflow-x: auto;
+   border: 1px solid var(--color-border);
+   border-radius: var(--radius-lg);
+   background: color-mix(in srgb, var(--color-background) 92%, white);
+   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
 }
 
 .deck-table {
-  width: 100%;
-  min-width: 32rem;
-  border-collapse: collapse;
-  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
-  line-height: 1.45;
+   width: 100%;
+   min-width: 32rem;
+   border-collapse: collapse;
+   font-size: clamp(0.95rem, 1.2vw, 1.35rem);
+   line-height: 1.45;
 }
 
 .deck-thead {
-  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+   background: color-mix(in srgb, var(--color-accent) 8%, transparent);
 }
 
 .deck-tr + .deck-tr {
-  border-top: 1px solid var(--color-border);
+   border-top: 1px solid var(--color-border);
 }
 
 .deck-th,
 .deck-td {
-  padding: 0.9rem 1rem;
-  text-align: left;
-  vertical-align: top;
+   padding: 0.9rem 1rem;
+   text-align: left;
+   vertical-align: top;
 }
 
 .deck-th {
-  font-size: 0.8em;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-muted);
+   font-size: 0.8em;
+   font-weight: 700;
+   letter-spacing: 0.08em;
+   text-transform: uppercase;
+   color: var(--color-muted);
 }
 
 .slide-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 1.25rem 1.5rem;
-  color: var(--color-muted);
-  font-size: 0.95rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+   display: flex;
+   justify-content: flex-end;
+   padding: 1.25rem 1.5rem;
+   color: var(--color-muted);
+   font-size: 0.95rem;
+   letter-spacing: 0.12em;
+   text-transform: uppercase;
 }
 
 .deck-nav {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
+   display: flex;
+   justify-content: flex-end;
+   gap: 0.75rem;
 }
 
 .deck-button {
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-background) 88%, white);
-  padding: 0.8rem 1.1rem;
-  color: var(--color-foreground);
-  transition: transform 160ms ease, background 160ms ease;
+   border: 1px solid var(--color-border);
+   border-radius: 999px;
+   background: color-mix(in srgb, var(--color-background) 88%, white);
+   padding: 0.8rem 1.1rem;
+   color: var(--color-foreground);
+   transition: transform 160ms ease, background 160ms ease;
 }
 
 .deck-button:hover {
-  transform: translateY(-1px);
-  background: color-mix(in srgb, var(--color-background) 80%, white);
+   transform: translateY(-1px);
+   background: color-mix(in srgb, var(--color-background) 80%, white);
 }
 
 .print-deck {
-  display: grid;
-  gap: 0;
+   display: grid;
+   gap: 0;
 }
 
 .slide-frame-print {
-  width: 100vw;
-  min-height: 100vh;
-  page-break-after: always;
-  break-after: page;
-  padding: 0;
+   width: 100vw;
+   min-height: 100vh;
+   page-break-after: always;
+   break-after: page;
+   padding: 0;
 }
 
 .slide-frame-print .slide-surface {
-  border-radius: 0;
-  box-shadow: none;
-  min-height: 100vh;
+   border-radius: 0;
+   box-shadow: none;
+   min-height: 100vh;
 }
 
 @media (max-width: 900px) {
-  .app-shell {
-    padding: 1rem;
-  }
+   .app-shell {
+      padding: 1rem;
+   }
 
-  .slide-frame {
-    width: 100%;
-  }
+   .slide-frame {
+      width: 100%;
+   }
 
-  .slide-content {
-    padding: 1.25rem;
-  }
+   .slide-content {
+      padding: 1.25rem;
+   }
 
-  .deck-table {
-    min-width: 26rem;
-  }
+   .deck-table {
+      min-width: 26rem;
+   }
 }
 
 @media print {
-  @page {
-    size: landscape;
-    margin: 0;
-  }
-
-  body {
-    background: white;
-  }
-
-  .slide-frame-print {
-    width: 100%;
-    height: 100vh;
-    min-height: 100vh;
-  }
-
-  .slide-frame-print .slide-surface {
-    border: none;
-  }
+   @page {
+      size: landscape;
+      margin: 0;
+   }
+
+   body {
+      background: white;
+   }
+
+   .slide-frame-print {
+      width: 100%;
+      height: 100vh;
+      min-height: 100vh;
+   }
+
+   .slide-frame-print .slide-surface {
+      border: none;
+   }
 }