Optimize last images, add proof template, improve CSS

43 files changed, 320 insertions, 565 deletions

diff --git a/source/_includes/image.html b/source/_includes/image.html
index a9bc3fd..5b4f35f 100644
--- a/source/_includes/image.html
+++ b/source/_includes/image.html
@@ -12,22 +12,29 @@
 {% comment %} If 'name' ends in "full", half-size image must exist {% endcomment %}
 {% assign name_full = name %}
 {% if suffix == "full" %}
-  {% assign name_half = prefix | append: "half" %}
+ {% assign name_half = prefix | append: "half" %}
 {% else %}
-  {% assign name_half = name_full %}
+ {% assign name_half = name_full %}
 {% endif %}
 
 {% comment %} Insert the image, linking to the full-size version {% endcomment %}
+{% if include.class %}
+ {% assign add_class = 'class="' | append: include.class | append: '"' %}
+{% endif %}
+{% if include.style or include.width %}
+ {% assign set_width = "width:" | append: include.width %}
+ {% assign set_style = include.style | default: set_width %}
+ {% assign add_style = 'style="' | append: set_style | append: '"' %}
+{% endif %}
 <p>
 <a href="{{ name_full }}.{{ format }}">
- {% assign set_width = "width:" | append: include.width %}
- <picture markdown="0">
+ <picture>
   <source srcset="{{ name_half }}.avif" type="image/avif">
   {% if name_full == name_half %}
-   <img src="{{ name_half }}.{{ format }}" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}">
+   <img src="{{ name_half }}.{{ format }}" {{ add_class }} {{ add_style }} alt="{{ include.alt }}" title="{{ include.alt }}">
   {% else %}
    <source srcset="{{ name_half }}.webp" type="image/webp">
-   <img src="{{ name_half }}.jpg" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}">
+   <img src="{{ name_half }}.jpg" {{ add_class }} {{ add_style }} alt="{{ include.alt }}" title="{{ include.alt }}">
   {% endif %}
  </picture>
 </a>
diff --git a/source/_includes/preamble.html b/source/_includes/preamble.html
index 312f1cf..c94741b 100644
--- a/source/_includes/preamble.html
+++ b/source/_includes/preamble.html
@@ -1,9 +1,9 @@
 <meta charset="utf-8">
 {% if page.layout == "blog" or page.syntax %}
-<link rel="stylesheet" href="/infra/css/syntax.css?v=20221008">
+<link rel="stylesheet" href="/infra/css/syntax.css?v=20221027">
 {% endif %}
 {% if page.layout == "concept" or page.maths %}
 <link rel="stylesheet" href="/infra/css/katex.min.css?v=20221008">
 {% endif %}
-<link rel="stylesheet" href="/infra/css/main.css?v=20221001">
+<link rel="stylesheet" href="/infra/css/main.css?v=20221027">
 <script data-goatcounter="https://prefetch.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
diff --git a/source/_includes/proof/end.html b/source/_includes/proof/end.html
new file mode 100644
index 0000000..29533a4
--- /dev/null
+++ b/source/_includes/proof/end.html
@@ -0,0 +1,3 @@
+
+</div>
+</div>
diff --git a/source/_includes/proof/start.html b/source/_includes/proof/start.html
new file mode 100644
index 0000000..780b159
--- /dev/null
+++ b/source/_includes/proof/start.html
@@ -0,0 +1,6 @@
+<div class="proof">
+<input type="checkbox" class="proof" id="{{ include.id }}"/>
+<label class="proof" for="{{ include.id }}">{{ include.label | default: "Proof" }}</label>
+<div class="proof-hidden" markdown="1">
+<div class="proof-starts"></div>
+<label class="proof" for="{{ include.id }}">{{ include.label | default: "Proof" }}.</label>
diff --git a/source/blog/2022/email-server-revisited/index.md b/source/blog/2022/email-server-revisited/index.md
index 4519bae..eb3fc18 100644
--- a/source/blog/2022/email-server-revisited/index.md
+++ b/source/blog/2022/email-server-revisited/index.md
@@ -181,9 +181,7 @@ One day, I tried to send an email to an Outlook-based account,
 and OpenSMTPD reported it had been unable to make the delivery,
 because Microsoft had thrown an error:
 
-<a href="microsoft-bounce.png">
-<img src="microsoft-bounce.png" class="darkinv" style="width:100%">
-</a>
+{% include image.html file="microsoft-bounce.png" width="100%" class="darkinv" alt="Bounce message due to error from Microsoft" %}
 
 To their credit, they seem to be offering a way out.
 This approach is reasonable: preventively ban high-risk IP ranges,
diff --git a/source/blog/2022/email-server-revisited/microsoft-bounce.avif b/source/blog/2022/email-server-revisited/microsoft-bounce.avif
new file mode 100644
index 0000000..bc1c4f5
--- /dev/null
+++ b/source/blog/2022/email-server-revisited/microsoft-bounce.avif
diff --git a/source/index.md b/source/index.md
index 680b577..7847d5f 100644
--- a/source/index.md
+++ b/source/index.md
@@ -4,7 +4,14 @@ date: 2021-02-22
 layout: "default"
 ---
 
-<img src="/infra/image/logo256.png" class="darkinv" style="border: 2px solid #121212;">
+{% comment %} Not using includes/image.html to avoid link {% endcomment %}
+<p>
+<picture>
+<source srcset="/infra/image/logo-yu4qu3.avif" type="image/avif">
+<img src="/infra/image/logo-yu4qu3.png" class="darkinv" style="border: 2px solid #121212"
+title="預取 (yùqǔ): 'prefetch'; literally 'take in advance'" alt="預取 (yùqǔ): 'prefetch'; literally 'take in advance'">
+</picture>
+</p>
 
 Welcome to my website.
 
@@ -15,5 +22,5 @@ where I explain STEM concepts I've learned over the years.
 
 This website is made by me using [Hugo](https://gohugo.io),
 and served to you by [nginx](https://nginx.org/).
-I intend to keep it free of advertising and trackers,
+I intend to keep it free of advertising,
 and to maintain my A+ score for [TLS quality](https://www.ssllabs.com/ssltest/analyze.html?d=prefetch.eu).
diff --git a/source/infra/css/main.css b/source/infra/css/main.css
index 5127873..3f64520 100644
--- a/source/infra/css/main.css
+++ b/source/infra/css/main.css
@@ -11,10 +11,21 @@
 		--f: #ededed;
 		--a: #ffff00;
 	}
-	.darkinv {filter: invert(100%)}
+	.darkinv {filter: invert(100%);}
 }
 
 /* Basic elements */
+/* See also https://github.com/necolas/normalize.css/blob/master/normalize.css */
+html {
+	line-height: 1.5;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+hr {
+	box-sizing: content-box;
+	height: 0;
+	overflow: visible;
+}
 body {
 	background: #ededed;
 	background: var(--b);
@@ -26,43 +37,42 @@ body {
 	padding: 1rem 0;
 
 	font-family: sans-serif;
-	line-height: 1.5;
 }
-h1,h2,h3 {text-align: center;}
+h1, h2, h3 {text-align: center;}
 h1 {font-size: 2.0rem;}
 h2 {font-size: 1.6rem;}
 h3 {font-size: 1.2rem;}
 a {
+	background-color: transparent;
 	text-decoration: none;
 	color: #0000ff;
 	color: var(--a);
 }
 img {
+	border-style: none;
 	display: block;
 	max-width: 100%;
 	height: auto;
 	margin: auto;
 }
+table {margin: auto;}
+td {padding: 0 1.5rem;}
+/*code, pre {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}*/
+b, strong {font-weight: bolder;}
 
 /* Header and footer */
 .nav {
 	height: 3rem;
 	font-size: 2.4rem;
-	padding: 0.25rem 0;
-}
-.navl {
-	float: left;
-	text-align: left;
 }
-.navr {
-	float: right;
-	text-align: right;
-}
-.footl {
+.navl, .footl {
 	float: left;
 	text-align: left;
 }
-.footr {
+.navr, .footr {
 	float: right;
 	text-align: right;
 }
@@ -82,18 +92,19 @@ img {
 	color: var(--a);
 }
 
-/* Collapsible boxes */
-label {
+/* IE-compatible collapsible proofs */
+div.proof {
+	display: block;
+	border: dotted;
+	padding: 0.25rem 0.5rem;
+}
+label.proof {
 	color: #0000ff;
 	color: var(--a);
 	cursor: pointer;
 }
-.accordion {
-	display: block;
-	padding: 0.3rem 0.5rem;
-	border-style: dotted;
-}
-input {display: none;}
-input + label + .hidden {display: none;}
-input:checked + label {display: none;}
-input:checked + label + .hidden {display: block;}
+.proof-hidden {display: none;}
+input.proof {display: none;}
+input.proof:checked + label {display: none;}
+input.proof:checked + label + .proof-hidden {display: block;}
+.proof-starts + p {margin-top: 0;}
diff --git a/source/infra/css/syntax.css b/source/infra/css/syntax.css
index 8772351..50191d2 100644
--- a/source/infra/css/syntax.css
+++ b/source/infra/css/syntax.css
@@ -1,3 +1,19 @@
+.highlighter-rouge {
+	border: 1px solid;
+	border-color: #999988;
+	background-color: #f8f8f8;
+}
+@media only screen and (prefers-color-scheme: dark) {
+.highlighter-rouge {
+	background-color: #0d1117;
+	border-color: #8b949e;
+}
+}
+div.highlight { overflow: auto; }
+pre.highlight { margin: 0.5em; }
+
+
+
 /* From https://github.com/brazacz/rouge-themes/blob/main/css/github.css */
 .highlight      { background-color: #f8f8f8; }
 .highlight .bp  { color: #999999; }
diff --git a/source/infra/image/logo-cgit.png b/source/infra/image/logo-cgit.png
new file mode 100644
index 0000000..9b7b783
--- /dev/null
+++ b/source/infra/image/logo-cgit.png
diff --git a/source/infra/image/logo-yu4qu3.avif b/source/infra/image/logo-yu4qu3.avif
new file mode 100644
index 0000000..b0be209
--- /dev/null
+++ b/source/infra/image/logo-yu4qu3.avif
diff --git a/source/infra/image/logo256.png b/source/infra/image/logo-yu4qu3.png
index d6b9961..d6b9961 100644
--- a/source/infra/image/logo256.png
+++ b/source/infra/image/logo-yu4qu3.png
diff --git a/source/infra/image/logo96x64.gif b/source/infra/image/logo96x64.gif
deleted file mode 100644
index 869890b..0000000
--- a/source/infra/image/logo96x64.gif
+++ /dev/null
diff --git a/source/know/concept/binomial-distribution/index.md b/source/know/concept/binomial-distribution/index.md
index 1193a93..dc75221 100644
--- a/source/know/concept/binomial-distribution/index.md
+++ b/source/know/concept/binomial-distribution/index.md
@@ -44,11 +44,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-mean"/>
-<label for="proof-mean">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-mean">Proof.</label>
+
+{% include proof/start.html id="proof-mean" -%}
 The trick is to treat $$p$$ and $$q$$ as independent until the last moment:
 
 $$\begin{aligned}
@@ -62,8 +59,8 @@ $$\begin{aligned}
 \end{aligned}$$
 
 Inserting $$q = 1 - p$$ then gives the desired result.
-</div>
-</div>
+{% include proof/end.html id="proof-mean" %}
+
 
 Meanwhile, we find the following variance $$\sigma^2$$,
 with $$\sigma$$ being the standard deviation:
@@ -74,12 +71,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-var"/>
-<label for="proof-var">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-var">Proof.</label>
-We use the same trick to calculate $$\overline{n^2}$$
+
+{% include proof/start.html id="proof-var" -%}
 (the mean squared number of successes):
 
 $$\begin{aligned}
@@ -106,8 +99,8 @@ $$\begin{aligned}
 \end{aligned}$$
 
 By inserting $$q = 1 - p$$, we arrive at the desired expression.
-</div>
-</div>
+{% include proof/end.html id="proof-var" %}
+
 
 As $$N \to \infty$$, the binomial distribution
 turns into the continuous normal distribution,
@@ -119,11 +112,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-normal"/>
-<label for="proof-normal">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-normal">Proof.</label>
+
+{% include proof/start.html id="proof-normal" -%}
 We take the Taylor expansion of $$\ln\!\big(P_N(n)\big)$$
 around the mean $$\mu = Np$$:
 
@@ -211,8 +201,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 Taking $$\exp$$ of this expression then yields a normalized Gaussian distribution.
-</div>
-</div>
+{% include proof/end.html id="proof-normal" %}
 
 
 ## References
diff --git a/source/know/concept/boltzmann-equation/index.md b/source/know/concept/boltzmann-equation/index.md
index 9ed2fd2..d2631b2 100644
--- a/source/know/concept/boltzmann-equation/index.md
+++ b/source/know/concept/boltzmann-equation/index.md
@@ -145,11 +145,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-moment0"/>
-<label for="proof-moment0">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-moment0">Proof.</label>
+
+{% include proof/start.html id="proof-moment0" -%}
 We insert $$Q = m$$ into our prototype,
 and since $$m$$ is constant, the rest is trivial:
 
@@ -159,9 +156,8 @@ $$\begin{aligned}
     \\
     &= \pdv{\rho}{t} + \nabla \cdot \big(\rho \Expval{\vb{v}}\big) - 0
 \end{aligned}$$
+{% include proof/end.html id="proof-moment0" %}
 
-</div>
-</div>
 
 If we instead choose the momentum $$Q = m \vb{v}$$,
 we find that the **first moment** of the BTE describes conservation of momentum,
@@ -174,11 +170,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-moment1"/>
-<label for="proof-moment1">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-moment1">Proof.</label>
+
+{% include proof/start.html id="proof-moment1" -%}
 We insert $$Q = m \vb{v}$$ into our prototype and recognize $$\rho$$ wherever possible:
 
 $$\begin{aligned}
@@ -220,9 +213,8 @@ $$\begin{aligned}
     0
     &= \pdv{}{t}\big(\rho \vb{V}\big) + \nabla \cdot \big(\rho \vb{V} \vb{V} + \hat{P}\big) - n \vb{F}
 \end{aligned}$$
+{% include proof/end.html id="proof-moment1" %}
 
-</div>
-</div>
 
 Finally, if we choose the kinetic energy $$Q = m |\vb{v}|^2 / 2$$,
 we find that the **second moment** gives conservation of energy,
@@ -237,11 +229,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-moment2"/>
-<label for="proof-moment2">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-moment2">Proof.</label>
+
+{% include proof/start.html id="proof-moment2" -%}
 We insert $$Q = m |\vb{v}|^2 / 2$$ into our prototype and recognize $$\rho$$ wherever possible:
 
 $$\begin{aligned}
@@ -349,9 +338,7 @@ $$\begin{aligned}
     \end{bmatrix}
     = \sum_{i=1}^{3} \sum_{j=1}^{3} \pdv{P_{ij}}{x_j} V_i
 \end{aligned}$$
-
-</div>
-</div>
+{% include proof/end.html id="proof-moment2" %}
 
 
 
diff --git a/source/know/concept/convolution-theorem/index.md b/source/know/concept/convolution-theorem/index.md
index 742c8ff..510417a 100644
--- a/source/know/concept/convolution-theorem/index.md
+++ b/source/know/concept/convolution-theorem/index.md
@@ -12,6 +12,8 @@ is equal to a product in the frequency domain. This is especially useful
 for computation, replacing an $$\mathcal{O}(n^2)$$ convolution with an
 $$\mathcal{O}(n \log(n))$$ transform and product.
 
+
+
 ## Fourier transform
 
 The convolution theorem is usually expressed as follows, where
@@ -27,11 +29,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-fourier"/>
-<label for="proof-fourier">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-fourier">Proof.</label>
+
+{% include proof/start.html id="proof-fourier" -%}
 We expand the right-hand side of the theorem and
 rearrange the integrals:
 
@@ -57,8 +56,8 @@ $$\begin{aligned}
     &= B \int_{-\infty}^\infty \tilde{g}(k') \: \tilde{f}(k - k') \dd{k'}
     = B \cdot (\tilde{f} * \tilde{g})(k)
 \end{aligned}$$
-</div>
-</div>
+{% include proof/end.html id="proof-fourier" %}
+
 
 
 ## Laplace transform
@@ -79,11 +78,8 @@ $$\begin{aligned}
     \boxed{\hat{\mathcal{L}}\{(f * g)(t)\} = \tilde{f}(s) \: \tilde{g}(s)}
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-laplace"/>
-<label for="proof-laplace">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-laplace">Proof.</label>
+
+{% include proof/start.html id="proof-laplace" -%}
 We expand the left-hand side.
 Note that the lower integration limit is 0 instead of $$-\infty$$,
 because we set both $$f(t)$$ and $$g(t)$$ to zero for $$t < 0$$:
@@ -106,8 +102,7 @@ $$\begin{aligned}
     &= \int_0^\infty \tilde{f}(s) \: g(t') \exp(- s t') \dd{t'}
     = \tilde{f}(s) \: \tilde{g}(s)
 \end{aligned}$$
-</div>
-</div>
+{% include proof/end.html id="proof-laplace" %}
 
 
 
diff --git a/source/know/concept/curvilinear-coordinates/index.md b/source/know/concept/curvilinear-coordinates/index.md
index cb22e43..48a5a72 100644
--- a/source/know/concept/curvilinear-coordinates/index.md
+++ b/source/know/concept/curvilinear-coordinates/index.md
@@ -48,6 +48,7 @@ we derive general formulae to convert expressions
 from Cartesian coordinates to the new orthogonal system $$(x_1, x_2, x_3)$$.
 
 
+
 ## Basis vectors
 
 Consider the the vector form of the line element $$\dd{\ell}$$,
@@ -86,6 +87,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Gradient
 
 In an orthogonal coordinate system,
@@ -102,11 +104,8 @@ $$\begin{gathered}
     }
 \end{gathered}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-grad"/>
-<label for="proof-grad">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-grad">Proof.</label>
+
+{% include proof/start.html id="proof-grad" -%}
 For a direction $$\dd{\ell}$$, we know that
 $$\idv{f}{\ell}$$ is the component of $$\nabla f$$ in that direction:
 
@@ -127,9 +126,8 @@ $$\begin{gathered}
     + \vu{e}_2 \dv{x_2}{\ell} \pdv{f}{x_2}
     + \vu{e}_3 \dv{x_3}{\ell} \pdv{f}{x_3}
 \end{gathered}$$
+{% include proof/end.html id="proof-grad" %}
 
-</div>
-</div>
 
 
 ## Divergence
@@ -145,11 +143,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-div"/>
-<label for="proof-div">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-div">Proof.</label>
+
+{% include proof/start.html id="proof-div" -%}
 As preparation, we rewrite $$\vb{V}$$ as follows
 to introduce the scale factors:
 
@@ -222,8 +217,8 @@ $$\begin{aligned}
 
 After repeating this procedure for the other components of $$\vb{V}$$,
 we get the desired general expression for the divergence.
-</div>
-</div>
+{% include proof/end.html id="proof-div" %}
+
 
 
 ## Laplacian
@@ -246,6 +241,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Curl
 
 The curl of a vector $$\vb{V}$$ is as follows
@@ -264,11 +260,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-curl"/>
-<label for="proof-curl">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-curl">Proof.</label>
+
+{% include proof/start.html id="proof-curl" -%}
 The curl is found in a similar way as the divergence.
 We rewrite $$\vb{V}$$ like so:
 
@@ -317,8 +310,8 @@ $$\begin{aligned}
 
 If we go through the same process for the other components of $$\vb{V}$$
 and add up the results, we get the desired expression for the curl.
-</div>
-</div>
+{% include proof/end.html id="proof-curl" %}
+
 
 
 ## Differential elements
diff --git a/source/know/concept/detailed-balance/index.md b/source/know/concept/detailed-balance/index.md
index b89d5da..98f9bd3 100644
--- a/source/know/concept/detailed-balance/index.md
+++ b/source/know/concept/detailed-balance/index.md
@@ -103,11 +103,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-reversibility"/>
-<label for="proof-reversibility">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-reversibility">Proof.</label>
+
+{% include proof/start.html id="proof-reversibility" -%}
 Consider the following weighted inner product,
 whose weight function is a stationary distribution $$\pi$$
 satisfying detailed balance,
@@ -222,8 +219,7 @@ $$\begin{aligned}
 
 Where the integral gave the expectation value at $$X_0$$,
 since $$\pi$$ does not change in time.
-</div>
-</div>
+{% include proof/end.html id="proof-reversibility" %}
 
 
 
diff --git a/source/know/concept/dirac-delta-function/index.md b/source/know/concept/dirac-delta-function/index.md
index 518eba1..0185b78 100644
--- a/source/know/concept/dirac-delta-function/index.md
+++ b/source/know/concept/dirac-delta-function/index.md
@@ -65,11 +65,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-scale"/>
-<label for="proof-scale">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-scale">Proof.</label>
+
+{% include proof/start.html id="proof-scale" -%}
 Because it is symmetric, $$\delta(s x) = \delta(|s| x)$$.
 Then by substituting $$\sigma = |s| x$$:
 
@@ -77,9 +74,8 @@ $$\begin{aligned}
     \int \delta(|s| x) \dd{x}
     &= \frac{1}{|s|} \int \delta(\sigma) \dd{\sigma} = \frac{1}{|s|}
 \end{aligned}$$
+{% include proof/end.html id="proof-scale" %}
 
-</div>
-</div>
 
 An even more impressive property is the behaviour of the derivative of $$\delta(x)$$:
 
@@ -89,11 +85,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dv1"/>
-<label for="proof-dv1">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dv1">Proof.</label>
+
+{% include proof/start.html id="proof-dv1" -%}
 Note which variable is used for the
 differentiation, and that $$\delta'(x - \xi) = - \delta'(\xi - x)$$:
 
@@ -102,9 +95,8 @@ $$\begin{aligned}
     &= \dv{}{x}\int f(\xi) \: \delta(x - \xi) \dd{x}
     = f'(x)
 \end{aligned}$$
+{% include proof/end.html id="proof-dv1" %}
 
-</div>
-</div>
 
 This property also generalizes nicely for the higher-order derivatives:
 
diff --git a/source/know/concept/dynkins-formula/index.md b/source/know/concept/dynkins-formula/index.md
index c0d20c