desertthunder.dev
a love letter to tangled (android, iOS, and a search API)
1:root {
2 --bg: #0e0e0e;
3 --surface: #1a1a1a;
4 --border: #2a2a2a;
5 --text: #e0e0e0;
6 --text-dim: #888;
7 --accent: #7aa2f7;
8 --mark-bg: #7aa2f733;
9 --mono: "Google Sans Mono", monospace;
10 --sans: "Google Sans", sans-serif;
11 --radius: 6px;
12}
13
14*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
15
16body {
17 font-family: var(--sans);
18 background: var(--bg);
19 color: var(--text);
20 line-height: 1.6;
21 min-height: 100vh;
22 display: flex;
23 flex-direction: column;
24}
25
26a { color: var(--accent); text-decoration: none; }
27a:hover { text-decoration: underline; }
28
29/* Nav */
30.nav {
31 border-bottom: 1px solid var(--border);
32 padding: .75rem 1rem;
33}
34.nav-inner {
35 max-width: 720px;
36 margin: 0 auto;
37 display: flex;
38 align-items: center;
39 justify-content: space-between;
40}
41.nav-brand {
42 font-family: var(--mono);
43 font-weight: 700;
44 font-size: 1.1rem;
45 color: var(--text);
46}
47.nav-brand:hover { text-decoration: none; color: var(--accent); }
48.nav-links { display: flex; gap: 1.25rem; font-size: .9rem; }
49
50/* Main */
51.main {
52 max-width: 720px;
53 width: 100%;
54 margin: 0 auto;
55 padding: 2rem 1rem;
56 flex: 1;
57 min-width: 0;
58}
59
60/* Footer */
61.footer {
62 border-top: 1px solid var(--border);
63 padding: 1rem;
64 font-size: .8rem;
65 color: var(--text-dim);
66}
67
68.footer-inner {
69 max-width: 720px;
70 margin: 0 auto;
71 display: flex;
72 align-items: center;
73 justify-content: space-between;
74 flex-wrap: wrap;
75 gap: .5rem;
76}
77
78.footer-right {
79 display: flex;
80 gap: 1rem;
81 align-items: center;
82}
83
84/* Search hero */
85.search-hero { margin-bottom: 1.5rem; }
86.search-hero h1 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 500; }
87.search-form { display: flex; gap: .5rem; margin-bottom: .75rem; }
88.search-input {
89 flex: 1;
90 padding: .6rem .75rem;
91 background: var(--surface);
92 border: 1px solid var(--border);
93 border-radius: var(--radius);
94 color: var(--text);
95 font-family: var(--sans);
96 font-size: .95rem;
97 outline: none;
98}
99.search-input:focus { border-color: var(--accent); }
100.search-input::placeholder { color: var(--text-dim); }
101
102/* Buttons */
103.btn {
104 padding: .6rem 1.1rem;
105 background: var(--surface);
106 border: 1px solid var(--border);
107 border-radius: var(--radius);
108 color: var(--text);
109 font-family: var(--sans);
110 font-size: .9rem;
111 cursor: pointer;
112}
113.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
114.btn:disabled { opacity: .5; cursor: default; }
115.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; }
116.btn-primary:hover { background: #6b93e8; color: var(--bg); }
117.btn-more { width: 100%; margin-top: .75rem; }
118
119/* Filter bar */
120.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; }
121.filter-bar select,
122.filter-input {
123 padding: .45rem .6rem;
124 background: var(--surface);
125 border: 1px solid var(--border);
126 border-radius: var(--radius);
127 color: var(--text);
128 font-family: var(--sans);
129 font-size: .85rem;
130 outline: none;
131}
132.filter-bar select:focus,
133.filter-input:focus { border-color: var(--accent); }
134.filter-input { width: 140px; }
135.filter-input::placeholder { color: var(--text-dim); }
136
137/* Messages */
138.msg { padding: 1rem; color: var(--text-dim); text-align: center; }
139.msg-error { color: #f7768e; }
140.msg-empty {
141 background: var(--surface);
142 border: 1px solid var(--border);
143 border-radius: var(--radius);
144}
145.msg-empty p:last-child { margin-bottom: 0; }
146
147/* Result cards */
148.card {
149 display: block;
150 background: var(--surface);
151 border: 1px solid var(--border);
152 border-radius: var(--radius);
153 padding: .85rem 1rem;
154 margin-bottom: .6rem;
155 color: var(--text);
156 transition: border-color .15s;
157 min-width: 0;
158}
159.card:hover { border-color: var(--accent); text-decoration: none; }
160.card-head {
161 display: flex;
162 align-items: flex-start;
163 gap: .5rem;
164 margin-bottom: .35rem;
165 flex-wrap: wrap;
166 min-width: 0;
167}
168.badge {
169 font-family: var(--mono);
170 font-size: .7rem;
171 padding: .15rem .45rem;
172 background: var(--border);
173 border-radius: 3px;
174 text-transform: uppercase;
175 color: var(--text-dim);
176 white-space: nowrap;
177}
178.card-title {
179 font-weight: 500;
180 font-size: .95rem;
181 min-width: 0;
182 overflow-wrap: anywhere;
183 word-break: break-word;
184}
185.card-snippet {
186 font-size: .85rem;
187 color: var(--text-dim);
188 margin-bottom: .35rem;
189 line-height: 1.5;
190 overflow-wrap: anywhere;
191 word-break: break-word;
192}
193.card-snippet mark {
194 background: var(--mark-bg);
195 color: var(--accent);
196 padding: 0 .1rem;
197 border-radius: 2px;
198}
199.card-meta {
200 font-size: .78rem;
201 color: var(--text-dim);
202 display: flex;
203 gap: .5rem;
204 flex-wrap: wrap;
205 min-width: 0;
206}
207.card-meta span {
208 min-width: 0;
209 overflow-wrap: anywhere;
210 word-break: break-word;
211}
212.card-actions {
213 display: flex;
214 gap: .5rem;
215 flex-wrap: wrap;
216 margin-top: .75rem;
217}
218.btn-card {
219 padding: .45rem .7rem;
220 font-size: .82rem;
221}
222.meta-sep::before { content: "\00b7"; margin-right: .5rem; }
223.card-warning {
224 margin-top: .6rem;
225 padding: .55rem .65rem;
226 border-radius: var(--radius);
227 border: 1px solid #5c4b1f;
228 background: #2a2416;
229}
230.warning-title {
231 display: block;
232 color: #f2c879;
233 font-size: .78rem;
234 line-height: 1.5;
235}
236.warning-uri {
237 display: block;
238 margin-top: .35rem;
239 color: var(--text);
240 overflow-wrap: anywhere;
241 word-break: break-word;
242}
243.toast {
244 position: fixed;
245 left: 50%;
246 bottom: 1.25rem;
247 transform: translateX(-50%);
248 padding: .65rem .85rem;
249 border-radius: var(--radius);
250 border: 1px solid var(--border);
251 background: #111827;
252 color: var(--text);
253 box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
254 opacity: 0;
255 pointer-events: none;
256}
257.toast-visible {
258 opacity: 1;
259}
260
261/* Docs */
262.main h1 { font-size: 1.4rem; margin-bottom: 1rem; font-weight: 500; }
263.main h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; font-weight: 500; }
264.main h3 { font-size: .95rem; margin: 1rem 0 .4rem; font-weight: 500; }
265.main p { margin-bottom: .75rem; }
266.main table {
267 width: 100%;
268 border-collapse: collapse;
269 margin-bottom: 1rem;
270 font-size: .85rem;
271 display: block;
272 overflow-x: auto;
273}
274.main th, .main td {
275 text-align: left;
276 padding: .45rem .6rem;
277 border-bottom: 1px solid var(--border);
278}
279.main th { color: var(--text-dim); font-weight: 500; }
280.main code {
281 font-family: var(--mono);
282 font-size: .85em;
283 background: var(--surface);
284 padding: .1rem .35rem;
285 border-radius: 3px;
286}
287.main pre {
288 background: var(--surface);
289 border: 1px solid var(--border);
290 border-radius: var(--radius);
291 padding: .85rem 1rem;
292 overflow-x: auto;
293 margin-bottom: 1rem;
294 font-size: .82rem;
295 line-height: 1.5;
296}
297.main pre code { background: none; padding: 0; }
298.main p,
299.main li,
300.main code {
301 overflow-wrap: anywhere;
302 word-break: break-word;
303}
304.main th {
305 white-space: nowrap;
306}
307.main td:not(:last-child) {
308 white-space: nowrap;
309}
310.main td:last-child {
311 overflow-wrap: anywhere;
312 word-break: break-word;
313}
314
315/* Mobile */
316@media (max-width: 640px) {
317 .search-form { flex-direction: column; }
318 .btn-primary { width: 100%; }
319 .filter-bar { flex-direction: column; }
320 .filter-input { width: 100%; }
321 .card-meta { flex-wrap: wrap; }
322}