Algol 68 source, ASCII text
1
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
2
@import url("https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&family=Lexend:wght@100..900&display=swap");
3
html {
5
font-size: 1.125rem;
6
color: #000000eb;
7
}
8
* {
10
box-sizing: border-box;
11
}
12
html, input, textarea, button, select {
14
font-family: "Lexend", sans-serif;
15
}
16
body {
18
display: flex;
19
flex-flow: column nowrap;
20
background-color: #f5f5f5;
21
padding: 0;
22
margin: 0;
23
align-items: center;
24
}
25
nav {
27
display: flex;
28
flex-flow: row nowrap;
29
justify-content: flex-start;
30
align-items: center;
31
padding: 0 16px;
32
height: 64px;
33
background-color: #000000;
34
gap: 2ch;
35
width: 100%;
36
position: sticky;
37
top: 0;
38
}
39
nav a {
41
color: #ffffff;
42
text-decoration: none;
43
transition: color 0.25s cubic-bezier(0.33, 1, 0.68, 1);
44
font-family: "Lexend Exa", "Lexend", sans-serif;
45
font-size: 0.875rem;
46
height: 100%;
47
display: flex;
48
align-items: center;
49
border-top: 4px solid transparent;
50
border-bottom: 4px solid transparent;
51
}
52
nav a.active {
54
border-top: 4px solid #4DB6AC;
55
color: #80CBC4;
56
}
57
nav a:hover {
59
color: #80CBC4;
60
text-decoration: underline;
61
}
62
#navi-logo {
64
display: flex;
65
align-items: center;
66
gap: 1ch;
67
font-weight: bold;
68
}
69
#navi-logo > img {
71
width: 32px;
72
height: 32px;
73
}
74
main {
76
padding: 16px;
77
width: min(800px, 100%);
78
}
79
#navi-spacer {
81
flex: 1 0 auto;
82
}
83
input, textarea {
85
padding: 0.5rem;
86
border: 2px solid #009688;
87
border-radius: 6px;
88
background: #ffffff;
89
color: #000000;
90
transition: box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1),
91
background 0.25s cubic-bezier(0.33, 1, 0.68, 1);
92
}
93
button, .button {
95
padding: 0.5rem;
96
border: 2px solid #009688;
97
border-radius: 6px;
98
background: #009688;
99
color: #ffffff;
100
transition: box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1),
101
background 0.25s cubic-bezier(0.33, 1, 0.68, 1);
102
font-weight: 575;
103
font-family: "Lexend Exa", "Lexend", sans-serif;
104
cursor: pointer;
105
display: flex;
106
gap: 0.25rem;
107
align-items: center;
108
text-decoration: none;
109
justify-content: center;
110
}
111
h1 {
113
font-weight: 900;
114
font-size: 3rem;
115
margin: 0.25em 0;
116
color: #000000df;
117
}
118
h2 {
120
font-weight: 767.5;
121
font-size: 2rem;
122
margin: 0.25em 0;
123
color: #000000df;
124
}
125
h3 {
127
font-weight: 767.5;
128
font-size: 1.6rem;
129
margin: 0.25em 0;
130
color: #000000df;
131
}
132
* {
134
transition: box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1);
135
}
136
:focus {
138
box-shadow: 0 0 0 4px #009688cc;
139
outline: none;
140
}
141
button, .button, input, select, textarea {
143
font-size: 1rem;
144
}
145
:is(input, textarea):hover {
147
background: #B2DFDB;
148
}
149
:is(button, .button):hover {
151
background: #00695C;
152
}
153
::placeholder {
155
color: #009688cc;
156
}
157
.stacked-form {
159
display: flex;
160
flex-direction: column;
161
gap: 1rem;
162
}
163
input[type="password"]:not(:placeholder-shown) {
165
letter-spacing: 0.25rem;
166
}
167
.alert {
169
padding: 1rem;
170
border-radius: 6px;
171
background: #FFC107;
172
color: #000000;
173
font-weight: bold;
174
text-align: center;
175
margin: 1rem 0;
176
font-family: "Lexend Exa", "Lexend", sans-serif;
177
}
178
.app-card, .endpoint-card {
180
width: 100%;
181
border: 2px solid #000000aa;
182
padding: 0.75rem;
183
border-radius: 24px;
184
}
185
:is(.app-card, .endpoint-card) h2 {
187
margin-top: 0;
188
font-size: 1.45rem;
189
font-weight: 750;
190
}
191
.app-uptime {
193
display: flex;
194
flex-flow: row nowrap;
195
overflow: hidden;
196
border-radius: calc(24px - 0.75rem);
197
}
198
.app-info {
200
font-family: "Lexend Exa", "Lexend", sans-serif;
201
font-style: italic;
202
}
203
.app-info-ok {
205
color: #00C853;
206
}
207
.app-info-broken {
209
color: #FFD600;
210
}
211
.app-info-down {
213
color: #D50000;
214
}
215
.uptime-bar {
217
background: #546E7A;
218
height: 2rem;
219
flex: 1 0 auto;
220
outline: 1px solid #ffffff;
221
color: #ffffff;
222
font-weight: 900;
223
display: flex;
224
align-items: center;
225
justify-content: center;
226
}
227
.uptime-bar-ok {
229
background: #00C853;
230
}
231
.uptime-bar-broken {
233
background: #FFD600;
234
}
235
.uptime-bar-down {
237
background: #EF5350;
238
}
239
.subtitle {
241
font-weight: 400;
242
margin-top: 0;
243
}
244
iconify-icon {
246
display: inline-block;
247
width: 0.8lh; /* match parent line-height */
248
height: 0.8lh;
249
font-size: 1.25em;
250
}
251
.quiet-link {
253
color: inherit;
254
text-decoration: none;
255
font-weight: inherit;
256
display: inline-block;
257
}
258
.quiet-link:has(:is(.app-card, .endpoint-card)) {
260
display: block;
261
border-radius: 24px;
262
}
263
.app-card:hover {
265
border-color: #009688;
266
background: #B2DFDB;
267
}
268
textarea {
270
resize: vertical;
271
appearance: none;
272
}
273
#endpoint-editor, #endpoint-list {
275
display: flex;
276
gap: 2rem;
277
width: 100%;
278
align-items: stretch;
279
flex-direction: column;
280
}
281
.side-by-side {
283
display: flex;
284
gap: 1rem;
285
align-items: center;
286
justify-content: space-around;
287
}
288
.extend {
290
flex: 1 1 100%;
291
}
292
.danger-button {
294
background: #F44336;
295
border-color: #F44336;
296
}
297
.danger-button:hover {
299
background: #D32F2F;
300
}
301
nav a:focus {
303
box-shadow: none;
304
text-decoration: underline;
305
}
306
.horizontal-form {
308
display: flex;
309
align-items: center;
310
gap: 1rem;
311
}
312
label {
314
color: #00796B;
315
display: block;
316
}
317
label > input {
319
width: 100%;
320
}
321
.endpoint-header {
323
display: flex;
324
gap: 1rem;
325
justify-content: space-between;
326
align-items: center;
327
}
328
.endpoint-header > h2 {
330
margin: 0;
331
}
332
.action-buttons {
334
display: flex;
335
gap: 1rem;
336
align-items: center;
337
}
338
.uptime-bar-buggy {
340
background-image: url("/static/bugs.svg");
341
background-size: 100%;
342
background-repeat: no-repeat;
343
background-position: center;
344
}
345
a {
347
color: #00695C;
348
text-decoration: none;
349
}
350
a:not(.quiet-link):hover {
352
text-decoration: underline;
353
}
354