Algol 68 source, ASCII text
1
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
2
html {
4
font-size: 1.25rem;
5
}
6
* {
8
box-sizing: border-box;
9
}
10
html, input, textarea, button, select {
12
font-family: "Lexend", sans-serif;
13
}
14
body {
16
display: flex;
17
flex-flow: column nowrap;
18
background-color: #f5f5f5;
19
padding: 0;
20
margin: 0;
21
align-items: center;
22
}
23
nav {
25
display: flex;
26
flex-flow: row nowrap;
27
justify-content: flex-start;
28
align-items: center;
29
padding: 8px 16px;
30
height: 64px;
31
background-color: #000000;
32
gap: 2ch;
33
width: 100%;
34
display: sticky;
35
}
36
nav a {
38
color: #ffffff;
39
text-decoration: none;
40
transition: color 0.25s cubic-bezier(0.33, 1, 0.68, 1);
41
}
42
nav a:hover {
44
color: #80CBC4;
45
text-decoration: underline;
46
}
47
#navi-logo {
49
display: flex;
50
align-items: center;
51
gap: 1ch;
52
font-weight: bold;
53
}
54
#navi-logo > img {
56
width: 32px;
57
height: 32px;
58
}
59
main {
61
padding: 16px;
62
width: max(800px, 1vw);
63
}
64
#navi-spacer {
66
flex: 1 0 auto;
67
}
68
input {
70
padding: 0.5rem;
71
border: 2px solid #009688;
72
border-radius: 6px;
73
background: #ffffff;
74
color: #000000;
75
transition: box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1),
76
background 0.25s cubic-bezier(0.33, 1, 0.68, 1);
77
}
78
button {
80
padding: 0.5rem;
81
border: 2px solid #009688;
82
border-radius: 6px;
83
background: #009688;
84
color: #ffffff;
85
transition: box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1),
86
background 0.25s cubic-bezier(0.33, 1, 0.68, 1);
87
font-weight: 575;
88
}
89
h1 {
91
font-weight: 850;
92
}
93
:is(input, button):focus {
95
box-shadow: 0 0 0 4px #009688cc;
96
outline: none;
97
}
98
button, input, select, textarea {
100
font-size: 1rem;
101
}
102
input:hover {
104
background: #B2DFDB;
105
}
106
button:hover {
108
background: #00695C;
109
}
110
::placeholder {
112
color: #009688cc;
113
}
114
.stacked-form {
116
display: flex;
117
flex-direction: column;
118
gap: 1rem;
119
}
120
input[type="password"]:not(:placeholder-shown) {
122
letter-spacing: 0.25rem;
123
}
124
.alert {
126
padding: 1rem;
127
border-radius: 6px;
128
background: #FFC107;
129
color: #000000;
130
font-weight: bold;
131
text-align: center;
132
margin: 1rem 0;
133
}