/ concept-collection / fastandaccurate
Sign in
concept-collection / fastandaccurate
fastandaccurate / src / app / styles.css
296 lines · 4.7 KBCodeBlameHistory
5127df5fastandaccurate: PDE solver benchmarks, laplace-dirichlet-2d with MFS and Nystrom DLP solversJeremy Magland 1/* Design tokens. The series and ramp values are the validated reference
2 * palette from the dataviz method; series slots are assigned to solvers
3 * in fixed registry order and never cycled. */
5:root {
6 color-scheme: light;
7 --surface: #fcfcfb;
8 --surface-2: #f4f3f0;
9 --text: #0b0b0b;
10 --text-2: #52514e;
11 --text-3: #767570;
12 --border: #dcdbd6;
13 --grid: #eceae6;
14 --link: #1c5cab;
15 --series-1: #2a78d6;
16 --series-2: #eb6834;
17 --series-3: #1baf7a;
18 --series-4: #eda100;
19 --series-5: #e87ba4;
20 --accent: #2a78d6;
23@media (prefers-color-scheme: dark) {
24 :root {
25 color-scheme: dark;
26 --surface: #1a1a19;
27 --surface-2: #232322;
28 --text: #ffffff;
29 --text-2: #c3c2b7;
30 --text-3: #8f8e86;
31 --border: #3a3a37;
32 --grid: #2c2c2a;
33 --link: #86b6ef;
34 --series-1: #3987e5;
35 --series-2: #d95926;
36 --series-3: #199e70;
37 --series-4: #c98500;
38 --series-5: #d55181;
39 --accent: #3987e5;
40 }
43* {
44 box-sizing: border-box;
47body {
48 margin: 0;
49 background: var(--surface);
50 color: var(--text);
51 font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
52 font-size: 15px;
53 line-height: 1.55;
56main {
57 max-width: 1100px;
58 margin: 0 auto;
59 padding: 0 20px 80px;
62a {
63 color: var(--link);
66h1 {
67 font-size: 1.7rem;
68 font-weight: 650;
69 margin: 1.6rem 0 0.2rem;
72h2 {
73 font-size: 1.25rem;
74 font-weight: 650;
75 margin: 2.6rem 0 0.6rem;
76 padding-top: 1.2rem;
77 border-top: 1px solid var(--border);
80h3 {
81 font-size: 1.02rem;
82 font-weight: 650;
83 margin: 1.4rem 0 0.4rem;
86p {
87 margin: 0.5rem 0;
88 max-width: 72ch;
91.subtitle {
92 color: var(--text-2);
93 margin-top: 0;
96code,
97pre {
98 font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
99 font-size: 0.88em;
102pre {
103 background: var(--surface-2);
104 border: 1px solid var(--border);
105 border-radius: 6px;
106 padding: 10px 14px;
107 overflow-x: auto;
110.muted {
111 color: var(--text-2);
114.small {
115 font-size: 0.85rem;
118.row {
119 display: flex;
120 flex-wrap: wrap;
121 gap: 20px;
122 align-items: flex-start;
125.panel {
126 border: 1px solid var(--border);
127 border-radius: 8px;
128 padding: 14px 16px;
129 background: var(--surface);
132button {
133 font: inherit;
134 font-size: 0.9rem;
135 padding: 5px 14px;
136 border: 1px solid var(--border);
137 border-radius: 6px;
138 background: var(--surface-2);
139 color: var(--text);
140 cursor: pointer;
143button:hover:not(:disabled) {
144 border-color: var(--text-3);
147button:disabled {
148 opacity: 0.5;
149 cursor: default;
152button.primary {
153 background: var(--accent);
154 border-color: var(--accent);
155 color: #ffffff;
158select,
159input[type="text"] {
160 font: inherit;
161 font-size: 0.9rem;
162 padding: 4px 8px;
163 border: 1px solid var(--border);
164 border-radius: 6px;
165 background: var(--surface);
166 color: var(--text);
169label {
170 font-size: 0.9rem;
173table.data {
174 border-collapse: collapse;
175 font-size: 0.85rem;
176 font-variant-numeric: tabular-nums;
179table.data th,
180table.data td {
181 border: 1px solid var(--border);
182 padding: 3px 10px;
183 text-align: right;
186table.data th {
187 background: var(--surface-2);
188 font-weight: 600;
191table.data td.left,
192table.data th.left {
193 text-align: left;
196.legend-swatch {
197 display: inline-block;
198 width: 14px;
199 height: 3px;
200 border-radius: 2px;
201 vertical-align: middle;
202 margin-right: 6px;
205.chart-tooltip {
206 position: absolute;
207 pointer-events: none;
208 background: var(--surface);
209 border: 1px solid var(--border);
210 border-radius: 6px;
211 padding: 6px 10px;
212 font-size: 0.8rem;
213 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
214 z-index: 10;
215 white-space: nowrap;
218.field-caption {
219 font-size: 0.85rem;
220 color: var(--text-2);
221 margin-top: 4px;
224footer {
225 margin-top: 4rem;
226 padding-top: 1rem;
227 border-top: 1px solid var(--border);
228 color: var(--text-3);
229 font-size: 0.85rem;
232.topnav {
233 padding-top: 1.1rem;
234 font-size: 0.9rem;
237.topnav a {
238 color: var(--text-2);
239 text-decoration: none;
240 font-weight: 600;
243.topnav a:hover {
244 color: var(--text);
247.problem-list {
248 display: flex;
249 flex-direction: column;
250 gap: 12px;
251 max-width: 720px;
254.problem-card {
255 display: block;
256 border: 1px solid var(--border);
257 border-radius: 8px;
258 padding: 14px 18px;
259 text-decoration: none;
260 color: var(--text);
261 background: var(--surface);
264.problem-card:hover {
265 border-color: var(--text-3);
268.problem-card-title {
269 display: flex;
270 align-items: center;
271 gap: 10px;
272 font-size: 1.02rem;
273 font-weight: 650;
276.problem-card-summary {
277 color: var(--text-2);
278 margin-top: 4px;
279 font-size: 0.92rem;
282.problem-card-meta {
283 color: var(--text-3);
284 margin-top: 6px;
285 font-size: 0.82rem;
288.badge {
289 font-size: 0.72rem;
290 font-weight: 600;
291 color: var(--text-2);
292 border: 1px solid var(--border);
293 border-radius: 4px;
294 padding: 1px 6px;
295 background: var(--surface-2);
moveopenescclose