A fast, local-first "redirection engine" for !bang users with a few extra features ^-^
dunkirk.sh
1/* Font fallback that closely matches Inter metrics */
2@font-face {
3 font-family: "Inter Fallback";
4 size-adjust: 107%;
5 ascent-override: 90%;
6 src: local("Arial");
7}
8
9:root {
10 font-family:
11 Inter,
12 "Inter Fallback",
13 system-ui,
14 -apple-system,
15 BlinkMacSystemFont,
16 "Segoe UI",
17 Roboto,
18 Oxygen,
19 Ubuntu,
20 Cantarell,
21 "Open Sans",
22 "Helvetica Neue",
23 sans-serif;
24 font-synthesis: none;
25 text-rendering: optimizeLegibility;
26 -webkit-font-smoothing: antialiased;
27 -moz-osx-font-smoothing: grayscale;
28
29 /* Light mode colors */
30 --text-color: #1a1a1a;
31 --text-color-secondary: #666;
32 --text-color-hover: #333;
33 --bg-color: #fff;
34 --bg-color-secondary: #f5f5f5;
35 --bg-color-hover: #f0f0f0;
36 --bg-color-active: #e5e5e5;
37 --bg-color-danger: #e9808a;
38 --border-color: #ddd;
39}
40
41@media (prefers-color-scheme: dark) {
42 :root {
43 --text-color: #e0e0e0;
44 --text-color-secondary: #999;
45 --text-color-hover: #fff;
46 --bg-color: #121212;
47 --bg-color-secondary: #1e1e1e;
48 --bg-color-hover: #2a2a2a;
49 --bg-color-active: #333;
50 --bg-color-danger: #f15f6d;
51 --border-color: #444;
52 }
53}
54
55* {
56 margin: 0;
57 padding: 0;
58 box-sizing: border-box;
59 outline: none;
60}
61*:focus {
62 outline: 2px solid var(--text-color-secondary);
63}
64
65html,
66body {
67 height: 100%;
68 width: 100%;
69}
70
71body {
72 line-height: 1.5;
73 font-weight: 400;
74 font-size: 16px;
75 color: var(--text-color);
76 background-color: var(--bg-color);
77}
78
79h1,
80h2,
81h3,
82h4,
83h5,
84h6 {
85 font-weight: 600;
86 line-height: 1.2;
87 padding-bottom: 0.75rem;
88}
89
90a {
91 color: var(--text-color-secondary);
92}
93a:hover {
94 color: var(--text-color-hover);
95}
96footer a {
97 color: var(--text-color) !important;
98}
99footer a:hover {
100 color: var(--text-color-hover) !important;
101}
102
103button {
104 font: inherit;
105 border: none;
106 background: none;
107 cursor: pointer;
108}
109
110input,
111textarea {
112 font: inherit;
113}
114
115/* Add these new styles */
116.url-container {
117 display: flex;
118 align-items: center;
119 gap: 8px;
120 margin-top: 16px;
121}
122
123.content-container {
124 max-width: 37rem;
125 text-align: center;
126 padding: 0 8px;
127 text-wrap: pretty;
128}
129
130input {
131 margin: 2px 0px !important;
132 padding: 8px 12px;
133 border: 1px solid var(--border-color);
134 border-radius: 4px;
135 width: 100%;
136 background: var(--bg-color-secondary);
137 color: var(--text-color);
138}
139
140.flash-white {
141 outline: 2px solid var(--text-color-secondary);
142 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
143 opacity: 0.2;
144 animation: flash 0.275s forwards;
145}
146
147@keyframes flash {
148 0% {
149 opacity: 0.2;
150 outline: 2px solid var(--text-color-secondary);
151 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
152 }
153 50% {
154 opacity: 1;
155 outline: 2px solid var(--text-color-hover);
156 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
157 }
158 100% {
159 opacity: 0.2;
160 outline: 2px solid var(--text-color-secondary);
161 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
162 }
163}
164
165.copy-button {
166 padding: 8px;
167 color: var(--text-color-secondary);
168 border-radius: 4px;
169 transition: all 0.2s;
170 display: flex;
171 align-items: center;
172 justify-content: center;
173}
174
175.copy-button:hover {
176 background: var(--bg-color-hover);
177}
178
179.copy-button:active {
180 background: var(--bg-color-active);
181}
182
183.copy-button img {
184 width: 20px;
185 height: 20px;
186}
187
188.copy-button.copied {
189 background: #28a745;
190}
191
192/* Add footer styles */
193.footer {
194 position: fixed;
195 bottom: 16px;
196 left: 0;
197 right: 0;
198 text-align: center;
199 font-size: 14px;
200 color: var(--text-color-secondary);
201}
202
203.footer a {
204 color: var(--text-color-secondary);
205 text-decoration: none;
206 font-weight: 500;
207}
208
209.footer a:hover {
210 color: var(--text-color-hover);
211}
212
213.settings-button {
214 padding: 8px;
215 color: var(--text-color-secondary);
216 border-radius: 4px;
217 transition: all 0.2s;
218 display: flex;
219 align-items: center;
220 justify-content: center;
221}
222
223.settings-button:hover {
224 background: var(--bg-color-hover);
225}
226
227.settings-button:hover {
228 background: var(--bg-color-active);
229}
230
231.settings-button:hover img,
232.settings-button.rotate img {
233 transform: rotate(180deg);
234 transition: transform 0.6s ease;
235}
236
237.settings-button:active {
238 transform: scale(0.95);
239}
240
241.settings {
242 transition: transform 0.6s ease;
243}
244
245.settings-button:not(:hover):not(.rotate) .settings {
246 transform: rotate(0deg);
247}
248
249.modal {
250 display: none;
251 position: fixed;
252 top: 0;
253 left: 0;
254 width: 100%;
255 height: 100%;
256 background-color: rgba(0, 0, 0, 0.5);
257 z-index: 1000;
258}
259
260.modal-content {
261 position: relative;
262 background-color: var(--bg-color);
263 border: 1px solid var(--border-color);
264 margin: 5% auto; /* Reduced from 15% to 5% to give more space */
265 padding: 20px;
266 border-radius: 8px;
267 width: 80%;
268 max-width: 500px;
269 max-height: 80vh; /* 80% of viewport height */
270 overflow-y: auto; /* Makes content scrollable */
271}
272
273.close-modal {
274 position: absolute;
275 right: 10px;
276 top: 10px;
277 cursor: pointer;
278 font-size: 24px;
279 color: var(--text-color-secondary);
280 padding-left: 8px;
281 padding-right: 8px;
282}
283
284.bang-select {
285 width: 100%;
286 padding: 8px;
287 margin-top: 10px;
288 border-radius: 4px;
289 padding-right: 30px;
290}
291
292.bang-select-container {
293 position: relative;
294 display: inline-block;
295 width: 100%;
296}
297
298.bang-select-container::after {
299 content: "↵";
300 position: absolute;
301 right: 10px;
302 top: 18%;
303 color: var(--text-color-secondary);
304 pointer-events: none;
305 font-size: 1.2em;
306}
307
308@keyframes shake {
309 0%,
310 100% {
311 transform: translateX(0);
312 }
313 25% {
314 transform: translateX(-5px);
315 }
316 75% {
317 transform: translateX(5px);
318 }
319}
320
321@keyframes flash-red {
322 0%,
323 100% {
324 background-color: transparent;
325 }
326 50% {
327 background-color: rgba(255, 0, 0, 0.2);
328 }
329}
330
331.shake {
332 animation: shake 0.2s ease-in-out;
333}
334
335.flash-red {
336 animation: flash-red 0.3s ease-in-out;
337}
338
339.settings-section {
340 margin-bottom: 1rem;
341}
342
343.switch {
344 display: flex;
345 align-items: center;
346 gap: 8px;
347 margin: 8px 0;
348}
349
350.switch input {
351 width: 40px;
352 height: 20px;
353 appearance: none;
354 background-color: var(--bg-color-secondary);
355 border-radius: 20px;
356 position: relative;
357 cursor: pointer;
358 transition: background-color 0.3s;
359}
360
361.switch input:checked {
362 background-color: var(--text-color);
363}
364
365.switch input:before {
366 content: "";
367 width: 16px;
368 height: 16px;
369 background-color: var(--text-color);
370 position: absolute;
371 border-radius: 50%;
372 top: 2px;
373 left: 2px;
374 transition:
375 left 0.3s,
376 background-color 0.3s;
377}
378
379.switch input:checked:before {
380 background-color: var(--bg-color-secondary);
381 left: 22px;
382}
383
384.clear-history,
385.remove-bang {
386 margin-top: 8px;
387 padding: 8px 16px;
388 background-color: var(--bg-color-danger);
389 color: var(--text-color);
390 border-radius: 4px;
391 transition: all 0.2s;
392}
393
394.remove-bang {
395 padding: 4px 6px;
396}
397
398.clear-history:hover,
399.remove-bang:hover {
400 background-color: var(--bg-color-hover);
401}
402
403.clear-history:active,
404.remove-bang:active {
405 background-color: var(--bg-color-active);
406 transform: scale(0.98);
407}
408
409.add-bang {
410 margin-top: 8px;
411 padding: 8px 16px;
412 background-color: var(--text-color);
413 color: var(--bg-color);
414 border-radius: 4px;
415 transition: all 0.2s;
416}
417
418.add-bang:hover {
419 background-color: var(--bg-color-hover);
420 color: var(--text-color-hover);
421}
422
423.add-bang:active {
424 background-color: var(--bg-color-active);
425 transform: scale(0.98);
426}
427
428.custom-bang-item {
429 display: flex;
430 flex-direction: column;
431 gap: 8px;
432 padding: 12px;
433 border: 1px solid var(--border-color);
434 border-radius: 4px;
435 margin-top: 8px;
436}
437
438.custom-bang-info {
439 width: 100%;
440 border-collapse: collapse;
441 border: 1px solid var(--border-color);
442}
443
444.custom-bang-info td {
445 color: var(--text-color-secondary);
446 padding: 8px 16px;
447 border: 1px solid var(--border-color);
448}
449
450.custom-bang-info td:nth-child(2) code {
451 padding: 0.3rem;
452 border-radius: 4px;
453 word-break: break-all;
454 background-color: var(--bg-color-secondary);
455}
456
457.custom-bang-info td:last-child {
458 border-right: 1px solid var(--border-color);
459}
460
461.custom-bang-name {
462 font-weight: 500;
463}
464
465.custom-bang-url {
466 word-break: break-all;
467 color: var(--text-color-secondary);
468}