From b0ddfa663762f9d3dc88e5458227176049e4a706 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 23 May 2026 04:04:01 +0000 Subject: [PATCH 1/3] Initial plan From a41a2b5dd624ed455b40b68b8b34d584f500e55e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 23 May 2026 04:13:34 +0000 Subject: [PATCH 2/3] fix: TOC sticky positioning, active section highlighting, and separator line on blog posts - Add align-self: stretch to TOC column so sticky works for full page height - Add sticky positioning to inner TOC div (position: sticky with max-height + overflow) - Style table-of-contents__link--active with primary color and bold weight - Add hover color transition for TOC links - Add left border separator between content and TOC columns - Disable sticky and border on mobile layout Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/4aa3db4e-b68f-4f90-9097-425a59ce5d85 --- src/css/custom.css | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 4d8e204b..e3bf1c9d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -2092,24 +2092,48 @@ html[data-theme="dark"] { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; - padding-left: 1rem !important; + padding-left: 1.25rem !important; padding-right: 0.5rem !important; + border-left: 1px 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 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: 3px 0 !important; font-size: 0.85rem !important; + color: var(--ifm-color-emphasis-700) !important; + transition: 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 */ +.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; +} + .blog-post-page .markdown { max-width: 100% !important; line-height: 1.8 !important; @@ -2182,6 +2206,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; } From 0faa3775f4bcb4b2948057e8cc528b401f55461b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 23 May 2026 04:58:48 +0000 Subject: [PATCH 3/3] fix: TOC active section left border indicator and clearer separator line - Add left border highlight on the active TOC link matching reference design - Make separator line between content and TOC more prominent (2px) - Add vertical track line on TOC list for visual continuity - Adjust padding/margins for left border indicator alignment Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/7e16fff0-8b1c-4f04-b52d-06ac60d246d8 --- src/css/custom.css | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index e3bf1c9d..a4038f8e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -2092,9 +2092,9 @@ html[data-theme="dark"] { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; - padding-left: 1.25rem !important; + padding-left: 0 !important; padding-right: 0.5rem !important; - border-left: 1px solid var(--ifm-toc-border-color) !important; + border-left: 2px solid var(--ifm-toc-border-color) !important; align-self: stretch !important; } @@ -2106,16 +2106,25 @@ html[data-theme="dark"] { 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.5 !important; display: block !important; - padding: 3px 0 !important; + padding: 4px 0 4px 12px !important; + margin-left: -2px !important; font-size: 0.85rem !important; - color: var(--ifm-color-emphasis-700) !important; - transition: color 0.2s ease !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 { @@ -2127,11 +2136,12 @@ html[data-theme="dark"] { font-size: 0.875rem !important; } -/* Active TOC link — highlight current section */ +/* 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 {