russellballestrini/russell.ballestrini.net
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Document fluid article width solution for TOC overlap

Browse source
This commit is contained in:
Russell Ballestrini 2025-10-13 12:29:48 -04:00
parent 69bd3337b6
commit 5f3d4e988a
1 changed files with 2 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst
View file

@ -41,6 +41,8 @@ The main navigation header now uses ``position: fixed`` so it stays visible when
On tablets and mobile devices (screens ≤1023px), the table of contents reverts to its inline position within the article content, ensuring usability across all screen sizes. The media queries are structured to unfix positioned elements first, then reposition them, creating smooth visual transitions at breakpoints.
Article content uses fluid width (``max-width: 660px; width: 100%``) instead of fixed width, allowing it to shrink responsively when the TOC sidebar is present. This prevents overlap at screen widths between 1024px and approximately 1300px, where the fixed header, article content, and TOC sidebar would otherwise compete for space.
**CSS Color Variables**
All hardcoded colors were converted to CSS custom properties: