Skip to content

Commit a11b198

Browse files
lovelydinosaurlovelydinosaur
committed
Update styling docs
1 parent 17d6b48 commit a11b198

2 files changed

Lines changed: 43 additions & 8 deletions

File tree

‎docs/styling.md‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,22 @@ Styling is handled with HTML templating and regular web design.
66

77
Markdown documents are rendered using Jinja templating.
88

9-
The base template for rendering is `templates/base.html`:
9+
The following templates are included in the default theme...
10+
11+
* `templates/base.html`
1012

1113
```html
1214
<html>
1315
<head>
1416
<meta charset="utf-8">
17+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1518
<title>{{ config['site']['title'] }}</title>
16-
<link rel="icon" href="/img/favicon.svg">
19+
<link rel="icon" href="data:image/svg+xml,{% include 'favicon.svg' %}">
1720
<link rel="stylesheet" href="/css/highlightjs.min.css">
21+
<link rel="stylesheet" href="/css/highlightjs-copy.min.css">
1822
<link rel="stylesheet" href="/css/theme.css">
1923
<script src="/js/highlightjs.min.js"></script>
24+
<script src="/js/highlightjs-copy.min.js"></script>
2025
<script src="/js/theme.js"></script>
2126
</head>
2227
<body>
@@ -28,18 +33,48 @@ The base template for rendering is `templates/base.html`:
2833
</nav>
2934
<main>
3035
{{ content }}
36+
{% include "pagination.html" %}
3137
</main>
3238
</body>
3339
</html>
3440
```
3541

36-
You can override this template locally and adapt it to make layout changes.
42+
The base template used for rendering markdown pages. You can override this template locally and adapt it to make layout changes.
43+
44+
* `templates/favicon.svg`
45+
46+
```html
47+
{% set escaped %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">{{ config['site']['favicon'] }}</text></svg>{% endset %}{{ escaped | e }}
48+
```
49+
50+
Included by the base template. This is an SVG used for the favicon, that is included as an inline `data:` URL.
51+
52+
Enables the `config['site']['favicon']` field to config a unicode emoji to use as the site favicon.
53+
54+
* `templates/pagination.html`
55+
56+
```html
57+
{% if page.previous or page.next %}
58+
<div class="pagination">
59+
{% if page.previous %}
60+
<a class="previous" href="{{ page.previous['url']}}">← {{ page.previous['title']}}</a>
61+
{% endif %}
62+
{% if page.next %}
63+
<a class="next" href="{{ page.next['url']}}">{{ page.next['title']}} →</a>
64+
{% endif %}
65+
</div>
66+
{% endif %}
67+
```
68+
69+
Included by the base template. Renders next and previous page controls.
3770

3871
## Media
3972

4073
The default theme includes the following assets:
4174

42-
* `css/theme.css` &mdash; *Copy and overide this file in order to change the color palette, the typography, or to other style changes.*
43-
* `css/highlightjs.min.css` &mdash; *The default theme uses the `github-dark` code highlighting style. Override this file to use a different `highlight.js` code highlighting style.*
44-
* `js/theme.js` &mdash; *Copy and override this file in order to add custom scripting.*
45-
* `js/highlightjs.min.js` &mdash; *The default theme uses the default supported languages with `highlight.js`. Override this file to support a different set of programming languages.*
75+
* [`css/theme.css`](css/theme.css) &mdash; Copy and overide this file in order to change the color palette, the typography, or to other style changes.
76+
* [`css/highlightjs.min.css`](css/highlightjs.min.css) &mdash; The default theme uses the `github-dark` code highlighting style. Override this file to use a different `highlight.js` code highlighting style.
77+
* [`css/highlightjs-copy.min.css`](css/highlightjs.min.css) &mdash; *...*
78+
* [`js/theme.js`](js/theme.js) &mdash; Copy and override this file in order to add custom scripting.
79+
* [`js/highlightjs.min.js`](js/highlightjs.min.js) &mdash; The default theme uses the default supported languages with `highlight.js`. Override this file to support a different set of programming languages.
80+
* [`js/highlightjs-copy.min.js`](js/highlightjs-copy.min.js)

‎src/mkdocs/theme/templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<meta charset="utf-8">
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ config['site']['title'] }}</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<title>{{ config['site']['title'] }}</title>
66
<link rel="icon" href="data:image/svg+xml,{% include 'favicon.svg' %}">
77
<link rel="stylesheet" href="/css/highlightjs.min.css">

0 commit comments

Comments
 (0)