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>

+74 -35
+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
··· 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">' +