Skip to main content

Typography

The Quark theme is the new default theme for Grav built with Spectre.css. It has, however, been replaced by a custom Gerfficient theme.

The Gerfficient theme is also as lightweight as possible with a responsive and modern CSS framework. It provides basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design. By automatically including highlighting.js and MathJax both syntax highlighting and LaTeX-like equation formatting is supported.

Headings

H1 Heading 2rem

H2 Heading 1.5rem

H3 Heading 1.17rem

H4 Heading 1rem

H5 Heading 0.83rem
H6 Heading 0.67rem

# H1 Heading `2rem`

## H2 Heading `1.5rem`

### H3 Heading `1.17rem`

#### H4 Heading `1rem`

##### H5 Heading `0.83rem`

###### H6 Heading `0.67rem`

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

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.

Markdown Semantic Text Elements

Bold **Bold**

_Italic_ _Italic_

Deleted ~~Deleted~~

Inline Code `Inline Code`

HTML Semantic Text Elements

I18N <abbr>

Citation <cite>

Ctrl + S <kbd>

TextSuperscripted <sup>

TextSubscripted <sub>

Underlined <u>

Highlighted <mark>

<time>

x = y + 2 <var>

Equations

Use $ for inline equations such as $ a^2 + b^2 = c^2 $ or $$ for standalone equations:

$$ x_{0,1} = \frac{-b \pm \sqrt{b^2 -4ac}}{2a} $$

which is: 


$$ x_{0,1} = \frac{-b \pm \sqrt{b^2 -4ac}}{2a} $$

or

$$ \begin{aligned} \text{div}\vec{D} = \vec{\nabla} \cdot \vec{D} = \rho &\Leftrightarrow \oint_{\delta V} \vec{D} \cdot d\vec{A} = \iiint_V{\rho dV} = Q(V) \\\\ \text{div}\vec{B} = \vec{\nabla} \cdot \vec{B} = 0 &\Leftrightarrow \oint_{\delta V} \vec{D} \cdot d\vec{A} = 0 \\\\ \text{rot}\vec{E} = \vec{\nabla} \times \vec{E} = - \frac{\delta\vec{B}}{\delta t} &\Leftrightarrow \oint_{\delta A} \vec{E} \cdot d\vec{s} = -\iint_A{\frac{\delta\vec{B}}{\delta t} d\vec{A}} \\\\ \text{rot}\vec{H} = \vec{\nabla} \times \vec{H} = \vec{j}_l + \frac{\delta\vec{D}}{\delta t} &\Leftrightarrow \oint_{\delta A} \vec{H} \cdot d\vec{s} = \iint_A{\vec{j}_l \cdot d\vec{A}} + \iint_A{\frac{\delta\vec{D}}{\delta t}\cdot d\vec{A}} \end{aligned} $$

which is: 


\begin{aligned}
\text{div}\vec{D} = \vec{\nabla} \cdot \vec{D} = \rho &\Leftrightarrow \oint_{\delta V} \vec{D} \cdot d\vec{A} = \iiint_V{\rho dV} = Q(V) \\\\
\text{div}\vec{B} = \vec{\nabla} \cdot \vec{B} = 0 &\Leftrightarrow \oint_{\delta V} \vec{D} \cdot d\vec{A} = 0 \\\\
\text{rot}\vec{E} = \vec{\nabla} \times \vec{E} = - \frac{\delta\vec{B}}{\delta t} &\Leftrightarrow \oint_{\delta A} \vec{E} \cdot d\vec{s} = -\iint_A{\frac{\delta\vec{B}}{\delta t} d\vec{A}} \\\\
\text{rot}\vec{H} = \vec{\nabla} \times \vec{H} = \vec{j}_l + \frac{\delta\vec{D}}{\delta t} &\Leftrightarrow \oint_{\delta A} \vec{H} \cdot d\vec{s} = \iint_A{\vec{j}_l \cdot d\vec{A}} + \iint_A{\frac{\delta\vec{D}}{\delta t}\cdot d\vec{A}}
\end{aligned}

Blockquote

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. > - Bill Gates 

> 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>

Unordered List


* list item 1
* list item 2
    * list item 2.1
    * list item 2.2
    * list item 2.3
* list item 3

Ordered List

  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3

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

Table

| 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 | 


| 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    |

Notices

The notices styles are actually provided by the markdown-notices plugin but are useful enough to include here:

This is a warning notification
This is a error notification
This is a default notification
This is a success notification

! This is a warning notification

!! This is a error notification

!!! This is a default notification

!!!! This is a success notification

Images

Cat


![Cat](cat.jpeg)

Hyperlinks

Click 


[Click](#)