1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* Tally's stylesheet: type and space steps are Utopia's defaults (18px
at a 320px viewport with a 1.2 ratio, up to 20px at 1240px with a
1.25 ratio). System fonts only, so screenshots don't wait on a
network. */
:root {
--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
--step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
--bg: #f7f5f0;
--surface: #ffffff;
--text: #1f1d1a;
--muted: #6b665e;
--border: #e2ddd3;
--accent: #2f6f4f;
--accent-text: #ffffff;
--flash: #e3f1e8;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #181715;
--surface: #23211e;
--text: #ece8e1;
--muted: #a39d93;
--border: #3a3732;
--accent: #7cc49b;
--accent-text: #10251a;
--flash: #1f3a2b;
}
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: var(--step-0)/1.5 system-ui, sans-serif;
}
a { color: inherit; }
.masthead {
padding: var(--space-s) var(--space-m);
border-bottom: 1px solid var(--border);
}
.masthead h1 { margin: 0; font-size: var(--step-2); letter-spacing: -0.02em; }
.masthead a { text-decoration: none; }
main { max-width: 64rem; margin: 0 auto; padding: var(--space-m); }
h2 { font-size: var(--step-1); margin: 0 0 var(--space-xs); }
.flash-bar {
margin: 0 0 var(--space-m);
padding: var(--space-xs) var(--space-s);
background: var(--flash);
border-radius: 0.5rem;
}
.dashboard { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: flex-start; }
.item-list { flex: 999 1 28rem; }
.summary { flex: 1 1 14rem; }
.item-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.item {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-s);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5rem;
}
.item > a { flex: 1; text-decoration: none; }
.item.done > a { color: var(--muted); text-decoration: line-through; }
.tag {
font-size: var(--step--1);
color: var(--muted);
}
.complete-btn {
font: inherit;
font-size: var(--step--1);
padding: 0.25em 0.75em;
border: 1px solid var(--accent);
border-radius: 999px;
background: var(--accent);
color: var(--accent-text);
cursor: pointer;
}
.item.done .complete-btn { background: transparent; color: var(--accent); }
.summary, .item-detail {
padding: var(--space-s);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5rem;
}
dl { margin: 0; display: grid; gap: var(--space-2xs); }
dl > div { display: flex; justify-content: space-between; gap: var(--space-s); }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 600; }
.item-detail dl { margin-bottom: var(--space-s); }
.empty { color: var(--muted); font-style: italic; }