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
32* {
33 margin: 0;
34 padding: 0;
35 box-sizing: border-box;
36}
37
38html,
39body {
40 height: 100%;
41 width: 100%;
42}
43
44body {
45 line-height: 1.5;
46 font-weight: 400;
47 font-size: 16px;
48 color: #1a1a1a;
49}
50
51h1,
52h2,
53h3,
54h4,
55h5,
56h6 {
57 font-weight: 600;
58 line-height: 1.2;
59 padding: 0.75rem;
60}
61
62a {
63 color: #444444;
64}
65a:hover {
66 color: #888888;
67}
68
69button {
70 font: inherit;
71 border: none;
72 background: none;
73 cursor: pointer;
74}
75
76input,
77textarea {
78 font: inherit;
79}
80
81/* Add these new styles */
82.url-container {
83 display: flex;
84 align-items: center;
85 gap: 8px;
86 margin-top: 16px;
87}
88
89/* Add this new style */
90.content-container {
91 max-width: 37rem;
92 text-align: center;
93 padding: 0 8px;
94}
95
96/* Update url-input width to be 100% since container will control max width */
97.url-input {
98 padding: 8px 12px;
99 border: 1px solid #ddd;
100 border-radius: 4px;
101 width: 100%;
102 background: #f5f5f5;
103}
104
105.copy-button {
106 padding: 8px;
107 color: #666;
108 border-radius: 4px;
109 transition: all 0.2s;
110 display: flex;
111 align-items: center;
112 justify-content: center;
113}
114
115.copy-button:hover {
116 background: #f0f0f0;
117}
118
119.copy-button:active {
120 background: #e5e5e5;
121}
122
123.copy-button img {
124 width: 20px;
125 height: 20px;
126}
127
128.copy-button.copied {
129 background: #28a745;
130}
131
132/* Add footer styles */
133.footer {
134 position: fixed;
135 bottom: 16px;
136 left: 0;
137 right: 0;
138 text-align: center;
139 font-size: 14px;
140 color: #666;
141}
142
143.footer a {
144 color: #666;
145 text-decoration: none;
146 font-weight: 500;
147}
148
149.footer a:hover {
150 color: #333;
151}