davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import { html } from './components.ts'
2
3export const BaseStyles = html`
4 <style>
5 :root {
6 /** Fonts */
7 --ln-font-fallback:
8 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
9 Segoe UI Emoji;
10 --ln-font-body: 'Geist', var(--ln-font-fallback);
11 --ln-font-mono: 'Geist Mono', monospace;
12
13 /* Light theme colors */
14 --ln-color-white: #f9fafb;
15 --ln-color-gray-1: #f3f4f6;
16 --ln-color-gray-2: #e5e7eb;
17 --ln-color-gray-3: #d1d5db;
18 --ln-color-gray-4: #9ca3af;
19 --ln-color-gray-5: #6b7280;
20 --ln-color-gray-6: #4b5563;
21 --ln-color-gray-7: #374151;
22 --ln-color-black: #030712;
23 --ln-color-blue: #3b82f6;
24 --ln-color-orange: #f97316;
25 --ln-color-purple: #a855f7;
26
27 /** Contextual colors */
28 --ln-color-background: var(--ln-color-white);
29 --ln-color-link: var(--ln-color-blue);
30 --ln-color-done: var(--ln-color-purple);
31 --ln-color-outdated: var(--ln-color-orange);
32 --ln-color-missing: var(--ln-color-black);
33 --ln-color-table-border: var(--ln-color-gray-3);
34 --ln-color-table-background: var(--ln-color-gray-1);
35 }
36
37 @media (prefers-color-scheme: dark) {
38 :root {
39 /* Dark theme colors */
40 --ln-color-white: #030712;
41 --ln-color-gray-1: #374151;
42 --ln-color-gray-2: #4b5563;
43 --ln-color-gray-3: #6b7280;
44 --ln-color-gray-4: #9ca3af;
45 --ln-color-gray-5: #d1d5db;
46 --ln-color-gray-6: #e5e7eb;
47 --ln-color-gray-7: #f3f4f6;
48 --ln-color-black: #f9fafb;
49 --ln-color-blue: #60a5fa;
50 --ln-color-orange: #fb923c;
51 --ln-color-purple: #c084fc;
52 }
53 }
54
55 * {
56 box-sizing: border-box;
57 margin: 0;
58 }
59
60 html {
61 background: var(--ln-color-background);
62 scrollbar-gutter: stable;
63 }
64
65 body {
66 color: var(--ln-color-black);
67 display: flex;
68 flex-direction: column;
69 font-family: var(--ln-font-body);
70 font-size: 16px;
71 line-height: 1.5;
72 margin-block: 2rem;
73 margin-inline: 1rem;
74 }
75
76 h1,
77 h2,
78 h3,
79 h4,
80 h5,
81 h6 {
82 margin-bottom: 1rem;
83 font-family: var(--ln-font-mono);
84 font-weight: bold;
85 letter-spacing: -0.025em;
86 line-height: 1.3;
87 }
88
89 h1,
90 h2 {
91 max-width: 40ch;
92 }
93
94 h1 {
95 font-size: 2.25rem;
96 font-weight: 900;
97 }
98
99 h2 {
100 font-size: 1.875rem;
101 margin-top: 4rem;
102 }
103
104 h3,
105 h4 {
106 margin-top: 3rem;
107 }
108
109 h5,
110 h6 {
111 margin-top: 2rem;
112 }
113
114 main {
115 max-width: 60ch;
116 margin-inline: auto;
117 }
118
119 p + p {
120 margin-top: 1.25rem;
121 }
122
123 a {
124 color: var(--ln-color-link);
125 text-decoration: none;
126 }
127
128 h2 a {
129 color: inherit;
130 }
131
132 a:hover {
133 text-decoration: underline;
134 }
135
136 ul {
137 font-size: 0.875rem;
138 }
139
140 .progress-details {
141 margin-bottom: 1.25rem;
142 }
143
144 details summary {
145 cursor: pointer;
146 user-select: none;
147 }
148
149 details summary:hover strong,
150 details summary:hover::marker {
151 color: var(--ln-color-gray-5);
152 }
153
154 details p {
155 margin-top: 1.2rem;
156 }
157
158 details h3 {
159 margin-top: 1.2rem;
160 font-size: 0.8rem;
161 }
162
163 details h4 {
164 margin-top: 1rem;
165 font-size: 0.8rem;
166 }
167
168 details > :last-child {
169 margin-bottom: 1rem;
170 }
171
172 .create-button {
173 padding: 0.1em 0.5em;
174 font-weight: bold;
175 font-size: 0.75rem;
176 }
177
178 .status-by-file {
179 margin-bottom: 1rem;
180 border-collapse: collapse;
181 border: 1px solid var(--ln-color-table-border);
182 font-size: 0.8125rem;
183 column-gap: 64px;
184 }
185
186 .status-by-file tr:first-of-type td {
187 padding-top: 0.5rem;
188 }
189
190 .status-by-file tr:last-of-type td {
191 padding-bottom: 0.5rem;
192 }
193
194 .status-by-file tr td:first-of-type {
195 padding-inline: 1rem;
196 }
197
198 .status-by-file th {
199 border-bottom: 1px solid var(--ln-color-table-border);
200 background: var(--ln-color-table-background);
201 position: sticky;
202 top: -1px;
203 white-space: nowrap;
204 padding-inline: 0.3rem;
205 }
206
207 .status-by-file th,
208 .status-by-file td {
209 padding-block: 0.2rem;
210 }
211
212 .status-by-file tbody tr:hover td {
213 background: var(--ln-color-table-background);
214 }
215
216 .status-by-file th:first-of-type,
217 .status-by-file td:first-of-type {
218 text-align: left;
219 padding-inline-start: 1rem;
220 }
221
222 .status-by-file th:last-of-type,
223 .status-by-file td:last-of-type {
224 text-align: center;
225 padding-inline-end: 1rem;
226 }
227
228 .status-by-file td:not(:first-of-type) {
229 min-width: 2rem;
230 text-align: center;
231 cursor: default;
232 }
233
234 .status-by-file td:not(:first-of-type) a {
235 text-decoration: none;
236 }
237
238 .progress-summary {
239 font-size: 0.8125rem;
240 }
241
242 .progress-bar {
243 display: flex;
244 flex-direction: row;
245 margin-top: 0.5rem;
246 }
247
248 .progress-bar div:first-of-type {
249 border-radius: 36px 0px 0px 36px;
250 }
251
252 .progress-bar div:last-of-type {
253 border-radius: 0px 36px 36px 0px;
254 }
255
256 .up-to-date-bar,
257 .outdated-bar,
258 .missing-bar {
259 width: 1rem;
260 height: 1rem;
261 }
262
263 .up-to-date-bar {
264 background-color: var(--ln-color-done);
265 }
266
267 .outdated-bar {
268 background-color: var(--ln-color-outdated);
269 }
270
271 .missing-bar {
272 background-color: var(--ln-color-missing);
273 }
274
275 .capitalize {
276 text-transform: capitalize;
277 }
278 </style>
279`
280
281export const CustomStyles = html`
282 <style>
283 :root {
284 --theme-navbar-height: 6rem;
285 --theme-mobile-toc-height: 4rem;
286 --theme-accent-secondary: hsla(22, 100%, 60%, 1);
287
288 --fg: oklch(98.5% 0 0);
289 --fg-muted: oklch(70.9% 0 0);
290 --bg: oklch(14.5% 0 0);
291 --bg-subtle: oklch(17.8% 0 0);
292 --border: oklch(26.9% 0 0);
293 --border-subtle: oklch(23.9% 0 0);
294 --border-hover: oklch(37.1% 0 0);
295
296 --ln-color-link: #539bf5;
297 --ln-color-table-background: var(--bg-subtle);
298 --ln-color-table-border: var(--border);
299 --ln-color-background: var(--theme-bg-gradient);
300 --ln-color-black: var(--theme-text);
301 --ln-color-missing: var(--ln-color-black);
302 --ln-color-outdated: #fb923c;
303 --ln-color-done: #c084fc;
304 }
305
306 html {
307 background-color: var(--bg);
308 }
309
310 h1,
311 h2,
312 h3,
313 h4,
314 h5 {
315 color: var(--fg);
316 font-weight: 500;
317 }
318
319 .progress-summary {
320 color: var(--fg-muted);
321 }
322
323 p {
324 color: var(--fg-muted);
325 }
326
327 p a {
328 color: var(--fg);
329 text-decoration: underline;
330 }
331
332 .status-by-file a,
333 .progress-details a {
334 color: var(--fg);
335 }
336
337 .create-button {
338 background-color: hsl(213deg 89% 64% / 20%);
339 border-radius: 0.5em;
340 }
341 </style>
342`