Initial Commit

2026-08-20 22:51:22 -03:00
commit 8a597e19a8
13 changed files with 5055 additions and 0 deletions
@@ -0,0 +1,272 @@
+/*
+ * preview.css — styling for the generated page.
+ *
+ * Three themes, resolved entirely in CSS so the page never flashes the wrong
+ * one while the scripts load: "auto" follows the system appearance the way
+ * Nova's own Markdown preview does, "light" and "dark" are fixed.
+ */
+
+:root {
+    --bg: #ffffff;
+    --fg: #1f2328;
+    --fg-muted: #59636e;
+    --border: #d1d9e0;
+    --border-subtle: #e4e8ec;
+    --link: #0969da;
+    --code-bg: #f3f5f7;
+    --code-fg: #1f2328;
+    --quote-border: #d1d9e0;
+    --table-stripe: #f8fafc;
+    --mark: #fff8c5;
+    --diagram-bg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="auto"] {
+        --bg: #1c1c1e;
+        --fg: #e6edf3;
+        --fg-muted: #9198a1;
+        --border: #3d444d;
+        --border-subtle: #2c3138;
+        --link: #67aaff;
+        --code-bg: #26262a;
+        --code-fg: #e6edf3;
+        --quote-border: #3d444d;
+        --table-stripe: #222226;
+        --mark: #4a3d00;
+        --diagram-bg: #1c1c1e;
+    }
+}
+
+:root[data-theme="dark"] {
+    --bg: #1c1c1e;
+    --fg: #e6edf3;
+    --fg-muted: #9198a1;
+    --border: #3d444d;
+    --border-subtle: #2c3138;
+    --link: #67aaff;
+    --code-bg: #26262a;
+    --code-fg: #e6edf3;
+    --quote-border: #3d444d;
+    --table-stripe: #222226;
+    --mark: #4a3d00;
+    --diagram-bg: #1c1c1e;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    padding: 2.5rem 1.75rem 6rem;
+    background: var(--bg);
+    color: var(--fg);
+    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+}
+
+.markdown-body {
+    max-width: var(--content-width, 860px);
+    margin: 0 auto;
+}
+
+.markdown-body[aria-busy="true"] {
+    opacity: 0;
+}
+
+.markdown-body > *:first-child {
+    margin-top: 0;
+}
+
+/* -- text ---------------------------------------------------------------- */
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 2rem 0 1rem;
+    line-height: 1.25;
+    font-weight: 600;
+}
+
+h1 { font-size: 2rem; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
+h2 { font-size: 1.5rem; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 1rem; }
+h5 { font-size: .9rem; }
+h6 { font-size: .9rem; color: var(--fg-muted); }
+
+p, ul, ol, blockquote, table, pre, figure {
+    margin: 0 0 1rem;
+}
+
+a {
+    color: var(--link);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* The anchor link that appears beside a heading on hover. */
+.heading-anchor {
+    margin-left: .4rem;
+    color: var(--fg-muted);
+    opacity: 0;
+    font-weight: 400;
+    text-decoration: none;
+}
+
+h1:hover .heading-anchor,
+h2:hover .heading-anchor,
+h3:hover .heading-anchor,
+h4:hover .heading-anchor,
+h5:hover .heading-anchor,
+h6:hover .heading-anchor {
+    opacity: 1;
+}
+
+strong { font-weight: 600; }
+mark { background: var(--mark); color: inherit; }
+
+hr {
+    height: 1px;
+    margin: 2rem 0;
+    border: 0;
+    background: var(--border);
+}
+
+blockquote {
+    padding: 0 1rem;
+    border-left: .25rem solid var(--quote-border);
+    color: var(--fg-muted);
+}
+
+blockquote > :last-child { margin-bottom: 0; }
+
+ul, ol { padding-left: 1.75rem; }
+li + li { margin-top: .25rem; }
+li > ul, li > ol { margin: .25rem 0; }
+
+li.task-item {
+    list-style: none;
+    margin-left: -1.35rem;
+}
+
+li.task-item input {
+    margin-right: .45rem;
+    vertical-align: middle;
+}
+
+/* -- code ---------------------------------------------------------------- */
+
+code, kbd, pre, samp {
+    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
+    font-size: .875em;
+}
+
+code {
+    padding: .2em .4em;
+    border-radius: 6px;
+    background: var(--code-bg);
+    color: var(--code-fg);
+}
+
+pre {
+    padding: 1rem;
+    overflow-x: auto;
+    border-radius: 8px;
+    background: var(--code-bg);
+    color: var(--code-fg);
+    line-height: 1.5;
+}
+
+pre code {
+    padding: 0;
+    background: none;
+    border-radius: 0;
+}
+
+/* -- tables and media ---------------------------------------------------- */
+
+.table-scroll {
+    margin: 0 0 1rem;
+    overflow-x: auto;
+}
+
+table {
+    margin: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+th, td {
+    padding: .5rem .85rem;
+    border: 1px solid var(--border);
+    text-align: left;
+}
+
+th { font-weight: 600; }
+tbody tr:nth-child(2n) { background: var(--table-stripe); }
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* -- diagrams ------------------------------------------------------------ */
+
+.mermaid-block {
+    margin: 0 0 1.25rem;
+    padding: 1rem;
+    overflow-x: auto;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--diagram-bg);
+    text-align: center;
+}
+
+.mermaid-block svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.mermaid-block.is-pending {
+    min-height: 4rem;
+    color: var(--fg-muted);
+    text-align: left;
+}
+
+.mermaid-block.is-error {
+    border-color: #cf222e;
+    text-align: left;
+}
+
+.mermaid-block.is-error .mermaid-error-message {
+    margin: 0 0 .75rem;
+    color: #cf222e;
+    font-weight: 600;
+}
+
+.mermaid-block.is-error pre {
+    margin: 0;
+}
+
+/* -- failure ------------------------------------------------------------- */
+
+#error {
+    max-width: var(--content-width, 860px);
+    margin: 0 auto;
+    padding: 1rem 1.25rem;
+    border: 1px solid #cf222e;
+    border-radius: 8px;
+    color: #cf222e;
+}
+
+#error pre {
+    color: var(--fg);
+}