:root { --collapse-horizontal-gap: 0; --nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important; --page-width: 700px; --page-margins: 24px; } .centeredPage { transition-property: gap, max-width; transition-duration: 500ms; max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); margin: 0 auto; margin-top: 96px; padding: 0 var(--page-margins); display: grid; grid-auto-rows: auto; gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); } .titleWrapper { grid-column: 2; grid-row: 1; } .titleWrapper > * { margin: 0; word-break: break-word; } .navAreaWrapper { grid-column: 1; grid-row: 2; transition-property: width; transition-duration: 500ms; width: var(--nav-width); } .navAreaWrapper > .sticky { position: sticky; top: var(--page-margins); bottom: var(--page-margins); max-height: calc(100vh - 2 * var(--page-margins)); overflow-y: scroll; overflow-x: hidden; border-radius: 8px; } .contentWrapper { grid-column: 2; grid-row: 2; overflow-x: hidden; } .contentWrapper > * { margin: 0; margin-bottom: var(--page-margins); } .contentWrapper p { text-align: justify; } .contentWrapper table, .contentWrapper code, .contentWrapper pre { overflow-x: scroll; } .recentPosts { display: grid; grid-gap: 12px; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); } .mobileNav { display: none; } @media screen and (max-device-width: 550px) { .centeredPage { grid-template-columns: 0 1fr; gap: var(--page-margins) 0; padding: 0 12px; } .navAreaWrapper { grid-column: none; grid-row: none; width: 100vw; position: fixed; inset: 0px 0px 0px 0px; z-index: 2; transition-property: opacity; transition-duration: .1s; opacity: 0; pointer-events: none; backdrop-filter: blur(50px); } .navAreaWrapper:before { content: ''; position: absolute; inset: 0px 0px 0px 0px; background-color: var(--bg-alt); opacity: .7; } .navAreaWrapper.navVisible { pointer-events: initial; opacity: 1; } .navAreaWrapper .globalLinks { display: none; } .navAreaWrapper > .sticky { position: absolute; inset: 0px 0px 0px 0px; padding: 24px; overflow-y: scroll; } .mobileNav { display: inline-block; position: fixed; bottom: 24px; right: 24px; z-index: 5; } }