webgit/markdown.css at main · legoktm/webgit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* Styles for a rendered README.md, loaded *only* inside the sandboxed frame in
   `render::readme` — never by the app page itself.
 *
 * The frame's document inherits the page's CSP, so it can't carry an inline
 * <style> and the README's own styling is blocked; linking this file is the
 * only way the content gets styled.
 *
 * It deliberately does not load `styles.css`: the page's `html, body` rules
 * (a 100vh min-height, the page background) would fight the frame's
 * content-height sizing. That means this file stands alone, so the handful of
 * variables it needs are repeated here — keep them in step with the `:root`
 * block in styles.css.
 */

/* All colors should be defined here as variables */
:root {
    --bg-header: #dce6f8;
    --border: #b0c4e8;
    --text: #111827;
    --text-dim: #4a5a7a;
    --link: #1a56c4;
    --mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    --prose-width: 45rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The frame is sized to this element's scroll height, so it must not carry a
   min-height or a background of its own. */
.markdown-body {
    margin: 0;
    max-width: var(--prose-width);
    /* A little bottom padding so the measured height isn't flush to the text. */
    padding: 0 0 0.5rem;
    background: transparent;
    color: var(--text);
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.markdown-body a {
    color: var(--link);
    text-decoration: none;
}
.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 1.2em 0 0.5em;
    line-height: 1.25;
}
.markdown-body > :first-child {
    margin-top: 0;
}
.markdown-body h1 {
    font-size: 1.5rem;
}
.markdown-body h2 {
    font-size: 1.25rem;
}
.markdown-body h3 {
    font-size: 1.1rem;
}
.markdown-body h1,
.markdown-body h2 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.2em;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre {
    margin: 0 0 1em;
}

.markdown-body blockquote {
    border-left: 3px solid var(--border);
    padding-left: 1em;
    margin-left: 0;
    color: var(--text-dim);
}

.markdown-body code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--bg-header);
    border-radius: 3px;
    padding: 0.1em 0.3em;
}

.markdown-body pre {
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}
/* Inside a block, the <code> is the whole box already. */
.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 0.85rem;
}

.markdown-body table {
    border-collapse: collapse;
}
.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    text-align: left;
}
.markdown-body th {
    background: var(--bg-header);
}

.markdown-body img {
    max-width: 100%;
}

.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--border);
}