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 --border-color: #ddd;
40}
41
42@media (prefers-color-scheme: dark) {
43 :root {
44 --text-color: #e0e0e0;
45 --text-color-secondary: #999;
46 --text-color-hover: #fff;
47 --bg-color: #121212;
48 --bg-color-secondary: #1e1e1e;
49 --bg-color-hover: #2a2a2a;
50 --bg-color-active: #333;
51 --border-color: #444;
52 }
53}
54
55* {
56 margin: 0;
57 padding: 0;
58 box-sizing: border-box;
59 outline: none;
60}
61
62*:focus {
63 border: 2px solid var(--text-color-secondary);
64}
65
66html,
67body {
68 height: 100%;
69 width: 100%;
70}
71
72body {
73 line-height: 1.5;
74 font-weight: 400;
75 font-size: 16px;
76 color: var(--text-color);
77 background-color: var(--bg-color);
78}
79
80h1,
81h2,
82h3,
83h4,
84h5,
85h6 {
86 font-weight: 600;
87 line-height: 1.2;
88 padding-bottom: 0.75rem;
89}
90
91a {
92 color: var(--text-color-secondary);
93}
94a:hover {
95 color: var(--text-color-hover);
96}
97
98button {
99 font: inherit;
100 border: none;
101 background: none;
102 cursor: pointer;
103}
104
105input,
106textarea {
107 font: inherit;
108}
109
110/* Add these new styles */
111.url-container {
112 display: flex;
113 align-items: center;
114 gap: 8px;
115 margin-top: 16px;
116}
117
118/* Add this new style */
119.content-container {
120 max-width: 37rem;
121 text-align: center;
122 padding: 0 8px;
123}
124
125/* Update url-input width to be 100% since container will control max width */
126input {
127 padding: 8px 12px;
128 border: 1px solid var(--border-color);
129 border-radius: 4px;
130 width: 100%;
131 background: var(--bg-color-secondary);
132 color: var(--text-color);
133}
134
135.copy-button {
136 padding: 8px;
137 color: var(--text-color-secondary);
138 border-radius: 4px;
139 transition: all 0.2s;
140 display: flex;
141 align-items: center;
142 justify-content: center;
143}
144
145.copy-button:hover {
146 background: var(--bg-color-hover);
147}
148
149.copy-button:active {
150 background: var(--bg-color-active);
151}
152
153.copy-button img {
154 width: 20px;
155 height: 20px;
156}
157
158.copy-button.copied {
159 background: #28a745;
160}
161
162/* Add footer styles */
163.footer {
164 position: fixed;
165 bottom: 16px;
166 left: 0;
167 right: 0;
168 text-align: center;
169 font-size: 14px;
170 color: var(--text-color-secondary);
171}
172
173.footer a {
174 color: var(--text-color-secondary);
175 text-decoration: none;
176 font-weight: 500;
177}
178
179.footer a:hover {
180 color: var(--text-color-hover);
181}
182
183/* Add styles for the settings button */
184.settings-button {
185 padding: 8px;
186 color: var(--text-color-secondary);
187 border-radius: 4px;
188 transition: all 0.2s;
189 display: flex;
190 align-items: center;
191 justify-content: center;
192}
193
194.settings-button:hover {
195 background: var(--bg-color-hover);
196}
197
198.settings-button:hover {
199 background: var(--bg-color-active);
200}
201
202.settings-button:hover img {
203 transform: rotate(180deg);
204 transition: transform 0.6s ease;
205}
206
207.settings-button:active {
208 transform: scale(0.95);
209}
210
211.settings {
212 transition: transform 0.6s ease;
213}
214
215.settings-button:not(:hover) .settings {
216 transform: rotate(0deg);
217}
218
219.modal {
220 display: none;
221 position: fixed;
222 top: 0;
223 left: 0;
224 width: 100%;
225 height: 100%;
226 background-color: rgba(0, 0, 0, 0.5);
227 z-index: 1000;
228}
229
230.modal-content {
231 position: relative;
232 background-color: var(--bg-color);
233 border: 1px solid var(--border-color);
234 margin: 15% auto;
235 padding: 20px;
236 border-radius: 8px;
237 width: 80%;
238 max-width: 500px;
239}
240
241.close-modal {
242 position: absolute;
243 right: 10px;
244 top: 10px;
245 cursor: pointer;
246 font-size: 24px;
247 color: var(--text-color-secondary);
248 padding-left: 8px;
249 padding-right: 8px;
250}
251
252.bang-select {
253 width: 100%;
254 padding: 8px;
255 margin-top: 10px;
256 border-radius: 4px;
257}
258
259.bang-select-container {
260 position: relative;
261 display: inline-block;
262 width: 100%;
263}
264
265.bang-select-container::after {
266 content: "↵";
267 position: absolute;
268 right: 10px;
269 top: 33%;
270 color: var(--text-color-secondary);
271 pointer-events: none;
272 font-size: 1.2em;
273}
274
275/* Update the bang-select class to account for the icon */
276.bang-select {
277 padding-right: 30px; /* Make room for the icon */
278}
279
280@keyframes shake {
281 0%,
282 100% {
283 transform: translateX(0);
284 }
285 25% {
286 transform: translateX(-5px);
287 }
288 75% {
289 transform: translateX(5px);
290 }
291}
292
293@keyframes flash-red {
294 0%,
295 100% {
296 background-color: transparent;
297 }
298 50% {
299 background-color: rgba(255, 0, 0, 0.2);
300 }
301}
302
303.shake {
304 animation: shake 0.2s ease-in-out;
305}
306
307.flash-red {
308 animation: flash-red 0.3s ease-in-out;
309}