alice.pds.demo.boltless.dev
This repository has no description
1@import "@fontsource-variable/inter";
2@import "@fontsource/ibm-plex-mono/400.css";
3@import "@fontsource/ibm-plex-mono/600.css";
4
5/*
6 * starlight theme mapped onto the appview's palette (tailwind grays,
7 * slate-100/gray-900 body, monochrome accents). fonts prefer the
8 * appview's self-hosted files (/static/fonts, present in the nix
9 * build) and fall back to the fontsource copies in dev.
10 */
11:root {
12 --sl-font: "InterVariable", "Inter Variable", system-ui, sans-serif;
13 --sl-font-mono: "IBMPlexMono", "IBM Plex Mono", monospace;
14
15 /* the appview topbar sits directly on the body background */
16 --sl-color-bg-nav: var(--sl-color-black);
17 --sl-color-bg-sidebar: var(--sl-color-black);
18
19 /* dark — appview dark mode: bg-gray-900, white text */
20 --sl-color-white: #ffffff;
21 --sl-color-gray-1: #f3f4f6; /* gray-100 */
22 --sl-color-gray-2: #d1d5db; /* gray-300 */
23 --sl-color-gray-3: #9ca3af; /* gray-400 */
24 --sl-color-gray-4: #4b5563; /* gray-600 */
25 --sl-color-gray-5: #374151; /* gray-700 */
26 --sl-color-gray-6: #1f2937; /* gray-800 */
27 --sl-color-black: #111827; /* gray-900 */
28
29 --sl-color-accent-low: #374151; /* gray-700 */
30 --sl-color-accent: #6b7280; /* gray-500 */
31 --sl-color-accent-high: #d1d5db; /* gray-300 */
32}
33
34:root[data-theme="light"] {
35 /* light — white surfaces, black text */
36 --sl-color-white: #000000;
37 --sl-color-gray-1: #1f2937; /* gray-800 */
38 --sl-color-gray-2: #374151; /* gray-700 */
39 --sl-color-gray-3: #6b7280; /* gray-500 */
40 --sl-color-gray-4: #9ca3af; /* gray-400 */
41 --sl-color-gray-5: #d1d5db; /* gray-300 */
42 --sl-color-gray-6: #f3f4f6; /* gray-100 */
43 --sl-color-gray-7: #f9fafb; /* gray-50 */
44 --sl-color-black: #ffffff;
45
46 --sl-color-accent-low: #e5e7eb; /* gray-200 */
47 --sl-color-accent: #4b5563; /* gray-600 */
48 --sl-color-accent-high: #111827; /* gray-900 */
49}
50
51/* landing page */
52.feature-grid {
53 display: grid;
54 grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
55 gap: 1rem;
56 margin-top: 2rem;
57}
58
59.landing-section {
60 max-width: 46rem;
61 margin-top: 2rem;
62}
63
64/* hero tweaks for the landing page */
65[data-has-hero] .hero {
66 padding-block: 3rem;
67}
68
69/* ascii dolly in the hero (see scripts/gen-ascii-dolly.mjs) */
70.ascii-dolly {
71 font-family: var(--sl-font-mono);
72 font-size: 0.55rem;
73 line-height: 1.2;
74 color: var(--sl-color-white);
75 background: none;
76 border: none;
77 padding: 0;
78 margin: 0;
79 overflow: hidden;
80 user-select: none;
81}
82
83[data-has-hero] .hero h1 {
84 font-size: clamp(2rem, 5vw, 3.25rem);
85 letter-spacing: -0.02em;
86}