The Trans Directory
1---
2title: Layout
3---
4
5Certain emitters may also output [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) files. To enable easy customization, these emitters allow you to fully rearrange the layout of the page. The default page layouts can be found in `quartz.layout.ts`.
6
7Each page is composed of multiple different sections which contain `QuartzComponents`. The following code snippet lists all of the valid sections that you can add components to:
8
9```typescript title="quartz/cfg.ts"
10export interface FullPageLayout {
11 head: QuartzComponent // single component
12 header: QuartzComponent[] // laid out horizontally
13 beforeBody: QuartzComponent[] // laid out vertically
14 pageBody: QuartzComponent // single component
15 afterBody: QuartzComponent[] // laid out vertically
16 left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
17 right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
18 footer: QuartzComponent // single component
19}
20```
21
22These correspond to following parts of the page:
23
24| Layout | Preview |
25| ------------------------------- | ----------------------------------- |
26| Desktop (width > 1200px) | ![[quartz-layout-desktop.png\|800]] |
27| Tablet (800px < width < 1200px) | ![[quartz-layout-tablet.png\|800]] |
28| Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] |
29
30> [!note]
31> There are two additional layout fields that are _not_ shown in the above diagram.
32>
33> 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.
34> 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`.
35
36Quartz **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.
37
38See [a list of all the components](component.md) for all available components along with their configuration options. Additionally, Quartz provides several built-in higher-order components for layout composition - see [[layout-components]] for more details.
39
40You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
41
42### Layout breakpoints
43
44Quartz has different layouts depending on the width the screen viewing the website.
45
46The breakpoints for layouts can be configured in `variables.scss`.
47
48- `mobile`: screen width below this size will use mobile layout.
49- `desktop`: screen width above this size will use desktop layout.
50- Screen width between `mobile` and `desktop` width will use the tablet layout.
51
52```scss
53$breakpoints: (
54 mobile: 800px,
55 desktop: 1200px,
56);
57```
58
59### Style
60
61Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. 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.
62
63You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
64
65> [!note]
66> 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.