A fullstack app for indexing standard.site documents
chore: style updates
+58
-13
+48
-13
packages/client/src/App.tsx
+48
-13
packages/client/src/App.tsx
···
147
147
148
148
{/* Toolbar */}
149
149
<div
150
+
className="ie-toolbar"
150
151
style={{
151
152
display: "flex",
152
153
alignItems: "center",
···
154
155
padding: "3px 2px",
155
156
backgroundColor: "#ece9d8",
156
157
borderBottom: "1px solid #aca899",
158
+
overflow: "hidden",
157
159
}}
158
160
>
159
161
{/* Back button */}
···
292
294
</div>
293
295
294
296
<div
297
+
className="ie-secondary"
295
298
style={{
296
299
width: "1px",
297
300
height: "22px",
···
302
305
303
306
{/* Mail */}
304
307
<div
308
+
className="ie-secondary"
305
309
style={{
306
310
display: "flex",
307
311
alignItems: "center",
···
319
323
320
324
{/* Print */}
321
325
<div
326
+
className="ie-secondary"
322
327
style={{
323
328
padding: "0 4px",
324
329
cursor: "pointer",
···
396
401
</div>
397
402
398
403
<div className="window-body" style={{ margin: 0, padding: "4px 6px" }}>
399
-
<div
400
-
style={{
401
-
display: "flex",
402
-
gap: "4px",
403
-
marginBottom: "4px",
404
-
alignItems: "center",
405
-
fontSize: "11px",
406
-
}}
407
-
>
408
-
<span>{documents.length} documents loaded</span>
409
-
</div>
410
-
411
404
{loading && <p style={{ textAlign: "center" }}>Searching...</p>}
412
405
413
406
{error && (
···
431
424
paddingRight: "5px",
432
425
}}
433
426
>
427
+
<div
428
+
style={{
429
+
background: "#ffffff",
430
+
padding: 0,
431
+
margin: 0,
432
+
}}
433
+
>
434
+
<h3 style={{ padding: "1rem", margin: 0 }}>
435
+
Welcome to Docs.surf! 🏄
436
+
</h3>
437
+
<details
438
+
style={{
439
+
fontSize: "14px",
440
+
padding: "0 1rem 1rem 1rem",
441
+
}}
442
+
>
443
+
<summary style={{ cursor: "pointer" }}>What is this?</summary>
444
+
<div style={{ paddingTop: "0.5rem", fontSize: "14px" }}>
445
+
<p>
446
+
Docs.surf is a{" "}
447
+
<a
448
+
href="https://standard.site"
449
+
target="_blank"
450
+
rel="noreferrer"
451
+
>
452
+
Standard.site
453
+
</a>{" "}
454
+
aggregator, pulling all valid Publications and Documents
455
+
into a single chronological feed. You can think of it like
456
+
RSS, but there's no manual collection. It's all powered by{" "}
457
+
<a
458
+
href="https://atproto.com"
459
+
target="_blank"
460
+
rel="noreferrer"
461
+
>
462
+
ATProto
463
+
</a>
464
+
, a new protocol to power connections across the web.
465
+
</p>
466
+
</div>
467
+
</details>
468
+
</div>
469
+
434
470
{documents.map((doc, index) => (
435
471
<div
436
472
key={doc.uri}
···
585
621
</div>
586
622
<div className="status-bar">
587
623
<p className="status-bar-field">Done</p>
588
-
<p className="status-bar-field">Internet</p>
589
624
</div>
590
625
</div>
591
626
);
+10
packages/client/src/index.css
+10
packages/client/src/index.css
···
16
16
display: flex;
17
17
justify-content: center;
18
18
}
19
+
20
+
/* Hide toolbar text labels and secondary icons on mobile */
21
+
@media (max-width: 600px) {
22
+
.ie-toolbar span {
23
+
display: none !important;
24
+
}
25
+
.ie-toolbar .ie-secondary {
26
+
display: none !important;
27
+
}
28
+
}