133728e barerepo 1mo
1
/* barerepo. one stylesheet, no build step, every value lifted from the mockups in plans/. */
133728e barerepo 1mo
3
@font-face {
133728e barerepo 1mo
4
font-family: "Space Mono";
133728e barerepo 1mo
5
src: url("/static/fonts/SpaceMono-Regular.woff2") format("woff2");
133728e barerepo 1mo
6
font-weight: 400;
133728e barerepo 1mo
7
font-style: normal;
133728e barerepo 1mo
8
font-display: swap;
133728e barerepo 1mo
11
@font-face {
133728e barerepo 1mo
12
font-family: "Space Mono";
133728e barerepo 1mo
13
src: url("/static/fonts/SpaceMono-Bold.woff2") format("woff2");
133728e barerepo 1mo
14
font-weight: 700;
133728e barerepo 1mo
15
font-style: normal;
133728e barerepo 1mo
16
font-display: swap;
133728e barerepo 1mo
19
:root {
133728e barerepo 1mo
20
--font-mono: "Space Mono", monospace;
133728e barerepo 1mo
21
--surface-2: #ffffff;
133728e barerepo 1mo
22
--surface-1: #f7f7f7;
133728e barerepo 1mo
23
--text-primary: #000000;
133728e barerepo 1mo
24
--text-secondary: #555555;
133728e barerepo 1mo
25
--text-muted: #888888;
133728e barerepo 1mo
26
--border: #dddddd;
133728e barerepo 1mo
27
--border-strong: #999999;
133728e barerepo 1mo
28
--radius: 0;
133728e barerepo 1mo
29
--text-danger: #a32d2d;
133728e barerepo 1mo
30
--text-success: #2f6b0f;
133728e barerepo 1mo
31
--bg-danger: #fbe3e3;
133728e barerepo 1mo
32
--bg-success: #e6f2d9;
133728e barerepo 1mo
35
html { height: 100%; }
133728e barerepo 1mo
36
body {
133728e barerepo 1mo
37
margin: 0;
133728e barerepo 1mo
38
padding: 12px;
133728e barerepo 1mo
39
box-sizing: border-box;
133728e barerepo 1mo
40
min-height: 100vh;
133728e barerepo 1mo
41
background: var(--surface-2);
133728e barerepo 1mo
42
color: var(--text-primary);
133728e barerepo 1mo
45
.sr-only {
133728e barerepo 1mo
46
position: absolute;
133728e barerepo 1mo
47
width: 1px;
133728e barerepo 1mo
48
height: 1px;
133728e barerepo 1mo
49
overflow: hidden;
133728e barerepo 1mo
50
clip: rect(0 0 0 0);
133728e barerepo 1mo
53
/* the card. every page is one of these, and nothing sits outside it. */
133728e barerepo 1mo
54
.card {
133728e barerepo 1mo
55
font-family: var(--font-mono);
133728e barerepo 1mo
56
font-size: 16px;
133728e barerepo 1mo
57
line-height: 1.6;
133728e barerepo 1mo
58
color: var(--text-primary);
133728e barerepo 1mo
59
background: var(--surface-2);
133728e barerepo 1mo
60
border: 0.5px solid var(--border);
133728e barerepo 1mo
61
border-radius: 12px;
133728e barerepo 1mo
62
min-height: calc(100vh - 26px);
133728e barerepo 1mo
63
display: flex;
133728e barerepo 1mo
64
flex-direction: column;
133728e barerepo 1mo
67
/* links are underlined and keep the colour around them. there is no link blue in this design. */
133728e barerepo 1mo
68
a {
133728e barerepo 1mo
69
color: inherit;
133728e barerepo 1mo
70
text-decoration: underline;
133728e barerepo 1mo
71
/* measured off a Space Mono H: a regular stem is 0.085em, a bold one 0.15em */
133728e barerepo 1mo
72
text-decoration-thickness: 0.085em;
133728e barerepo 1mo
73
text-underline-offset: 3px;
133728e barerepo 1mo
74
text-decoration-skip-ink: auto;
133728e barerepo 1mo
77
/* bold only happens in rendered markdown, and the rule under it follows the stem it belongs to */
133728e barerepo 1mo
78
strong a, a strong, b a, a b,
133728e barerepo 1mo
79
.body h1 a, .body h2 a, .body h3 a, .body h4 a {
133728e barerepo 1mo
80
text-decoration-thickness: 0.15em;
133728e barerepo 1mo
82
a:hover { color: var(--text-primary); }
133728e barerepo 1mo
84
/* bars: the top bar, the breadcrumb, the tab strip. all 9px 18px. */
133728e barerepo 1mo
85
.bar {
133728e barerepo 1mo
86
display: flex;
133728e barerepo 1mo
87
align-items: center;
133728e barerepo 1mo
88
justify-content: space-between;
133728e barerepo 1mo
89
gap: 16px;
133728e barerepo 1mo
90
padding: 9px 18px;
133728e barerepo 1mo
91
border-bottom: 0.5px solid var(--border);
133728e barerepo 1mo
93
.bar .left, .bar .right { display: flex; gap: 20px; align-items: center; }
133728e barerepo 1mo
94
.bar .right { gap: 16px; color: var(--text-secondary); }
133728e barerepo 1mo
95
.brand { letter-spacing: -0.5px; }
133728e barerepo 1mo
96
.searchbox {
133728e barerepo 1mo
97
border: 0.5px solid var(--border);
133728e barerepo 1mo
98
border-radius: 8px;
133728e barerepo 1mo
99
padding: 3px 10px;
133728e barerepo 1mo
100
color: var(--text-muted);
133728e barerepo 1mo
103
.tabs {
133728e barerepo 1mo
104
display: flex;
133728e barerepo 1mo
105
gap: 22px;
133728e barerepo 1mo
106
padding: 8px 18px;
133728e barerepo 1mo
107
border-bottom: 0.5px solid var(--border);
133728e barerepo 1mo
108
color: var(--text-secondary);
133728e barerepo 1mo
109
font-size: 16px;
133728e barerepo 1mo
111
.tabs .on {
133728e barerepo 1mo
112
color: var(--text-primary);
133728e barerepo 1mo
113
border-bottom: 1.5px solid var(--text-primary);
133728e barerepo 1mo
114
padding-bottom: 4px;
133728e barerepo 1mo
115
text-decoration: none;
133728e barerepo 1mo
117
.tabs .end { margin-left: auto; color: var(--text-muted); }
133728e barerepo 1mo
119
/* rows: one record each, separated by a hairline. */
133728e barerepo 1mo
120
.row { padding: 12px 18px; border-bottom: 0.5px solid var(--border); }
133728e barerepo 1mo
121
.row.tall { padding: 13px 18px; }
133728e barerepo 1mo
122
.row.dim { color: var(--text-muted); }
133728e barerepo 1mo
123
.between { display: flex; justify-content: space-between; gap: 16px; }
133728e barerepo 1mo
124
.sub { color: var(--text-muted); font-size: 16px; }
133728e barerepo 1mo
125
.stack { line-height: 1.9; }
133728e barerepo 1mo
127
.muted { color: var(--text-muted); }
133728e barerepo 1mo
128
.secondary { color: var(--text-secondary); }
133728e barerepo 1mo
129
.danger { color: var(--text-danger); }
133728e barerepo 1mo
130
.success { color: var(--text-success); }
133728e barerepo 1mo
131
.small { font-size: 16px; }
133728e barerepo 1mo
132
.strike { text-decoration: line-through; }
133728e barerepo 1mo
134
/* a command. everything the interface can do is shown as one of these. */
133728e barerepo 1mo
135
.box {
133728e barerepo 1mo
136
background: var(--surface-1);
133728e barerepo 1mo
137
border: 0.5px solid var(--border);
133728e barerepo 1mo
138
border-radius: 8px;
133728e barerepo 1mo
139
padding: 9px 12px;
133728e barerepo 1mo
140
color: var(--text-secondary);
133728e barerepo 1mo
141
font-size: 16px;
133728e barerepo 1mo
142
word-break: break-all;
133728e barerepo 1mo
143
white-space: pre-wrap;
133728e barerepo 1mo
144
margin: 0;
133728e barerepo 1mo
145
font-family: inherit;
133728e barerepo 1mo
147
.box.tall { padding: 11px 13px; line-height: 1.9; }
133728e barerepo 1mo
149
/* forms. one border weight up from the page, so a field reads as a field. */
133728e barerepo 1mo
150
.field { margin-bottom: 16px; }
133728e barerepo 1mo
151
.label { color: var(--text-muted); font-size: 16px; margin-bottom: 5px; }
133728e barerepo 1mo
152
.hint { color: var(--text-muted); font-size: 16px; margin-top: 4px; }
133728e barerepo 1mo
153
/* one webhook and what became of it, on the config page. */
133728e barerepo 1mo
154
.hook { margin-top: 9px; line-height: 1.7; }
133728e barerepo 1mo
155
input.text, textarea.text, select.text {
133728e barerepo 1mo
156
display: block;
133728e barerepo 1mo
157
width: 100%;
133728e barerepo 1mo
158
box-sizing: border-box;
133728e barerepo 1mo
159
font: inherit;
133728e barerepo 1mo
160
color: var(--text-primary);
133728e barerepo 1mo
161
background: var(--surface-2);
133728e barerepo 1mo
162
border: 0.5px solid var(--border-strong);
133728e barerepo 1mo
163
border-radius: 8px;
133728e barerepo 1mo
164
padding: 7px 11px;
133728e barerepo 1mo
165
word-break: break-all;
133728e barerepo 1mo
167
textarea.text { min-height: 80px; resize: vertical; word-break: normal; }
133728e barerepo 1mo
168
input.text::placeholder, textarea.text::placeholder { color: var(--text-muted); }
133728e barerepo 1mo
169
input.text:focus, textarea.text:focus, select.text:focus {
133728e barerepo 1mo
170
outline: 1px solid var(--text-primary);
133728e barerepo 1mo
171
outline-offset: -1px;
133728e barerepo 1mo
174
/* The browser draws the arrow, or the control reads as a text box that refuses text. */
133728e barerepo 1mo
175
select.text { appearance: auto; padding: 6px 11px; }
133728e barerepo 1mo
177
button.btn, .btn {
133728e barerepo 1mo
178
font: inherit;
133728e barerepo 1mo
179
color: var(--text-primary);
133728e barerepo 1mo
180
background: var(--surface-2);
133728e barerepo 1mo
181
border: 0.5px solid var(--text-primary);
133728e barerepo 1mo
182
border-radius: 8px;
133728e barerepo 1mo
183
padding: 7px 16px;
133728e barerepo 1mo
184
display: inline-block;
133728e barerepo 1mo
185
text-decoration: none;
133728e barerepo 1mo
186
cursor: pointer;
133728e barerepo 1mo
189
/* diffs. the log page is mostly this. */
133728e barerepo 1mo
190
.diff {
133728e barerepo 1mo
191
border: 0.5px solid var(--border);
133728e barerepo 1mo
192
border-radius: 8px;
133728e barerepo 1mo
193
overflow: hidden;
133728e barerepo 1mo
194
font-size: 16px;
133728e barerepo 1mo
195
margin-top: 8px;
133728e barerepo 1mo
197
.diff div { padding: 2px 11px; white-space: pre-wrap; word-break: break-word; }
133728e barerepo 1mo
198
.diff .hunk {
133728e barerepo 1mo
199
padding: 3px 11px;
133728e barerepo 1mo
200
color: var(--text-muted);
133728e barerepo 1mo
201
background: var(--surface-1);
133728e barerepo 1mo
202
border-bottom: 0.5px solid var(--border);
133728e barerepo 1mo
204
.diff .ctx { color: var(--text-secondary); }
133728e barerepo 1mo
205
.diff .add { background: var(--bg-success); color: var(--text-success); }
133728e barerepo 1mo
206
.diff .del { background: var(--bg-danger); color: var(--text-danger); }
133728e barerepo 1mo
207
.diff .more { color: var(--text-muted); text-align: center; }
133728e barerepo 1mo
209
/* the signature mark sits after the hash, so an unsigned row is not indented to make room. */
133728e barerepo 1mo
210
.sig {
133728e barerepo 1mo
211
display: inline-block;
133728e barerepo 1mo
212
width: 16px;
133728e barerepo 1mo
213
margin-left: 5px;
133728e barerepo 1mo
214
text-align: center;
133728e barerepo 1mo
215
color: var(--text-muted);
133728e barerepo 1mo
220
/* file view. blame in the gutter on every line, always, per chapter 24. */
133728e barerepo 1mo
221
.filelines { padding: 12px 0; font-size: 16px; }