blog.hangerthem.com/app/globals.css

@import 'tailwindcss';
@import '../node_modules/highlight.js/styles/monokai.min.css';

@theme {
  --color-bg: #040404;
  --color-fg: #e0e0e0;
  --color-fg-dim: #909090;
  --color-accent: #ef1f1f;
  --color-border: #374151;

  --color-warning: #facc15;
  --color-tip: #22c55e;
  --color-info: #3b82f6;
  --color-note: #8b5cf6;
}

.hljs {
  @apply bg-transparent;
}

pre code.hljs {
  @apply p-0;
}

body {
  @apply bg-bg text-fg;
}

.prose {
  @apply space-y-4;

  ul {
    @apply list-disc list-inside;
  }

  ol {
    @apply list-decimal list-inside;
  }

  li {
    @apply mb-1;
  }
}

.categories::before {
  @apply content-['$'] text-accent;
}

.handle::before {
  @apply content-['@'] text-current;
}

/* ── Mark ────────────────────────────── */

mark {
  @apply bg-accent/20 px-1 py-0.5 rounded text-accent;
}

/* ── Tables ────────────────────────────────────────── */

table {
  @apply border-collapse w-full;
}

th,
td {
  @apply border border-border px-4 py-2;
}

th {
  @apply bg-fg/10;
}

tbody tr:nth-child(even) {
  @apply bg-fg/5;
}

/* ── Definition lists ─────────────────────────────── */

dl {
  @apply my-4;
}

dt {
  @apply font-semibold text-fg mt-3;
}

dt:first-child {
  @apply mt-0;
}

dd {
  @apply ml-6 pl-3 border-l-2 border-fg/20 text-fg-dim;
}

/* ── Prose (markdown) content ─────────────────────── */

.prose h1 {
  @apply text-3xl md:text-4xl;
}

.prose h2 {
  @apply text-2xl md:text-3xl;
}

.prose h3 {
  @apply text-xl md:text-2xl;
}

.prose h4 {
  @apply text-lg md:text-xl;
}

.prose h5 {
  @apply text-base md:text-lg;
}

.prose h6 {
  @apply text-sm md:text-base;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply font-bold mb-2;

  &::before {
    @apply content-['#'] text-accent mr-1;
  }
}

.prose code:not(pre code) {
  @apply text-sm bg-fg/10 px-1 py-0.5 rounded;
}

.prose a {
  @apply text-accent;
}

.prose ul:not(.task-list-container) {
  @apply list-disc pl-6;
}

hr {
  @apply text-border;
}

/* Only ol that do not include checkboxes */
.prose ol {
  @apply list-decimal pl-6;
}

/* ── Task lists ────────────────────────────────────── */

.task-list-item {
  @apply list-none ml-0 pl-0;
}

.task-list-item input[type='checkbox'] {
  @apply mr-2 accent-accent w-4 h-4 align-middle cursor-pointer;
}

.task-list-item input[type='checkbox']:checked + label,
.task-list-item input[type='checkbox'][checked] + label {
  @apply text-fg-dim line-through;
}

/* ── Footnotes ─────────────────────────────────────── */

.footnotes {
  @apply text-sm italic text-fg-dim pt-4 mt-4 border-t border-border;
}

.footnotes ol {
  @apply space-y-2;
}

.sr-only {
  @apply sr-only;
}

.note {
  @apply border-l-4 pl-4 py-1 text-fg-dim bg-accent/20;

  &.warning {
    @apply border-warning bg-warning/20 text-warning;
  }

  &.tip {
    @apply border-tip bg-tip/20 text-tip;
  }

  &.info {
    @apply border-info bg-info/20 text-info;
  }
}

.no-js .js-only {
  @apply hidden;
}

#mermaid-diagram {
  @apply mx-auto;
}