components: make Header as header

jackyzha0 · Nov 29, 2024 · 920fd4e · 920fd4e
1 parent e1d754e
commit 920fd4e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
@@ -1,15 +1,16 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
-  return children.length > 0 ? <header>{children}</header> : null
+  return children.length > 0 ? <header>{children}</header> : <header className={"empty"}></header>
 }
 
 Header.css = `
 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
@@ -223,15 +223,15 @@ export function renderPage(
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
+          <Header {...componentData}>
+            {header.map((HeaderComponent) => (
+              <HeaderComponent {...componentData} />
+            ))}
+          </Header>
           <Body {...componentData}>
             {LeftComponent}
             <div class="center">
               <div class="page-header">
-                <Header {...componentData}>
-                  {header.map((HeaderComponent) => (
-                    <HeaderComponent {...componentData} />
-                  ))}
-                </Header>
                 <div class="popover-hint">
                   {beforeBody.map((BodyComponent) => (
                     <BodyComponent {...componentData} />

diff --git 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
@@ -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"',
 );