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:root {
4 font-family:
5 Inter,
6 system-ui,
7 -apple-system,
8 BlinkMacSystemFont,
9 "Segoe UI",
10 Roboto,
11 Oxygen,
12 Ubuntu,
13 Cantarell,
14 "Open Sans",
15 "Helvetica Neue",
16 sans-serif;
17 font-synthesis: none;
18 text-rendering: optimizeLegibility;
19 -webkit-font-smoothing: antialiased;
20 -moz-osx-font-smoothing: grayscale;
21}
22
23* {
24 margin: 0;
25 padding: 0;
26 box-sizing: border-box;
27}
28
29html,
30body {
31 height: 100%;
32 width: 100%;
33}
34
35body {
36 line-height: 1.5;
37 font-weight: 400;
38 font-size: 16px;
39 color: #1a1a1a;
40}
41
42h1,
43h2,
44h3,
45h4,
46h5,
47h6 {
48 font-weight: 600;
49 line-height: 1.2;
50}
51
52a {
53 color: #444444;
54}
55a:hover {
56 color: #888888;
57}
58
59button {
60 font: inherit;
61 border: none;
62 background: none;
63 cursor: pointer;
64}
65
66input,
67textarea {
68 font: inherit;
69}
70
71/* Add these new styles */
72.url-container {
73 display: flex;
74 align-items: center;
75 gap: 8px;
76 margin-top: 16px;
77}
78
79/* Add this new style */
80.content-container {
81 max-width: 36rem;
82 text-align: center;
83}
84
85/* Update url-input width to be 100% since container will control max width */
86.url-input {
87 padding: 8px 12px;
88 border: 1px solid #ddd;
89 border-radius: 4px;
90 width: 100%;
91 background: #f5f5f5;
92}
93
94.copy-button {
95 padding: 8px;
96 color: #666;
97 border-radius: 4px;
98 transition: all 0.2s;
99 display: flex;
100 align-items: center;
101 justify-content: center;
102}
103
104.copy-button:hover {
105 background: #f0f0f0;
106}
107
108.copy-button:active {
109 background: #e5e5e5;
110}
111
112.copy-button img {
113 width: 20px;
114 height: 20px;
115}
116
117.copy-button.copied {
118 background: #28a745;
119}
120
121/* Add footer styles */
122.footer {
123 position: fixed;
124 bottom: 16px;
125 left: 0;
126 right: 0;
127 text-align: center;
128 font-size: 14px;
129 color: #666;
130}
131
132.footer a {
133 color: #666;
134 text-decoration: none;
135 font-weight: 500;
136}
137
138.footer a:hover {
139 color: #333;
140}