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

fix responsive padding and alignment

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

54
assets/styles/layouts/responsive.scss
View file

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

5
layouts/_default/baseof.html
View file

@ -20,7 +20,10 @@
src="{{ $script.Permalink }}" src="{{ $script.Permalink }}"
integrity="{{ $script.Data.Integrity }}"> integrity="{{ $script.Data.Integrity }}">
</script> </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"> <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" . }} {{ partial "seo.html" . }}
{{ block "head" . }} {{ block "head" . }}

18
layouts/partials/styles/borders.html Normal file
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>

0
layouts/partials/external-links.html → layouts/partials/styles/external-links.html
View file