Skip to content

Fix blog post TOC: sticky scroll, active section highlight with left border indicator, and separator line #1667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanjay-kv merged 3 commits into from
May 23, 2026
Merged

Fix blog post TOC: sticky scroll, active section highlight with left border indicator, and separator line #1667

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0ddfa6
Initial plan
Copilot May 23, 2026
a41a2b5
fix: TOC sticky positioning, active section highlighting, and separat…
Copilot May 23, 2026
0faa377
fix: TOC active section left border indicator and clearer separator line
Copilot May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2092,24 +2092,58 @@ html[data-theme="dark"] {
flex: 0 0 280px !important;
width: 280px !important;
max-width: 280px !important;
padding-left: 1rem !important;
padding-left: 0 !important;
padding-right: 0.5rem !important;
border-left: 2px solid var(--ifm-toc-border-color) !important;
align-self: stretch !important;
}

/* TOC inner wrapper — sticky */
.blog-wrapper .col.col--2 > div {
position: sticky !important;
top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
overflow-y: auto !important;
}

/* TOC list — vertical left border track */
.blog-wrapper .table-of-contents {
border-left: 2px solid var(--ifm-toc-border-color) !important;
padding-left: 0 !important;
margin-left: 0.75rem !important;
}

/* TOC links */
.blog-wrapper .table-of-contents__link {
white-space: normal !important;
word-break: break-word !important;
line-height: 1.4 !important;
line-height: 1.5 !important;
display: block !important;
padding: 2px 0 !important;
padding: 4px 0 4px 12px !important;
margin-left: -2px !important;
font-size: 0.85rem !important;
color: var(--ifm-color-emphasis-600) !important;
border-left: 2px solid transparent !important;
transition: color 0.2s ease, border-color 0.2s ease !important;
}

.blog-wrapper .table-of-contents__link:hover {
color: var(--ifm-color-primary) !important;
text-decoration: none !important;
}

.blog-wrapper .table-of-contents li>.table-of-contents__link {
font-size: 0.875rem !important;
}

/* Active TOC link — highlight current section with left border indicator */
.blog-wrapper .table-of-contents__link--active,
.blog-wrapper .table-of-contents__link--active:hover {
color: var(--ifm-color-primary) !important;
font-weight: 600 !important;
border-left: 2px solid var(--ifm-color-primary) !important;
}

.blog-post-page .markdown {
max-width: 100% !important;
line-height: 1.8 !important;
Expand Down Expand Up @@ -2182,6 +2216,17 @@ html[data-theme="dark"] {
align-items: flex-start !important;
}

/* Remove the vertical separator and sticky on mobile */
.blog-wrapper .container>.row>.col.col--2 {
border-left: none !important;
}

.blog-wrapper .col.col--2 > div {
position: static !important;
max-height: none !important;
overflow-y: visible !important;
}

.blog-wrapper .container>.row>.col:not(.col--2):not(.col--3)>* {
max-width: 100% !important;
}
Expand Down
Loading