.layout-_default-single { .page-header { hr {display: none;} .container { max-inline-size: 80ch; margin-inline: auto; } } .page-title { margin-block-start: 0; font-size: 2.025rem; line-height: 1.15; letter-spacing: -0.022rem; grid-area: title; } .page-summary { font-style: italic; font-size: 1.266rem; line-height: 1.15; letter-spacing: -0.022rem; margin-block-start: 0.5rem; grid-area: summary; } .page-author { grid-area: author; margin-block: 0; } .page-date { grid-area: date; margin-block-end: 0; .date {display: inline-block;} } .page-inreplyto { display: grid; grid-template-columns: auto 1fr; gap: 0.5em; align-items: center; .reply-icon { background: var(--ui-overlay); display: inline-block; inline-size: 1em; block-size: 1em; padding: 0.25em; border-radius: 100em; } } .page-tags { .page-tag { font-family: monospace; } } .page-permalink { margin-block-end: 0; align-self: end; .u-url {font-family: monospace;} } .page-syndication { } .page-series { hr {display: none;} // background: var(--ui-overlay); // color: var(--ui-overlay-text); .container { max-inline-size: 80ch; margin-inline: auto; } } .page-content { inline-size: 100%; max-inline-size: 80ch; margin-inline: auto; } .page-footer { hr {display: none;} inline-size: 100%; max-inline-size: 80ch; margin-inline: auto; } .page[has-toc] { padding-block-end: 4em; } .page > .table-of-contents { display: none; } #toc-toggle { display: none; &:checked ~ .table-of-contents { display: block; position: fixed; z-index: 10; inset-block-end: 6em; block-size: max-content; inline-size: 80%; max-inline-size: 20em; max-block-size: #{m}in(40em, 70vh); overflow-block: scroll; inset-inline-end: 1em; background: var(--ui-overlay); border-radius: 1em; @include shadow-low; padding-inline: 1em; > .container { padding: 0; } } } label[for="toc-toggle"] { position: fixed; inset-block-end: 1em; inset-inline-end: 1em; z-index: 5; background: var(--ui-overlay); padding: 1em; border-radius: 100em; inline-size: 6em; display: flex; justify-content: center; @include shadow-low; } #toc-toggle ~ label[for="toc-toggle"] { } #toc-toggle:checked ~ label[for="toc-toggle"] { } #toc-toggle__label-hide { display: none; } #toc-toggle:checked ~ #toc-toggle__label-hide { display: flex; } #toc-toggle:checked ~ #toc-toggle__label-show { display: none; } @media (min-width: 400px) { .container { padding: 0 2em; } } @media (min-width: 60rem) { label[for="toc-toggle"] { display: none; } .container {padding: 0;} .page[has-toc] { display: grid; grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr; grid-template-rows: auto auto auto; gap: 2em; padding-block-end: unset; .page-header { grid-column: 1 / span 4; grid-row: 1; display: grid; grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr; gap: 2em; .container { max-width: unset; grid-column: 2 / span 2; } } .table-of-contents { display: block; grid-column: 3; grid-row: 2 / span 2; position: sticky; inset-block-start: 2em; align-self: start; justify-self: start; max-width: unset; border-inline-start: thin solid var(--ui-overlay); padding-inline: 2em; max-height: 90vh; overflow-y: auto; scrollbar-color: var(--ui-text) var(--ui-overlay); &::-webkit-scrollbar-thumb { background-color: var(--ui-text) } &::-webkit-scrollbar-track { background-color: var(--ui-overlay) } } .page-content { grid-column: 2; grid-row: 2; max-width: unset; padding-block-start: 0.5rem; padding-block-end: 0; .toc { display: none; } } .page-footer { grid-column: 2; grid-row: 3; max-width: unset; #footnotes h2 {margin-block-start: 0;} padding-block: 0; } } } }