jon.recoil.org
Testing of the @doc-json output
fix(odoc-docsite): tighten sidebar styling and add missing badge colors
Improve sidebar density and polish: reduce padding/font-size for ~2x
more visible items, add leaf-page/class/library badge backgrounds,
switch active item from solid blue pill to subtle tinted highlight,
add thin scrollbar, reduce nesting indentation, and style non-link
library labels as muted text.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+73
-34
src/odoc_docsite_css.ml
+73
-34
src/odoc_docsite_css.ml
···
253
253
background: var(--sidebar-bg);
254
254
border-right: 1px solid var(--border-color);
255
255
overflow-y: auto;
256
-
padding: 16px 0;
256
+
padding: 8px 0;
257
257
z-index: 50;
258
+
scrollbar-width: thin;
259
+
scrollbar-color: var(--border-color) transparent;
260
+
}
261
+
262
+
.docsite-sidebar::-webkit-scrollbar {
263
+
width: 6px;
264
+
}
265
+
266
+
.docsite-sidebar::-webkit-scrollbar-track {
267
+
background: transparent;
268
+
}
269
+
270
+
.docsite-sidebar::-webkit-scrollbar-thumb {
271
+
background: var(--border-color);
272
+
border-radius: 3px;
273
+
}
274
+
275
+
.docsite-sidebar::-webkit-scrollbar-thumb:hover {
276
+
background: var(--text-muted);
258
277
}
259
278
260
279
.sidebar-nav {
261
-
padding: 0 12px;
280
+
padding: 0 8px;
262
281
}
263
282
264
283
.sidebar-section {
265
-
margin-bottom: 8px;
284
+
margin-bottom: 4px;
266
285
}
267
286
268
287
.sidebar-link {
269
288
display: block;
270
-
padding: 6px 12px;
289
+
padding: 3px 8px;
271
290
color: var(--text-color);
272
291
text-decoration: none;
273
-
border-radius: 4px;
274
-
font-size: 14px;
292
+
border-radius: 3px;
293
+
font-size: 13px;
294
+
line-height: 1.4;
275
295
}
276
296
277
297
.sidebar-link:hover:not(.active) {
···
279
299
}
280
300
281
301
.sidebar-link.active {
282
-
background: var(--link-color);
283
-
color: #fff;
284
-
font-weight: 500;
302
+
background: var(--highlight-bg);
303
+
color: var(--link-color);
304
+
font-weight: 600;
285
305
}
286
306
287
307
.sidebar-group {
···
291
311
.sidebar-group-header {
292
312
display: flex;
293
313
align-items: center;
294
-
padding: 6px 12px;
314
+
padding: 3px 8px;
295
315
cursor: pointer;
296
-
font-size: 14px;
316
+
font-size: 13px;
297
317
font-weight: 500;
298
318
color: var(--text-color);
299
-
border-radius: 4px;
319
+
border-radius: 3px;
300
320
user-select: none;
301
321
}
302
322
···
305
325
}
306
326
307
327
.sidebar-toggle {
308
-
width: 16px;
309
-
height: 16px;
310
-
margin-right: 6px;
328
+
width: 14px;
329
+
height: 14px;
330
+
margin-right: 4px;
331
+
flex-shrink: 0;
311
332
transition: transform 0.2s;
312
333
}
313
334
314
335
.sidebar-toggle-spacer {
315
336
display: inline-block;
316
-
width: 16px;
317
-
height: 16px;
318
-
margin-left: 12px;
319
-
margin-right: 6px;
337
+
width: 14px;
338
+
height: 14px;
339
+
margin-right: 4px;
320
340
flex-shrink: 0;
321
341
}
322
342
···
327
347
328
348
/* Package selector */
329
349
.package-selector {
330
-
padding: 12px;
350
+
padding: 8px;
331
351
border-bottom: 1px solid var(--border-color);
332
-
margin-bottom: 8px;
352
+
margin-bottom: 4px;
333
353
}
334
354
335
355
.package-selector select {
336
356
width: 100%;
337
-
padding: 8px 12px;
338
-
font-size: 14px;
357
+
padding: 6px 10px;
358
+
font-size: 13px;
339
359
font-weight: 500;
340
360
border: 1px solid var(--border-color);
341
361
border-radius: 6px;
···
345
365
appearance: none;
346
366
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
347
367
background-repeat: no-repeat;
348
-
background-position: right 12px center;
349
-
padding-right: 36px;
368
+
background-position: right 10px center;
369
+
padding-right: 32px;
350
370
}
351
371
352
372
.package-selector select:hover {
···
368
388
}
369
389
370
390
.sidebar-children {
371
-
margin-left: 12px;
391
+
margin-left: 8px;
372
392
border-left: 1px solid var(--border-color);
373
-
padding-left: 8px;
393
+
padding-left: 4px;
374
394
}
375
395
376
396
/* Sidebar entry type indicators */
···
378
398
display: inline-flex;
379
399
align-items: center;
380
400
justify-content: center;
381
-
width: 18px;
382
-
height: 18px;
383
-
margin-right: 6px;
401
+
width: 16px;
402
+
height: 16px;
403
+
margin-right: 5px;
384
404
border-radius: 3px;
385
-
font-size: 10px;
386
-
font-weight: 600;
405
+
font-size: 9px;
406
+
font-weight: 700;
387
407
flex-shrink: 0;
388
408
}
389
409
···
402
422
color: white;
403
423
}
404
424
425
+
.sidebar-kind-leaf-page {
426
+
background: #57606a;
427
+
color: white;
428
+
}
429
+
430
+
.sidebar-kind-class,
431
+
.sidebar-kind-class-type {
432
+
background: #0550ae;
433
+
color: white;
434
+
}
435
+
436
+
.sidebar-kind-library {
437
+
background: #6e7781;
438
+
color: white;
439
+
}
440
+
405
441
.sidebar-group-header .sidebar-kind {
406
442
margin-left: 0;
407
443
}
···
410
446
margin-left: 0;
411
447
}
412
448
413
-
.sidebar-link.active .sidebar-kind {
414
-
background: rgba(255, 255, 255, 0.3);
449
+
/* Non-link labels in sidebar (e.g. library headings) */
450
+
.sidebar-label {
451
+
color: var(--text-muted);
452
+
font-size: 13px;
453
+
line-height: 1.4;
415
454
}
416
455
417
456
/* Main Content */
+1
-1
src/odoc_docsite_js.ml
+1
-1
src/odoc_docsite_js.ml
···
56
56
var childrenHtml = entry.children.map(function(c) { return renderSidebarEntry(c); }).join('');
57
57
var linkHtml = node.url
58
58
? '<a class="sidebar-link' + (isActive ? ' active' : '') + '" href="' + BASE_URL + node.url + '" data-nav="' + node.url + '">' + badge + contentHtml + '</a>'
59
-
: '<span>' + badge + contentHtml + '</span>';
59
+
: '<span class="sidebar-label">' + badge + contentHtml + '</span>';
60
60
return '<div class="sidebar-group' + (isCollapsed ? ' collapsed' : '') + '" data-id="' + escapeHtml(stateKey) + '">' +
61
61
'<div class="sidebar-group-header">' +
62
62
'<svg class="sidebar-toggle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +