cs249r_book/shared/styles/partials/_toc.scss

// =============================================================================
// TABLE OF CONTENTS — Right-side TOC with accent line and typography hierarchy
// =============================================================================

// Right TOC - Clean typography-focused approach with accent line
.table-of-contents,
#TOC,
.quarto-toc,
nav[role="doc-toc"] {
  font-size: 0.85rem;
  line-height: 1.6;
  border-left: 3px solid $accent; // Keep the solid accent line
  padding-left: 1.5rem; // Good spacing from line to text
  margin-left: 0.5rem; // Additional breathing room

  // Long section titles (and headings containing un-hyphenatable strings like
  // `arXiv:2310.06825` or `RoPE-Scaled`) were pushing TOC anchors past the
  // right edge of the margin column, which in turn forced the whole page to
  // scroll horizontally on narrower viewports. `overflow-wrap: anywhere`
  // (NOT `break-word`) is required because only `anywhere` shrinks the
  // column's min-content size — without that, the flex/grid parent still
  // sees the long word's intrinsic width and refuses to shrink the column.
  // `min-width: 0` lets the column actually take the smaller min-content.
  min-width: 0;
  overflow-wrap: anywhere;

  // Ensure TOC list is visible (Bootstrap collapse hides it by default)
  ul.collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
  }

  // Ensure header elements don't get extra bars
  h2,
  h3,
  h4,
  h5,
  h6 {
    border-left: none !important;
    padding-left: 0 !important;
  }

  // Remove grey lines from TOC title and containers
  .toc-title,
  .sidebar-title,
  .quarto-toc-title,
  >div,
  >ul,
  li,
  hr,
  .separator,
  .divider {
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
  }

  // Also remove any box shadows that might look like lines
  * {
    box-shadow: none !important;
  }

  // All links - readable but secondary to main content
  a,
  .nav-link {
    color: #495057; // Readable but not competing with main content
    font-weight: 400; // Normal weight - supportive navigation
    text-decoration: none;
    display: block;
    padding: 0.2rem 0; // Slightly more padding
    transition: all 0.15s ease;
    // Inherit wrapping behavior from the TOC root so any long, unbreakable
    // token inside a heading (an identifier, a path, a URL) wraps inside the
    // anchor box instead of widening the TOC column past the page bounds.
    overflow-wrap: anywhere;
    min-width: 0;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;

    &:hover {
      color: $accent; // Accent hover for interaction
      font-weight: 500; // Medium weight on hover
    }
  }

  // Main sections (H2) - clear but not overpowering
  >ul>li {
    margin-bottom: 0.25rem; // Tighter spacing for better density

    >a {
      font-weight: 500; // Medium weight - clear hierarchy
      color: #2c3e50; // Dark but balanced
      font-size: 0.9rem; // Appropriate size
      margin-bottom: 0.15rem; // Reduced spacing
      letter-spacing: 0.01em; // Subtle spacing
    }
  }

  // Sub-sections (H3) - supportive weight
  ul ul {
    margin-left: 0.75rem;
    margin-top: 0.15rem; // Reduced top margin

    li {
      margin-bottom: 0.1rem; // Tighter item spacing
    }

    a {
      font-size: 0.8rem; // Appropriate size
      color: #6c757d; // Lighter but readable
      font-weight: 400; // Normal weight
      padding: 0.05rem 0; // Reduced vertical padding
    }

    // Deep nesting (H4+) - subtle but readable
    ul a {
      font-size: 0.75rem;
      color: #8e959c; // Light but still readable
      font-weight: 400; // Normal weight
    }
  }

  // Active section - clear but balanced accent highlight
  .active,
  .nav-link.active {
    color: $accent !important;
    font-weight: 500 !important; // Medium weight for active state
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}