177 lines
5.4 KiB
Markdown
177 lines
5.4 KiB
Markdown
---
|
|
title: Typography
|
|
---
|
|
|
|
> [!NOTE]
|
|
> Quark 2 is Grav 2.0's default theme. It uses [Blades CSS](https://blades.ninja/) (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 [Official Blades CSS Docs](https://blades.ninja/#docs).
|
|
|
|
The [Quark 2 theme](https://github.com/getgrav/grav-theme-quark2) is Grav's new default, replacing the long-serving Quark (1.x) theme. It pairs a pure-grayscale palette with **Cal Sans** for display and **Inter** 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.
|
|
|
|
### Headings
|
|
|
|
Quark 2 uses **Cal Sans** for display headings and treats `h1` / `h2` distinctly — `h1` sits at a lighter display weight while `h2` is bolder and gains a small accent bar to mark section breaks. `h6` is rendered as an uppercase eyebrow label.
|
|
|
|
# H1 Heading — airy, display weight
|
|
|
|
## H2 Heading — confident, with accent bar
|
|
|
|
### H3 Heading — workhorse section heading
|
|
|
|
#### H4 Heading
|
|
|
|
##### H5 Heading
|
|
|
|
###### H6 Heading — uppercase eyebrow
|
|
|
|
```markdown
|
|
# H1 Heading
|
|
## H2 Heading
|
|
### H3 Heading
|
|
#### H4 Heading
|
|
##### H5 Heading
|
|
###### H6 Heading
|
|
```
|
|
|
|
### Paragraphs
|
|
|
|
Body copy is set in **Inter** at 16px with a 1.7 line-height and subtle tracking. Links adopt the theme's **accent color** — by default a restrained charcoal, but configurable to any hex via `Themes → Quark 2 → Accent Color`.
|
|
|
|
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
|
|
|
|
<abbr>I18N</abbr> `<abbr>`
|
|
|
|
<cite>Citation</cite> `<cite>`
|
|
|
|
<kbd>Ctrl + S</kbd> `<kbd>`
|
|
|
|
Text<sup>Superscripted</sup> `<sup>`
|
|
|
|
Text<sub>Subscripted</sub> `<sub>`
|
|
|
|
<u>Underlined</u> `<u>`
|
|
|
|
<mark>Highlighted</mark> `<mark>`
|
|
|
|
<time>20:14</time> `<time>`
|
|
|
|
<var>x = y + 2</var> `<var>`
|
|
|
|
### 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.
|
|
>
|
|
> <cite>- Bill Gates</cite>
|
|
|
|
```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>
|
|
```
|
|
|
|
### Unordered List
|
|
|
|
* list item 1
|
|
* list item 2
|
|
* list item 2.1
|
|
* list item 2.2
|
|
* list item 2.3
|
|
* list item 3
|
|
|
|
```markdown
|
|
* 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
|
|
1. list item 2
|
|
1. list item 2.1
|
|
1. list item 2.2
|
|
1. list item 2.3
|
|
1. list item 3
|
|
|
|
```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
|
|
```
|
|
|
|
### 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 |
|
|
|
|
```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 |
|
|
```
|
|
|
|
### Alerts
|
|
|
|
Grav 2.0 replaces the legacy `markdown-notices` plugin with [`github-markdown-alerts`](https://github.com/grav/grav-plugin-github-markdown-alerts), which renders [GitHub-flavored Markdown alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). Five types are available, each with an accent stripe, icon, and label:
|
|
|
|
> [!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.
|
|
|
|
```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.
|
|
```
|
|
|