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-reverse 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
}
222
.uptime-bar-ok {
224
background: #00C853;
225
}
226
.uptime-bar-broken {
228
background: #FFD600;
229
}
230
.uptime-bar-down {
232
background: #EF5350;
233
}
234
.subtitle {
236
font-weight: 400;
237
margin-top: 0;
238
}
239
iconify-icon {
241
display: inline-block;
242
width: 0.8lh; /* match parent line-height */
243
height: 0.8lh;
244
font-size: 1.25em;
245
}
246
.quiet-link {
248
color: inherit;
249
text-decoration: none;
250
font-weight: inherit;
251
display: inline-block;
252
}
253
.quiet-link:has(:is(.app-card, .endpoint-card)) {
255
display: block;
256
border-radius: 24px;
257
}
258
.app-card:hover {
260
border-color: #009688;
261
background: #B2DFDB;
262
}
263
textarea {
265
resize: vertical;
266
appearance: none;
267
}
268
#endpoint-editor, #endpoint-list {
270
display: flex;
271
gap: 2rem;
272
width: 100%;
273
align-items: stretch;
274
flex-direction: column;
275
}
276
.side-by-side {
278
display: flex;
279
gap: 1rem;
280
align-items: center;
281
justify-content: space-around;
282
}
283
.extend {
285
flex: 1 1 100%;
286
}
287
.danger-button {
289
background: #F44336;
290
border-color: #F44336;
291
}
292
.danger-button:hover {
294
background: #D32F2F;
295
}
296
nav a:focus {
298
box-shadow: none;
299
text-decoration: underline;
300
}
301
.horizontal-form {
303
display: flex;
304
align-items: center;
305
gap: 1rem;
306
}
307
label {
309
color: #00796B;
310
display: block;
311
}
312
label > input {
314
width: 100%;
315
}
316