From 1b1482a8d9b93878c084d95ef6e3dd9a4c2b2fc7 Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Wed, 26 Jul 2023 22:31:46 -0400 Subject: [PATCH] Under the hood changes to container styles Previously, the entire main content was fitted inside one element. Now, each section and container handle their own paddings and margins. This allows for more flexibility as to how each container can be styled. --- _includes/layouts/main.tsx | 8 +++----- _includes/styles/base.scss | 10 +++------- _includes/styles/components/header.scss | 6 +++++- _includes/styles/variables.scss | 3 +++ 4 files changed, 14 insertions(+), 13 deletions(-) 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; }