Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1.editor-page {
2 position: fixed;
3 top: 49px; /* navbar height */
4 left: 0;
5 right: 0;
6 bottom: 0;
7 display: flex;
8 flex-direction: column;
9}
10
11.editor-toolbar {
12 display: flex;
13 justify-content: space-between;
14 align-items: center;
15 padding: 0.5rem 1rem;
16 border-bottom: 1px solid var(--border);
17 background: var(--bg-card);
18 flex-shrink: 0;
19}
20
21.toolbar-actions {
22 display: flex;
23 align-items: center;
24 gap: 0.75rem;
25}
26
27.editor-split {
28 display: flex;
29 flex: 1;
30 overflow: hidden;
31}
32
33.editor-pane {
34 flex: 1;
35 overflow: hidden;
36 border-right: 1px solid var(--border);
37}
38
39.editor-pane .cm-editor {
40 height: 100%;
41}
42
43.preview-pane {
44 flex: 1;
45 overflow: auto;
46 padding: 1.5rem;
47 background: var(--bg-card);
48}