live preview

This commit is contained in:
schmeeve
2026-09-23 16:34:27 -07:00
parent 67769c50d8
commit 5c938042a3
4 changed files with 60 additions and 3 deletions

View File

@@ -326,6 +326,47 @@ body {
.editor blockquote { border-left: 3px solid var(--secondary); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
.editor a { color: var(--secondary); text-decoration: underline; cursor: pointer; }
.editor-split {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
}
.editor-split .editor {
border: none;
border-right: 1px solid var(--border);
border-radius: 0;
}
.editor-split .preview {
background: var(--surface);
padding: 16px 20px;
min-height: 60vh;
overflow-y: auto;
line-height: 1.6;
}
.editor-split.preview-hidden { grid-template-columns: 1fr; }
.editor-split.preview-hidden .preview { display: none; }
.editor-split.preview-hidden .editor { border-right: none; }
.preview-toggle.active { color: var(--primary); }
.preview h1, .preview h2, .preview h3, .preview h4 { margin: 0.5em 0 0.25em; color: var(--secondary); }
.preview h1 { font-size: 1.6em; }
.preview h2 { font-size: 1.35em; }
.preview h3 { font-size: 1.15em; }
.preview p { margin: 0.4em 0; }
.preview ul, .preview ol { padding-left: 1.5em; margin: 0.4em 0; }
.preview pre { background: var(--code-bg); color: var(--code-fg); padding: 12px; border-radius: 8px; overflow-x: auto; }
.preview code { background: color-mix(in srgb, var(--border) 55%, transparent); padding: 1px 4px; border-radius: 4px; font-size: 0.9em; }
.preview pre code { background: none; padding: 0; }
.preview blockquote { border-left: 3px solid var(--secondary); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
.preview a { color: var(--secondary); text-decoration: underline; }
.preview hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.preview img { max-width: 100%; }
.preview table { border-collapse: collapse; }
.preview th, .preview td { border: 1px solid var(--border); padding: 4px 8px; }
.status { margin-top: 10px; color: var(--muted); font-size: 13px; min-height: 20px; }
.editor-hint { margin-top: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--muted); line-height: 1.6; }
.editor-hint p { margin: 0.25em 0; }