mitts 0.3.13

Rust-first build and package tooling with a shared artifact cache
Documentation 
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

/*
 * Mitts Build — static project site styles
 * Copyright (c) 2026 Alexander Panasenko
 *
 * Contact: alex@prod.codes
 * Author: https://prod.codes/about/
 * Project: https://github.com/alex09x/mitts
 * SPDX-License-Identifier: MIT OR Apache-2.0
 */

:root {
  color-scheme: dark;
  --bg: #121315;
  --panel: #1b1d20;
  --panel-2: #24272b;
  --ink: #f2f3f4;
  --muted: #9aa0a8;
  --line: #2e3136;
  --accent: #ff3b30;
  --hit: #c9ced4;
  --display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgb(255 59 48 / .10), transparent 60%) no-repeat,
    var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code, dt, .tag, .kicker, .num { font-family: var(--mono); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

.shell { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; }
.brand { display: flex; align-items: center; gap: 8px; font: 600 15px var(--mono); text-decoration: none; }
.brand .dim { color: var(--muted); }
.mark { width: 20px; height: 20px; display: block; }
.nav { display: flex; gap: 24px; font-size: 14px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 72px 0 96px; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hit); box-shadow: 0 0 0 4px rgb(201 206 212 / .18); }
h1 { font-size: clamp(48px, 7.4vw, 96px); font-weight: 800; line-height: .95; }
.accent { color: var(--accent); }
.lede { color: var(--muted); font-size: 19px; max-width: 34em; margin: 28px 0 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: #ffffff; font: 600 15px var(--sans); text-decoration: none; border-radius: 4px; transition: transform .15s; }
.button:hover { color: #ffffff; transform: translateY(-2px); }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button.ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }

/* ledger diagram */
.ledger { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; font-family: var(--mono); font-size: 13px; box-shadow: 0 30px 80px -30px #000; }
.ledger-head { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.ok { color: var(--hit); }
.ledger-rows { list-style: none; margin: 0; padding: 8px 0; }
.ledger-rows li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 7px 0; opacity: 0; animation: in .5s forwards; }
.ledger-rows li:nth-child(2) { animation-delay: .1s; } .ledger-rows li:nth-child(3) { animation-delay: .2s; }
.ledger-rows li:nth-child(4) { animation-delay: .3s; } .ledger-rows li:nth-child(5) { animation-delay: .4s; }
.ledger-rows span { color: var(--accent); }
.ledger-sum { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.ledger-sum code { color: var(--ink); }
.ledger-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding-top: 16px; }
.ledger-flow div { display: grid; gap: 4px; background: var(--panel-2); padding: 12px; border-radius: 4px; }
.ledger-flow small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.ledger-flow em { font-style: normal; color: var(--hit); font-size: 11px; }
.arrow { color: var(--accent); font-size: 18px; }
@keyframes in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ledger-rows li { animation: none; opacity: 1; } }

/* sections */
.section { padding: 88px 0; border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: 48px; }
.num { color: var(--accent); font-size: 13px; letter-spacing: .08em; }
.num::after { content: " /"; color: var(--line); }
h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.05; }
.section-head p { color: var(--muted); max-width: 44em; margin: 14px 0 0; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; transition: border-color .2s; }
.card:hover { border-color: var(--accent); }
.tag { display: inline-block; color: var(--hit); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.checklist li { display: flex; gap: 16px; align-items: baseline; background: var(--panel); padding: 18px 22px; }
.checklist li::before { font: 600 13px var(--mono); flex: none; width: 40px; }
.checklist .yes::before { content: "HIT"; color: var(--hit); }
.checklist .no::before { content: "SKIP"; color: var(--accent); }
.checklist .no { color: var(--muted); }
.note { font: 500 clamp(18px, 1.9vw, 22px)/1.4 var(--display); margin: 0; padding-left: 24px; border-left: 2px solid var(--accent); }

.cli { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cli div { background: var(--panel); padding: 22px 24px; display: grid; align-content: start; gap: 6px; }
.cli dt { color: var(--ink); font-weight: 600; }
.cli dt::before { content: "$ "; color: var(--accent); }
.cli dd { margin: 0; color: var(--muted); font-size: 15px; }

.milestones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.milestones li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 18px 20px; border-left: 3px solid var(--hit); border-radius: 0 6px 6px 0; background: var(--panel); font-size: 15px; color: var(--muted); }
.milestones b { font: 700 20px var(--display); color: var(--ink); }
.milestones li::after { grid-column: 2; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--hit); content: "done"; }
.milestones .wip::after { content: "in progress"; color: var(--accent); }
.milestones .plan::after { content: "planned"; color: var(--muted); }
.milestones .wip { border-left-color: var(--accent); }
.milestones .plan { border-left-color: var(--line); }
.checklist code { font-size: 14px; color: var(--ink); }

.lede code, .section-head p code, .card p code { font-size: .92em; color: var(--ink); }

/* problem */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid4 h3 { font-size: 20px; }
.workarounds { margin-top: 48px; }
.checklist b { color: var(--ink); font-weight: 500; }

/* pipeline */
.pipeline { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; counter-reset: step; }
.pipeline li { background: var(--panel); padding: 22px 20px; display: grid; align-content: start; gap: 10px; counter-increment: step; }
.pipeline b { font: 600 15px var(--mono); color: var(--ink); }
.pipeline b::before { content: counter(step, decimal-leading-zero) " "; color: var(--accent); }
.pipeline span { color: var(--muted); font-size: 15px; }
.pipeline code { color: var(--ink); font-size: 13px; }

/* architecture */
.arch { display: grid; gap: 12px; font-family: var(--mono); font-size: 13px; margin-bottom: 40px; }
.arch-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.arch-layer { display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.arch-layer small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.arch-layer code { color: var(--ink); line-height: 1.7; }
.arch-layer.accent-edge { border-left: 3px solid var(--accent); }
.arch-layer.dim-edge { border-style: dashed; }
.arch-layer.core { background: var(--panel-2); border-left: 3px solid var(--hit); }
.arch-arrow { color: var(--accent); text-align: center; font-size: 12px; letter-spacing: .08em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 500; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--panel); }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table th { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--panel-2); }
.table td { color: var(--muted); }
.table td:first-child { color: var(--ink); }
.table code { font-size: 13px; color: var(--ink); }
.table { table-layout: fixed; }
.inputs-table col.c1 { width: 24%; }
.compare col.c1 { width: 32%; } .compare col.c2 { width: 19%; } .compare col.c3 { width: 21%; } .compare col.c4 { width: 28%; }
.compare { min-width: 720px; }
.table-wrap .inputs-table { min-width: 560px; }
.compare .hl { color: var(--ink); background: rgb(255 59 48 / .06); }
.compare th.hl { color: var(--accent); }
.aside { color: var(--muted); max-width: 46em; margin: 24px 0 0; }

/* terminal */
.term { margin: 0 0 24px; padding: 20px 24px; background: #0c0d0e; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font: 14px/1.7 var(--mono); }
.term .p { color: var(--accent); }
.term .c { color: var(--muted); }
.cli dd code { font-size: 13px; color: var(--ink); }

.author { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding: 72px 0; border-top: 1px solid var(--line); }
.author p { display: flex; gap: 24px; margin: 0; font-family: var(--mono); font-size: 14px; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0; }
footer a { color: var(--muted); }

@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .grid3, .cli, .facts, .arch-row { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: 1fr; }
  .milestones { grid-template-columns: 1fr; }
  .nav { display: none; }
}

@media (max-width: 560px) {
  .grid4 { grid-template-columns: 1fr; }
  .table th, .table td { padding: 12px 14px; }
}

@media (max-width: 700px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .table, .table-wrap .inputs-table, .compare { min-width: 0; table-layout: auto; background: none; }
  .table colgroup, .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table tr { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
  .table td { border: 0; padding: 4px 0; }
  .table td:first-child { font-weight: 500; padding-bottom: 8px; }
  .compare td[data-label] { position: relative; padding-left: 138px; }
  .compare td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 4px; width: 128px; font: 600 11px/2.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .compare td.hl { background: none; color: var(--ink); }
  .compare td.hl::before { color: var(--accent); }
}