nuartz 0.1.5 → 0.1.7

package/styles/prose.css

@@ -0,0 +1,254 @@
+/*
+ * nuartz prose styles
+ * Requires shadcn CSS variables (--border, --foreground, --muted, --muted-foreground, etc.)
+ *
+ * Usage:
+ *   import "nuartz/styles.css"
+ *   <article class="prose" dangerouslySetInnerHTML={{ __html }} />
+ *
+ * IMPORTANT: Uses var(--xxx) directly, NOT hsl(var(--xxx)).
+ * Modern shadcn (Tailwind v4) defines variables as oklch/lab values,
+ * so hsl() wrapping would produce invalid CSS like hsl(lab(...)).
+ */
+
+/* ── Prose base ──────────────────────────────────── */
+.prose {
+  color: var(--foreground);
+  line-height: 1.7;
+}
+
+/* ── Headings ────────────────────────────────────── */
+.prose h1, .prose h2, .prose h3,
+.prose h4, .prose h5, .prose h6 {
+  color: var(--foreground);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  scroll-margin-top: 5rem;
+}
+.prose h1 { font-size: 1.75rem; margin: 2.25rem 0 1rem; font-weight: 700; }
+.prose h2 { font-size: 1.4rem;  margin: 1.9rem 0 1rem; }
+.prose h3 { font-size: 1.12rem; margin: 1.62rem 0 1rem; }
+.prose h4, .prose h5, .prose h6 { font-size: 1rem; margin: 1.5rem 0 1rem; }
+
+/* Heading anchors */
+.prose :is(h1, h2, h3, h4, h5, h6) a.heading-anchor {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.4em;
+  color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
+  text-decoration: none !important;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+  cursor: pointer;
+}
+.prose :is(h1, h2, h3, h4, h5, h6) a.heading-anchor svg {
+  width: 0.8em;
+  height: 0.8em;
+}
+.prose :is(h1, h2, h3, h4, h5, h6):hover a.heading-anchor { opacity: 1; }
+.prose :is(h1, h2, h3, h4, h5, h6) a.heading-anchor:hover { color: var(--foreground); }
+
+/* ── Block elements ──────────────────────────────── */
+.prose p  { margin: 1rem 0; }
+.prose ul { margin: 1rem 0; padding-left: 1.5rem; list-style-type: disc; }
+.prose ol { margin: 1rem 0; padding-left: 1.5rem; list-style-type: decimal; }
+.prose li { line-height: 1.7; }
+.prose li + li { margin-top: 0.25rem; }
+
+/* ── Links ───────────────────────────────────────── */
+.prose a {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent);
+  transition: text-decoration-color 0.15s;
+}
+.prose a:hover {
+  text-decoration-color: color-mix(in srgb, var(--foreground) 70%, transparent);
+}
+
+/* ── Blockquote ──────────────────────────────────── */
+.prose blockquote {
+  margin: 1rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid color-mix(in srgb, var(--muted-foreground) 40%, transparent);
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+/* ── Inline code ─────────────────────────────────── */
+.prose code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9em;
+  background: var(--muted);
+  color: var(--foreground);
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.375rem;
+}
+.prose code::before,
+.prose code::after { content: none; }
+
+/* ── Code blocks (pre) ───────────────────────────── */
+.prose pre {
+  margin: 1rem 0;
+  overflow-x: auto;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  border-width: 1px;
+  background: var(--muted);
+}
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+/* ── Table (shadcn style) ────────────────────────── */
+.prose table {
+  margin: 1rem 0;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.prose table th {
+  height: 2.5rem;
+  padding: 0.5rem;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 600;
+  color: var(--foreground);
+  border-bottom-width: 2px;
+}
+.prose table td {
+  padding: 0.5rem;
+  vertical-align: middle;
+}
+.prose table tr {
+  border-bottom-width: 1px;
+  transition: background-color 0.15s;
+}
+.prose table tr:last-child {
+  border-bottom-width: 0;
+}
+.prose table tr:hover {
+  background-color: var(--muted);
+}
+
+/* ── Horizontal rule ─────────────────────────────── */
+.prose hr {
+  margin: 2rem 0;
+  height: 1px;
+  border: none;
+  background-color: var(--border);
+}
+
+/* ── Images ──────────────────────────────────────── */
+.prose img {
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  max-width: 100%;
+}
+.prose p > img + em {
+  display: block;
+  transform: translateY(-0.75rem);
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+/* ── Checkbox ────────────────────────────────────── */
+.prose input[type="checkbox"] {
+  margin-right: 0.5rem;
+  accent-color: var(--foreground);
+}
+
+/* ── Footnotes ───────────────────────────────────── */
+.prose .footnotes {
+  margin-top: 2rem;
+  border-top-width: 1px;
+  padding-top: 1rem;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+/* ── Shiki dual-theme ────────────────────────────── */
+[data-rehype-pretty-code-figure] span[style] {
+  color: var(--shiki-light) !important;
+}
+.dark [data-rehype-pretty-code-figure] span[style] {
+  color: var(--shiki-dark) !important;
+}
+
+/* ── Code blocks (rehype-pretty-code) ────────────── */
+[data-rehype-pretty-code-figure] {
+  position: relative;
+  margin: 1rem 0;
+}
+[data-rehype-pretty-code-figure] pre {
+  overflow-x: auto;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  background: var(--muted);
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+/* Language label */
+.code-lang-label {
+  position: absolute;
+  top: 0.375rem;
+  right: 2.25rem;
+  font-size: 0.65rem;
+  font-family: ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Copy button — visible on hover */
+[data-rehype-pretty-code-figure] .copy-code-btn {
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
+}
+[data-rehype-pretty-code-figure]:hover .copy-code-btn {
+  opacity: 1;
+}
+
+/* Line styles */
+[data-line] { padding: 0 0.5rem; }
+[data-highlighted-line] { background-color: oklch(0.97 0.01 250 / 0.4); }
+.dark [data-highlighted-line] { background-color: oklch(0.3 0.01 250 / 0.3); }
+
+/* ── Wikilinks ───────────────────────────────────── */
+.wikilink {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent);
+  transition: text-decoration-color 0.15s;
+}
+.wikilink:hover {
+  text-decoration-color: color-mix(in srgb, var(--foreground) 70%, transparent);
+}
+.wikilink.broken {
+  opacity: 0.5;
+  text-decoration-style: dashed;
+}
+
+/* ── Inline tags ─────────────────────────────────── */
+a.tag {
+  display: inline-block;
+  border-radius: 9999px;
+  background: var(--muted);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  text-decoration: none;
+}
+a.tag:hover {
+  opacity: 0.8;
+}