A fast, local-first "redirection engine" for !bang users with a few extra features ^-^
dunkirk.sh
1/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */
2
3/* Font fallback that closely matches Inter metrics */
4@font-face {
5 font-family: "Inter Fallback";
6 size-adjust: 107%;
7 ascent-override: 90%;
8 src: local("Arial");
9}
10
11:root {
12 font-family:
13 Inter,
14 "Inter Fallback",
15 system-ui,
16 -apple-system,
17 BlinkMacSystemFont,
18 "Segoe UI",
19 Roboto,
20 Oxygen,
21 Ubuntu,
22 Cantarell,
23 "Open Sans",
24 "Helvetica Neue",
25 sans-serif;
26 font-synthesis: none;
27 text-rendering: optimizeLegibility;
28 -webkit-font-smoothing: antialiased;
29 -moz-osx-font-smoothing: grayscale;
30
31 /* Light mode colors */
32 --text-color: #1a1a1a;
33 --text-color-secondary: #666;
34 --text-color-hover: #333;
35 --bg-color: #fff;
36 --bg-color-secondary: #f5f5f5;
37 --bg-color-hover: #f0f0f0;
38 --bg-color-active: #e5e5e5;
39 --bg-color-danger: #e9808a;
40 --border-color: #ddd;
41}
42
43@media (prefers-color-scheme: dark) {
44 :root {
45 --text-color: #e0e0e0;
46 --text-color-secondary: #999;
47 --text-color-hover: #fff;
48 --bg-color: #121212;
49 --bg-color-secondary: #1e1e1e;
50 --bg-color-hover: #2a2a2a;
51 --bg-color-active: #333;
52 --bg-color-danger: #f15f6d;
53 --border-color: #444;
54 }
55}
56
57* {
58 margin: 0;
59 padding: 0;
60 box-sizing: border-box;
61 outline: none;
62}
63*:focus {
64 outline: 2px solid var(--text-color-secondary);
65}
66
67html,
68body {
69 height: 100%;
70 width: 100%;
71}
72
73body {
74 line-height: 1.5;
75 font-weight: 400;
76 font-size: 16px;
77 color: var(--text-color);
78 background-color: var(--bg-color);
79}
80
81h1,
82h2,
83h3,
84h4,
85h5,
86h6 {
87 font-weight: 600;
88 line-height: 1.2;
89 padding-bottom: 0.75rem;
90}
91
92a {
93 color: var(--text-color-secondary);
94}
95a:hover {
96 color: var(--text-color-hover);
97}
98
99button {
100 font: inherit;
101 border: none;
102 background: none;
103 cursor: pointer;
104}
105
106input,
107textarea {
108 font: inherit;
109}
110
111/* Add these new styles */
112.url-container {
113 display: flex;
114 align-items: center;
115 gap: 8px;
116 margin-top: 16px;
117}
118
119/* Add this new style */
120.content-container {
121 max-width: 37rem;
122 text-align: center;
123 padding: 0 8px;
124}
125
126/* Update url-input width to be 100% since container will control max width */
127input {
128 padding: 8px 12px;
129 border: 1px solid var(--border-color);
130 border-radius: 4px;
131 width: 100%;
132 background: var(--bg-color-secondary);
133 color: var(--text-color);
134}
135
136.flash-white {
137 outline: 2px solid var(--text-color-secondary);
138 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
139 opacity: 0.2;
140 animation: flash 0.275s forwards;
141}
142
143@keyframes flash {
144 0% {
145 opacity: 0.2;
146 outline: 2px solid var(--text-color-secondary);
147 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
148 }
149 50% {
150 opacity: 1;
151 outline: 2px solid var(--text-color-hover);
152 background: color-mix(in srgb, var(--text-color) 75%, var(--bg-color));
153 }
154 100% {
155 opacity: 0.2;
156 outline: 2px solid var(--text-color-secondary);
157 background: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
158 }
159}
160
161.copy-button {
162 padding: 8px;
163 color: var(--text-color-secondary);
164 border-radius: 4px;
165 transition: all 0.2s;
166 display: flex;
167 align-items: center;
168 justify-content: center;
169}
170
171.copy-button:hover {
172 background: var(--bg-color-hover);
173}
174
175.copy-button:active {
176 background: var(--bg-color-active);
177}
178
179.copy-button img {
180 width: 20px;
181 height: 20px;
182}
183
184.copy-button.copied {
185 background: #28a745;
186}
187
188/* Add footer styles */
189.footer {
190 position: fixed;
191 bottom: 16px;
192 left: 0;
193 right: 0;
194 text-align: center;
195 font-size: 14px;
196 color: var(--text-color-secondary);
197}
198
199.footer a {
200 color: var(--text-color-secondary);
201 text-decoration: none;
202 font-weight: 500;
203}
204
205.footer a:hover {
206 color: var(--text-color-hover);
207}
208
209/* Add styles for the settings button */
210.settings-button {
211 padding: 8px;
212 color: var(--text-color-secondary);
213 border-radius: 4px;
214 transition: all 0.2s;
215 display: flex;
216 align-items: center;
217 justify-content: center;
218}
219
220.settings-button:hover {
221 background: var(--bg-color-hover);
222}
223
224.settings-button:hover {
225 background: var(--bg-color-active);
226}
227
228.settings-button:hover img,
229.settings-button.rotate img {
230 transform: rotate(180deg);
231 transition: transform 0.6s ease;
232}
233
234.settings-button:active {
235 transform: scale(0.95);
236}
237
238.settings {
239 transition: transform 0.6s ease;
240}
241
242.settings-button:not(:hover):not(.rotate) .settings {
243 transform: rotate(0deg);
244}
245
246.modal {
247 display: none;
248 position: fixed;
249 top: 0;
250 left: 0;
251 width: 100%;
252 height: 100%;
253 background-color: rgba(0, 0, 0, 0.5);
254 z-index: 1000;
255}
256
257.modal-content {
258 position: relative;
259 background-color: var(--bg-color);
260 border: 1px solid var(--border-color);
261 margin: 15% auto;
262 padding: 20px;
263 border-radius: 8px;
264 width: 80%;
265 max-width: 500px;
266}
267
268.close-modal {
269 position: absolute;
270 right: 10px;
271 top: 10px;
272 cursor: pointer;
273 font-size: 24px;
274 color: var(--text-color-secondary);
275 padding-left: 8px;
276 padding-right: 8px;
277}
278
279.bang-select {
280 width: 100%;
281 padding: 8px;
282 margin-top: 10px;
283 border-radius: 4px;
284}
285
286.bang-select-container {
287 position: relative;
288 display: inline-block;
289 width: 100%;
290}
291
292.bang-select-container::after {
293 content: "↵";
294 position: absolute;
295 right: 10px;
296 top: 33%;
297 color: var(--text-color-secondary);
298 pointer-events: none;
299 font-size: 1.2em;
300}
301
302/* Update the bang-select class to account for the icon */
303.bang-select {
304 padding-right: 30px; /* Make room for the icon */
305}
306
307@keyframes shake {
308 0%,
309 100% {
310 transform: translateX(0);
311 }
312 25% {
313 transform: translateX(-5px);
314 }
315 75% {
316 transform: translateX(5px);
317 }
318}
319
320@keyframes flash-red {
321 0%,
322 100% {
323 background-color: transparent;
324 }
325 50% {
326 background-color: rgba(255, 0, 0, 0.2);
327 }
328}
329
330.shake {
331 animation: shake 0.2s ease-in-out;
332}
333
334.flash-red {
335 animation: flash-red 0.3s ease-in-out;
336}
337/* Settings section spacing */
338.settings-section {
339 margin-bottom: 1rem;
340}
341
342/* Toggle switch styles */
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 button */
385.clear-history {
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.clear-history:hover {
395 background-color: var(--bg-color-hover);
396}
397
398.clear-history:active {
399 background-color: var(--bg-color-active);
400 transform: scale(0.98);
401}