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
overflow: hidden;
195
border-radius: calc(24px - 0.75rem);
196
}
197
.app-info {
199
font-family: "Lexend Exa", "Lexend", sans-serif;
200
font-style: italic;
201
}
202
.app-info-ok {
204
color: #00C853;
205
}
206
.app-info-broken {
208
color: #FFD600;
209
}
210
.app-info-down {
212
color: #D50000;
213
}
214
.uptime-bar {
216
background: #546E7A;
217
height: 2rem;
218
flex: 1 0 auto;
219
}
220
.uptime-bar-ok {
222
background: #00C853;
223
}
224
.uptime-bar-broken {
226
background: #FFD600;
227
}
228
.uptime-bar-down {
230
background: #EF5350;
231
}
232
.subtitle {
234
font-weight: 400;
235
margin-top: 0;
236
}
237
iconify-icon {
239
display: inline-block;
240
width: 0.8lh; /* match parent line-height */
241
height: 0.8lh;
242
font-size: 1.25em;
243
}
244
.quiet-link {
246
color: inherit;
247
text-decoration: none;
248
font-weight: inherit;
249
display: inline-block;
250
}
251
.quiet-link:has(:is(.app-card, .endpoint-card)) {
253
display: block;
254
border-radius: 24px;
255
}
256
.app-card:hover {
258
border-color: #009688;
259
background: #B2DFDB;
260
}
261
textarea {
263
resize: vertical;
264
appearance: none;
265
}
266
#endpoint-editor, #endpoint-list {
268
display: flex;
269
gap: 2rem;
270
width: 100%;
271
align-items: stretch;
272
flex-direction: column;
273
}
274
.side-by-side {
276
display: flex;
277
gap: 1rem;
278
align-items: stretch;
279
justify-content: space-around;
280
}
281
.side-by-side > button.extend {
283
flex: 1 1 100%;
284
}
285
.danger-button {
287
background: #F44336;
288
border-color: #F44336;
289
}
290
.danger-button:hover {
292
background: #D32F2F;
293
}
294
nav a:focus {
296
box-shadow: none;
297
text-decoration: underline;
298
}
299