update TOC to not be absolute
This commit is contained in:
@@ -21,25 +21,20 @@ main .container {
|
|||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
.single-post-wrapper {
|
.single-post-wrapper {
|
||||||
display: block; /* Turns off Flexbox completely */
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-content {
|
#main-content {
|
||||||
/* Standard block behavior: automatically centers prose within wrapper */
|
flex-grow: 1;
|
||||||
display: block;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-toc {
|
#sidebar-toc {
|
||||||
/* Removes the TOC from document flow entirely */
|
position: static;
|
||||||
position: absolute;
|
flex: 0 0 256px;
|
||||||
top: 0;
|
height: auto;
|
||||||
|
|
||||||
/* Math: Center of wrapper (50%) + half the prose width (32.5ch) + 2rem gap */
|
|
||||||
left: calc(50% + 32.5ch + 2rem);
|
|
||||||
|
|
||||||
/* The aside needs to be exactly 100% height of the wrapper for sticky to work */
|
|
||||||
height: 100%;
|
|
||||||
width: 256px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user