Monorepo for Aesthetic.Computer
aesthetic.computer
platter: multi-column dense layout on wide screens
Flow .section-items into CSS multi-column at >= 900px viewports:
2 cols at 900px, 3 at 1300px, 4 at 1800px, 5 at 2400px. Keep each
.item-group and .item-dual together in a single column via
break-inside: avoid so a group's label never separates from its
items.
Tighten row padding (0.35em → 0.22em) and body padding so the page
reads as a denser index. Section headers get an underline separator
to stay distinct now that the adjacent content has less vertical air.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+47
-11
+47
-11
system/public/papers.aesthetic.computer/platter.html
+47
-11
system/public/papers.aesthetic.computer/platter.html
···
65
65
color: var(--text);
66
66
font-family: 'Berkeley Mono Variable', 'Menlo', monospace;
67
67
font-size: 13px;
68
-
line-height: 1.6;
68
+
line-height: 1.55;
69
69
-webkit-text-size-adjust: none;
70
70
cursor: url('https://aesthetic.computer/aesthetic.computer/cursors/precise.svg') 12 12, auto;
71
-
padding: 2em;
71
+
padding: 1.4em 1.6em 2em;
72
72
min-height: 100vh;
73
+
}
74
+
@media (min-width: 1200px) {
75
+
body { padding: 1.4em 2em 3em; }
73
76
}
74
77
75
78
.header { margin-bottom: 2em; }
···
117
120
.search-bar input::placeholder { color: var(--dim); }
118
121
119
122
.section {
120
-
margin-bottom: 2em;
123
+
margin-bottom: 1.5em;
121
124
}
122
125
123
126
.section-header {
124
127
display: flex;
125
128
align-items: center;
126
129
gap: 0.6em;
127
-
margin-bottom: 0.8em;
130
+
margin-bottom: 0.4em;
128
131
cursor: pointer;
129
132
user-select: none;
133
+
padding-bottom: 0.3em;
134
+
border-bottom: 1px solid var(--box-border);
130
135
}
131
136
132
137
.section-header h2 {
···
158
163
.section-items { }
159
164
.section-items.hidden { display: none; }
160
165
166
+
/* Multi-column item flow on wider viewports — scales with screen width.
167
+
.item-group and each item have break-inside:avoid so a group or row
168
+
never splits across a column boundary. */
169
+
@media (min-width: 900px) {
170
+
.section-items {
171
+
column-count: 2;
172
+
column-gap: 1.6em;
173
+
}
174
+
}
175
+
@media (min-width: 1300px) {
176
+
.section-items { column-count: 3; }
177
+
}
178
+
@media (min-width: 1800px) {
179
+
.section-items { column-count: 4; }
180
+
}
181
+
@media (min-width: 2400px) {
182
+
.section-items { column-count: 5; }
183
+
}
184
+
.section-items .item,
185
+
.section-items .item-dual,
186
+
.section-items .item-group {
187
+
break-inside: avoid;
188
+
-webkit-column-break-inside: avoid;
189
+
page-break-inside: avoid;
190
+
}
191
+
161
192
.item {
162
193
display: block;
163
-
padding: 0.35em 0.8em;
194
+
padding: 0.22em 0.7em;
164
195
text-decoration: none;
165
196
color: var(--text);
166
197
border-radius: 4px;
···
174
205
.item .file { color: var(--dim); margin-right: 0.5em; font-size: 0.85em; }
175
206
176
207
.item-group {
177
-
margin-bottom: 1em;
208
+
margin-bottom: 0.8em;
209
+
/* Keep the whole group together when columnizing */
178
210
}
179
211
180
212
.item-group-label {
181
213
color: var(--dim);
182
-
font-size: 0.75em;
214
+
font-size: 0.72em;
183
215
text-transform: uppercase;
184
216
letter-spacing: 0.08em;
185
-
padding: 0.3em 0.8em;
217
+
padding: 0.25em 0.7em;
218
+
/* Stick the label to the items following it */
219
+
break-after: avoid;
220
+
-webkit-column-break-after: avoid;
221
+
page-break-after: avoid;
186
222
}
187
223
188
224
.footer {
···
248
284
.item-dual {
249
285
display: flex;
250
286
align-items: center;
251
-
padding: 0.35em 0.8em;
287
+
padding: 0.22em 0.7em;
252
288
text-decoration: none;
253
289
color: var(--text);
254
290
border-radius: 4px;
255
291
transition: background 0.1s;
256
-
gap: 0.5em;
292
+
gap: 0.4em;
257
293
}
258
294
.item-dual:hover { background: var(--box-bg); }
259
295
.item-dual .file { color: var(--dim); font-size: 0.85em; flex-shrink: 0; }
260
-
.item-dual .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
296
+
.item-dual .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
261
297
262
298
.no-results {
263
299
color: var(--dim);