diff --git a/_includes/layout.tsx b/_includes/layout.tsx index acf5f5f..74e2cf8 100644 --- a/_includes/layout.tsx +++ b/_includes/layout.tsx @@ -54,7 +54,22 @@ export default function (data: Lume.Data) { /> - {data.children} +
+ {data.children} +
+ ); diff --git a/styles/main.css b/styles/main.css index 43f0335..68a039d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,11 +1,26 @@ @import "normalize.css"; @import "fonts.css"; @import "theme.css"; +@import "vars.css"; + +* { + box-sizing: border-box; +} + +html, body { + height: 100%; +} body { + display: flex; + flex-direction: column; font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-fg); + + > main { + flex-grow: 1; + } } h1, h2, h3, h4, h5, h6 { @@ -131,7 +146,7 @@ ul { .home-container { margin: 0 auto; - max-width: 48rem; + max-width: var(--max-page-width); padding: 1rem; > div.preamble { @@ -158,3 +173,18 @@ div.tag { color: var(--color-bg); padding: 0.3em 0.8em; } + +footer.body { + padding: 1rem; + display: flex; + justify-content: space-between; + margin: 0 auto; + max-width: var(--max-page-width); + border-top: 1px solid var(--color-fg); + width: 100%; + + div.meta { + display: flex; + gap: 1rem; + } +} diff --git a/styles/vars.css b/styles/vars.css new file mode 100644 index 0000000..10d67b9 --- /dev/null +++ b/styles/vars.css @@ -0,0 +1,3 @@ +:root { + --max-page-width: 48rem; +}