<blockquote>
<p>[!NOTE]
Quark 2 is Grav 2.0's default theme. It uses <a href="https://blades.ninja/">Blades CSS</a> (the actively maintained successor to Pico CSS) as a classless foundation, layered with a Cal.com-inspired design system. Full Blades capabilities are documented in the <a href="https://blades.ninja/#docs">Official Blades CSS Docs</a>.</p>
</blockquote>
<p>The <a href="https://github.com/getgrav/grav-theme-quark2">Quark 2 theme</a> is Grav's new default, replacing the long-serving Quark (1.x) theme. It pairs a pure-grayscale palette with <strong>Cal Sans</strong> for display and <strong>Inter</strong> for body text (both hosted locally), Font Awesome 7 icons, and auto/light/dark appearance that persists in the user's browser. The layout system is CSS Grid + modern custom properties rather than a framework grid.</p>
<h3>Headings</h3>
<p>Quark 2 uses <strong>Cal Sans</strong> for display headings and treats <code>h1</code> / <code>h2</code> distinctly — <code>h1</code> sits at a lighter display weight while <code>h2</code> is bolder and gains a small accent bar to mark section breaks. <code>h6</code> is rendered as an uppercase eyebrow label.</p>
<h1>H1 Heading — airy, display weight</h1>
<h2>H2 Heading — confident, with accent bar</h2>
<h3>H3 Heading — workhorse section heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading — uppercase eyebrow</h6>
<pre><code class="language-markdown"># H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading</code></pre>
<h3>Paragraphs</h3>
<p>Body copy is set in <strong>Inter</strong> at 16px with a 1.7 line-height and subtle tracking. Links adopt the theme's <strong>accent color</strong> — by default a restrained charcoal, but configurable to any hex via <code>Themes → Quark 2 → Accent Color</code>.</p>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
<h3>Markdown Semantic Text Elements</h3>
<p><strong>Bold</strong> <code>**Bold**</code></p>
<p><em>Italic</em> <code>_Italic_</code></p>
<p><del>Deleted</del> <code>~~Deleted~~</code></p>
<p><code>Inline Code</code> <code>`Inline Code`</code></p>
<h3>HTML Semantic Text Elements</h3>
<p><abbr>I18N</abbr> <code><abbr></code></p>
<p><cite>Citation</cite> <code><cite></code></p>
<p><kbd>Ctrl + S</kbd> <code><kbd></code></p>
<p>Text<sup>Superscripted</sup> <code><sup></code></p>
<p>Text<sub>Subscripted</sub> <code><sub></code></p>
<p><u>Underlined</u> <code><u></code></p>
<p><mark>Highlighted</mark> <code><mark></code></p>
<p><time>20:14</time> <code><time></code></p>
<p><var>x = y + 2</var> <code><var></code></p>
<h3>Blockquote</h3>
<blockquote>
<p>The advance of technology is based on making it fit in so that you don't really even notice it,
so it's part of everyday life.</p>
<p><cite>- Bill Gates</cite></p>
</blockquote>
<pre><code class="language-markdown">> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite></code></pre>
<h3>Unordered List</h3>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2.1</li>
<li>list item 2.2</li>
<li>list item 2.3</li>
</ul></li>
<li>list item 3</li>
</ul>
<pre><code class="language-markdown">* list item 1
* list item 2
* list item 2.1
* list item 2.2
* list item 2.3
* list item 3</code></pre>
<h3>Ordered List</h3>
<ol>
<li>list item 1</li>
<li>list item 2
<ol>
<li>list item 2.1</li>
<li>list item 2.2</li>
<li>list item 2.3</li>
</ol></li>
<li>list item 3</li>
</ol>
<pre><code class="language-markdown">1. list item 1
1. list item 2
1. list item 2.1
1. list item 2.2
1. list item 2.3
1. list item 3</code></pre>
<h3>Table</h3>
<table>
<thead>
<tr>
<th style="text-align: left;">Name</th>
<th style="text-align: center;">Genre</th>
<th style="text-align: right;">Release date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">The Shawshank Redemption</td>
<td style="text-align: center;">Crime, Drama</td>
<td style="text-align: right;">14 October 1994</td>
</tr>
<tr>
<td style="text-align: left;">The Godfather</td>
<td style="text-align: center;">Crime, Drama</td>
<td style="text-align: right;">24 March 1972</td>
</tr>
<tr>
<td style="text-align: left;">Schindler's List</td>
<td style="text-align: center;">Biography, Drama, History</td>
<td style="text-align: right;">4 February 1994</td>
</tr>
<tr>
<td style="text-align: left;">Se7en</td>
<td style="text-align: center;">Crime, Drama, Mystery</td>
<td style="text-align: right;">22 September 1995</td>
</tr>
</tbody>
</table>
<pre><code class="language-markdown">| Name | Genre | Release date |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |</code></pre>
<h3>Alerts</h3>
<p>Grav 2.0 replaces the legacy <code>markdown-notices</code> plugin with <a href="https://github.com/grav/grav-plugin-github-markdown-alerts"><code>github-markdown-alerts</code></a>, which renders <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts">GitHub-flavored Markdown alerts</a>. Five types are available, each with an accent stripe, icon, and label:</p>
<blockquote>
<p>[!NOTE]
Highlights information that users should take into account, even when skimming.</p>
<p>[!TIP]
Optional information to help a user be more successful.</p>
<p>[!IMPORTANT]
Crucial information necessary for users to succeed.</p>
<p>[!WARNING]
Critical content demanding immediate user attention due to potential risks.</p>
<p>[!CAUTION]
Negative potential consequences of an action.</p>
</blockquote>
<pre><code class="language-markdown">> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!TIP]
> Optional information to help a user be more successful.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.
> [!CAUTION]
> Negative potential consequences of an action.</code></pre>
<script src="/user/themes/bones/bower_components/what-input/what-input.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.util.motion.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.util.touch.js"></script>
<script src="/user/themes/bones/bower_components/foundation-sites/js/foundation.util.triggers.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script>
$(document).foundation();
</script>