zat.dev
1:root {
2 color-scheme: light dark;
3 --bg: #0b0b0f;
4 --panel: #10101a;
5 --text: #f3f4f6;
6 --muted: #a1a1aa;
7 --border: rgba(255, 255, 255, 0.08);
8 --link: #93c5fd;
9 --codebg: rgba(255, 255, 255, 0.06);
10 --shadow: rgba(0, 0, 0, 0.35);
11 --max: 900px;
12 --radius: 12px;
13 --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
14 "Courier New", monospace;
15 --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
16 Arial, "Apple Color Emoji", "Segoe UI Emoji";
17}
18
19@media (prefers-color-scheme: light) {
20 :root {
21 --bg: #fafafa;
22 --panel: #ffffff;
23 --text: #0b0b0f;
24 --muted: #52525b;
25 --border: rgba(0, 0, 0, 0.08);
26 --link: #2563eb;
27 --codebg: rgba(0, 0, 0, 0.04);
28 --shadow: rgba(0, 0, 0, 0.08);
29 }
30}
31
32html,
33body {
34 height: 100%;
35}
36
37body {
38 margin: 0;
39 font-family: var(--sans);
40 background: var(--bg);
41 color: var(--text);
42}
43
44a {
45 color: var(--link);
46 text-decoration: none;
47}
48a:hover {
49 text-decoration: underline;
50}
51
52.app {
53 min-height: 100%;
54 display: flex;
55 flex-direction: column;
56}
57
58.header {
59 position: sticky;
60 top: 0;
61 z-index: 5;
62 display: flex;
63 gap: 12px;
64 align-items: center;
65 padding: 12px 16px;
66 border-bottom: 1px solid var(--border);
67 background: color-mix(in srgb, var(--panel) 92%, transparent);
68 backdrop-filter: blur(10px);
69}
70
71.brand {
72 font-weight: 700;
73 letter-spacing: 0.2px;
74 padding: 6px 10px;
75 border-radius: 10px;
76}
77.brand:hover {
78 background: color-mix(in srgb, var(--codebg) 70%, transparent);
79 text-decoration: none;
80}
81
82.header-link {
83 margin-left: auto;
84 padding: 8px 10px;
85 border-radius: 10px;
86 border: 1px solid var(--border);
87 color: var(--text);
88 opacity: 0.9;
89}
90.header-link:hover {
91 background: color-mix(in srgb, var(--codebg) 70%, transparent);
92 text-decoration: none;
93 opacity: 1;
94}
95
96.layout {
97 display: grid;
98 grid-template-columns: 280px 1fr;
99 gap: 16px;
100 padding: 16px;
101 flex: 1;
102}
103
104@media (max-width: 980px) {
105 .layout {
106 grid-template-columns: 1fr;
107 }
108 .sidebar {
109 position: relative;
110 top: auto;
111 max-height: none;
112 }
113}
114
115.sidebar {
116 position: sticky;
117 top: 64px;
118 align-self: start;
119 max-height: calc(100vh - 84px);
120 overflow: auto;
121 border: 1px solid var(--border);
122 border-radius: var(--radius);
123 background: var(--panel);
124 box-shadow: 0 12px 40px var(--shadow);
125}
126
127.nav {
128 padding: 8px;
129 display: flex;
130 flex-direction: column;
131 gap: 2px;
132}
133
134.nav a {
135 display: block;
136 padding: 8px 10px;
137 border-radius: 10px;
138 color: var(--text);
139 opacity: 0.9;
140}
141.nav a:hover {
142 background: color-mix(in srgb, var(--codebg) 70%, transparent);
143 text-decoration: none;
144}
145.nav a[aria-current="page"] {
146 background: color-mix(in srgb, var(--link) 14%, var(--codebg));
147 border: 1px solid color-mix(in srgb, var(--link) 20%, var(--border));
148}
149
150.main {
151 display: flex;
152 justify-content: center;
153}
154
155.content {
156 width: min(var(--max), 100%);
157 border: 1px solid var(--border);
158 border-radius: var(--radius);
159 background: var(--panel);
160 box-shadow: 0 12px 40px var(--shadow);
161 padding: 24px;
162}
163
164.site-footer {
165 display: flex;
166 justify-content: center;
167 padding: 12px 16px;
168 border-top: 1px solid var(--border);
169 background: var(--panel);
170}
171
172.footer-link {
173 font-size: 13px;
174 color: var(--muted);
175 padding: 6px 10px;
176 border-radius: 10px;
177 border: 1px solid transparent;
178}
179.footer-link:hover {
180 color: var(--text);
181 background: color-mix(in srgb, var(--codebg) 70%, transparent);
182 border-color: var(--border);
183 text-decoration: none;
184}
185
186.content h1,
187.content h2,
188.content h3 {
189 scroll-margin-top: 84px;
190}
191
192.content h1 {
193 margin-top: 0;
194 font-size: 34px;
195}
196
197.content p,
198.content li {
199 line-height: 1.6;
200}
201
202.content code {
203 font-family: var(--mono);
204 font-size: 0.95em;
205 background: var(--codebg);
206 padding: 2px 6px;
207 border-radius: 8px;
208}
209
210.content pre {
211 overflow: auto;
212 padding: 14px 16px;
213 border-radius: 12px;
214 background: var(--codebg);
215 border: 1px solid var(--border);
216}
217
218.content pre code {
219 background: transparent;
220 padding: 0;
221}
222
223.empty {
224 color: var(--muted);
225}