pandoc-markdown-jekyll-theme 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
*/
|