a/hugo-theme-paradox
1
Fork 0
mirror of https://github.com/trwnh/hugo-theme-paradox.git synced 2024-11-24 10:21:21 +00:00
Code Issues Projects Releases Wiki Activity

make layout fixed beyond a certain point

Browse source
This commit is contained in:
a 2022-10-13 21:40:13 -05:00
parent 03b0e7e34d
commit 607c2a538e
2 changed files with 14 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/styles/common/base.scss
View file

@ -1,4 +1,4 @@
$site-max-width: 80rem; $site-max-width: 100rem;
:root { :root {
--site-max-width: #{$site-max-width}; --site-max-width: #{$site-max-width};

31
assets/styles/screen/layout.scss
View file

@ -84,10 +84,9 @@
padding: 0; padding: 0;
} }
.page .toc .container { .page .toc .container {
width: 15rem;
margin: 0; margin: 0;
position: fixed; position: sticky;
top: var(--header-height); top: 0;
max-height: calc(100vh - var(--header-height) - var(--footer-height)); max-height: calc(100vh - var(--header-height) - var(--footer-height));
overflow-y: auto; overflow-y: auto;
} }
@ -105,7 +104,7 @@
.page .content .container { .page .content .container {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(80ch, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
> * { > * {
grid-column: 2; grid-column: 2;
} }
@ -119,7 +118,7 @@
.page .page-header { .page .page-header {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(80ch, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
> .container { > .container {
grid-column: 2; grid-column: 2;
padding: 0; padding: 0;
@ -128,31 +127,27 @@
} }
/* [responsive] <main> has reached maxwidth */ /* [responsive] fixed layout after reaching maxwidth */
@media (min-width: $site-max-width + 40rem) { @media (min-width: $site-max-width) {
/* we need to grow equally now */
body { body {
grid-template-columns: 1fr var(--site-max-width, $site-max-width) 1fr; grid-template-columns: 1fr 20rem calc(var(--site-max-width) - 20rem) 1fr
} }
.docs-nav {grid-column: 2;}
main {grid-column: 3;}
.site-header, .site-header,
.scroll-margin, .site-footer,
.site-footer .scroll-margin
{ {
grid-column: 2 grid-column: 2 / span 2;
} }
/* the page and toc take their space */
main {grid-column: 2 / span 2;}
/* except now the page is fixed to maxwidth and the toc can "grow" */ /* except now the page is fixed to maxwidth and the toc can "grow" */
.page { .page {
grid-template-columns: var(--site-max-width, $site-max-width) 1fr; grid-template-columns: calc(var(--site-max-width) - 40rem) 1fr;
} }
/* we don't actually want it to grow, though! just stick to the side */ /* we don't actually want it to grow, though! just stick to the side */