A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1/**
2 * Reader "view record JSON" control + modal (`RecordJsonViewer`). A client:only React
3 * island, so Astro's component-scoped styles never reach its DOM — these rules are
4 * global (imported from `[rkey].astro`).
5 *
6 * The modal's code panel uses a FIXED dark editor palette (not the site/publication
7 * palette tokens). A publication theme recolours `--ink`/`--paper`/`--sun` etc., and a
8 * themed combination can collapse the JSON to near-invisible (e.g. dark `--sun-strong`
9 * keys on a dark-olive `--ink` background). This is a raw-record / developer view, so it
10 * stays a consistent, high-contrast code surface across every publication theme. The
11 * trigger button keeps the page tokens (`--muted`/`--sun`) — it lives inline in the
12 * eyebrow on the page surface, where those read fine.
13 */
14.record-json__trigger {
15 display: inline-flex;
16 align-items: center;
17 vertical-align: middle;
18 margin-left: 0.5rem;
19 padding: 0;
20 border: 0;
21 background: transparent;
22 color: var(--muted);
23 cursor: pointer;
24 line-height: 0;
25}
26.record-json__trigger:hover {
27 color: var(--sun);
28}
29.record-json__backdrop {
30 position: fixed;
31 inset: 0;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 padding: 1.5rem;
36 background: rgba( 0, 0, 0, 0.55 );
37 z-index: 1000;
38}
39.record-json__dialog {
40 position: relative;
41 display: flex;
42 width: min( 92vw, 48rem );
43 max-height: 82vh;
44 border-radius: var(--radius);
45 box-shadow: var(--shadow);
46 overflow: hidden;
47}
48.record-json__close {
49 position: absolute;
50 top: 0.5rem;
51 right: 0.5rem;
52 display: inline-flex;
53 align-items: center;
54 justify-content: center;
55 width: 2rem;
56 height: 2rem;
57 border: 0;
58 border-radius: 50%;
59 background: rgba( 0, 0, 0, 0.35 );
60 color: #d6d9e0;
61 font-size: 1.4rem;
62 line-height: 1;
63 cursor: pointer;
64}
65.record-json__close:hover {
66 background: rgba( 0, 0, 0, 0.55 );
67}
68.record-json__code {
69 flex: 1;
70 margin: 0;
71 overflow: auto;
72 padding: 1.5rem;
73 background: #1e1f26;
74 color: #d6d9e0;
75 font-family: var(--font-mono);
76 font-size: 0.85rem;
77 line-height: 1.5;
78 white-space: pre;
79 tab-size: 2;
80}
81/* Fixed JSON token palette (theme-independent — see file header). highlight.js emits
82 only these classes for JSON: attr (keys), string, number, literal (true/false/null),
83 keyword, punctuation. The base `color` above covers structural braces/brackets. */
84.record-json__code .hljs-attr {
85 color: #8fbcbb;
86}
87.record-json__code .hljs-string {
88 color: #a3be8c;
89}
90.record-json__code .hljs-number {
91 color: #d08770;
92}
93.record-json__code .hljs-literal,
94.record-json__code .hljs-keyword {
95 color: #b48ead;
96}
97.record-json__code .hljs-punctuation {
98 color: #7b8294;
99}