<html><head><title>Layout</title><metacharSet="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaproperty="og:title"content="Layout"/><metaproperty="og:description"content="Certain emitters may also output 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."/><metaproperty="og:image"content="https://roadmap.logos.co/static/og-image.png"/><metaproperty="og:width"content="1200"/><metaproperty="og:height"content="675"/><linkrel="icon"href="./static/icon.png"/><metaname="description"content="Certain emitters may also output 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."/><metaname="generator"content="Logos Roadmaps"/><linkrel="preconnect"href="https://fonts.googleapis.com"/><linkrel="preconnect"href="https://fonts.gstatic.com"/><linkhref="./index.css"rel="stylesheet"type="text/css"spa-preserve/><linkhref="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"rel="stylesheet"type="text/css"spa-preserve/><linkhref="https://fonts.googleapis.com/css2?family=IBM Plex Mono&family=Schibsted Grotesk:wght@400;700&family=Source Sans Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap"rel="stylesheet"type="text/css"spa-preserve/><scriptsrc="./prescript.js"type="application/javascript"spa-preserve></script><scripttype="application/javascript"spa-preserve>constfetchData=fetch(`./static/contentIndex.json`).then(data=>data.json())</script></head><bodydata-slug="layout"><divid="quartz-root"class="page"><divid="quartz-body"><divclass="left sidebar"><h1class="page-title"><ahref=".">Logos Collective Project Roadmaps</a></h1><divclass="spacer mobile-only"></div><divclass="search"><divid="search-icon"><p>Search</p><div></div><svgtabIndex="0"aria-labelledby="title desc"role="img"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 19.9 19.7"><titleid="title">Search</title><descid="desc">Search</desc><gclass="search-path"fill="none"><pathstroke-linecap="square"d="M18.5 18.3l-5.4-5.4"></path><circlecx="8"cy="8"r="7"></circle></g></svg></div><divid="search-container"><divid="search-space"><inputautocomplete="off"id="search-bar"name="search"type="text"aria-label="Search for something"placeholder="Search for something"/><divid="results-container"></div></div></div></div><divclass="darkmode"><inputclass="toggle"id="darkmode-toggle"type="checkbox"tabIndex="-1"/><labelid="toggle-label-light"for="darkmode-toggle"tabIndex="-1"><svgxmlns="http://www.w3.org/2000/svg"xmlnsXlink="http://www.w3.org/1999/xlink"version="1.1"id="dayIcon"x="0px"y="0px"viewBox="0 0 35 35"style="enable-background:new 0 0 35 35;"xmlSpace="preserve"><title>Light mode</title><pathd="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5zM7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26zM17.5,6C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6zM27.5,9c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9zM6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06L6.439,8.561zM33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16zM28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439zM17.5,29c-0.829,0-1.5,0.672-1.5,1.5v
<p>Each page is composed of multiple different sections which contain <code>QuartzComponents</code>. The following code snippet lists all of the valid sections that you can add components to:</p>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> head</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-comment);">// single component</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> header</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);">[] </span><spanstyle="color:var(--shiki-token-comment);">// laid out horizontally</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> beforeBody</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);">[] </span><spanstyle="color:var(--shiki-token-comment);">// laid out vertically</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> pageBody</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-comment);">// single component</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> left</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);">[] </span><spanstyle="color:var(--shiki-token-comment);">// vertical on desktop, horizontal on mobile</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> right</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);">[] </span><spanstyle="color:var(--shiki-token-comment);">// vertical on desktop, horizontal on mobile</span></span>
<spandata-line><spanstyle="color:var(--shiki-color-text);"> footer</span><spanstyle="color:var(--shiki-token-keyword);">:</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-function);">QuartzComponent</span><spanstyle="color:var(--shiki-color-text);"></span><spanstyle="color:var(--shiki-token-comment);">// single component</span></span>
<p>There are two additional layout fields that are <em>not</em> shown in the above diagram.</p>
<ol>
<li><code>head</code> is a single component that renders the <code><head></code><ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head"class="external">tag</a> 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.</li>
<li><code>header</code> is a set of components that are laid out horizontally and appears <em>before</em> the <code>beforeBody</code> 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 <code>header</code>.</li>
</ol>
</blockquote>
<p>Quartz <strong>components</strong>, 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.</p>
<p>See <ahref="./tags/component"class="internal">a list of all the components</a> for all available components along with their configuration options. You can also checkout the guide on <ahref="./creating-components"class="internal">creating components</a> if you’re interested in further customizing the behaviour of Quartz.</p>
<p>Most meaningful style changes like colour scheme and font can be done simply through the <ahref="./configuration#general-configuration"class="internal">general configuration</a> 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 <ahref="https://sass-lang.com/guide/"class="external">Sass</a> for styling.</p>
<p>You can see the base style sheet in <code>quartz/styles/base.scss</code> and write your own in <code>quartz/styles/custom.scss</code>.</p>
<p>Some components may provide their own styling as well! For example, <code>quartz/components/Darkmode.tsx</code> imports styles from <code>quartz/components/styles/darkmode.scss</code>. If you’d like to customize styling for a specific component, double check the component definition to see how its styles are defined.</p>
