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" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const Header: QuartzComponent = ({ children }: QuartzComponentProps) => { 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.css = `
@ -9,7 +9,8 @@ header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: 2rem 0; justify-content: flex-end;
padding: 1rem 2rem;
gap: 1.5rem; gap: 1.5rem;
} }

10
quartz/components/renderPage.tsx
View File

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

15
quartz/styles/base.scss
View File

@ -123,6 +123,15 @@ a {
.page { .page {
max-width: calc(#{map-get($breakpoints, desktop)} + 300px); max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto; margin: 0 auto;
& header {
margin-top: 1rem;
margin-bottom: 1rem;
&.empty {
margin-top: 0;
margin-bottom: $topSpacing;
}
}
& article { & article {
& > h1 { & > h1 {
font-size: 2rem; font-size: 2rem;
@ -182,7 +191,7 @@ a {
gap: 2rem; gap: 2rem;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;
padding: $topSpacing 2rem 2rem 2rem; padding: 0 2rem 2rem 2rem;
display: flex; display: flex;
height: 100vh; height: 100vh;
position: sticky; position: sticky;
@ -232,8 +241,8 @@ a {
} }
& .page-header { & .page-header {
grid-area: grid-header; grid-area: grid-before-body;
margin: $topSpacing 0 0 0; margin: 0 0 0 0;
@media all and ($mobile) { @media all and ($mobile) {
margin-top: 0; margin-top: 0;
padding: 0; padding: 0;

6
quartz/styles/variables.scss
View File

@ -28,7 +28,7 @@ $mobileGrid: (
columnGap: "5px", columnGap: "5px",
templateAreas: templateAreas:
'"grid-sidebar-left"\ '"grid-sidebar-left"\
"grid-header"\ "grid-before-body"\
"grid-center"\ "grid-center"\
"grid-sidebar-right"\ "grid-sidebar-right"\
"grid-footer"', "grid-footer"',
@ -39,7 +39,7 @@ $tabletGrid: (
rowGap: "5px", rowGap: "5px",
columnGap: "5px", columnGap: "5px",
templateAreas: templateAreas:
'"grid-sidebar-left grid-header"\ '"grid-sidebar-left grid-before-body"\
"grid-sidebar-left grid-center"\ "grid-sidebar-left grid-center"\
"grid-sidebar-left grid-sidebar-right"\ "grid-sidebar-left grid-sidebar-right"\
"grid-sidebar-left grid-footer"', "grid-sidebar-left grid-footer"',
@ -50,7 +50,7 @@ $desktopGrid: (
rowGap: "5px", rowGap: "5px",
columnGap: "5px", columnGap: "5px",
templateAreas: 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-center grid-sidebar-right"\
"grid-sidebar-left grid-footer grid-sidebar-right"', "grid-sidebar-left grid-footer grid-sidebar-right"',
); );