smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 14:34:23 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

components: make Header as header

Browse Source
This commit is contained in:
vanadium23 2024-11-30 00:01:45 +03:00
parent 5ccc2dcbba
commit fc901e1084
4 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
quartz/components/Header.tsx
View File

@ -1,7 +1,7 @@
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 = `
@ -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;
}

8
quartz/components/renderPage.tsx
View File

@ -223,15 +223,15 @@ export function renderPage(
<Head {...componentData} />
<body data-slug={slug}>
<div id="quartz-root" class="page">
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<Header {...componentData}>
{header.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<div class="popover-hint">
{beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} />

15
quartz/styles/base.scss
View File

@ -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;

6
quartz/styles/variables.scss
View File

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