pandoc-markdown-jekyll-theme 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +125 -0
- data/_includes/after.html +11 -0
- data/_includes/before.html +12 -0
- data/_includes/default.html +21 -0
- data/_includes/enable_checkboxes.html +12 -0
- data/_includes/head.html +37 -0
- data/_includes/header.html +22 -0
- data/_includes/math.html +18 -0
- data/_layouts/index.html +1 -0
- data/_layouts/page.html +1 -0
- data/_layouts/post.html +1 -0
- data/_template.html5 +14 -0
- data/assets/css/skylighting-solarized-theme.css +39 -0
- data/assets/css/theme.css +1108 -0
- metadata +113 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 7c582131cf69183c2bd12609cee6a6df1da1f1f3e7e1c413d3115f255fc68cca
|
|
4
|
+
data.tar.gz: e07390e77fc52f40280b9507343cc582e0947f66e9e68762e6004de364bff2ac
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 2de43c133f185ab08c0a9e8f15d464ba4f52d764dc10163ed62a314ed342e9f80840b84697e73846eb0f4c1094942dd4c73cc08133b5f5a1e33ef2f306892541
|
|
7
|
+
data.tar.gz: 70440f97a07a2c7a5fde3a8da42b0c88962ff82b5651c829e5481553fa5339ea21f966783c9c4a26f5331ec312d2d397a7c065d301683a4f457e17af205c04f6
|
data/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# pandoc-markdown-jekyll-theme
|
|
2
|
+
|
|
3
|
+
This is a Jekyll theme for blogging with Pandoc. It's based off of [Pandoc
|
|
4
|
+
Markdown CSS Theme] for the original CSS file. Read more about the theme there.
|
|
5
|
+
|
|
6
|
+
[Pandoc Markdown CSS Theme]: https://jez.io/pandoc-markdown-css-theme/
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
There are two external dependencies in order to use this theme:
|
|
11
|
+
|
|
12
|
+
- [Pandoc](https://pandoc.org/)
|
|
13
|
+
- [`pandoc-sidenote`](https://github.com/jez/pandoc-sidenote)
|
|
14
|
+
|
|
15
|
+
Follow the installation instructions for your platform. If you’re using macOS,
|
|
16
|
+
installation is as easy as:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
brew install pandoc
|
|
20
|
+
brew install jez/formulae/pandoc-sidenote
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Next, add this line to your Jekyll site's Gemfile:
|
|
24
|
+
|
|
25
|
+
```ruby
|
|
26
|
+
# -- Gemfile --
|
|
27
|
+
# ...
|
|
28
|
+
|
|
29
|
+
gem "pandoc-markdown-jekyll-theme"
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
And then run:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
# Install the Jekyll theme
|
|
36
|
+
bundle install
|
|
37
|
+
# Copy out one file that has to live in the site folder, not the theme
|
|
38
|
+
cp $(bundle info pandoc-markdown-jekyll-theme --path)/_template.html5 .
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
And finally, update your `_config.yml` file:
|
|
42
|
+
|
|
43
|
+
```yaml
|
|
44
|
+
# -- _config.yml --
|
|
45
|
+
|
|
46
|
+
theme: pandoc-markdown-jekyll-theme
|
|
47
|
+
|
|
48
|
+
gems:
|
|
49
|
+
- jekyll-pandoc
|
|
50
|
+
|
|
51
|
+
markdown: Pandoc
|
|
52
|
+
|
|
53
|
+
pandoc:
|
|
54
|
+
extensions:
|
|
55
|
+
- from: 'markdown+smart+tex_math_single_backslash'
|
|
56
|
+
- filter: 'pandoc-sidenote'
|
|
57
|
+
- template: '_template'
|
|
58
|
+
- katex
|
|
59
|
+
- toc
|
|
60
|
+
- M: 'site__baseurl=/'
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
If your Jekyll site has a `baseurl:` setting in `_config.yml`, change the last
|
|
64
|
+
line above to `site__baseurl=$BASEURL/`, replacing `$BASEURL` with what the
|
|
65
|
+
setting of your `baseurl` property reads. (There is unfortunately no easy way to
|
|
66
|
+
get the Pandoc template file to read from the Jekyll config, so the value must
|
|
67
|
+
be duplicated.)
|
|
68
|
+
|
|
69
|
+
## Usage
|
|
70
|
+
|
|
71
|
+
The following variables are used by this theme.
|
|
72
|
+
|
|
73
|
+
- `site.title`
|
|
74
|
+
- Only shows up as suffix in `<title>` element
|
|
75
|
+
- `page.title`
|
|
76
|
+
- `site.author`
|
|
77
|
+
- `page.author`
|
|
78
|
+
- `site.baseurl`
|
|
79
|
+
- Make sure you don't have a trailing slash here
|
|
80
|
+
- `site.header_includes`
|
|
81
|
+
- `page.header_includes`
|
|
82
|
+
- You can use these to include raw HTML in the `<head>`
|
|
83
|
+
- `site.include_after`
|
|
84
|
+
- `site.pandoc_markdown_skip_syntax_theme`
|
|
85
|
+
- Set to `true` to skip including the default syntax theme CSS file.
|
|
86
|
+
- `page.include_after`
|
|
87
|
+
- You can use these to include raw HTML in the `<body>` before the content
|
|
88
|
+
- `site.include_before`
|
|
89
|
+
- `page.include_before`
|
|
90
|
+
- You can use these to include raw HTML in the `<body>` after the content
|
|
91
|
+
- `page.layout`
|
|
92
|
+
- Pick one of `index`, `page`, or `post`
|
|
93
|
+
- `index` won't have a "Return home" link at the bottom of the page
|
|
94
|
+
- `page.subtitle`
|
|
95
|
+
- Shows up in the page.
|
|
96
|
+
- `page.description`
|
|
97
|
+
- Only shows up in the `<head>` section, as a `<meta>` tag.
|
|
98
|
+
- `page.date`
|
|
99
|
+
- `page.keywords`
|
|
100
|
+
- `page.math`
|
|
101
|
+
- If `true`, we'll include KaTeX for displaying math formulas. Will add
|
|
102
|
+
JavaScript on this page.
|
|
103
|
+
- `page.lang`
|
|
104
|
+
- Sets the HTML lang attribute. Default: `'en'`
|
|
105
|
+
- `page.dir`
|
|
106
|
+
- Sets the HTML dir attribute. Default: `'ltr'`
|
|
107
|
+
|
|
108
|
+
You can also define:
|
|
109
|
+
|
|
110
|
+
- `_includes/enable_checkboxes.html`
|
|
111
|
+
|
|
112
|
+
to be an empty file in your project to remove the only non-math JavaScript.
|
|
113
|
+
|
|
114
|
+
## Developing
|
|
115
|
+
|
|
116
|
+
To make a release:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
vim pandoc-markdown-jekyll-theme.gemspec
|
|
120
|
+
git commit pandoc-markdown-jekyll-theme.gemspec -m 'Bump version'
|
|
121
|
+
git tag "$version"
|
|
122
|
+
git push --tags origin master
|
|
123
|
+
gem build pandoc-markdown-jekyll-theme.gemspec
|
|
124
|
+
gem push "pandoc-markdown-jekyll-theme-$version.gem"
|
|
125
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{% if site.include_after %}
|
|
2
|
+
{% for include_after in site.include_after %}
|
|
3
|
+
{{ include_after }}
|
|
4
|
+
{% endfor %}
|
|
5
|
+
{% endif %}
|
|
6
|
+
|
|
7
|
+
{% if page.include_after %}
|
|
8
|
+
{% for include_after in page.include_after %}
|
|
9
|
+
{{ include_after }}
|
|
10
|
+
{% endfor %}
|
|
11
|
+
{% endif %}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{% if site.include_before %}
|
|
2
|
+
{% for include_before in site.include_before %}
|
|
3
|
+
{{ include_before }}
|
|
4
|
+
{% endfor %}
|
|
5
|
+
{% endif %}
|
|
6
|
+
|
|
7
|
+
{% if page.include_before %}
|
|
8
|
+
{% for include_before in page.include_before %}
|
|
9
|
+
{{ include_before }}
|
|
10
|
+
{% endfor %}
|
|
11
|
+
{% endif %}
|
|
12
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ page.lang | default: 'en'}}" xml:lang="{{ page.lang | default: 'en'}}" dir="{{ page.dir | default: 'ltr'}}">
|
|
3
|
+
<head>
|
|
4
|
+
{% include head.html %}
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
{% include before.html %}
|
|
8
|
+
{% include header.html %}
|
|
9
|
+
|
|
10
|
+
{{ content }}
|
|
11
|
+
|
|
12
|
+
{% if page.layout != 'index' -%}
|
|
13
|
+
<footer>
|
|
14
|
+
<p class="signoff"><a href="{{ site.baseurl }}/">← Return home</a></p>
|
|
15
|
+
</footer>
|
|
16
|
+
{% endif -%}
|
|
17
|
+
|
|
18
|
+
{% include enable_checkboxes.html %}
|
|
19
|
+
{% include after.html %}
|
|
20
|
+
</body>
|
|
21
|
+
</html>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
;(function() {
|
|
3
|
+
// Non-essential if user has JavaScript off. Just makes checkboxes look nicer.
|
|
4
|
+
var selector = '.task-list > li > input[type="checkbox"]';
|
|
5
|
+
var checkboxes = document.querySelectorAll(selector);
|
|
6
|
+
Array.from(checkboxes).forEach((checkbox) => {
|
|
7
|
+
var wasChecked = checkbox.checked;
|
|
8
|
+
checkbox.disabled = false;
|
|
9
|
+
checkbox.addEventListener('click', (ev) => {ev.target.checked = wasChecked});
|
|
10
|
+
});
|
|
11
|
+
})();
|
|
12
|
+
</script>
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<meta charset="utf-8" />
|
|
2
|
+
<meta name="generator" content="pandoc-markdown-css-theme" />
|
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
4
|
+
{% if page.author -%}
|
|
5
|
+
<meta name="author" content="{{ page.author }}">
|
|
6
|
+
{% elsif site.author -%}
|
|
7
|
+
<meta name="author" content="{{ site.author }}">
|
|
8
|
+
{% endif -%}
|
|
9
|
+
{% if page.date -%}
|
|
10
|
+
<meta name="dcterms.date" content="{{ page.date }}">
|
|
11
|
+
{% endif -%}
|
|
12
|
+
{% if page.keywords -%}
|
|
13
|
+
<meta name="keywords" content="{{ page.keywords | join: ' ' }}">
|
|
14
|
+
{% endif -%}
|
|
15
|
+
{% if page.description -%}
|
|
16
|
+
<meta name="description" content="{{ page.description }}">
|
|
17
|
+
{% endif -%}
|
|
18
|
+
<title>{{ page.title }}{% if site.title %} – {{ site.title }}{% endif %}</title>
|
|
19
|
+
|
|
20
|
+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/theme.css">
|
|
21
|
+
{% unless site.pandoc_markdown_skip_syntax_theme -%}
|
|
22
|
+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/skylighting-solarized-theme.css">
|
|
23
|
+
{% endif -%}
|
|
24
|
+
|
|
25
|
+
{% include math.html %}
|
|
26
|
+
|
|
27
|
+
{% if site.header_includes %}
|
|
28
|
+
{% for header_include in site.header_includes %}
|
|
29
|
+
{{ header_include }}
|
|
30
|
+
{% endfor %}
|
|
31
|
+
{% endif %}
|
|
32
|
+
|
|
33
|
+
{% if page.header_includes %}
|
|
34
|
+
{% for header_include in page.header_includes %}
|
|
35
|
+
{{ header_include }}
|
|
36
|
+
{% endfor %}
|
|
37
|
+
{% endif %}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{% if page.title -%}
|
|
2
|
+
<header>
|
|
3
|
+
<h1 class="title">{{ page.title }}</h1>
|
|
4
|
+
<blockquote class="metadata">
|
|
5
|
+
{% if page.subtitle -%}
|
|
6
|
+
<p class="subtitle">{{ page.subtitle }}</p>
|
|
7
|
+
{% endif -%}
|
|
8
|
+
{% if page.author -%}
|
|
9
|
+
<p class="author">
|
|
10
|
+
{% if page.author_url -%}
|
|
11
|
+
<a href="{{ page.author_url }}">{{ page.author }}</a>
|
|
12
|
+
{% else -%}
|
|
13
|
+
{{ page.author }}
|
|
14
|
+
{% endif -%}
|
|
15
|
+
</p>
|
|
16
|
+
{% endif -%}
|
|
17
|
+
{% if page.date -%}
|
|
18
|
+
<p class="date before-toc"><time datetime="{{ page.date }}">{{ page.date | date: "%B %-d, %Y" }}</time></p>
|
|
19
|
+
{% endif -%}
|
|
20
|
+
</blockquote>
|
|
21
|
+
</header>
|
|
22
|
+
{% endif -%}
|
data/_includes/math.html
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{% if page.math %}
|
|
2
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"></script>
|
|
3
|
+
<script>document.addEventListener("DOMContentLoaded", function () {
|
|
4
|
+
var mathElements = document.getElementsByClassName("math");
|
|
5
|
+
var macros = [];
|
|
6
|
+
for (var i = 0; i < mathElements.length; i++) {
|
|
7
|
+
var texText = mathElements[i].firstChild;
|
|
8
|
+
if (mathElements[i].tagName == "SPAN") {
|
|
9
|
+
katex.render(texText.data, mathElements[i], {
|
|
10
|
+
displayMode: mathElements[i].classList.contains('display'),
|
|
11
|
+
throwOnError: false,
|
|
12
|
+
macros: macros,
|
|
13
|
+
fleqn: false
|
|
14
|
+
});
|
|
15
|
+
}}});
|
|
16
|
+
</script>
|
|
17
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css" />
|
|
18
|
+
{% endif %}
|
data/_layouts/index.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{% include default.html %}
|
data/_layouts/page.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{% include default.html %}
|
data/_layouts/post.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{% include default.html %}
|
data/_template.html5
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
$-- Do not edit this file to allow updating. Update with:
|
|
2
|
+
$-- cp $(bundle info pandoc-markdown-jekyll-theme --path)/_template.html5 .
|
|
3
|
+
$if(toc)$
|
|
4
|
+
<nav id="TOC" role="doc-toc">
|
|
5
|
+
<a href="$site__baseurl$">Home</a><br>
|
|
6
|
+
<strong>Contents</strong><label for="contents">⊕</label>
|
|
7
|
+
<input type="checkbox" id="contents">
|
|
8
|
+
$table-of-contents$
|
|
9
|
+
</nav>
|
|
10
|
+
$endif$
|
|
11
|
+
|
|
12
|
+
<main>
|
|
13
|
+
$body$
|
|
14
|
+
</main>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
pre, pre.numberSource {
|
|
2
|
+
background: #fdf6e3;
|
|
3
|
+
/* border: 1px solid #eee8d5; */
|
|
4
|
+
--color-code-highlight-bg: #eee8d5;
|
|
5
|
+
}
|
|
6
|
+
pre code { color: #657b83; }
|
|
7
|
+
pre.numberSource > code.sourceCode > span > a:first-child::before {
|
|
8
|
+
color: #93a1a1;
|
|
9
|
+
}
|
|
10
|
+
code span.kw { color: #859900; font-weight: normal; font-style: normal; } /* Keyword */
|
|
11
|
+
code span.dt { color: #b58900; font-weight: normal; font-style: normal; } /* DataType */
|
|
12
|
+
code span.dv { color: #2aa198; font-weight: normal; font-style: normal; } /* DecVal */
|
|
13
|
+
code span.bn { color: #2aa198; font-weight: normal; font-style: normal; } /* BaseN */
|
|
14
|
+
code span.fl { color: #2aa198; font-weight: normal; font-style: normal; } /* Float */
|
|
15
|
+
code span.ch { color: #2aa198; font-weight: normal; font-style: normal; } /* Char */
|
|
16
|
+
code span.st { color: #2aa198; font-weight: normal; font-style: normal; } /* String */
|
|
17
|
+
code span.co { color: #93a1a1; font-weight: normal; font-style: italic; } /* Comment */
|
|
18
|
+
code span.ot { color: #268bd2; font-weight: normal; font-style: normal; } /* Other */
|
|
19
|
+
code span.al { color: #dc322f; font-weight: normal; font-style: normal; } /* Alert */
|
|
20
|
+
code span.fu { color: #268bd2; font-weight: normal; font-style: normal; } /* Function */
|
|
21
|
+
code span.er { color: #dc322f; font-weight: normal; font-style: normal; } /* Error */
|
|
22
|
+
code span.wa { color: #cb4b16; font-weight: normal; font-style: italic; } /* Warning */
|
|
23
|
+
code span.cn { color: #2aa198; font-weight: normal; font-style: normal; } /* Constant */
|
|
24
|
+
code span.sc { color: #dc322f; font-weight: normal; font-style: normal; } /* SpecialChar */
|
|
25
|
+
code span.vs { color: #2aa198; font-weight: normal; font-style: normal; } /* VerbatimString */
|
|
26
|
+
code span.ss { color: #dc322f; font-weight: normal; font-style: normal; } /* SpecialString */
|
|
27
|
+
code span.im { color: #657b83; font-weight: normal; font-style: normal; } /* Import */
|
|
28
|
+
code span.va { color: #268bd2; font-weight: normal; font-style: normal; } /* Variable */
|
|
29
|
+
code span.cf { color: #859900; font-weight: normal; font-style: normal; } /* ControlFlow */
|
|
30
|
+
code span.op { color: #859900; font-weight: normal; font-style: normal; } /* Operator */
|
|
31
|
+
code span.bu { color: #657b83; font-weight: normal; font-style: normal; } /* BuiltIn */
|
|
32
|
+
code span.ex { color: #657b83; font-weight: normal; font-style: normal; } /* Extension */
|
|
33
|
+
code span.pp { color: #cb4b16; font-weight: normal; font-style: normal; } /* Preprocessor */
|
|
34
|
+
code span.at { color: #657b83; font-weight: normal; font-style: normal; } /* Attribute */
|
|
35
|
+
code span.do { color: #93a1a1; font-weight: normal; font-style: italic; } /* Documentation */
|
|
36
|
+
code span.an { color: #93a1a1; font-weight: normal; font-style: italic; } /* Annotation */
|
|
37
|
+
code span.cv { color: #93a1a1; font-weight: normal; font-style: italic; } /* CommentVar */
|
|
38
|
+
code span.in { color: #93a1a1; font-weight: normal; font-style: italic; } /* Information */
|
|
39
|
+
a.sourceLine::before { text-decoration: none; }
|
|
@@ -0,0 +1,1108 @@
|
|
|
1
|
+
|
|
2
|
+
/* ----- Global settings ----------------------------------------------- {{{ */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* --- Colors --- */
|
|
6
|
+
|
|
7
|
+
--color-text: #1b2733;
|
|
8
|
+
--color-text-secondary: #637282;
|
|
9
|
+
--color-link: #0070e0;
|
|
10
|
+
--color-sidenote: #616970;
|
|
11
|
+
|
|
12
|
+
--highlight-red: #ea9999;
|
|
13
|
+
--highlight-yellow: #ffe599;
|
|
14
|
+
--highlight-green: #b6d7a8;
|
|
15
|
+
--highlight-blue: #a4c2f4;
|
|
16
|
+
--highlight-purple: #b4a7d6;
|
|
17
|
+
|
|
18
|
+
--color-inline-code: #1b2733;
|
|
19
|
+
--color-inline-code-bg: #f3f3f8;
|
|
20
|
+
|
|
21
|
+
--color-border: #dfdfd0;
|
|
22
|
+
--color-border-heavy: #ccccd4;
|
|
23
|
+
|
|
24
|
+
--color-table-heading: #f3f3fb;
|
|
25
|
+
|
|
26
|
+
/* --- Text --- */
|
|
27
|
+
|
|
28
|
+
--font-family-prose: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
29
|
+
--font-family-heading: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
30
|
+
--font-family-code: Menlo, monospace;
|
|
31
|
+
|
|
32
|
+
--line-height: 26px;
|
|
33
|
+
--font-size: 17px;
|
|
34
|
+
|
|
35
|
+
--inline-code-font-size: 15px;
|
|
36
|
+
--code-block-font-size: 14px;
|
|
37
|
+
--code-block-side-padding: 8px;
|
|
38
|
+
--line-numbers-font-size: 12px;
|
|
39
|
+
|
|
40
|
+
--tight-code-line-height: 18px;
|
|
41
|
+
--tight-code-padding-top: 5px;
|
|
42
|
+
|
|
43
|
+
--side-note-line-height: 20px;
|
|
44
|
+
--side-note-font-size: 13px;
|
|
45
|
+
--side-note-code-font-size: 13px;
|
|
46
|
+
--side-note-baseline-offset: 4px;
|
|
47
|
+
--side-note-sup-offset: -6px;
|
|
48
|
+
--side-note-number-hang-left: -6px;
|
|
49
|
+
--side-note-text-indent: -9px;
|
|
50
|
+
|
|
51
|
+
--heading-font-weight: 500;
|
|
52
|
+
|
|
53
|
+
--title-font-size: 42px;
|
|
54
|
+
--title-code-font-size: 40px;
|
|
55
|
+
--title-line-height: 48px;
|
|
56
|
+
--title-margin-top: 92px;
|
|
57
|
+
|
|
58
|
+
--h1-font-size: 32px;
|
|
59
|
+
--h1-code-font-size: 29px;
|
|
60
|
+
--h1-line-height: 36px;
|
|
61
|
+
--h1-word-spacing: 1px;
|
|
62
|
+
--h1-margin-top: 30px;
|
|
63
|
+
--h1-margin-bottom: 12px;
|
|
64
|
+
|
|
65
|
+
--h2-font-size: 22px;
|
|
66
|
+
--h2-code-font-size: 20px;
|
|
67
|
+
--h2-line-height: 28px;
|
|
68
|
+
--h2-word-spacing: 0.5px;
|
|
69
|
+
--h2-margin-top: 18px;
|
|
70
|
+
--h2-margin-bottom: 6px;
|
|
71
|
+
|
|
72
|
+
--ul-indent-size: 23px;
|
|
73
|
+
--ol-indent-size: 19px;
|
|
74
|
+
--ol-li-padding-left: 4px;
|
|
75
|
+
|
|
76
|
+
--hr-margin-top: 18px;
|
|
77
|
+
--hr-margin-bottom: calc(var(--line-height) - var(--hr-margin-top) - 1px);
|
|
78
|
+
|
|
79
|
+
--extra-wide-scale-factor: 1.5;
|
|
80
|
+
|
|
81
|
+
--figcaption-line-height: 21px;
|
|
82
|
+
--figcaption-font-size: 14px;
|
|
83
|
+
--figcaption-code-font-size: 13px;
|
|
84
|
+
--figcaption-gap: 6px;
|
|
85
|
+
--captioned-figure-gap: 10px;
|
|
86
|
+
|
|
87
|
+
--table-line-height: 21px;
|
|
88
|
+
--table-font-size: 14px;
|
|
89
|
+
|
|
90
|
+
--nav-toc-font-size: 12px;
|
|
91
|
+
--nav-toc-code-font-size: 12px;
|
|
92
|
+
--nav-toc-indent: 15px;
|
|
93
|
+
--nav-toc-baseline-offset: 2px;
|
|
94
|
+
|
|
95
|
+
/* --- Layout --- */
|
|
96
|
+
|
|
97
|
+
--main-width: 745px;
|
|
98
|
+
--main-width-narrow: 550px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
*, *:after, *:before {
|
|
102
|
+
box-sizing: border-box;
|
|
103
|
+
margin: 0;
|
|
104
|
+
padding: 0;
|
|
105
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
106
|
+
-webkit-font-smoothing: antialiased;
|
|
107
|
+
-moz-osx-font-smoothing: grayscale;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
html {
|
|
111
|
+
/* https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
|
|
112
|
+
-webkit-text-size-adjust: 100%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
body {
|
|
116
|
+
font-family: var(--font-family-prose);
|
|
117
|
+
color: var(--color-text);
|
|
118
|
+
font-size: var(--font-size);
|
|
119
|
+
line-height: var(--line-height);
|
|
120
|
+
-webkit-font-variant-ligatures: no-common-ligatures;
|
|
121
|
+
font-variant-ligatures: no-common-ligatures;
|
|
122
|
+
|
|
123
|
+
/* Safari-only right now (macOS, iOS) but looks so good. */
|
|
124
|
+
hanging-punctuation: first;
|
|
125
|
+
|
|
126
|
+
margin: 0;
|
|
127
|
+
padding: 0;
|
|
128
|
+
padding-top: var(--title-margin-top);
|
|
129
|
+
width: 100%;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* }}} */
|
|
133
|
+
/* ----- Side notes and margin notes ----------------------------------- {{{ */
|
|
134
|
+
/* --- Side note text and numbering --- {{{ */
|
|
135
|
+
|
|
136
|
+
.sidenote,
|
|
137
|
+
.marginnote {
|
|
138
|
+
color: var(--color-sidenote);
|
|
139
|
+
|
|
140
|
+
font-size: var(--side-note-font-size);
|
|
141
|
+
line-height: var(--side-note-line-height);
|
|
142
|
+
vertical-align: baseline;
|
|
143
|
+
|
|
144
|
+
/* Align first baseline to body. */
|
|
145
|
+
margin-top: var(--side-note-baseline-offset);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.sidenote code,
|
|
149
|
+
.marginnote code {
|
|
150
|
+
color: var(--color-sidenote);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
body {
|
|
154
|
+
counter-reset: sidenote-counter;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.sidenote-number {
|
|
158
|
+
counter-increment: sidenote-counter;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.sidenote-number:after,
|
|
162
|
+
.sidenote:before {
|
|
163
|
+
content: counter(sidenote-counter);
|
|
164
|
+
position: relative;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
nav#TOC label,
|
|
168
|
+
label.margin-toggle:not(.sidenote-number),
|
|
169
|
+
.sidenote-number:after,
|
|
170
|
+
.sidenote:before,
|
|
171
|
+
sup {
|
|
172
|
+
font-size: var(--side-note-font-size);
|
|
173
|
+
font-weight: 700;
|
|
174
|
+
-webkit-font-feature-settings: "tnum" 1;
|
|
175
|
+
font-feature-settings: "tnum" 1;
|
|
176
|
+
|
|
177
|
+
/* Mimic 'vertical-align: super' (browser style for sup tag)
|
|
178
|
+
* without causing a gap in our text's implicit grid. */
|
|
179
|
+
vertical-align: baseline;
|
|
180
|
+
position: relative;
|
|
181
|
+
top: var(--side-note-sup-offset);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
sup {
|
|
185
|
+
font-weight: inherit;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Make the superscript hang. */
|
|
189
|
+
.sidenote:before { left: var(--side-note-number-hang-left); }
|
|
190
|
+
/* Get first first column of first row to line up with other rows. */
|
|
191
|
+
.sidenote { text-indent: var(--side-note-text-indent); }
|
|
192
|
+
|
|
193
|
+
/*}}} */
|
|
194
|
+
/* --- Side note input controls --- {{{ */
|
|
195
|
+
|
|
196
|
+
input.margin-toggle {
|
|
197
|
+
display: none;
|
|
198
|
+
}
|
|
199
|
+
label.margin-toggle:not(.sidenote-number) {
|
|
200
|
+
display: none;
|
|
201
|
+
}
|
|
202
|
+
label.sidenote-number {
|
|
203
|
+
display: inline;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Unfortunately, variables aren't in scope here.
|
|
207
|
+
* See calculations in Horizontal layouting.
|
|
208
|
+
*/
|
|
209
|
+
@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
|
|
210
|
+
.margin-toggle:checked + .sidenote,
|
|
211
|
+
.margin-toggle:checked + .marginnote {
|
|
212
|
+
margin-top: var(--side-note-line-height);
|
|
213
|
+
vertical-align: baseline;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
label.margin-toggle {
|
|
217
|
+
color: var(--color-link);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
label.margin-toggle:not(.sidenote-number) {
|
|
221
|
+
display: inline;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
label {
|
|
225
|
+
cursor: pointer;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* }}} */
|
|
230
|
+
/* }}} */
|
|
231
|
+
/* ----- Headings ------------------------------------------------------ {{{ */
|
|
232
|
+
|
|
233
|
+
h1, h2 {
|
|
234
|
+
font-family: var(--font-family-heading);
|
|
235
|
+
font-weight: var(--heading-font-weight);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
h4, h5, h6 {
|
|
239
|
+
font-weight: normal;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
h1.title {
|
|
243
|
+
margin-top: var(--line-height);
|
|
244
|
+
margin-bottom: var(--line-height);
|
|
245
|
+
font-size: var(--title-font-size);
|
|
246
|
+
line-height: var(--title-line-height);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
h1.title code {
|
|
250
|
+
font-size: var(--title-code-font-size);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
h1:not(.title) {
|
|
254
|
+
font-size: var(--h1-font-size);
|
|
255
|
+
line-height: var(--h1-line-height);
|
|
256
|
+
word-spacing: var(--h1-word-spacing);
|
|
257
|
+
|
|
258
|
+
margin-top: var(--h1-margin-top);
|
|
259
|
+
margin-bottom: var(--h1-margin-bottom);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
h1:not(.title) code {
|
|
263
|
+
font-size: var(--h1-code-font-size);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
h2 {
|
|
267
|
+
font-size: var(--h2-font-size);
|
|
268
|
+
line-height: var(--h2-line-height);
|
|
269
|
+
word-spacing: var(--h2-word-spacing);
|
|
270
|
+
|
|
271
|
+
margin-top: var(--h2-margin-top);
|
|
272
|
+
margin-bottom: var(--h2-margin-bottom);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
h2 code {
|
|
276
|
+
font-size: var(--h2-code-font-size);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
h3 {
|
|
280
|
+
font-size: var(--font-size);
|
|
281
|
+
line-height: var(--line-height);
|
|
282
|
+
font-weight: bold;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
h1:not(.title) + *, h1:not(.title) + p { margin-top: var(--h1-margin-bottom); }
|
|
286
|
+
h2 + *, h2 + p { margin-top: var(--h2-margin-bottom); }
|
|
287
|
+
h3 + *, h3 + p { margin-top: 0; }
|
|
288
|
+
|
|
289
|
+
/* }}} */
|
|
290
|
+
/* ----- Prose --------------------------------------------------------- {{{ */
|
|
291
|
+
|
|
292
|
+
p, main > ul, main > ol, div.sourceCode, main > pre, img, table {
|
|
293
|
+
margin-top: var(--line-height);
|
|
294
|
+
margin-bottom: var(--line-height)
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
ul:not(.task-list) {
|
|
298
|
+
margin-left: var(--ul-indent-size);
|
|
299
|
+
}
|
|
300
|
+
ol {
|
|
301
|
+
margin-left: var(--ol-indent-size);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
ul.task-list {
|
|
305
|
+
list-style: none;
|
|
306
|
+
margin-left: var(--ul-indent-size);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
ul.task-list > li {
|
|
310
|
+
position: relative;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
ul.task-list > li > input[type="checkbox"] {
|
|
314
|
+
position: absolute;
|
|
315
|
+
left: calc(-1 * var(--ul-indent-size));
|
|
316
|
+
height: var(--line-height);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
ol > li {
|
|
320
|
+
padding-left: var(--ol-li-padding-left);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
ol { list-style-type: decimal; }
|
|
324
|
+
ol ol { list-style-type: lower-alpha; }
|
|
325
|
+
ol ol ol { list-style-type: lower-roman; }
|
|
326
|
+
ol ol ol ol { list-style-type: decimal; }
|
|
327
|
+
ol ol ol ol ol { list-style-type: lower-alpha; }
|
|
328
|
+
ol ol ol ol ol ol { list-style-type: lower-roman; }
|
|
329
|
+
ol ol ol ol ol ol ol { list-style-type: decimal; }
|
|
330
|
+
ol ol ol ol ol ol ol ol { list-style-type: lower-alpha; }
|
|
331
|
+
ol ol ol ol ol ol ol ol ol { list-style-type: lower-roman; }
|
|
332
|
+
|
|
333
|
+
ul { list-style-type: disc; }
|
|
334
|
+
ul ul { list-style-type: circle; }
|
|
335
|
+
ul ul ul { list-style-type: square; }
|
|
336
|
+
ul ul ul ul { list-style-type: disc; }
|
|
337
|
+
ul ul ul ul ul { list-style-type: circle; }
|
|
338
|
+
ul ul ul ul ul ul { list-style-type: square; }
|
|
339
|
+
ul ul ul ul ul ul ul { list-style-type: disc; }
|
|
340
|
+
ul ul ul ul ul ul ul ul { list-style-type: circle; }
|
|
341
|
+
ul ul ul ul ul ul ul ul ul { list-style-type: square; }
|
|
342
|
+
|
|
343
|
+
blockquote {
|
|
344
|
+
border-left: 1px solid var(--color-text-secondary);
|
|
345
|
+
padding-left: 1.5rem;
|
|
346
|
+
|
|
347
|
+
font-style: italic;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
blockquote > p {
|
|
351
|
+
margin-top: 0;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
blockquote em, blockquote i, blockquote .sidenote-wrapper {
|
|
355
|
+
font-style: normal;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
hr {
|
|
359
|
+
margin-top: var(--hr-margin-top);
|
|
360
|
+
margin-bottom: var(--hr-margin-bottom);
|
|
361
|
+
border-style: solid;
|
|
362
|
+
color: var(--color-border-heavy);
|
|
363
|
+
border-width: 1px 0 0;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
a code, a:link code, a:visited code,
|
|
367
|
+
a, a:link, a:visited {
|
|
368
|
+
color: var(--color-link);
|
|
369
|
+
text-decoration: none;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
a:hover {
|
|
373
|
+
text-decoration: underline;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
span.mark, mark {
|
|
377
|
+
/* Reset browser styles */
|
|
378
|
+
color: inherit;
|
|
379
|
+
|
|
380
|
+
padding: 2px 0 1px;
|
|
381
|
+
}
|
|
382
|
+
span.mark.red, mark.red { background-color: var(--highlight-red); }
|
|
383
|
+
span.mark.yellow, mark.yellow { background-color: var(--highlight-yellow); }
|
|
384
|
+
span.mark.green, mark.green { background-color: var(--highlight-green); }
|
|
385
|
+
span.mark.blue, mark.blue { background-color: var(--highlight-blue); }
|
|
386
|
+
span.mark.purple, mark.purple { background-color: var(--highlight-purple); }
|
|
387
|
+
|
|
388
|
+
.subtitle {
|
|
389
|
+
margin-top: 0;
|
|
390
|
+
}
|
|
391
|
+
.author, .date {
|
|
392
|
+
margin-top: 0;
|
|
393
|
+
margin-bottom: 0;
|
|
394
|
+
}
|
|
395
|
+
.signoff {
|
|
396
|
+
margin: calc(4 * var(--line-height)) 0;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* Pandoc utility classes */
|
|
400
|
+
span.smallcaps{ font-variant: small-caps; }
|
|
401
|
+
span.underline{ text-decoration: underline; }
|
|
402
|
+
|
|
403
|
+
.katex-display {
|
|
404
|
+
background: white;
|
|
405
|
+
transform: translateZ(0px);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* }}} */
|
|
409
|
+
/* ----- Code ---------------------------------------------------------- {{{ */
|
|
410
|
+
|
|
411
|
+
/* Pandoc code blocks with a language look like div.sourceCode > pre.sourceCode
|
|
412
|
+
* Otherwise, it's just a pre (without .sourceCode)
|
|
413
|
+
*
|
|
414
|
+
* The 'code' element is tricky because it's used for inline code and code in a
|
|
415
|
+
* pre.
|
|
416
|
+
*/
|
|
417
|
+
|
|
418
|
+
code {
|
|
419
|
+
font-family: var(--font-family-code);
|
|
420
|
+
|
|
421
|
+
word-spacing: normal;
|
|
422
|
+
|
|
423
|
+
/* Only for inline code */
|
|
424
|
+
color: var(--color-inline-code);
|
|
425
|
+
background-color: var(--color-inline-code-bg);
|
|
426
|
+
font-size: var(--inline-code-font-size);
|
|
427
|
+
margin: 0;
|
|
428
|
+
padding: 2px 0 1px;
|
|
429
|
+
border: 1px solid var(--color-border);
|
|
430
|
+
border-radius: 1px;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.sidenote code,
|
|
434
|
+
.marginnote code {
|
|
435
|
+
font-size: var(--side-note-code-font-size);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
pre code {
|
|
439
|
+
/* Reset some changes meant to be inline-only */
|
|
440
|
+
color: inherit;
|
|
441
|
+
background-color: inherit;
|
|
442
|
+
font-size: var(--code-block-font-size);
|
|
443
|
+
line-height: var(--line-height);
|
|
444
|
+
margin: initial;
|
|
445
|
+
padding: initial;
|
|
446
|
+
border: initial;
|
|
447
|
+
border-radius: initial;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
pre > code {
|
|
451
|
+
position: relative; /* For line highlights */
|
|
452
|
+
display: inline-block;
|
|
453
|
+
min-width: 100%;
|
|
454
|
+
z-index: 1;
|
|
455
|
+
|
|
456
|
+
white-space: pre-wrap;
|
|
457
|
+
|
|
458
|
+
padding: 0 var(--code-block-side-padding);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
code.sourceCode::selection {
|
|
462
|
+
/* Prevent bug where far right edge of text box shows as selected. */
|
|
463
|
+
background: transparent;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.wide > pre, .wide > div.sourceCode {
|
|
467
|
+
/* Put this in front of the table of contents */
|
|
468
|
+
transform: translateZ(0px);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.wide pre > code {
|
|
472
|
+
white-space: pre;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
pre.numberSource code {
|
|
476
|
+
counter-reset: source-line 0;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
pre > code.sourceCode > span {
|
|
480
|
+
line-height: var(--line-height);
|
|
481
|
+
|
|
482
|
+
display: inline-block;
|
|
483
|
+
min-width: 100%;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
div.sourceCode {
|
|
487
|
+
/* Need to make room for line numbers (even if they're not going to be used).
|
|
488
|
+
* Width doesn't matter, just needs to be big enough to hold the largest line
|
|
489
|
+
* number. */
|
|
490
|
+
--line-numbers-width: calc(4 * var(--line-numbers-font-size));
|
|
491
|
+
--line-numbers-negative-width: calc(-1 * var(--line-numbers-width));
|
|
492
|
+
margin-left: var(--line-numbers-negative-width);
|
|
493
|
+
}
|
|
494
|
+
div.sourceCode > pre {
|
|
495
|
+
margin-left: var(--line-numbers-width);
|
|
496
|
+
}
|
|
497
|
+
pre.numberSource > code.sourceCode > span {
|
|
498
|
+
counter-increment: source-line;
|
|
499
|
+
padding-left: var(--line-numbers-width);
|
|
500
|
+
text-indent: var(--line-numbers-negative-width);
|
|
501
|
+
position: relative;
|
|
502
|
+
left: var(--line-numbers-negative-width);
|
|
503
|
+
}
|
|
504
|
+
pre.numberSource > code.sourceCode > span > a:first-child::before {
|
|
505
|
+
-webkit-touch-callout: none;
|
|
506
|
+
-webkit-user-select: none;
|
|
507
|
+
-khtml-user-select: none;
|
|
508
|
+
-moz-user-select: none;
|
|
509
|
+
-ms-user-select: none;
|
|
510
|
+
user-select: none;
|
|
511
|
+
|
|
512
|
+
content: counter(source-line);
|
|
513
|
+
font-size: var(--line-numbers-font-size);
|
|
514
|
+
text-decoration: none;
|
|
515
|
+
|
|
516
|
+
position: relative;
|
|
517
|
+
text-align: right;
|
|
518
|
+
display: inline-block;
|
|
519
|
+
|
|
520
|
+
padding: 0 calc(2 * var(--code-block-side-padding));
|
|
521
|
+
width: var(--line-numbers-width);
|
|
522
|
+
}
|
|
523
|
+
pre > code.sourceCode > span > a:first-child::before:hover {
|
|
524
|
+
text-decoration: underline;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
/* Utility class for code blocks that contain things like box drawing characters, where it's nice for things to touch. */
|
|
528
|
+
.tight-code pre,
|
|
529
|
+
pre.tight-code {
|
|
530
|
+
padding-top: var(--tight-code-padding-top);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
pre.tight-code code,
|
|
534
|
+
.tight-code pre code {
|
|
535
|
+
line-height: var(--tight-code-line-height);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
/* --- Code line highlights --- {{{ */
|
|
539
|
+
/* I used some code I contributed to owickstrom's pandoc-emphasize-code[1] as
|
|
540
|
+
* inspiration for these changes.
|
|
541
|
+
*
|
|
542
|
+
* The novel part is using :nth-of-type(...) selectors and CSS classes, instead
|
|
543
|
+
* of needing a pandoc filter. This means that we can stick with pandoc's
|
|
544
|
+
* default syntax highlighter, and not need to requirer JavaScript for syntax
|
|
545
|
+
* highlighting. It has the obvious limitation that it places a fixed limit on
|
|
546
|
+
* lines that can be highlighted, but these additional CSS styles are easy
|
|
547
|
+
* enough to write, so anyone who needs more lines can write their own
|
|
548
|
+
* stylesheet and include it to add more after the fact.
|
|
549
|
+
*
|
|
550
|
+
* [1] https://github.com/owickstrom/pandoc-emphasize-code/pull/3
|
|
551
|
+
*/
|
|
552
|
+
|
|
553
|
+
pre > code.sourceCode > span::after {
|
|
554
|
+
position: absolute;
|
|
555
|
+
background-color: var(--color-code-highlight-bg);
|
|
556
|
+
z-index: -1;
|
|
557
|
+
left: calc(var(--line-numbers-width) - var(--code-block-side-padding));
|
|
558
|
+
right: calc(var(--line-numbers-negative-width) - var(--code-block-side-padding));
|
|
559
|
+
top: 0;
|
|
560
|
+
height: 100%;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
pre.hl-1 > code.sourceCode > span:nth-of-type(1)::after { content: ""; }
|
|
564
|
+
pre.hl-2 > code.sourceCode > span:nth-of-type(2)::after { content: ""; }
|
|
565
|
+
pre.hl-3 > code.sourceCode > span:nth-of-type(3)::after { content: ""; }
|
|
566
|
+
pre.hl-4 > code.sourceCode > span:nth-of-type(4)::after { content: ""; }
|
|
567
|
+
pre.hl-5 > code.sourceCode > span:nth-of-type(5)::after { content: ""; }
|
|
568
|
+
pre.hl-6 > code.sourceCode > span:nth-of-type(6)::after { content: ""; }
|
|
569
|
+
pre.hl-7 > code.sourceCode > span:nth-of-type(7)::after { content: ""; }
|
|
570
|
+
pre.hl-8 > code.sourceCode > span:nth-of-type(8)::after { content: ""; }
|
|
571
|
+
pre.hl-9 > code.sourceCode > span:nth-of-type(9)::after { content: ""; }
|
|
572
|
+
pre.hl-10 > code.sourceCode > span:nth-of-type(10)::after { content: ""; }
|
|
573
|
+
pre.hl-11 > code.sourceCode > span:nth-of-type(11)::after { content: ""; }
|
|
574
|
+
pre.hl-12 > code.sourceCode > span:nth-of-type(12)::after { content: ""; }
|
|
575
|
+
pre.hl-13 > code.sourceCode > span:nth-of-type(13)::after { content: ""; }
|
|
576
|
+
pre.hl-14 > code.sourceCode > span:nth-of-type(14)::after { content: ""; }
|
|
577
|
+
pre.hl-15 > code.sourceCode > span:nth-of-type(15)::after { content: ""; }
|
|
578
|
+
pre.hl-16 > code.sourceCode > span:nth-of-type(16)::after { content: ""; }
|
|
579
|
+
pre.hl-17 > code.sourceCode > span:nth-of-type(17)::after { content: ""; }
|
|
580
|
+
pre.hl-18 > code.sourceCode > span:nth-of-type(18)::after { content: ""; }
|
|
581
|
+
pre.hl-19 > code.sourceCode > span:nth-of-type(19)::after { content: ""; }
|
|
582
|
+
pre.hl-20 > code.sourceCode > span:nth-of-type(20)::after { content: ""; }
|
|
583
|
+
pre.hl-21 > code.sourceCode > span:nth-of-type(21)::after { content: ""; }
|
|
584
|
+
pre.hl-22 > code.sourceCode > span:nth-of-type(22)::after { content: ""; }
|
|
585
|
+
pre.hl-23 > code.sourceCode > span:nth-of-type(23)::after { content: ""; }
|
|
586
|
+
pre.hl-24 > code.sourceCode > span:nth-of-type(24)::after { content: ""; }
|
|
587
|
+
pre.hl-25 > code.sourceCode > span:nth-of-type(25)::after { content: ""; }
|
|
588
|
+
pre.hl-26 > code.sourceCode > span:nth-of-type(26)::after { content: ""; }
|
|
589
|
+
pre.hl-27 > code.sourceCode > span:nth-of-type(27)::after { content: ""; }
|
|
590
|
+
pre.hl-28 > code.sourceCode > span:nth-of-type(28)::after { content: ""; }
|
|
591
|
+
pre.hl-29 > code.sourceCode > span:nth-of-type(29)::after { content: ""; }
|
|
592
|
+
pre.hl-30 > code.sourceCode > span:nth-of-type(30)::after { content: ""; }
|
|
593
|
+
pre.hl-31 > code.sourceCode > span:nth-of-type(31)::after { content: ""; }
|
|
594
|
+
pre.hl-32 > code.sourceCode > span:nth-of-type(32)::after { content: ""; }
|
|
595
|
+
pre.hl-33 > code.sourceCode > span:nth-of-type(33)::after { content: ""; }
|
|
596
|
+
pre.hl-34 > code.sourceCode > span:nth-of-type(34)::after { content: ""; }
|
|
597
|
+
pre.hl-35 > code.sourceCode > span:nth-of-type(35)::after { content: ""; }
|
|
598
|
+
pre.hl-36 > code.sourceCode > span:nth-of-type(36)::after { content: ""; }
|
|
599
|
+
pre.hl-37 > code.sourceCode > span:nth-of-type(37)::after { content: ""; }
|
|
600
|
+
pre.hl-38 > code.sourceCode > span:nth-of-type(38)::after { content: ""; }
|
|
601
|
+
pre.hl-39 > code.sourceCode > span:nth-of-type(39)::after { content: ""; }
|
|
602
|
+
pre.hl-40 > code.sourceCode > span:nth-of-type(40)::after { content: ""; }
|
|
603
|
+
|
|
604
|
+
/* }}} */
|
|
605
|
+
|
|
606
|
+
/* }}} */
|
|
607
|
+
/* ----- Images and figures -------------------------------------------- {{{ */
|
|
608
|
+
|
|
609
|
+
/* There's only a figure if there's a caption. Tighten things up. */
|
|
610
|
+
figure {
|
|
611
|
+
margin-bottom: var(--captioned-figure-gap);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
figure + p {
|
|
615
|
+
margin-top: var(--captioned-figure-gap);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
figure > img, figure > pre, figure > div.sourceCode {
|
|
619
|
+
margin-bottom: var(--figcaption-gap);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
img {
|
|
623
|
+
width: 100%;
|
|
624
|
+
display: block;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.wide img {
|
|
628
|
+
/* Put this in front of the table of contents */
|
|
629
|
+
transform: translateZ(0px);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
figcaption {
|
|
633
|
+
font-size: var(--figcaption-font-size);
|
|
634
|
+
line-height: var(--figcaption-line-height);
|
|
635
|
+
font-style: italic;
|
|
636
|
+
text-align: center;
|
|
637
|
+
color: var(--color-text-secondary);
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.left-align-caption figcaption {
|
|
641
|
+
text-align: left;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
figcaption code {
|
|
645
|
+
font-size: var(--figcaption-code-font-size);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
/* }}} */
|
|
649
|
+
/* ----- Tables -------------------------------------------------------- {{{ */
|
|
650
|
+
|
|
651
|
+
table {
|
|
652
|
+
-webkit-font-feature-settings: "tnum" 1;
|
|
653
|
+
font-feature-settings: "tnum" 1;
|
|
654
|
+
|
|
655
|
+
font-size: var(--table-font-size);
|
|
656
|
+
line-height: var(--table-line-height);
|
|
657
|
+
|
|
658
|
+
border-spacing: 0;
|
|
659
|
+
border-collapse: collapse;
|
|
660
|
+
border: 1px solid var(--color-border-heavy);
|
|
661
|
+
|
|
662
|
+
width: 100%;
|
|
663
|
+
|
|
664
|
+
/* Solid background to occlude table of contents */
|
|
665
|
+
background: white;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
.wide table {
|
|
669
|
+
/* Put this in front of the table of contents */
|
|
670
|
+
transform: translateZ(0px);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
table td, table th {
|
|
674
|
+
border: 1px solid var(--color-border-heavy);
|
|
675
|
+
padding: 5px 8px;
|
|
676
|
+
min-width: 100px;
|
|
677
|
+
}
|
|
678
|
+
table th {
|
|
679
|
+
background-color: var(--color-table-heading);
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
table > caption {
|
|
683
|
+
caption-side: bottom;
|
|
684
|
+
margin-top: var(--figcaption-gap);
|
|
685
|
+
margin-bottom: calc(var(--captioned-figure-gap) - var(--line-height));
|
|
686
|
+
font-size: var(--figcaption-font-size);
|
|
687
|
+
line-height: var(--figcaption-line-height);
|
|
688
|
+
font-style: italic;
|
|
689
|
+
text-align: center;
|
|
690
|
+
color: var(--color-text-secondary);
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.left-align-caption table > caption {
|
|
694
|
+
text-align: left;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
table > caption code {
|
|
698
|
+
font-size: var(--figcaption-code-font-size);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
/* --- Notes are just single cell tables --- */
|
|
702
|
+
|
|
703
|
+
.note table {
|
|
704
|
+
font-size: inherit;
|
|
705
|
+
line-height: inherit;
|
|
706
|
+
}
|
|
707
|
+
.note table, .note td {
|
|
708
|
+
border: none;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.note.red td { background: var(--highlight-red); }
|
|
712
|
+
.note.yellow td { background: var(--highlight-yellow); }
|
|
713
|
+
.note.green td { background: var(--highlight-green); }
|
|
714
|
+
.note.blue td { background: var(--highlight-blue); }
|
|
715
|
+
.note.purple td { background: var(--highlight-purple); }
|
|
716
|
+
|
|
717
|
+
/* }}} */
|
|
718
|
+
/* ----- Table of contents --------------------------------------------- {{{ */
|
|
719
|
+
|
|
720
|
+
.date.before-toc {
|
|
721
|
+
padding-bottom: var(--line-height);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
nav#TOC {
|
|
725
|
+
margin-bottom: var(--line-height);
|
|
726
|
+
border-left: 1px solid var(--color-text-secondary);
|
|
727
|
+
padding-left: 1.5rem;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
nav#TOC input {
|
|
731
|
+
display: none;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
nav#TOC label {
|
|
735
|
+
color: var(--color-link);
|
|
736
|
+
cursor: pointer;
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
nav#TOC > ul {
|
|
740
|
+
display: none;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
nav#TOC > input:checked + ul {
|
|
744
|
+
display: block;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
@media print {
|
|
748
|
+
nav#TOC > input + ul {
|
|
749
|
+
display: block;
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
/* Unfortunately, variables aren't in scope here.
|
|
754
|
+
* 745px = --main-width
|
|
755
|
+
* 52px = 2 * --line-height
|
|
756
|
+
* 206px = side note min width
|
|
757
|
+
*/
|
|
758
|
+
@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
|
|
759
|
+
header {
|
|
760
|
+
margin-bottom: var(--line-height);
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.date.before-toc {
|
|
764
|
+
padding-bottom: initial;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
nav#TOC {
|
|
768
|
+
/* Unset some styles for small screen width */
|
|
769
|
+
margin-bottom: initial;
|
|
770
|
+
border-left: initial;
|
|
771
|
+
padding-left: initial;
|
|
772
|
+
|
|
773
|
+
position: sticky;
|
|
774
|
+
margin-top: calc(var(--nav-toc-baseline-offset));
|
|
775
|
+
float: left;
|
|
776
|
+
top: var(--line-height);
|
|
777
|
+
|
|
778
|
+
font-size: var(--nav-toc-font-size);
|
|
779
|
+
color: var(--color-text-secondary);
|
|
780
|
+
|
|
781
|
+
margin-left: var(--line-height);
|
|
782
|
+
|
|
783
|
+
max-width: calc((100vw - var(--main-width)) / 2 - 2 * var(--line-height));
|
|
784
|
+
max-height: calc(100vh - 2 * var(--line-height));
|
|
785
|
+
overflow-y: scroll;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
nav#TOC label {
|
|
789
|
+
display: none;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
nav#TOC ul {
|
|
793
|
+
display: block;
|
|
794
|
+
list-style: none;
|
|
795
|
+
margin-left: var(--nav-toc-indent);
|
|
796
|
+
}
|
|
797
|
+
nav#TOC > ul {
|
|
798
|
+
margin-left: 0;
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
nav#TOC code {
|
|
802
|
+
font-size: var(--nav-toc-code-font-size);
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
nav#TOC code,
|
|
806
|
+
nav#TOC a,
|
|
807
|
+
nav#TOD a:link,
|
|
808
|
+
nav#TOD a:visited {
|
|
809
|
+
color: var(--color-text-secondary);
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
nav#TOC a:hover,
|
|
813
|
+
nav#TOC a:hover code {
|
|
814
|
+
text-decoration: none;
|
|
815
|
+
color: var(--color-link);
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
/* }}} */
|
|
820
|
+
/* ----- Horizontal layouting (main, side notes, extra-wide) ----------- {{{ */
|
|
821
|
+
|
|
822
|
+
.sidenote,
|
|
823
|
+
.marginnote {
|
|
824
|
+
float: right;
|
|
825
|
+
clear: right;
|
|
826
|
+
position: relative;
|
|
827
|
+
|
|
828
|
+
--side-note-max-width: 300px;
|
|
829
|
+
|
|
830
|
+
width: var(--computed-width);
|
|
831
|
+
max-width: var(--side-note-max-width);
|
|
832
|
+
margin-right: calc(-1 * min(var(--computed-width), var(--side-note-max-width)) - var(--margin-left));
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
/* --- Side notes always visible --- {{{ */
|
|
836
|
+
|
|
837
|
+
/* Unfortunately, variables aren't in scope here.
|
|
838
|
+
* 745px = --main-width
|
|
839
|
+
* 52px = 2 * --line-height
|
|
840
|
+
* 206px = side note min width
|
|
841
|
+
*/
|
|
842
|
+
@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
|
|
843
|
+
header,
|
|
844
|
+
nav#TOC,
|
|
845
|
+
main,
|
|
846
|
+
footer {
|
|
847
|
+
max-width: var(--main-width);
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
header,
|
|
851
|
+
main,
|
|
852
|
+
footer {
|
|
853
|
+
margin-left: auto;
|
|
854
|
+
margin-right: auto;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.sidenote,
|
|
858
|
+
.marginnote {
|
|
859
|
+
--margin-left: calc(2 * var(--line-height));
|
|
860
|
+
--margin-right: var(--margin-left);
|
|
861
|
+
--computed-width: calc((100vw - 100%) / 2 - var(--margin-right) - var(--margin-left));
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.wide {
|
|
865
|
+
width: 100%;
|
|
866
|
+
overflow-x: scroll;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.wide.extra-wide {
|
|
870
|
+
margin-left: calc((1 - var(--extra-wide-scale-factor)) / 2 * 100%);
|
|
871
|
+
width: calc(var(--extra-wide-scale-factor) * 100%);
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
.wide.full-width {
|
|
875
|
+
margin-left: calc(var(--line-height) - ((100vw - var(--main-width)) / 2));
|
|
876
|
+
width: calc(100vw - 2 * var(--line-height));
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.wide.extra-wide figcaption,
|
|
880
|
+
.wide.extra-wide table > caption {
|
|
881
|
+
margin-left: calc(((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width));
|
|
882
|
+
max-width: var(--main-width);
|
|
883
|
+
margin-right: calc(100% - var(--main-width) - (((var(--extra-wide-scale-factor) - 1) / 2) * var(--main-width)));
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.wide.full-width figcaption,
|
|
887
|
+
.wide.full-width table > caption {
|
|
888
|
+
margin-left: calc((100vw - var(--main-width)) / 2 - var(--line-height));
|
|
889
|
+
max-width: var(--main-width);
|
|
890
|
+
margin-right: calc(100% - var(--main-width) - ((100vw - var(--main-width)) / 2 - var(--line-height)));
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
/* Unfortunately, variables aren't in scope here.
|
|
895
|
+
* 745px = --main-width
|
|
896
|
+
* 52px = 2 * --line-height
|
|
897
|
+
* 206px = side note min width
|
|
898
|
+
*/
|
|
899
|
+
@media screen and (min-width: calc(52px + 745px + 52px + 206px + 52px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
|
|
900
|
+
header,
|
|
901
|
+
nav#TOC,
|
|
902
|
+
main,
|
|
903
|
+
footer {
|
|
904
|
+
margin-left: calc(2 * var(--line-height));
|
|
905
|
+
max-width: var(--main-width);
|
|
906
|
+
margin-right: auto;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
.sidenote,
|
|
910
|
+
.marginnote {
|
|
911
|
+
--margin-left: calc(2 * var(--line-height));
|
|
912
|
+
--margin-right: var(--margin-left);
|
|
913
|
+
--computed-width: calc(100vw - var(--main-width) - calc(2 * var(--line-height)) - var(--margin-right) - var(--margin-left));
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
.wide {
|
|
917
|
+
width: 100%;
|
|
918
|
+
overflow-x: scroll;
|
|
919
|
+
overflow-y: hidden;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.wide.extra-wide {
|
|
923
|
+
margin-left: calc(-1 * var(--line-height));
|
|
924
|
+
width: calc(100vw - 2 * var(--line-height));
|
|
925
|
+
max-width: calc(var(--extra-wide-scale-factor) * var(--main-width));
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
.wide.full-width {
|
|
929
|
+
margin-left: calc(-1 * var(--line-height));
|
|
930
|
+
width: calc(100vw - 2 * var(--line-height));
|
|
931
|
+
max-width: calc(100vw - 2 * var(--line-height));
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.wide.extra-wide .katex-display,
|
|
935
|
+
.wide.full-width .katex-display {
|
|
936
|
+
padding-left: var(--line-height);
|
|
937
|
+
padding-right: var(--line-height);
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
.wide.extra-wide .katex-display,
|
|
941
|
+
.wide.extra-wide .katex-display > .katex,
|
|
942
|
+
.wide.full-width .katex-display,
|
|
943
|
+
.wide.full-width .katex-display > .katex {
|
|
944
|
+
text-align: left;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.wide.extra-wide figcaption,
|
|
948
|
+
.wide.extra-wide table > caption,
|
|
949
|
+
.wide.full-width figcaption,
|
|
950
|
+
.wide.full-width table > caption {
|
|
951
|
+
text-align: left;
|
|
952
|
+
margin-left: var(--line-height);
|
|
953
|
+
max-width: var(--main-width);
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
/* Unfortunately, variables aren't in scope here.
|
|
958
|
+
* 550px = --main-width-narrow
|
|
959
|
+
* 26px = --line-height
|
|
960
|
+
* 169px = side note min width narrow
|
|
961
|
+
*/
|
|
962
|
+
@media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(52px + 745px + 52px + 206px + 52px - 1px)) {
|
|
963
|
+
header,
|
|
964
|
+
nav#TOC,
|
|
965
|
+
main,
|
|
966
|
+
footer {
|
|
967
|
+
margin-left: var(--line-height);
|
|
968
|
+
max-width: var(--main-width-narrow);
|
|
969
|
+
margin-right: auto;
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
.sidenote,
|
|
973
|
+
.marginnote {
|
|
974
|
+
--margin-left: var(--line-height);
|
|
975
|
+
--margin-right: var(--line-height);
|
|
976
|
+
--computed-width: calc(100vw - var(--main-width-narrow) - var(--line-height) - var(--margin-right) - var(--margin-left));
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
.wide {
|
|
980
|
+
width: var(--main-width);
|
|
981
|
+
overflow-x: scroll;
|
|
982
|
+
overflow-y: hidden;
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.wide .katex-display,
|
|
986
|
+
.wide .katex-display > .katex {
|
|
987
|
+
text-align: left;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
.wide figcaption,
|
|
991
|
+
.wide table > caption {
|
|
992
|
+
text-align: left;
|
|
993
|
+
max-width: var(--main-width-narrow);
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
.wide.extra-wide,
|
|
997
|
+
.wide.full-width {
|
|
998
|
+
width: calc(100vw - 2 * var(--line-height));
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
/* }}} */
|
|
1003
|
+
/* --- Side notes collapsed --- {{{ */
|
|
1004
|
+
|
|
1005
|
+
/* Unfortunately, variables aren't in scope here.
|
|
1006
|
+
* See calculations above.
|
|
1007
|
+
*/
|
|
1008
|
+
@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
|
|
1009
|
+
header,
|
|
1010
|
+
nav#TOC,
|
|
1011
|
+
main,
|
|
1012
|
+
footer {
|
|
1013
|
+
margin-left: var(--line-height);
|
|
1014
|
+
margin-right: var(--line-height);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.sidenote,
|
|
1018
|
+
.marginnote {
|
|
1019
|
+
display: none;
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
.margin-toggle:checked + .sidenote,
|
|
1023
|
+
.margin-toggle:checked + .marginnote {
|
|
1024
|
+
display: block;
|
|
1025
|
+
float: left;
|
|
1026
|
+
clear: both;
|
|
1027
|
+
width: 100%;
|
|
1028
|
+
max-width: 100%;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.wide {
|
|
1032
|
+
width: 100%;
|
|
1033
|
+
overflow-x: scroll;
|
|
1034
|
+
overflow-y: hidden;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.wide .katex-display,
|
|
1038
|
+
.wide .katex-display > .katex {
|
|
1039
|
+
text-align: left;
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
.wide figcaption,
|
|
1043
|
+
.wide table > caption {
|
|
1044
|
+
text-align: left;
|
|
1045
|
+
max-width: calc(100vw - 2 * var(--line-height));
|
|
1046
|
+
}
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
/* }}} */
|
|
1050
|
+
/* --- Paged media (print styles) --- {{{ */
|
|
1051
|
+
@page {
|
|
1052
|
+
size: letter;
|
|
1053
|
+
margin: 0.5in;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
@media print {
|
|
1057
|
+
body {
|
|
1058
|
+
padding-top: 0;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
header,
|
|
1062
|
+
nav#TOC,
|
|
1063
|
+
main,
|
|
1064
|
+
footer {
|
|
1065
|
+
width: 5.25in;
|
|
1066
|
+
margin-right: auto;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.sidenote,
|
|
1070
|
+
.marginnote {
|
|
1071
|
+
width: 2in;
|
|
1072
|
+
margin-right: -2.25in;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.wide {
|
|
1076
|
+
width: 7.5in;
|
|
1077
|
+
overflow-x: hidden;
|
|
1078
|
+
overflow-y: hidden;
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
.wide .katex-display,
|
|
1082
|
+
.wide .katex-display > .katex {
|
|
1083
|
+
text-align: left;
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
.wide figcaption,
|
|
1087
|
+
.wide table > caption {
|
|
1088
|
+
text-align: left;
|
|
1089
|
+
width: 5.25in;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
.wide pre > code {
|
|
1093
|
+
white-space: pre-wrap;
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
h1, h2, h3 {
|
|
1098
|
+
page-break-after: avoid;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
table, figure, pre {
|
|
1102
|
+
page-break-inside: avoid;
|
|
1103
|
+
}
|
|
1104
|
+
/* }}} */
|
|
1105
|
+
/* }}} */
|
|
1106
|
+
|
|
1107
|
+
/* vim:fdm=marker
|
|
1108
|
+
*/
|