fuzzyworld

nordic-skating / files / src / style.css

style.css

Blame: the commit that last changed each line · file · history

c90277fa 2026-10-09 Pavel Safronov1html,
2body {
3 margin: 0;
4 height: 100%;
5 overflow: hidden;
6 background: #9db4c8;
7 /* A drag steers; it must not scroll, zoom or pull-to-refresh the page. */
8 touch-action: none;
9 overscroll-behavior: none;
10}
11
12#scene {
13 display: block;
14 width: 100vw;
15 height: 100dvh;
16}
8b9467ca 2026-10-09 Pavel Safronov17
18#hint {
19 position: fixed;
20 left: 0;
21 right: 0;
22 bottom: calc(2rem + env(safe-area-inset-bottom));
23 margin: 0;
24 padding: 0 1rem;
25 text-align: center;
26 font: 500 1rem/1.4 system-ui, sans-serif;
27 color: #fff;
28 text-shadow: 0 1px 6px rgb(0 0 0 / 70%);
29 /* The canvas under it takes the drag. */
30 pointer-events: none;
31 transition: opacity 1.5s;
32}
33
34#hint.gone {
35 opacity: 0;
36}
646446cd 2026-10-09 Pavel Safronov37
38/* What the skater sees of the lake from under it. */
39#water {
a8fd3f13 2026-10-10 Pavel Safronov40 /* It is `hidden` in the page until this stylesheet arrives; from here on, this shows it. */
41 display: grid;
646446cd 2026-10-09 Pavel Safronov42 position: fixed;
43 inset: 0;
44 place-items: center;
45 background: #06202c;
46 color: #cfe6f2;
47 font: 500 1.4rem/1.4 system-ui, sans-serif;
48 opacity: 0;
49 pointer-events: none;
50 /* Out of the water slowly; into it, below, at once. */
51 transition: opacity 1s;
52}
53
54#water.under {
55 opacity: 1;
56 transition: opacity 0.25s 0.15s;
57}
95f8bb94 2026-10-09 Pavel Safronov58
aebcad7b 2026-10-10 Pavel Safronov59/* Every button on the lake is the same button: dark, ringed in white so that it shows
60 against a night sky as well as a day one, and white all through when it is on. */
95f8bb94 2026-10-09 Pavel Safronov61#sound {
62 position: fixed;
63 top: calc(0.75rem + env(safe-area-inset-top));
64 right: calc(0.75rem + env(safe-area-inset-right));
aebcad7b 2026-10-10 Pavel Safronov65 width: 2.75rem;
66 height: 2.75rem;
67 padding: 0;
95f8bb94 2026-10-09 Pavel Safronov68 border: 2px solid #fff;
aebcad7b 2026-10-10 Pavel Safronov69 border-radius: 50%;
95f8bb94 2026-10-09 Pavel Safronov70 background: rgb(8 24 34 / 85%);
71 color: #fff;
aebcad7b 2026-10-10 Pavel Safronov72 font: 600 1.2rem/1 system-ui, sans-serif;
95f8bb94 2026-10-09 Pavel Safronov73 /* A tap on it is a tap, not the start of a drag or a double-tap zoom. */
74 touch-action: manipulation;
75 cursor: pointer;
76}
77
78#sound.on {
79 background: #fff;
80 color: #06202c;
81}
82
aebcad7b 2026-10-10 Pavel Safronov83/* About, Settings and Randomize. */
95f8bb94 2026-10-09 Pavel Safronov84#links {
85 position: fixed;
86 top: calc(0.75rem + env(safe-area-inset-top));
87 left: calc(0.75rem + env(safe-area-inset-left));
aebcad7b 2026-10-10 Pavel Safronov88 /* Beside the sound button, and wrapping under themselves, not it, should they not fit. */
89 max-width: calc(100vw - 5rem);
95f8bb94 2026-10-09 Pavel Safronov90 display: flex;
a8fd3f13 2026-10-10 Pavel Safronov91 flex-wrap: wrap;
95f8bb94 2026-10-09 Pavel Safronov92 gap: 0.5rem;
93}
94
a8fd3f13 2026-10-10 Pavel Safronov95/* Between one lake and the next: the haze, closing in at once and clearing slowly. */
96#veil {
97 position: fixed;
98 inset: 0;
99 opacity: 0;
100 pointer-events: none;
101}
102
103#veil.clearing {
104 animation: clearing 0.9s ease-out;
105}
106
107@keyframes clearing {
108 from {
109 opacity: 1;
110 }
111}
112
113#links a,
114#links button {
95f8bb94 2026-10-09 Pavel Safronov115 display: grid;
116 place-items: center;
117 min-height: 2.75rem;
118 padding: 0 0.9rem;
aebcad7b 2026-10-10 Pavel Safronov119 border: 2px solid #fff;
95f8bb94 2026-10-09 Pavel Safronov120 border-radius: 2rem;
aebcad7b 2026-10-10 Pavel Safronov121 background: rgb(8 24 34 / 85%);
95f8bb94 2026-10-09 Pavel Safronov122 color: #fff;
aebcad7b 2026-10-10 Pavel Safronov123 font: 600 0.95rem/1 system-ui, sans-serif;
95f8bb94 2026-10-09 Pavel Safronov124 text-decoration: none;
125 touch-action: manipulation;
a8fd3f13 2026-10-10 Pavel Safronov126 cursor: pointer;
127}
128
129/* The boxes that open over the lake, which waits behind them. */
130dialog {
131 box-sizing: border-box;
132 width: min(34rem, calc(100vw - 2rem));
133 max-height: calc(100dvh - 2rem);
134 padding: 1.5rem;
135 border: 0;
136 border-radius: 1rem;
137 background: #f4f7fa;
138 color: #0b1a24;
139 font: 400 1rem/1.5 system-ui, sans-serif;
140 overflow-y: auto;
141 /* A long read on a small screen scrolls inside the box, which the page forbids itself. */
142 touch-action: pan-y;
143}
144
145dialog::backdrop {
146 background: rgb(6 32 44 / 60%);
147}
148
149/* The settings sit at the foot of the screen under a clear view of the lake and the sky,
150 where what they change can be seen changing. */
151#settings-dialog {
152 margin-bottom: 1rem;
153 max-height: 62dvh;
154}
155
156#settings-dialog::backdrop {
157 background: none;
158}
159
160dialog h1 {
161 margin: 0 0 0.5rem;
162 font-size: 1.5rem;
163 /* It takes the focus when the box opens, so that the box opens at its top. */
164 outline: none;
165}
166
167dialog h2 {
168 margin: 1.25rem 0 0.25rem;
169 font-size: 1.1rem;
170}
171
172dialog p,
173dialog dl {
174 margin: 0 0 0.6rem;
175}
176
177dialog dt {
178 font-weight: 600;
179}
180
181dialog dd {
182 margin: 0 0 0.4rem;
183}
184
185dialog a {
186 color: #0b5a7a;
187}
188
189dialog fieldset {
190 margin: 0 0 0.9rem;
191 padding: 0.4rem 0.9rem 0.6rem;
192 border: 1px solid #c3ced8;
193 border-radius: 0.6rem;
194}
195
196dialog legend {
197 padding: 0 0.3rem;
198 font-weight: 600;
199}
200
201/* A whole line to touch for each choice, not a small circle. */
202dialog label {
203 display: block;
204 padding: 0.45rem 0;
205 cursor: pointer;
206}
207
208dialog label input {
209 width: 1.15rem;
210 height: 1.15rem;
211 margin: 0 0.5rem 0 0;
212 vertical-align: -0.15rem;
213}
214
215dialog small {
216 color: #4d6170;
217}
218
219dialog button {
220 min-height: 3rem;
221 padding: 0 1.2rem;
222 border: 2px solid #0b1a24;
223 border-radius: 2rem;
224 background: none;
225 color: #0b1a24;
226 font: 600 1rem/1 system-ui, sans-serif;
227 cursor: pointer;
228}
229
230dialog button.done {
231 display: block;
232 width: 100%;
233 margin-top: 1rem;
234 background: #0b1a24;
235 color: #fff;
236}
237
238/* On a phone held upright: two of the three links to a row beside the sound button. */
239@media (max-width: 30rem) {
240 #links a,
241 #links button {
242 padding: 0 0.7rem;
243 font-size: 0.9rem;
244 }
95f8bb94 2026-10-09 Pavel Safronov245}
4efa2e9a 2026-10-10 Pavel Safronov246
aebcad7b 2026-10-10 Pavel Safronov247/* Steering by tilt, on or off, at the foot of the screen. */
4efa2e9a 2026-10-10 Pavel Safronov248#tilt-button {
249 position: fixed;
250 left: calc(0.75rem + env(safe-area-inset-left));
251 bottom: calc(0.75rem + env(safe-area-inset-bottom));
252 min-height: 2.75rem;
253 padding: 0 0.9rem;
254 border: 2px solid #fff;
255 border-radius: 2rem;
256 background: rgb(8 24 34 / 85%);
257 color: #fff;
258 font: 600 0.95rem/1 system-ui, sans-serif;
259 touch-action: manipulation;
260 cursor: pointer;
261}
262
263#tilt-button.on {
264 background: #fff;
265 color: #06202c;
266}
267
268/* The hint keeps clear of it. */
269#tilt-button:not([hidden]) ~ #hint {
270 bottom: calc(4.5rem + env(safe-area-inset-bottom));
271}
1ee103b4 2026-10-11 Pavel Safronov272
273/* The pace, and the way to the next one: opposite the tilt button. */
274#pace-button {
275 position: fixed;
276 right: calc(0.75rem + env(safe-area-inset-right));
277 bottom: calc(0.75rem + env(safe-area-inset-bottom));
278 min-height: 2.75rem;
279 padding: 0 0.9rem;
280 border: 2px solid #fff;
281 border-radius: 2rem;
282 background: rgb(8 24 34 / 85%);
283 color: #fff;
284 font: 600 0.95rem/1 system-ui, sans-serif;
285 touch-action: manipulation;
286 cursor: pointer;
287}
288
289/* The hint keeps clear of the buttons at the foot of the screen. */
290#hint {
291 bottom: calc(4.5rem + env(safe-area-inset-bottom));
292}
293
294/* A picture on a button: the shape of a piece of line art, in the colour of the button's words. */
295.icon {
296 display: inline-block;
297 width: 1.4em;
298 height: 1.4em;
299 vertical-align: -0.35em;
300 background: currentColor;
301 -webkit-mask: var(--icon) center / contain no-repeat;
302 mask: var(--icon) center / contain no-repeat;
303}
304
305#pace-button .icon,
306#tilt-button .icon {
307 margin-right: 0.45em;
308}