scapegoat/Docs2.git

			@@ -86,13 +86,13 @@

			```typescript title="quartz/cfg.ts"
			export interface FullPageLayout {
			head: QuartzComponent // single component
			header: QuartzComponent[] // laid out horizontally
			head: QuartzComponent // single component
			header: QuartzComponent[] // laid out horizontally
			beforeBody: QuartzComponent[] // laid out vertically
			pageBody: QuartzComponent // single component
			left: QuartzComponent[] // vertical on desktop, horizontal on mobile
			right: QuartzComponent[] // vertical on desktop, horizontal on mobile
			footer: QuartzComponent // single component
			pageBody: QuartzComponent // single component
			left: QuartzComponent[] // vertical on desktop, horizontal on mobile
			right: QuartzComponent[] // vertical on desktop, horizontal on mobile
			footer: QuartzComponent // single component
			}
			```

			@@ -101,22 +101,24 @@
			![[quartz-layout.png\|800]]

			> [!note]
			> There are two additional layout fields that are not shown in the above diagram.
			> There are two additional layout fields that are _not_ shown in the above diagram.
			>
			> 1. `head` is a single component that renders the `<head>` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles.
			> 2. `header` is a set of components that are laid out horizontally and appears before the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.
			> 2. `header` is a set of components that are laid out horizontally and appears _before_ the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.

			Quartz components, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.

			See [a list of all the components](./tags/component) for all available components along with their configuration options.

			### Style
			Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration\|general configuration]] options above.

			Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration\|general configuration]] options above.

			However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.

			You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
			You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.

			> [!note]
			> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports its styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.
			> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.

			When you're ready, see how [[build\|build and preview]] Quartz locally.
			When you're ready, see how [[build\|build and preview]] Quartz locally.