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
background: var(--sidebar-bg);
254
border-right: 1px solid var(--border-color);
255
overflow-y: auto;
256
-
padding: 16px 0;
257
z-index: 50;
258
}
259
260
.sidebar-nav {
261
-
padding: 0 12px;
262
}
263
264
.sidebar-section {
265
-
margin-bottom: 8px;
266
}
267
268
.sidebar-link {
269
display: block;
270
-
padding: 6px 12px;
271
color: var(--text-color);
272
text-decoration: none;
273
-
border-radius: 4px;
274
-
font-size: 14px;
275
}
276
277
.sidebar-link:hover:not(.active) {
···
279
}
280
281
.sidebar-link.active {
282
-
background: var(--link-color);
283
-
color: #fff;
284
-
font-weight: 500;
285
}
286
287
.sidebar-group {
···
291
.sidebar-group-header {
292
display: flex;
293
align-items: center;
294
-
padding: 6px 12px;
295
cursor: pointer;
296
-
font-size: 14px;
297
font-weight: 500;
298
color: var(--text-color);
299
-
border-radius: 4px;
300
user-select: none;
301
}
302
···
305
}
306
307
.sidebar-toggle {
308
-
width: 16px;
309
-
height: 16px;
310
-
margin-right: 6px;
311
transition: transform 0.2s;
312
}
313
314
.sidebar-toggle-spacer {
315
display: inline-block;
316
-
width: 16px;
317
-
height: 16px;
318
-
margin-left: 12px;
319
-
margin-right: 6px;
320
flex-shrink: 0;
321
}
322
···
327
328
/* Package selector */
329
.package-selector {
330
-
padding: 12px;
331
border-bottom: 1px solid var(--border-color);
332
-
margin-bottom: 8px;
333
}
334
335
.package-selector select {
336
width: 100%;
337
-
padding: 8px 12px;
338
-
font-size: 14px;
339
font-weight: 500;
340
border: 1px solid var(--border-color);
341
border-radius: 6px;
···
345
appearance: none;
346
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
background-repeat: no-repeat;
348
-
background-position: right 12px center;
349
-
padding-right: 36px;
350
}
351
352
.package-selector select:hover {
···
368
}
369
370
.sidebar-children {
371
-
margin-left: 12px;
372
border-left: 1px solid var(--border-color);
373
-
padding-left: 8px;
374
}
375
376
/* Sidebar entry type indicators */
···
378
display: inline-flex;
379
align-items: center;
380
justify-content: center;
381
-
width: 18px;
382
-
height: 18px;
383
-
margin-right: 6px;
384
border-radius: 3px;
385
-
font-size: 10px;
386
-
font-weight: 600;
387
flex-shrink: 0;
388
}
389
···
402
color: white;
403
}
404
405
.sidebar-group-header .sidebar-kind {
406
margin-left: 0;
407
}
···
410
margin-left: 0;
411
}
412
413
-
.sidebar-link.active .sidebar-kind {
414
-
background: rgba(255, 255, 255, 0.3);
415
}
416
417
/* Main Content */
···
253
background: var(--sidebar-bg);
254
border-right: 1px solid var(--border-color);
255
overflow-y: auto;
256
+
padding: 8px 0;
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);
277
}
278
279
.sidebar-nav {
280
+
padding: 0 8px;
281
}
282
283
.sidebar-section {
284
+
margin-bottom: 4px;
285
}
286
287
.sidebar-link {
288
display: block;
289
+
padding: 3px 8px;
290
color: var(--text-color);
291
text-decoration: none;
292
+
border-radius: 3px;
293
+
font-size: 13px;
294
+
line-height: 1.4;
295
}
296
297
.sidebar-link:hover:not(.active) {
···
299
}
300
301
.sidebar-link.active {
302
+
background: var(--highlight-bg);
303
+
color: var(--link-color);
304
+
font-weight: 600;
305
}
306
307
.sidebar-group {
···
311
.sidebar-group-header {
312
display: flex;
313
align-items: center;
314
+
padding: 3px 8px;
315
cursor: pointer;
316
+
font-size: 13px;
317
font-weight: 500;
318
color: var(--text-color);
319
+
border-radius: 3px;
320
user-select: none;
321
}
322
···
325
}
326
327
.sidebar-toggle {
328
+
width: 14px;
329
+
height: 14px;
330
+
margin-right: 4px;
331
+
flex-shrink: 0;
332
transition: transform 0.2s;
333
}
334
335
.sidebar-toggle-spacer {
336
display: inline-block;
337
+
width: 14px;
338
+
height: 14px;
339
+
margin-right: 4px;
340
flex-shrink: 0;
341
}
342
···
347
348
/* Package selector */
349
.package-selector {
350
+
padding: 8px;
351
border-bottom: 1px solid var(--border-color);
352
+
margin-bottom: 4px;
353
}
354
355
.package-selector select {
356
width: 100%;
357
+
padding: 6px 10px;
358
+
font-size: 13px;
359
font-weight: 500;
360
border: 1px solid var(--border-color);
361
border-radius: 6px;
···
365
appearance: none;
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");
367
background-repeat: no-repeat;
368
+
background-position: right 10px center;
369
+
padding-right: 32px;
370
}
371
372
.package-selector select:hover {
···
388
}
389
390
.sidebar-children {
391
+
margin-left: 8px;
392
border-left: 1px solid var(--border-color);
393
+
padding-left: 4px;
394
}
395
396
/* Sidebar entry type indicators */
···
398
display: inline-flex;
399
align-items: center;
400
justify-content: center;
401
+
width: 16px;
402
+
height: 16px;
403
+
margin-right: 5px;
404
border-radius: 3px;
405
+
font-size: 9px;
406
+
font-weight: 700;
407
flex-shrink: 0;
408
}
409
···
422
color: white;
423
}
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
+
441
.sidebar-group-header .sidebar-kind {
442
margin-left: 0;
443
}
···
446
margin-left: 0;
447
}
448
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;
454
}
455
456
/* Main Content */
+1
-1
src/odoc_docsite_js.ml
+1
-1
src/odoc_docsite_js.ml
···
56
var childrenHtml = entry.children.map(function(c) { return renderSidebarEntry(c); }).join('');
57
var linkHtml = node.url
58
? '<a class="sidebar-link' + (isActive ? ' active' : '') + '" href="' + BASE_URL + node.url + '" data-nav="' + node.url + '">' + badge + contentHtml + '</a>'
59
-
: '<span>' + badge + contentHtml + '</span>';
60
return '<div class="sidebar-group' + (isCollapsed ? ' collapsed' : '') + '" data-id="' + escapeHtml(stateKey) + '">' +
61
'<div class="sidebar-group-header">' +
62
'<svg class="sidebar-toggle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
···
56
var childrenHtml = entry.children.map(function(c) { return renderSidebarEntry(c); }).join('');
57
var linkHtml = node.url
58
? '<a class="sidebar-link' + (isActive ? ' active' : '') + '" href="' + BASE_URL + node.url + '" data-nav="' + node.url + '">' + badge + contentHtml + '</a>'
59
+
: '<span class="sidebar-label">' + badge + contentHtml + '</span>';
60
return '<div class="sidebar-group' + (isCollapsed ? ' collapsed' : '') + '" data-id="' + escapeHtml(stateKey) + '">' +
61
'<div class="sidebar-group-header">' +
62
'<svg class="sidebar-toggle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +