.page--template-article { --grid-ascii-page: " . header . " " . nav . " " . content . " " . footer . "; --grid-columns-page: 1fr minmax(320px, var(--full-width)) 1fr; } .page--template-article .page__content { grid-column: content; display: grid; grid-template: var(--grid-ascii-page); grid-template-columns: var(--grid-columns-page); grid-template-rows: min-content; grid-auto-rows: min-content; } @media (min-width: 768px) { .page--template-article { --grid-ascii-page: " . header header . " " . summary summary . " " . content nav . " " . footer nav . "; --grid-columns-page: 1fr minmax(320px, var(--post-width)) var(--col-width) 1fr; } .page--template-article .page__content { grid-column-start: content; grid-column-end: nav; grid-row-start: -3; } .page--template-article .toc { position: sticky; top: var(--outline-width, 0); bottom: 0; z-index: 3; } .page--template-article .page__nav { position: relative; display: grid; grid-column: nav; grid-row-start: content; grid-row-end: span 3; } } blockquote { margin-left: var(--gap); margin-right: var(--gap); font-size: 1.5em; } blockquote p { display: inline; margin: 0; } blockquote:before, blockquote:after { display: inline; font-size: 0.75em; opacity: 0.5; } blockquote:before { content: "❝"; vertical-align: super; } blockquote:after { content: "❞"; vertical-align: sub; } .progress-bar { position: fixed; top: 0; left: 0; height: 2px; z-index: 200; width: 0; background-color: orange; transition: 0.2s; } .toc { height: min-content; padding-bottom: 1em; background: linear-gradient(var(--theme-background) calc(100% - 1em), transparent); } .toc h2 { display: inline-block; font-size: var(--font-size-2); } .toc__nav > ol { padding-left: 0; } .toc__nav > ol ol { padding-left: 1rem; } .toc li { margin-top: 0.5em; display: block; } .toc a { line-height: 1.4rem; text-decoration-style: dashed; }