hugo-theme-paradox/assets/styles/screen/layout.scss
2022-10-16 17:15:34 -05:00

170 lines
3 KiB
SCSS

/* [responsive] re-show the navigation menu as a sidebar */
@media (min-width: 60rem) {
body {
display: grid;
grid-template-columns: 1fr 3fr;
height: calc(100 * var(--vh, 1vh));
}
.site-header, .scroll-margin, .site-footer {
grid-column: span 2
}
.site-footer { /* fixed height footer */
height: var(--footer-height);
}
.docs-nav {
grid-column: 1;
height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
overflow-y: auto;
padding: 0;
}
main {
grid-column: 2;
height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
overflow-y: auto;
scrollbar-width: none;
}
.docs-nav::-webkit-scrollbar,
main::-webkit-scrollbar {
display: none;
}
.docs-nav .menu {margin-top: 0;}
.page-header {
padding: 0;
}
/* toggle is no longer needed */
.toggle-menu {
display: none;
}
.toggle-menu:not(:checked) ~ .menu {
display: unset;
}
.toggle-menu__label {
display: none;
}
}
/* [responsive] move the toc to its own column */
@media (min-width: 75rem) {
body {
grid-template-columns: 20rem 1fr;
}
.page {
display: grid;
grid-template-columns: 40rem 1fr;
}
.page .page-header {
grid-column: span 2
}
.page .section {
grid-column: 1;
}
.page .toc {
grid-column: 2;
grid-row: span 2;
padding: 0;
}
.page .toc .container {
margin: 0;
position: sticky;
top: 0;
max-height: calc(100vh - var(--header-height) - var(--footer-height));
overflow-y: auto;
}
}
/* [responsive] let the <main> expand until max width of site */
@media (min-width: 80rem) {
.page {
grid-template-columns: 1fr 20rem; /* toc now visually balanced with menu */
}
/* start limiting content since it can exceed 80ch now */
.content .container
{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
> * {
grid-column: 2;
}
> img
{
grid-column: 1 / span 3;
}
}
.section-nav,
.page-footer .container
{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
> .container {
padding: 0;
grid-column: 2;
}
}
/* also make the page header line up */
.page-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
> .container {
grid-column: 2;
padding: 0;
}
}
}
/* [responsive] fixed layout after reaching maxwidth */
@media (min-width: $site-max-width) {
body {
grid-template-columns: 1fr 20rem calc(var(--site-max-width) - 20rem) 1fr
}
.docs-nav {grid-column: 2;}
main {grid-column: 3;}
.site-header,
.site-footer,
.scroll-margin
{
grid-column: 2 / span 2;
}
/* except now the page is fixed to maxwidth and the toc can "grow" */
.page {
grid-template-columns: calc(var(--site-max-width) - 40rem) 1fr;
}
/* we don't actually want it to grow, though! just stick to the side */
.page {position: relative;}
.page .toc {
position: sticky;
top: 0;
}
/* also the menu sidebar should stick to the other side */
.docs-nav {
position: sticky;
width: 20rem;
place-self: end;
}
}