156 lines
3.9 KiB
Markdown
156 lines
3.9 KiB
Markdown
---
|
|
title: Typography
|
|
---
|
|
|
|
! Details on the full capabilities of Spectre.css can be found in the [Official Spectre Documentation](https://picturepan2.github.io/spectre/elements.html)
|
|
|
|
The [Quark theme](https://github.com/getgrav/grav-theme-quark) is the new default theme for Grav built with [Spectre.css](https://picturepan2.github.io/spectre/) the lightweight, responsive and modern CSS framework. Spectre provides basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design.
|
|
|
|
### Headings
|
|
|
|
# H1 Heading `40px`
|
|
|
|
## H2 Heading `32px`
|
|
|
|
### H3 Heading `28px`
|
|
|
|
#### H4 Heading `24px`
|
|
|
|
##### H5 Heading `20px`
|
|
|
|
###### H6 Heading `16px`
|
|
|
|
```html
|
|
# H1 Heading
|
|
# H1 Heading `40px`</small>`
|
|
|
|
<span class="h1">H1 Heading</span>
|
|
```
|
|
|
|
### 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
|
|
|
|
<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 |
|
|
```
|
|
|
|
### 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
|
|
|
|
```markdown
|
|
! This is a warning notification
|
|
|
|
!! This is a error notification
|
|
|
|
!!! This is a default notification
|
|
|
|
!!!! This is a success notification
|
|
```
|
|
|