fix responsive padding and alignment

This commit is contained in:
a 2022-10-17 20:04:22 -05:00
parent cae0809e27
commit 25f9409a51
4 changed files with 53 additions and 24 deletions

View file

@ -50,6 +50,8 @@
display: none;
}
.docs-nav, .page-header {padding: 1rem 0;}
}
/* [responsive] move the toc to its own column */
@ -62,41 +64,33 @@
display: grid;
grid-template-columns: 40rem 1fr;
}
.page .page-header {
grid-column: span 2
}
.page .section {
.page-header,
.content,
.section-nav,
.page-footer
{
grid-column: 1;
}
.page .toc {
.toc {
grid-column: 2;
grid-row: span 2;
grid-row: span 4;
padding: 0;
min-height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height));
}
.page .toc .container {
margin: 0;
position: sticky;
top: 0;
max-height: calc(100vh - var(--header-height) - var(--footer-height));
top: 1rem;
max-height: calc(100 * var(--vh, 1vh) - 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);
padding: 0;
grid-template-columns: minmax(0, 1fr) minmax(0, 80ch) minmax(0, 1fr);
> * {
grid-column: 2;
}
@ -106,23 +100,37 @@
}
}
/* also make the middle stuff line up */
.page-header,
.list,
.section-nav,
.page-footer
{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) minmax(0, 80ch) minmax(0, 1fr);
padding: 0 1rem;
> .container {
padding: 0;
grid-column: 2;
padding: 0;
}
}
.page-header {
padding-top: 1rem;
}
.page-footer {
padding-bottom: 1rem;
}
}
@media (min-width: 80rem) {
.page {
display: grid;
grid-template-columns: 1fr 20rem;
}
}
/* [responsive] fixed layout after reaching maxwidth */
@media (min-width: $site-max-width) {

View file

@ -20,7 +20,10 @@
src="{{ $script.Permalink }}"
integrity="{{ $script.Data.Integrity }}">
</script>
{{ partial "external-links.html" . }}
{{ partial "styles/external-links.html" . }}
{{ if .Site.Params.borders }}
{{ partial "styles/borders.html" . }}
{{ end }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
{{ partial "seo.html" . }}
{{ block "head" . }}

View file

@ -0,0 +1,18 @@
<style>
.site-header {
border-bottom: 1px solid var(--ui-overlay);
}
.site-footer {
border-top: 1px solid var(--ui-overlay);
}
@media (min-width: 60rem) {
.docs-nav {
border-right: 1px solid var(--ui-overlay);
}
}
@media (min-width: 75rem) {
.toc {
border-left: 1px solid var(--ui-overlay);
}
}
</style>