andy-note-nuxt 0.2.0

package/app/assets/css/main.css

@@ -0,0 +1,609 @@
+/* =================================================================
+ * andy-note-nuxt — brutalist terminal theme
+ * Tailwind v3 base + custom @layer additions for prose / list rows.
+ * Tokens defined in tailwind.config.js; CSS vars below are kept only
+ * for inline-style usage in stacked-column layout (--column-width etc.)
+ * ================================================================= */
+
+/* Fonts — @import MUST precede @tailwind directives per CSS spec.
+   Local @fontsource packages = self-host (no FOUT, no third-party request). */
+@import "@fontsource/space-grotesk/300.css";
+@import "@fontsource/space-grotesk/400.css";
+@import "@fontsource/space-grotesk/500.css";
+@import "@fontsource/space-grotesk/600.css";
+@import "@fontsource/space-grotesk/700.css";
+@import "@fontsource/literata/400.css";
+@import "@fontsource/literata/400-italic.css";
+@import "@fontsource/literata/600.css";
+@import "@fontsource/literata/700.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* Layout/spacing tokens that components reference via inline style. */
+  :root {
+    --column-width: 670px;
+    --column-min-width: 540px;
+    --content-width: 720px;
+    --content-width-wide: 960px;
+
+    /* Width of the peek strip when an earlier column is sticky-stacked at
+       the left edge (Andy Matuschak / Stripe-docs pattern). 48px = visible
+       border + a few characters of section header, and ≥ minimum tap target
+       (44px) so peek strips are clickable on touch devices. */
+    --stack-peek: 48px;
+
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.5rem;
+    --space-6: 2rem;
+    --space-7: 2.5rem;
+    --space-8: 3rem;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+  * { margin: 0; padding: 0; }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-terminal-bg text-terminal-text font-display;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    min-height: 100vh;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-display font-bold uppercase tracking-tight;
+  }
+
+  ::selection { @apply bg-primary text-terminal-bg; }
+  ::-moz-selection { @apply bg-primary text-terminal-bg; }
+
+  /* Thin scrollbars with coral hover — matches the terminal accent. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.terminal.border') transparent;
+  }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { @apply bg-transparent; }
+  ::-webkit-scrollbar-thumb { @apply bg-terminal-border; }
+  ::-webkit-scrollbar-thumb:hover { @apply bg-primary; }
+  ::-webkit-scrollbar-corner { @apply bg-transparent; }
+
+  img, svg, video { max-width: 100%; height: auto; display: block; }
+  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
+  input, select, textarea { font: inherit; color: inherit; }
+
+  /* Tabular numerals for stat tables, prices, comparison columns. */
+  table, time, code, .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@layer components {
+  /* ---------- Brutalist primitives ---------- */
+
+  /* Section header pinned above the column's scroll body via flex layout.
+     Lives outside the overflow container, so the scrollbar never overlaps it. */
+  .section-card-header {
+    @apply px-4 py-3 border-b-[3px] border-terminal-border bg-terminal-bg;
+  }
+
+  /* Copy + AI-deep-link split button — true button-group pattern. The
+     outer `.copy-actions` wrapper owns the border, background, and focus
+     stamp-shadow; child `.copy-btn` halves are border-less segments
+     separated only by an internal vertical divider. This eliminates the
+     double-border seam that earlier `margin: -1px` hacks couldn't fully
+     hide. Primary half carries the "Copy" / "Copied" / "Failed" text
+     label; `.copy-btn--menu` is the attached caret half opening
+     `.copy-menu`. `data-state` flips the primary half to a filled
+     coral affordance during the brief success window. */
+  .copy-actions {
+    @apply relative inline-flex items-stretch shrink-0 border border-terminal-border bg-terminal-bg transition-colors;
+  }
+  /* Group-level focus ring — single stamp shadow on the wrapper instead
+     of per-button shadows, so the focused half doesn't "lift" away from
+     its sibling and break the fused appearance. */
+  .copy-actions:focus-within {
+    @apply border-primary;
+    box-shadow: 2px 2px 0 0 theme('colors.primary');
+  }
+  /* Borderless segment. Width is fixed at the widest label ("Copied" /
+     "Failed", 6 chars in mono bold 10px) so "Copy" doesn't reflow when
+     state flips and the pair stays balanced with the icon-narrow caret. */
+  .copy-btn {
+    @apply inline-flex items-center justify-center text-terminal-text-secondary cursor-pointer transition-colors;
+    background: transparent;
+    border: 0;
+    height: 22px;
+    width: 48px;
+    padding: 0;
+  }
+  /* Internal divider — paints on the trailing edge of every segment
+     except the last, so it shows once between Copy and the caret half
+     and never leaks outside the group. */
+  .copy-btn:not(:last-child) {
+    border-right: 1px solid theme('colors.terminal.border');
+  }
+  .copy-btn--menu {
+    width: 22px;
+  }
+  .copy-btn__label {
+    @apply font-mono font-bold uppercase tracking-tight;
+    font-size: 10px;
+    line-height: 1;
+  }
+  .copy-btn__caret {
+    width: 10px;
+    height: 7px;
+    display: block;
+    transition: transform 140ms ease;
+  }
+  .copy-btn__caret--open {
+    transform: rotate(180deg);
+  }
+  .copy-btn:hover,
+  .copy-btn[aria-expanded='true'] {
+    @apply text-primary;
+  }
+  .copy-btn:focus-visible {
+    @apply outline-none text-primary;
+  }
+  .copy-btn[data-state='copied'] {
+    @apply bg-primary text-terminal-bg;
+  }
+  .copy-btn[data-state='error'] {
+    @apply text-terminal-text-muted;
+  }
+
+  /* Dropdown menu — sharp-edged, stamp-shadow, mono. Teleported to <body>
+     so it escapes any column overflow clip; positioning comes from inline
+     styles written by Floating-UI's `useFloating`. We only own the visual
+     surface (border, shadow, palette, sizing) — never the coords. z-index
+     sits above stacked-column borders, which top out near 20–30 in practice. */
+  .copy-menu {
+    @apply bg-terminal-bg border-2 border-terminal-border;
+    position: absolute;
+    min-width: 168px;
+    box-shadow: 4px 4px 0 0 theme('colors.primary');
+    z-index: 100;
+  }
+  .copy-menu__item {
+    @apply flex items-center gap-2 px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-widest text-terminal-text transition-colors no-underline;
+  }
+  .copy-menu__item + .copy-menu__item {
+    @apply border-t border-terminal-border;
+  }
+  .copy-menu__item:hover {
+    @apply bg-primary text-terminal-bg;
+  }
+  .copy-menu__arrow {
+    @apply text-terminal-text-faint;
+  }
+  .copy-menu__item:hover .copy-menu__arrow {
+    @apply text-terminal-bg;
+  }
+
+  /* Dotted leader (between list-row title and counter). 2px dashes,
+     positioned slightly above baseline so it visually aligns with letter midline. */
+  .dotted-leader {
+    flex-grow: 1;
+    border-bottom: 2px dotted theme('colors.terminal.border');
+    margin: 0 0.75rem;
+    position: relative;
+    top: -4px;
+  }
+
+  /* Hover-stamp effect on list items — outline + offset shadow on hover. */
+  .terminal-item:hover .title-text {
+    outline: 2px solid theme('colors.primary');
+    box-shadow: 4px 4px 0px 0px theme('colors.primary');
+    background: transparent;
+  }
+
+  /* Stacked-column trail highlight — when a list row's target path is open
+     as a deeper column in the stack, mark it with persistent filled bg so
+     the user can see which row led to which column (Miller-column UX). */
+  .terminal-item--active .title-text {
+    @apply bg-primary text-terminal-bg;
+  }
+  .terminal-item--active .dotted-leader {
+    border-bottom-color: theme('colors.primary');
+  }
+  .terminal-item--active:hover .title-text {
+    /* Hover on already-active item: keep filled bg + inverted text, add offset
+       shadow as click-affordance hint. Must re-declare bg/color because the
+       generic `.terminal-item:hover .title-text` rule has equal specificity
+       and resets `background: transparent` — without these, text becomes
+       terminal-bg on transparent (= invisible against the dark page). */
+    @apply bg-primary text-terminal-bg;
+    outline: 2px solid theme('colors.primary');
+    box-shadow: 4px 4px 0px 0px theme('colors.primary');
+  }
+
+  /* List row used in section listings (sections + articles). */
+  .list-row {
+    @apply flex flex-col gap-1 py-3 px-4 border-b border-terminal-border transition-colors;
+  }
+  .list-row:hover {
+    @apply bg-terminal-surface-0;
+  }
+  .list-row__title {
+    @apply text-base font-bold uppercase tracking-tight text-terminal-text transition-colors;
+  }
+  .list-row:hover .list-row__title {
+    @apply text-primary;
+  }
+  .list-row__description {
+    @apply text-sm text-terminal-text-muted normal-case;
+    font-family: 'Literata', Georgia, serif;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  .list-row__meta {
+    @apply text-[10px] text-terminal-text-faint uppercase tracking-widest font-mono mt-1 flex flex-wrap gap-x-3;
+  }
+
+  /* Tag badge — bracketed, mono, hover coral. */
+  .tag-badge {
+    @apply inline-block text-[10px] font-bold font-mono uppercase tracking-widest px-2 py-1 border-2 border-terminal-border text-terminal-text-secondary transition-colors;
+  }
+  .tag-badge::before {
+    content: '#';
+    @apply text-terminal-text-faint mr-0.5;
+  }
+  .tag-badge:hover {
+    @apply border-primary text-primary;
+  }
+  .tag-badge--active {
+    @apply bg-primary text-terminal-bg border-primary;
+  }
+  .tag-badge--active::before {
+    @apply text-terminal-bg;
+  }
+
+  /* Section heading inside list-view (e.g. "Sections" / "Articles"). The
+     leading icon (clock / folder / document) is inlined as SVG in the
+     template so each section gets a semantic glyph instead of a generic
+     coral square. */
+  .section-heading {
+    @apply text-xs font-bold uppercase tracking-widest-lg text-terminal-text-muted mt-8 mb-3 pb-2 border-b border-terminal-border flex items-center gap-2;
+  }
+  .section-heading__icon {
+    @apply text-primary shrink-0;
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  /* Meta row (author · date · tags) — separated by middle dot. */
+  .meta {
+    @apply flex flex-wrap gap-x-4 gap-y-1 text-xs text-terminal-text-muted font-mono uppercase tracking-wider;
+  }
+  .meta > * + *::before {
+    content: '·';
+    @apply text-terminal-text-faint mr-2;
+  }
+  .meta > * + * {
+    margin-inline-start: -1rem;
+    padding-inline-start: 1rem;
+  }
+
+  /* ---------- Long-form prose (.content rendered markdown) ---------- */
+  /* Applied to <ContentRenderer> output — h2/h3/p/ul/ol/code/pre/table generated
+     from markdown. Literata serif body for readability, brutalist treatment for
+     code/tables/lists. */
+  .content {
+    @apply text-terminal-text;
+    font-family: 'Literata', Georgia, serif;
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    letter-spacing: 0.008em;
+  }
+
+  .content > * + * { margin-top: 1.5rem; }
+
+  .content h1 {
+    @apply font-display font-bold uppercase tracking-tight text-2xl md:text-3xl mt-10 mb-4;
+  }
+  .content h2 {
+    @apply font-display font-bold uppercase tracking-tight text-xl md:text-2xl mt-10 mb-4;
+    font-family: 'Space Grotesk', sans-serif;
+  }
+  .content h3 {
+    @apply font-display font-bold uppercase tracking-tight text-base md:text-lg mt-8 mb-3;
+    font-family: 'Space Grotesk', sans-serif;
+  }
+  .content h4, .content h5, .content h6 {
+    @apply font-display font-bold uppercase tracking-widest text-xs text-terminal-text-muted mt-6 mb-2;
+  }
+
+  .content p { @apply my-4; }
+
+  .content a {
+    @apply text-primary transition-colors;
+    text-decoration: none;
+  }
+  .content a:hover {
+    @apply text-terminal-accent-hover;
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+
+  .content strong {
+    @apply text-terminal-text font-semibold;
+    /* Explicit text-decoration to ensure wavy underline inherits correctly
+       when <a> wraps <strong> */
+    text-decoration: inherit;
+    text-decoration-color: inherit;
+    text-decoration-style: inherit;
+    text-underline-offset: inherit;
+  }
+  /* Ensure strong inside links explicitly inherits the underline */
+  .content a strong {
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: currentColor;
+    text-underline-offset: 3px;
+  }
+  .content em { font-style: italic; }
+
+  /* Lists — top level uses heavy brutalist markers (coral square, decimal-leading-zero
+     counter). Nested levels strip the box/shadow/zero-pad chrome and tighten padding,
+     because in stacked columns 540-640px wide, every depth was eating ~2-2.5rem of
+     padding plus a repeating stamp — three levels deep left almost nothing for prose. */
+  .content ul, .content ol {
+    @apply my-4 space-y-2 list-none pl-0;
+  }
+  .content li {
+    @apply pl-7 relative;
+    line-height: 1.6;
+  }
+  .content ul li::before {
+    content: '';
+    @apply absolute left-0 top-2 w-3 h-3 bg-primary border-2 border-terminal-border;
+    box-shadow: 2px 2px 0px theme('colors.terminal.border');
+  }
+  .content ol {
+    counter-reset: terminal-counter;
+  }
+  .content ol li {
+    counter-increment: terminal-counter;
+    @apply pl-10;
+  }
+  .content ol li::before {
+    content: counter(terminal-counter, decimal-leading-zero);
+    @apply absolute left-0 top-1 inline-flex items-center justify-center bg-terminal-surface-0 text-primary border-2 border-terminal-border text-xs font-bold font-display;
+    width: 1.6rem;
+    height: 1.3rem;
+    box-shadow: 2px 2px 0px theme('colors.terminal.border');
+    font-family: 'Space Grotesk', sans-serif;
+  }
+
+  /* Nested lists (depth ≥ 2): drop the box stamp, switch to flat text markers,
+     trim padding and vertical rhythm. Selectors `.content li ul/ol li` only match
+     items inside an outer <li>, so the top-level rules above stay untouched. */
+  .content li ul, .content li ol {
+    @apply my-1 space-y-1 pl-0;
+  }
+  .content li ul li,
+  .content li ol li {
+    padding-left: 1.25rem;
+    line-height: 1.55;
+  }
+  .content li ul li::before {
+    content: '›';
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    width: auto;
+    height: auto;
+    color: theme('colors.terminal.text-muted');
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-weight: 700;
+    font-size: 1em;
+    top: 0;
+    left: 0.25rem;
+    line-height: inherit;
+    display: inline;
+  }
+  .content li ol li {
+    padding-left: 1.6rem;
+  }
+  .content li ol li::before {
+    content: counter(terminal-counter) '.';
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    width: auto;
+    height: auto;
+    padding: 0;
+    color: theme('colors.terminal.text-muted');
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-weight: 700;
+    font-size: 0.85em;
+    top: 0.15rem;
+    left: 0;
+    display: inline;
+    line-height: inherit;
+  }
+
+  /* Blockquote — bg + italic carry the visual cue; no border/shadow chrome. */
+  .content blockquote {
+    @apply bg-terminal-surface-0 p-4 my-6 italic text-terminal-text-secondary;
+  }
+  .content blockquote p { @apply mb-0; }
+  .content blockquote p:first-child { @apply mt-0; }
+
+  /* Code — brutalist terminal aesthetic
+     Inline: "inverted tag" look with stamp shadow, muted text (no coral)
+     Blocks: coral rail accent + muted text for readability */
+  .content code:not(pre code) {
+    @apply bg-terminal-surface-0 text-terminal-text-secondary px-1.5 py-0.5 text-[0.85em] border border-terminal-border-strong;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    border-radius: 0;
+    white-space: nowrap;
+    box-shadow: 2px 2px 0px 0px theme('colors.terminal.border');
+    transition: all 0.08s ease-out;
+  }
+  .content code:not(pre code):hover {
+    @apply border-primary text-terminal-text;
+    box-shadow: 2px 2px 0px 0px theme('colors.primary');
+  }
+  .content pre {
+    @apply bg-terminal-surface-0 overflow-x-auto my-6 text-sm relative border border-terminal-border;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    line-height: 1.6;
+    border-radius: 0;
+    padding: 1rem 1.25rem;
+    box-shadow: 4px 4px 0px 0px theme('colors.terminal.border');
+  }
+  /* Lime accent rail on the left edge — terminal-cursor vibe. */
+  .content pre::before {
+    content: '';
+    @apply absolute left-0 top-0 bottom-0 w-1 bg-primary;
+  }
+  .content pre code {
+    @apply bg-transparent p-0 border-0 text-terminal-text-secondary;
+    font-size: inherit;
+    white-space: pre;
+  }
+
+  /* Tables — internal grid with cell padding. Edge cells flush horizontally
+     (leftmost: no pl, rightmost: no pr) and at the bottom (last tbody row: no
+     pb), but th keeps balanced vertical padding because the bg highlight needs
+     breathing room above the label. Saves horizontal space inside narrow
+     stacked columns while keeping internal cells legible. */
+  .content table {
+    @apply w-full border-collapse my-6 text-sm;
+  }
+  .content thead {
+    @apply border-b border-terminal-border;
+  }
+  .content th {
+    @apply bg-terminal-surface-0 font-bold font-display uppercase tracking-wider text-[11px] text-terminal-text-secondary;
+    @apply text-left align-bottom px-3 py-2 border-r border-terminal-border;
+  }
+  .content th:first-child { padding-left: 0; }
+  .content th:last-child { padding-right: 0; border-right: 0; }
+  .content td {
+    @apply text-left align-top px-3 py-2 border-r border-b border-terminal-border;
+  }
+  .content td:first-child { padding-left: 0; }
+  .content td:last-child { padding-right: 0; border-right: 0; }
+  .content tbody tr:last-child td { padding-bottom: 0; border-bottom: 0; }
+  .content tbody tr:hover td { @apply bg-terminal-surface-0; }
+
+  .content hr {
+    @apply border-0 my-10 h-0.5;
+    background: linear-gradient(
+      to right,
+      transparent,
+      theme('colors.terminal.border'),
+      transparent
+    );
+  }
+
+  .content img {
+    @apply w-full h-auto my-6 border-2 border-terminal-border;
+    box-shadow: 4px 4px 0px 0px theme('colors.terminal.border');
+  }
+
+  .content kbd {
+    @apply bg-terminal-surface-0 border border-terminal-border-strong text-terminal-text px-1.5 py-0.5 text-xs;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    border-bottom-width: 2px;
+  }
+}
+
+@layer utilities {
+  .border-3 { border-width: 3px; }
+}
+
+/* Focus ring — accent outline + offset stamp. */
+:focus-visible {
+  outline: 2px solid theme('colors.primary');
+  outline-offset: 2px;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (max-width: 640px) {
+  .content { font-size: 1rem; line-height: 1.6; }
+  .terminal-item:hover .title-text {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+/* ---------- Brutalist toaster (vue-sonner) ----------
+   vue-sonner ships its own CSS via `vue-sonner/style.css` (loaded by the
+   nuxt module). We override the exposed CSS variables + a few structural
+   props so toasts look like the rest of the surface: sharp corners, stamp
+   offset shadow, monospace, terminal palette. Selectors target the
+   `data-sonner-*` attribute tree so they win over the package defaults
+   without `!important`. */
+[data-sonner-toaster] {
+  --border-radius: 0;
+  --normal-bg: theme('colors.terminal.surface.0');
+  --normal-border: theme('colors.terminal.border');
+  --normal-text: theme('colors.terminal.text');
+  --success-bg: theme('colors.terminal.surface.0');
+  --success-border: theme('colors.primary');
+  --success-text: theme('colors.terminal.text');
+  --error-bg: theme('colors.terminal.surface.0');
+  --error-border: theme('colors.terminal.text-muted');
+  --error-text: theme('colors.terminal.text');
+  font-family: theme('fontFamily.display');
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled='true'] {
+  border-radius: 0;
+  border-width: 2px;
+  box-shadow: 4px 4px 0 0 theme('colors.terminal.border');
+  padding: 14px 16px;
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled='true'][data-type='success'] {
+  box-shadow: 4px 4px 0 0 theme('colors.primary');
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled='true'][data-type='error'] {
+  box-shadow: 4px 4px 0 0 theme('colors.terminal.text-muted');
+}
+[data-sonner-toaster] [data-sonner-toast] [data-title] {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  font-size: 12px;
+}
+[data-sonner-toaster] [data-sonner-toast] [data-description] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: theme('colors.terminal.text-muted') !important;
+  margin-top: 2px;
+  letter-spacing: 0.01em;
+}
+/* Icon column — recolor the built-in success/error SVG so it tracks our palette
+   instead of the package's saturated greens/reds. */
+[data-sonner-toaster] [data-sonner-toast][data-type='success'] [data-icon] {
+  color: theme('colors.primary');
+}
+[data-sonner-toaster] [data-sonner-toast][data-type='error'] [data-icon] {
+  color: theme('colors.terminal.text-muted');
+}