diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx index eba17ae09..97f091de7 100644 --- a/quartz/components/Header.tsx +++ b/quartz/components/Header.tsx @@ -1,7 +1,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" const Header: QuartzComponent = ({ children }: QuartzComponentProps) => { - return children.length > 0 ?
{children}
: null + return children.length > 0 ?
{children}
:
} Header.css = ` @@ -9,7 +9,8 @@ header { display: flex; flex-direction: row; align-items: center; - margin: 2rem 0; + justify-content: flex-end; + padding: 1rem 2rem; gap: 1.5rem; } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 9c530967b..0d7115526 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -223,15 +223,15 @@ export function renderPage(
+
+ {header.map((HeaderComponent) => ( + + ))} +
{LeftComponent}
-
- {header.map((HeaderComponent) => ( - - ))} -
{beforeBody.map((BodyComponent) => ( diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 512af0dd0..05642852f 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -123,6 +123,15 @@ a { .page { max-width: calc(#{map-get($breakpoints, desktop)} + 300px); margin: 0 auto; + & header { + margin-top: 1rem; + margin-bottom: 1rem; + &.empty { + margin-top: 0; + margin-bottom: $topSpacing; + } + } + & article { & > h1 { font-size: 2rem; @@ -182,7 +191,7 @@ a { gap: 2rem; top: 0; box-sizing: border-box; - padding: $topSpacing 2rem 2rem 2rem; + padding: 0 2rem 2rem 2rem; display: flex; height: 100vh; position: sticky; @@ -232,8 +241,8 @@ a { } & .page-header { - grid-area: grid-header; - margin: $topSpacing 0 0 0; + grid-area: grid-before-body; + margin: 0 0 0 0; @media all and ($mobile) { margin-top: 0; padding: 0; diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss index 4a5cea583..56eb1130f 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -28,7 +28,7 @@ $mobileGrid: ( columnGap: "5px", templateAreas: '"grid-sidebar-left"\ - "grid-header"\ + "grid-before-body"\ "grid-center"\ "grid-sidebar-right"\ "grid-footer"', @@ -39,7 +39,7 @@ $tabletGrid: ( rowGap: "5px", columnGap: "5px", templateAreas: - '"grid-sidebar-left grid-header"\ + '"grid-sidebar-left grid-before-body"\ "grid-sidebar-left grid-center"\ "grid-sidebar-left grid-sidebar-right"\ "grid-sidebar-left grid-footer"', @@ -50,7 +50,7 @@ $desktopGrid: ( rowGap: "5px", columnGap: "5px", templateAreas: - '"grid-sidebar-left grid-header grid-sidebar-right"\ + '"grid-sidebar-left grid-before-body grid-sidebar-right"\ "grid-sidebar-left grid-center grid-sidebar-right"\ "grid-sidebar-left grid-footer grid-sidebar-right"', );