diff --git a/_includes/layouts/main.tsx b/_includes/layouts/main.tsx index b64c621..ad61430 100644 --- a/_includes/layouts/main.tsx +++ b/_includes/layouts/main.tsx @@ -8,11 +8,9 @@ export default function({ title, header, children, comp }) { - {comp.navbar()} -
- { comp.header(header) } - { children } -
+ { comp.navbar() } + { comp.header(header) } + { children } ); diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss index 616da74..172c6a0 100644 --- a/_includes/styles/base.scss +++ b/_includes/styles/base.scss @@ -49,7 +49,9 @@ h1, h2, h3, h4, h5, h6 { } section { - padding: 1rem 0; + padding: 1rem; + margin: 0 auto; + max-width: var(--page--max-width); & > * { margin-bottom: 1rem; } @@ -58,12 +60,6 @@ section { } } -.main-content { - padding: 1rem; - margin: 0 auto; - max-width: 48rem; -} - pre { padding: 1rem; border-radius: 5px; diff --git a/_includes/styles/components/header.scss b/_includes/styles/components/header.scss index 87819cd..557a74e 100644 --- a/_includes/styles/components/header.scss +++ b/_includes/styles/components/header.scss @@ -1,7 +1,11 @@ .page-header { - margin-bottom: 2rem; + margin-left: auto; + margin-right: auto; + padding: 2rem 1rem; + max-width: var(--page--max-width); text-align: center; h1 { + margin-top: 0; background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue)); background-clip: text; -webkit-background-clip: text; diff --git a/_includes/styles/variables.scss b/_includes/styles/variables.scss index 8c7011c..a52dd8f 100644 --- a/_includes/styles/variables.scss +++ b/_includes/styles/variables.scss @@ -20,4 +20,7 @@ :root { --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; + + /* Widths */ + --page--max-width: 48rem; }