Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/app.css

140 lines2,967 bytesCodeBlame
1@import "tailwindcss" source(".");
2
3@theme {
4 --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
5 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6 --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
7 monospace;
8
9 /* Warm near-black, three elevations. */
10 --color-bg: #0e0d0a;
11 --color-surface: #16150f;
12 --color-raised: #1e1c15;
13 --color-line: #2a2820;
14 --color-line-strong: #3a372d;
15
16 --color-fg: #f0eee6;
17 --color-muted: #a09c8f;
18 --color-faint: #6e6a5e;
19
20 --color-accent: #b6f24a;
21 --color-accent-dim: #7fae2c;
22
23 /* Status colours, used sparingly. */
24 --color-info: #7cc4ff;
25 --color-shipped: #b9a2ff;
26 --color-warn: #f2c14a;
27 --color-danger: #ff7a6b;
28
29 --animate-fade-up: fade-up 0.6s ease-out both;
30 --animate-dash: dash 1.2s linear infinite;
31}
32
33@keyframes fade-up {
34 from {
35 opacity: 0;
36 transform: translateY(8px);
37 }
38}
39
40@keyframes dash {
41 to {
42 stroke-dashoffset: -16;
43 }
44}
45
46html {
47 color-scheme: dark;
48 scroll-behavior: smooth;
49}
50
51body {
52 @apply bg-bg font-sans text-fg antialiased;
53 font-feature-settings: "cv11", "ss01";
54}
55
56::selection {
57 background: color-mix(in srgb, var(--color-accent) 35%, transparent);
58}
59
60:focus-visible {
61 outline: 2px solid var(--color-accent);
62 outline-offset: 2px;
63}
64
65@media (prefers-reduced-motion: reduce) {
66 *,
67 *::before,
68 *::after {
69 animation: none !important;
70 scroll-behavior: auto !important;
71 }
72}
73
74/* Rendered markdown: READMEs, briefs and docs. */
75.prose {
76 @apply leading-7 text-fg;
77}
78.prose > * + * {
79 @apply mt-4;
80}
81.prose h1 {
82 @apply mt-0 text-3xl font-semibold tracking-tight;
83}
84.prose h2 {
85 @apply mt-10 border-b border-line pb-2 text-xl font-semibold tracking-tight;
86}
87.prose h3 {
88 @apply mt-8 text-base font-semibold;
89}
90.prose p,
91.prose li {
92 @apply text-[0.9375rem] text-fg/90;
93}
94.prose a {
95 @apply text-accent underline decoration-accent/40 underline-offset-4 hover:decoration-accent;
96}
97.prose ul {
98 @apply list-disc space-y-1.5 pl-6;
99}
100.prose ol {
101 @apply list-decimal space-y-1.5 pl-6;
102}
103.prose code {
104 @apply rounded bg-raised px-1.5 py-0.5 font-mono text-[0.85em];
105}
106.prose pre {
107 @apply overflow-x-auto rounded-lg border border-line bg-surface p-4 font-mono text-sm leading-6;
108}
109.prose pre code {
110 @apply bg-transparent p-0;
111}
112.prose blockquote {
113 @apply border-l-2 border-line-strong pl-4 text-muted;
114}
115.prose table {
116 @apply w-full border-collapse text-sm;
117}
118.prose th {
119 @apply border-b border-line-strong px-3 py-2 text-left font-medium text-muted;
120}
121.prose td {
122 @apply border-b border-line px-3 py-2 align-top;
123}
124.prose hr {
125 @apply border-line;
126}
127
128/* Syntax-highlighted code from Shiki. */
129.shiki {
130 @apply bg-transparent! font-mono text-sm leading-6;
131}
132.shiki code {
133 counter-reset: line;
134 display: block;
135}
136.shiki .line::before {
137 counter-increment: line;
138 content: counter(line);
139 @apply mr-5 inline-block w-10 text-right text-faint select-none;
140}