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 c0d20c5..307f098 100644
--- a/source/know/concept/dynkins-formula/index.md
+++ b/source/know/concept/dynkins-formula/index.md
@@ -39,11 +39,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-kolmogorov"/>
-<label for="proof-kolmogorov">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-kolmogorov">Proof.</label>
+
+{% include proof/start.html id="proof-kolmogorov" -%}
 We define a new process $$Y_t \equiv h(X_t)$$, and then apply Itō's lemma, leading to:
 
 $$\begin{aligned}
@@ -84,9 +81,8 @@ $$\begin{aligned}
     \hat{L}\{h(X_0)\}
     \approx \frac{1}{t} \mathbf{E}[Y_t - Y_0| X_0]
 \end{aligned}$$
+{% include proof/end.html id="proof-kolmogorov" %}
 
-</div>
-</div>
 
 The general definition of resembles that of a classical derivative,
 and indeed, the generator $$\hat{A}$$ can be thought of as a differential operator.
@@ -104,11 +100,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dynkin"/>
-<label for="proof-dynkin">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dynkin">Proof.</label>
+
+{% include proof/start.html id="proof-dynkin" -%}
 The proof is similar to the one above.
 Define $$Y_t = h(X_t)$$ and use Itō’s lemma:
 
@@ -136,9 +129,9 @@ $$\begin{aligned}
     = \mathbf{E}\bigg[ Y_\tau - Y_0 - \int_0^\tau \hat{L}\{h(X_t)\} \dd{t} \bigg| X_0 \bigg]
 \end{aligned}$$
 
-Isolating this equation for $$\mathbf{E}[Y_\tau | X_0]$$ then gives Dynkin's formula.
-</div>
-</div>
+Isolating this equation for $$\mathbf{E}[Y_\tau \!\mid\! X_0]$$ then gives Dynkin's formula.
+{% include proof/end.html id="proof-dynkin" %}
+
 
 A common application of Dynkin's formula is predicting
 when the stopping time $$\tau$$ occurs, and in what state $$X_\tau$$ this happens.
diff --git a/source/know/concept/equation-of-motion-theory/index.md b/source/know/concept/equation-of-motion-theory/index.md
index 02ed856..c1ed8da 100644
--- a/source/know/concept/equation-of-motion-theory/index.md
+++ b/source/know/concept/equation-of-motion-theory/index.md
@@ -63,11 +63,8 @@ $$\begin{aligned}
     = - \sum_{\nu''} u_{\nu \nu''} \hat{c}_{\nu''}
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-commH0"/>
-<label for="proof-commH0">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-commH0">Proof.</label>
+
+{% include proof/start.html id="proof-commutator" -%}
 Using the commutator identity for $$\comm{A B}{C}$$,
 we decompose it like so:
 
@@ -105,9 +102,8 @@ $$\begin{aligned}
     - 2 \acomm{\hat{f}_{\!\nu'}^\dagger}{\hat{f}_{\!\nu}} \hat{f}_{\!\nu''} \Big)
     = - \sum_{\nu''} u_{\nu \nu''} \hat{f}_{\!\nu''}
 \end{aligned}$$
+{% include proof/end.html id="proof-commutator" %}
 
-</div>
-</div>
 
 Substituting this into $$G_{\nu \nu'}^R$$'s equation of motion,
 we recognize another Green's function $$G_{\nu'' \nu'}^R$$:
diff --git a/source/know/concept/euler-bernoulli-law/index.md b/source/know/concept/euler-bernoulli-law/index.md
index dad67ca..5a6c38d 100644
--- a/source/know/concept/euler-bernoulli-law/index.md
+++ b/source/know/concept/euler-bernoulli-law/index.md
@@ -81,11 +81,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-field"/>
-<label for="proof-field">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-field">Proof.</label>
+
+{% include proof/start.html id="proof-field" -%}
 By integrating the above strains $$u_{ii} = \ipdv{u_i}{i}$$,
 we get the components of $$\va{u}$$:
 
@@ -171,8 +168,8 @@ $$\begin{aligned}
 
 Inserting this into the components $$u_x$$, $$u_y$$ and $$u_z$$
 then yields the full displacement field.
-</div>
-</div>
+{% include proof/end.html id="proof-field" %}
+
 
 In any case, the beam experiences a bending torque with an $$x$$-component $$T_x$$ given by:
 
diff --git a/source/know/concept/fourier-transform/index.md b/source/know/concept/fourier-transform/index.md
index 0bc849b..c86d997 100644
--- a/source/know/concept/fourier-transform/index.md
+++ b/source/know/concept/fourier-transform/index.md
@@ -67,6 +67,7 @@ on whether the analysis is for forward ($$s > 0$$) or backward-propagating
 ($$s < 0$$) waves.
 
 
+
 ## Derivatives
 
 The FT of a derivative has a very useful property.
@@ -113,6 +114,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Multiple dimensions
 
 The Fourier transform is straightforward to generalize to $$N$$ dimensions.
@@ -150,11 +152,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-constants-ND"/>
-<label for="proof-constants-ND">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-constants-ND">Proof.</label>
+
+{% include proof/start.html id="proof-constants-ndim" -%}
 The inverse FT of the forward FT of $$f(\vb{x})$$ must be equal to $$f(\vb{x})$$ again, so:
 
 $$\begin{aligned}
@@ -180,9 +179,8 @@ $$\begin{aligned}
     &= \frac{(2 \pi)^N A B}{|s|^N} \int f(\vb{x}') \: \delta(\vb{x}' - \vb{x}) \ddn{N}{\vb{x}'}
     = \frac{(2 \pi)^N A B}{|s|^N} f(\vb{x})
 \end{aligned}$$
+{% include proof/end.html id="proof-constants-ndim" %}
 
-</div>
-</div>
 
 Differentiation is more complicated for $$N > 1$$,
 but the FT is still useful,
@@ -197,11 +195,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-laplacian"/>
-<label for="proof-laplacian">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-laplacian">Proof.</label>
+
+{% include proof/start.html id="proof-laplacian" -%}
 We insert $$\nabla^2 f$$ into the FT,
 decompose the exponential and the Laplacian,
 and then integrate by parts (limits $$\pm \infty$$ omitted):
@@ -236,9 +231,7 @@ $$\begin{aligned}
     &= - A s^2 \sum_{n = 1}^N k_n^2 \int f \exp(i s \vb{k} \cdot \vb{x}) \ddn{N}{\vb{x}}
     = - s^2 \sum_{n = 1}^N k_n^2 \tilde{f}
 \end{aligned}$$
-
-</div>
-</div>
+{% include proof/end.html id="proof-laplacian" %}
 
 
 
diff --git a/source/know/concept/fundamental-solution/index.md b/source/know/concept/fundamental-solution/index.md
index 312cc2e..947aada 100644
--- a/source/know/concept/fundamental-solution/index.md
+++ b/source/know/concept/fundamental-solution/index.md
@@ -42,11 +42,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-solution"/>
-<label for="proof-solution">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-solution">Proof.</label>
+
+{% include proof/start.html id="proof-solution" -%}
 $$\hat{L}$$ only acts on $$x$$, so $$x' \in ]a, b[$$ is simply a parameter,
 meaning we are free to multiply the definition of $$G$$
 by the constant $$f(x')$$ on both sides,
@@ -72,8 +69,8 @@ $$\begin{aligned}
 
 By definition, $$\hat{L}$$'s response $$u(x)$$ to $$f(x)$$
 satisfies $$\hat{L}\{ u(x) \} = f(x)$$, recognizable here.
-</div>
-</div>
+{% include proof/end.html id="proof-solution" %}
+
 
 While the impulse response is typically used for initial value problems,
 the fundamental solution $$G$$ is used for boundary value problems.
@@ -117,11 +114,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-reciprocity"/>
-<label for="proof-reciprocity">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-reciprocity">Proof.</label>
+
+{% include proof/start.html id="proof-reciprocity" -%}
 Consider two parameters $$x_1'$$ and $$x_2'$$.
 The self-adjointness of $$\hat{L}$$ means that:
 
@@ -135,9 +129,7 @@ $$\begin{aligned}
     G^*(x_2', x_1')
     &= G(x_1', x_2')
 \end{aligned}$$
-
-</div>
-</div>
+{% include proof/end.html id="proof-reciprocity" %}
 
 
 
diff --git a/source/know/concept/greens-functions/index.md b/source/know/concept/greens-functions/index.md
index ddba2cd..eda5671 100644
--- a/source/know/concept/greens-functions/index.md
+++ b/source/know/concept/greens-functions/index.md
@@ -21,6 +21,7 @@ but in general they are not the same,
 except in a special case, see below.
 
 
+
 ## Single-particle functions
 
 If the two operators are single-particle creation/annihilation operators,
@@ -146,11 +147,8 @@ $$\begin{gathered}
     G_{\nu \nu'}^<(t, t') = G_{\nu \nu'}^<(t - t')
 \end{gathered}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-time-diff"/>
-<label for="proof-time-diff">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-time-diff">Proof.</label>
+
+{% include proof/start.html id="proof-time-delta" -%}
 We will prove that the thermal expectation value
 $$\expval{\hat{A}(t) \hat{B}(t')}$$ only depends on $$t - t'$$
 for arbitrary $$\hat{A}$$ and $$\hat{B}$$,
@@ -189,8 +187,7 @@ because $$\hat{H}$$ is time-independent by assumption.
 Note that thermodynamic equilibrium is crucial:
 intuitively, if the system is not in equilibrium,
 then it evolves in some transient time-dependent way.
-</div>
-</div>
+{% include proof/end.html id="proof-time-delta" %}
 
 If the Hamiltonian is both time-independent and non-interacting,
 then the time-dependence of $$\hat{c}_\nu$$
@@ -214,6 +211,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## As fundamental solutions
 
 In the absence of interactions,
@@ -237,11 +235,8 @@ $$\begin{aligned}
     = \frac{\hbar^2}{2 m} \nabla^2 \hat{\Psi}(\vb{r})
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-commH0"/>
-<label for="proof-commH0">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-commH0">Proof.</label>
+
+{% include proof/start.html id="proof-commutator" -%}
 In the second quantization,
 the Hamiltonian $$\hat{H}_0$$ is written like so:
 
@@ -307,9 +302,8 @@ $$\begin{aligned}
     &= \frac{\hbar^2}{2 m} \sum_{\nu'} \hat{c}_{\nu'} \nabla^2 \psi_{\nu'}(\vb{r})
     = \frac{\hbar^2}{2 m} \nabla^2 \hat{\Psi}(\vb{r})
 \end{aligned}$$
+{% include proof/end.html id="proof-commutator" %}
 
-</div>
-</div>
 
 After substituting this into the equation of motion,
 we recognize $$G^R(\vb{r}, t; \vb{r}', t')$$ itself:
diff --git a/source/know/concept/gronwall-bellman-inequality/index.md b/source/know/concept/gronwall-bellman-inequality/index.md
index 8096aaf..da1bcad 100644
--- a/source/know/concept/gronwall-bellman-inequality/index.md
+++ b/source/know/concept/gronwall-bellman-inequality/index.md
@@ -26,11 +26,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-original"/>
-<label for="proof-original">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-original">Proof.</label>
+
+{% include proof/start.html id="proof-original" -%}
 We define $$w(t)$$ to equal the upper bounds above
 on both $$w'(t)$$ and $$w(t)$$ itself:
 
@@ -63,8 +60,8 @@ $$\begin{aligned}
 
 Since $$u' \le \beta u$$ as a condition,
 the above derivative is always negative.
-</div>
-</div>
+{% include proof/end.html id="proof-original" %}
+
 
 Grönwall's inequality can be generalized to non-differentiable functions.
 Suppose we know:
@@ -84,11 +81,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-integral"/>
-<label for="proof-integral">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-integral">Proof.</label>
+
+{% include proof/start.html id="proof-integral" -%}
 We start by defining $$w(t)$$ as follows,
 which will act as shorthand:
 
@@ -138,8 +132,8 @@ $$\begin{aligned}
 \end{aligned}$$
 
 Insert this into the condition under which the Grönwall-Bellman inequality holds.
-</div>
-</div>
+{% include proof/end.html id="proof-integral" %}
+
 
 In the special case where $$\alpha(t)$$ is non-decreasing with $$t$$,
 the inequality reduces to:
@@ -151,11 +145,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-special"/>
-<label for="proof-special">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-special">Proof.</label>
+
+{% include proof/start.html id="proof-special" -%}
 Starting from the "ordinary" Grönwall-Bellman inequality,
 the fact that $$\alpha(t)$$ is non-decreasing tells us that
 $$\alpha(s) \le \alpha(t)$$ for all $$s \le t$$, so:
@@ -194,9 +185,7 @@ $$\begin{aligned}
     \\
     &\le \alpha(t) - \alpha(t) + \alpha(t) \exp\!\bigg( \int_0^t \beta(r) \dd{r} \bigg)
 \end{aligned}$$
-
-</div>
-</div>
+{% include proof/end.html id="proof-special" %}
 
 
 
diff --git a/source/know/concept/guiding-center-theory/index.md b/source/know/concept/guiding-center-theory/index.md
index 5368966..412c88b 100644
--- a/source/know/concept/guiding-center-theory/index.md
+++ b/source/know/concept/guiding-center-theory/index.md
@@ -72,6 +72,7 @@ we can use this average to approximately remove the finer dynamics,
 and focus only on the guiding center.
 
 
+
 ## Uniform electric and magnetic field
 
 Consider the case where $$\vb{E}$$ and $$\vb{B}$$ are both uniform,
@@ -149,6 +150,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Non-uniform magnetic field
 
 Next, consider a more general case, where $$\vb{B}$$ is non-uniform,
@@ -193,11 +195,8 @@ $$\begin{aligned}
     \approx - \frac{u_L^2}{2 \omega_c} \nabla B
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-nonuniform-B-averages"/>
-<label for="proof-nonuniform-B-averages">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-nonuniform-B-averages">Proof.</label>
+
+{% include proof/start.html id="proof-averages" -%}
 We know what $$\vb{x}_L$$ is,
 so we can write out $$(\vb{x}_L \cdot \nabla) \vb{B}$$
 for $$\vb{B} = (B_x, B_y, B_z)$$:
@@ -290,9 +289,8 @@ $$\begin{aligned}
     \end{pmatrix}
     = - \frac{u_L^2}{2 \omega_c} \nabla B
 \end{aligned}$$
+{% include proof/end.html id="proof-averages" %}
 
-</div>
-</div>
 
 With this, the guiding center's equation of motion
 is reduced to the following:
@@ -332,11 +330,8 @@ $$\begin{aligned}
     \approx - u_{gc\parallel} \frac{\vb{R}_c}{R_c^2}
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-nonuniform-B-curvature"/>
-<label for="proof-nonuniform-B-curvature">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-nonuniform-B-curvature">Proof.</label>
+
+{% include proof/start.html id="proof-curvature" -%}
 Assuming that $$\vu{b}$$ does not explicitly depend on time,
 i.e. $$\ipdv{\vu{b}}{t} = 0$$,
 we can rewrite the derivative using the chain rule:
@@ -381,9 +376,8 @@ $$\begin{aligned}
     = - \frac{\vu{R}_c}{R_c}
     = - \frac{\vb{R}_c}{R_c^2}
 \end{aligned}$$
+{% include proof/end.html id="proof-curvature" %}
 
-</div>
-</div>
 
 With this, we arrive at the following equation of motion
 for the guiding center:
diff --git a/source/know/concept/hamiltonian-mechanics/index.md b/source/know/concept/hamiltonian-mechanics/index.md
index 19e55b0..03ff2dd 100644
--- a/source/know/concept/hamiltonian-mechanics/index.md
+++ b/source/know/concept/hamiltonian-mechanics/index.md
@@ -15,6 +15,7 @@ It is built on the shoulders of [Lagrangian mechanics](/know/concept/lagrangian-
 which is in turn built on [variational calculus](/know/concept/calculus-of-variations/).
 
 
+
 ## Definitions
 
 In Lagrangian mechanics, use a Lagrangian $$L$$,
@@ -90,6 +91,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Canonical equations
 
 Lagrangian mechanics has a single Euler-Lagrange equation per object,
@@ -105,11 +107,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-canoneq"/>
-<label for="proof-canoneq">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-canoneq">Proof.</label>
+
+{% include proof/start.html id="proof-canonical" -%}
 For the first equation,
 we differentiate $$H$$ with respect to $$q_n$$,
 and use the chain rule:
@@ -148,9 +147,8 @@ $$\begin{aligned}
     - 0 \pdv{L}{q_j} - p_j \pdv{\dot{q}_j}{p_n} \Big)
     = \dot{q}_n
 \end{aligned}$$
+{% include proof/end.html id="proof-canonical" %}
 
-</div>
-</div>
 
 Just like in Lagrangian mechanics, if $$H$$ does not explicitly contain $$q_n$$,
 then $$q_n$$ is called a **cyclic coordinate**, and leads to the conservation of $$p_n$$:
@@ -175,11 +173,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-diff-t"/>
-<label for="proof-diff-t">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-diff-t">Proof.</label>
+
+{% include proof/start.html id="proof-dv-t" -%}
 We differentiate via the multivariate chain rule,
 insert the canonical equations,
 and eventually recognize the PB definition:
@@ -192,9 +187,8 @@ $$\begin{aligned}
     \\
     &= \sum_{n} \Big( \pdv{A}{q_n} \pdv{H}{p_n} - \pdv{A}{p_n} \pdv{H}{q_n} \Big) + \pdv{A}{t}
 \end{aligned}$$
+{% include proof/end.html id="proof-dv-t" %}
 
-</div>
-</div>
 
 Assuming that $$H$$ does not explicitly depend on $$t$$,
 the above property naturally leads us to an alternative
@@ -247,11 +241,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-cantrans"/>
-<label for="proof-cantrans">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-cantrans">Proof.</label>
+
+{% include proof/start.html id="proof-transformation" -%}
 Assuming that $$Q_n$$, $$P_n$$ and $$H$$ do not explicitly depend on $$t$$,
 we use our expression for the $$t$$-derivative of an arbitrary quantity,
 and apply the multivariate chain rule to it:
@@ -296,8 +287,8 @@ if and only if $$\{P_n, P_j\} = 0$$,
 and $$\{Q_n, P_j\} = - \delta_{nj}$$.
 The PB is anticommutative,
 i.e. $$\{A, B\} = - \{B, A\}$$.
-</div>
-</div>
+{% include proof/end.html id="proof-transformation" %}
+
 
 If you have experience with quantum mechanics,
 the latter equation should look suspiciously similar
diff --git a/source/know/concept/heaviside-step-function/index.md b/source/know/concept/heaviside-step-function/index.md
index 15d1729..9f5d4ec 100644
--- a/source/know/concept/heaviside-step-function/index.md
+++ b/source/know/concept/heaviside-step-function/index.md
@@ -57,11 +57,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" -%}
 In this case, it is easiest to use $$\Theta(0) = 1/2$$,
 such that the Heaviside step function can be expressed
 using the signum function $$\mathrm{sgn}(t)$$:
@@ -88,9 +85,8 @@ $$\begin{aligned}
     &= A \pi \delta(s \omega) + \frac{A}{2} \pv{\int_{-\infty}^\infty \mathrm{sgn}(t) \exp(i s \omega t) \dd{t}}
     = \frac{A}{|s|} \pi \delta(\omega) + i \frac{A}{s} \pv{\frac{1}{\omega}}
 \end{aligned}$$
+{% include proof/end.html id="proof-fourier" %}
 
-</div>
-</div>
 
 The use of $$\pv{}$$ without an integral is an abuse of notation,
 and means that this result only makes sense when wrapped in an integral.
diff --git a/source/know/concept/holomorphic-function/index.md b/source/know/concept/holomorphic-function/index.md
index 5dde240..cf252c0 100644
--- a/source/know/concept/holomorphic-function/index.md
+++ b/source/know/concept/holomorphic-function/index.md
@@ -61,6 +61,7 @@ and imaginary parts satisfy these equations. This gives an idea of how
 strict the criteria are to qualify as holomorphic.
 
 
+
 ## Integration formulas
 
 Holomorphic functions satisfy **Cauchy's integral theorem**, which states
@@ -73,11 +74,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-int-theorem"/>
-<label for="proof-int-theorem">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-int-theorem">Proof.</label>
+
+{% include proof/start.html id="proof-int-theorem" -%}
 Just like before, we decompose $$f(z)$$ into its real and imaginary parts:
 
 $$\begin{aligned}
@@ -97,8 +95,8 @@ $$\begin{aligned}
 
 Since $$f(z)$$ is holomorphic, $$u$$ and $$v$$ satisfy the Cauchy-Riemann
 equations, such that the integrands disappear and the final result is zero.
-</div>
-</div>
+{% include proof/end.html id="proof-int-theorem" %}
+
 
 An interesting consequence is **Cauchy's integral formula**, which
 states that the value of $$f(z)$$ at an arbitrary point $$z_0$$ is
@@ -110,11 +108,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-int-formula"/>
-<label for="proof-int-formula">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-int-formula">Proof.</label>
+
+{% include proof/start.html id="proof-int-formula" -%}
 Thanks to the integral theorem, we know that the shape and size
 of $$C$$ is irrelevant. Therefore we choose it to be a circle with radius $$r$$,
 such that the integration variable becomes $$z = z_0 + r e^{i \theta}$$. Then
@@ -133,9 +128,8 @@ $$\begin{aligned}
     &= \frac{f(z_0)}{2 \pi} \int_0^{2 \pi} \dd{\theta}
     = f(z_0)
 \end{aligned}$$
+{% include proof/end.html id="proof-int-formula" %}
 
-</div>
-</div>
 
 Similarly, **Cauchy's differentiation formula**,
 or **Cauchy's integral formula for derivatives**
@@ -149,11 +143,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-diff-formula"/>
-<label for="proof-diff-formula">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-diff-formula">Proof.</label>
+
+{% include proof/start.html id="proof-dv-formula" -%}
 By definition, the first derivative $$f'(z)$$ of a
 holomorphic function exists and is:
 
@@ -186,6 +177,5 @@ $$\begin{aligned}
 
 Since the second-order derivative $$f''(z)$$ is simply the derivative of $$f'(z)$$,
 this proof works inductively for all higher orders $$n$$.
-</div>
-</div>
+{% include proof/end.html id="proof-dv-formula" %}
 
diff --git a/source/know/concept/impulse-response/index.md b/source/know/concept/impulse-response/index.md
index 397ac2d..661ed3f 100644
--- a/source/know/concept/impulse-response/index.md
+++ b/source/know/concept/impulse-response/index.md
@@ -30,11 +30,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-main"/>
-<label for="proof-main">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-main">Proof.</label>
+
+{% include proof/start.html id="proof-theorem" -%}
 Starting from the definition of $$u_p(t)$$,
 we shift the argument by some constant $$\tau$$,
 and multiply both sides by the constant $$f(\tau)$$:
@@ -60,9 +57,8 @@ $$\begin{aligned}
     \hat{L} \int_0^\infty f(\tau) \: u_p(t - \tau) \dd{\tau}
     &= (f * u_p)(t) = \hat{L}\{ u(t) \} = f(t)
 \end{aligned}$$
+{% include proof/end.html id="proof-theorem" %}
 
-</div>
-</div>
 
 This is useful for solving initial value problems,
 because any initial condition can be satisfied
diff --git a/source/know/concept/ito-integral/index.md b/source/know/concept/ito-integral/index.md
index f087f97..4a725e1 100644
--- a/source/know/concept/ito-integral/index.md
+++ b/source/know/concept/ito-integral/index.md
@@ -29,6 +29,7 @@ and $$\mathbf{E}[G_t^2]$$ is integrable for $$t \in [a, b]$$.
 If $$I_t$$ exists, $$G_t$$ is said to be **Itō-integrable** with respect to $$B_t$$.
 
 
+
 ## Motivation
 
 Consider the following simple first-order differential equation for $$X_t$$,
@@ -99,7 +100,8 @@ $$\begin{aligned}
 \end{aligned}$$
 
 For more information about applying the Itō integral in this way,
-see the [Itō calculus](/know/concept/ito-calculus/).
+see the [Itō calculus](/know/concept/ito-process/).
+
 
 
 ## Properties
@@ -138,11 +140,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-isometry"/>
-<label for="proof-isometry">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-isometry">Proof.</label>
+
+{% include proof/start.html id="proof-isometry" -%}
 We write out the left-hand side of the Itō isometry,
 where eventually $$h \to 0$$:
 
@@ -208,20 +207,16 @@ $$\begin{aligned}
     \longrightarrow
     \int_a^b \mathbf{E} \big[ G_t^2 \big] \dd{t}
 \end{aligned}$$
+{% include proof/end.html id="proof-isometry" %}
 
-</div>
-</div>
 
 Furthermore, Itō integrals are [martingales](/know/concept/martingale/),
 meaning that the average noise contribution is zero,
 which makes intuitive sense,
 since true white noise cannot be biased.
 
-<div class="accordion">
-<input type="checkbox" id="proof-martingale"/>
-<label for="proof-martingale">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-martingale">Proof.</label>
+
+{% include proof/start.html id="proof-martingale" -%}
 We will prove that an arbitrary Itō integral $$I_t$$ is a martingale.
 Using additivity, we know that the increment $$I_t \!-\! I_s$$
 is as follows, given information $$\mathcal{F}_s$$:
@@ -259,8 +254,7 @@ so from the Itō isometry we have $$\mathbf{E}[I]^2 < \infty$$,
 and therefore $$\mathbf{E}[I] < \infty$$,
 so $$I_t$$ has all the properties of a Martingale,
 since it is trivially $$\mathcal{F}_t$$-adapted.
-</div>
-</div>
+{% include proof/end.html id="proof-martingale" %}
 
 
 
diff --git a/source/know/concept/ito-process/index.md b/source/know/concept/ito-process/index.md
index f192e28..2756e33 100644
--- a/source/know/concept/ito-process/index.md
+++ b/source/know/concept/ito-process/index.md
@@ -61,6 +61,7 @@ since only the current value of $$X_t$$ determines the future,
 and $$B_t$$ is also a Markov process.
 
 
+
 ## Itō's lemma
 
 Classically, given $$y \equiv h(x(t), t)$$,
@@ -83,11 +84,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-lemma"/>
-<label for="proof-lemma">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-lemma">Proof.</label>
+
+{% include proof/start.html id="proof-lemma" -%}
 We start by applying the classical chain rule,
 but we go to second order in $$x$$.
 This is also valid classically,
@@ -133,14 +131,15 @@ $$\begin{aligned}
 
 Where $$\chi_1^2(\dd{t})$$ is the generalized chi-squared distribution
 with one term of variance $$\dd{t}$$.
-</div>
-</div>
+{% include proof/end.html id="proof-lemma" %}
+
 
 The most important application of Itō's lemma
 is to perform coordinate transformations,
 to make the solution of a given Itō SDE easier.
 
 
+
 ## Coordinate transformations
 
 The simplest coordinate transformation is a scaling of the time axis.
@@ -208,6 +207,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Existence and uniqueness
 
 It is worth knowing under what condition a solution to a given SDE exists,
@@ -232,11 +232,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-existence"/>
-<label for="proof-existence">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-existence">Proof.</label>
+
+{% include proof/start.html id="proof-existence" -%}
 If we define $$Y_t \equiv X_t^2$$,
 then Itō's lemma tells us that the following holds:
 
@@ -275,9 +272,8 @@ $$\begin{aligned}
     \\
     &\le (Y_0 + 3 K t) \exp\!\big(3 K t\big)
 \end{aligned}$$
+{% include proof/end.html id="proof-existence" %}
 
-</div>
-</div>
 
 If a solution exists, it is also worth knowing whether it is unique.
 Suppose that $$f$$ and $$g$$ satisfy the following inequalities,
@@ -301,11 +297,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-uniqueness"/>
-<label for="proof-uniqueness">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-uniqueness">Proof.</label>
+
+{% include proof/start.html id="proof-uniqueness" -%}
 We define $$D_t \equiv X_t \!-\! Y_t$$ and $$Z_t \equiv D_t^2 \ge 0$$,
 together with $$F_t \equiv f(X_t) \!-\! f(Y_t)$$ and $$G_t \equiv g(X_t) \!-\! g(Y_t)$$,
 such that Itō's lemma states:
@@ -347,9 +340,8 @@ $$\begin{aligned}
     \\
     &\le Z_0 \exp\!\Big( \big( 2 K \!+\! K^2 \big) t \Big)
 \end{aligned}$$
+{% include proof/end.html id="proof-uniqueness" %}
 
-</div>
-</div>
 
 Using these properties, it can then be shown
 that if all of the above conditions are satisfied,
diff --git a/source/know/concept/laplace-transform/index.md b/source/know/concept/laplace-transform/index.md
index c7f352a..94c3742 100644
--- a/source/know/concept/laplace-transform/index.md
+++ b/source/know/concept/laplace-transform/index.md
@@ -35,6 +35,7 @@ using [partial fraction decomposition](/know/concept/partial-fraction-decomposit
 and then looking up the individual terms.
 
 
+
 ## Derivatives
 
 The derivative of a transformed function is the transform
@@ -55,11 +56,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dv-s"/>
-<label for="proof-dv-s">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dv-s">Proof.</label>
+
+{% include proof/start.html id="proof-dv-s" -%}
 The exponential $$\exp(- s t)$$ is the only thing that depends on $$s$$ here:
 
 $$\begin{aligned}
@@ -69,9 +67,8 @@ $$\begin{aligned}
     &= \int_0^\infty (-t)^n f(t) \exp(- s t) \dd{t}
     = (-1)^n \hat{\mathcal{L}}\{t^n f(t)\}
 \end{aligned}$$
+{% include proof/end.html id="proof-dv-s" %}
 
-</div>
-</div>
 
 The Laplace transform of a derivative introduces the initial conditions into the result.
 Notice that $$f(0)$$ is the initial value in the original $$t$$-domain:
@@ -98,11 +95,8 @@ and $$f^{(0)}(t) = f(t)$$.
 As an example, $$\hat{\mathcal{L}}\{f'''(t)\}$$ becomes
 $$- f''(0) - s f'(0) - s^2 f(0) + s^3 \tilde{f}(s)$$.
 
-<div class="accordion">
-<input type="checkbox" id="proof-dv-t"/>
-<label for="proof-dv-t">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dv-t">Proof.</label>
+
+{% include proof/start.html id="proof-dv-t" -%}
 We integrate by parts and use the fact that $$\lim_{x \to \infty} \exp(-x) = 0$$:
 
 $$\begin{aligned}
@@ -116,8 +110,7 @@ $$\begin{aligned}
 
 And so on.
 By partially integrating $$n$$ times in total we arrive at the conclusion.
-</div>
-</div>
+{% include proof/end.html id="proof-dv-t" %}
 
 
 
diff --git a/source/know/concept/lindhard-function/index.md b/source/know/concept/lindhard-function/index.md
index 4033148..fd620df 100644
--- a/source/know/concept/lindhard-function/index.md
+++ b/source/know/concept/lindhard-function/index.md
@@ -149,11 +149,8 @@ $$\begin{aligned}
     = \hat{n}^\dagger(\vb{q})
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-density"/>
-<label for="proof-density">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-density">Proof.</label>
+
+{% include proof/start.html id="proof-density" -%}
 Starting from the general definition of $$\hat{n}$$,
 we write out the field operators $$\hat{\Psi}(\vb{r})$$,
 and insert the known non-interacting single-electron orbitals
@@ -210,8 +207,8 @@ $$\begin{aligned}
 
 The summation variable $$\vb{k}$$ has an associated spin $$\sigma$$,
 and $$\hat{n}$$ does not carry any spin.
-</div>
-</div>
+{% include proof/end.html id="proof-density" %}
+
 
 When neglecting interactions, it is tradition to rename $$\chi$$ to $$\chi_0$$.
 We insert $$\hat{n}$$, suppressing spin:
@@ -290,12 +287,10 @@ $$\begin{aligned}
     = \hat{c}_{\vb{k}}^\dagger \hat{c}_{\vb{k}} - \hat{c}_{\vb{k} + \vb{q}}^\dagger \hat{c}_{\vb{k} + \vb{q}}
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-commutator"/>
-<label for="proof-commutator">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-commutator">Proof.</label>
+
+{% include proof/start.html id="proof-commutator" -%}
 In general, for any single-particle states labeled by $$m$$, $$n$$, $$o$$ and $$p$$, we have:
+
 $$\begin{aligned}
     \comm{\hat{c}_m^\dagger \hat{c}_n}{\hat{c}_o^\dagger \hat{c}_p}
     &= \hat{c}_m^\dagger \hat{c}_n \hat{c}_o^\dagger \hat{c}_p - \hat{c}_o^\dagger \hat{c}_p \hat{c}_m^\dagger \hat{c}_n
@@ -319,8 +314,8 @@ $$\begin{aligned}
 
 In this case, $$m = p = \vb{k}$$ and $$n = o = \vb{k} \!+\! \vb{q}$$,
 so the Kronecker deltas are unnecessary.
-</div>
-</div>
+{% include proof/end.html id="proof-commutator" %}
+
 
 We substitute this result into $$\chi_0$$,
 and reintroduce the spin index $$\sigma$$ associated with $$\vb{k}$$:
diff --git a/source/know/concept/matsubara-greens-function/index.md b/source/know/concept/matsubara-greens-function/index.md
index fdcadb3..fd46abf 100644
--- a/source/know/concept/matsubara-greens-function/index.md
+++ b/source/know/concept/matsubara-greens-function/index.md
@@ -83,11 +83,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-period"/>
-<label for="proof-period">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-period">Proof.</label>
+
+{% include proof/start.html id="proof-period" -%}
 First $$\tau \!-\! \tau' < 0$$.
 We insert the argument $$\tau \!-\! \tau' \!+\! \hbar \beta$$,
 and use the cyclic property:
@@ -133,9 +130,8 @@ $$\begin{aligned}
     \\
     &= \pm C_{AB}(\tau \!-\! \tau')
 \end{aligned}$$
+{% include proof/end.html id="proof-period" %}
 
-</div>
-</div>
 
 Due to this limited domain $$\tau \in [-\hbar \beta, \hbar \beta]$$,
 the [Fourier transform](/know/concept/fourier-transform/)
@@ -157,11 +153,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-FT-def"/>
-<label for="proof-FT-def">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-FT-def">Proof.</label>
+
+{% include proof/start.html id="proof-fourier-def" -%}
 We will prove that one is indeed the inverse of the other.
 We demand that the inverse FT of the forward FT of $$C_{AB}(\tau)$$
 is simply $$C_{AB}(\tau)$$ again:
@@ -198,9 +191,8 @@ $$\begin{aligned}
     \\
     &= C_{AB}(\tau)
 \end{aligned}$$
+{% include proof/end.html id="proof-fourier-def" %}
 
-</div>
-</div>
 
 Let us now define the **Matsubara frequencies** $$\omega_n$$
 as a species-dependent subset of $$k_n$$:
@@ -228,11 +220,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-FT-alt"/>
-<label for="proof-FT-alt">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-FT-alt">Proof.</label>
+
+{% include proof/start.html id="proof-fourier-alt" -%}
 We split the integral, shift its limits,
 and use the (anti)periodicity of $$C_{AB}$$:
 
@@ -265,9 +254,8 @@ $$\begin{aligned}
     \\
     &= \frac{1}{2} \big( 1 \pm e^{-i k_n \hbar \beta} \big) \int_{-\hbar \beta}^0 C_{AB}(\tau) \: e^{i k_n \tau} \dd{\tau}
 \end{aligned}$$
+{% include proof/end.html id="proof-fourier-alt" %}
 
-</div>
-</div>
 
 If we actually evaluate this,
 we obtain the following form of $$C_{AB}$$,
@@ -283,11 +271,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-Lehmann"/>
-<label for="proof-Lehmann">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-Lehmann">Proof.</label>
+
+{% include proof/start.html id="proof-lehmann" -%}
 For $$\tau \!-\! \tau' > 0$$, we start by expanding
 in the many-particle eigenstates $$\Ket{n}$$:
 
@@ -363,8 +348,8 @@ $$\begin{aligned}
 \end{aligned}$$
 
 Where swapping $$n$$ and $$n'$$ gives the desired result.
-</div>
-</div>
+{% include proof/end.html id="proof-lehmann" %}
+
 
 This gives us the primary use of the Matsubara Green's function $$C_{AB}$$:
 calculating the retarded $$C_{AB}^R$$ and advanced $$C_{AB}^A$$.
diff --git a/source/know/concept/maxwell-bloch-equations/index.md b/source/know/concept/maxwell-bloch-equations/index.md
index b306c7d..ba8a677 100644
--- a/source/know/concept/maxwell-bloch-equations/index.md
+++ b/source/know/concept/maxwell-bloch-equations/index.md
@@ -296,11 +296,8 @@ $$\begin{aligned}
     \equiv \frac{\gamma_g - \gamma_e}{\gamma_g + \gamma_e}
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-inversion-decay"/>
-<label for="proof-inversion-decay">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-inversion-decay">Proof.</label>
+
+{% include proof/start.html id="proof-inversion-decay" -%}
 We introduce some new terms, and reorganize the expression:
 
 $$\begin{aligned}
@@ -324,9 +321,8 @@ $$\begin{aligned}
     \\
     &= \gamma_\parallel ( d_0 - d )
 \end{aligned}$$
+{% include proof/end.html id="proof-inversion-decay" %}
 
-</div>
-</div>
 
 With this, the equation for the population inversion $$d$$
 takes the following final form:
diff --git a/source/know/concept/multi-photon-absorption/index.md b/source/know/concept/multi-photon-absorption/index.md
index 5dd9887..80dbc9b 100644
--- a/source/know/concept/multi-photon-absorption/index.md
+++ b/source/know/concept/multi-photon-absorption/index.md
@@ -73,11 +73,8 @@ $$\begin{aligned}
     = 2 \pi \: \delta(x) \: t
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-sinc"/>
-<label for="proof-sinc">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-sinc">Proof.</label>
+
+{% include proof/start.html id="proof-relation" -%}
 First, observe that we can rewrite the fraction using an integral:
 
 $$\begin{aligned}
@@ -119,9 +116,8 @@ $$\begin{aligned}
     = 4 \pi^2 \delta^2(x)
     = 2 \pi \: \delta(x) \: t
 \end{aligned}$$
+{% include proof/end.html id="proof-relation" %}
 
-</div>
-</div>
 
 
 ## One-photon absorption
@@ -187,6 +183,7 @@ Note that this transition is only possible when $$\matrixel{u}{\vu{p}}{0} \neq 0
 i.e. for any odd-numbered final state $$\Ket{u}$$.
 
 
+
 ## Two-photon absorption
 
 Next, we go to second-order perturbation theory.
@@ -255,6 +252,7 @@ Notice that the rate is proportional to $$|\vb{E}|^4$$,
 so this effect is only noticeable at high light intensities.
 
 
+
 ## Three-photon absorption
 
 For third-order perturbation theory,
@@ -327,6 +325,7 @@ The rate is proportional to $$|\vb{E}|^6$$,
 so this effect only appears at extremely high light intensities.
 
 
+
 ## N-photon absorption
 
 A pattern has appeared in these calculations:
diff --git a/source/know/concept/parsevals-theorem/index.md b/source/know/concept/parsevals-theorem/index.md
index df90244..377f3a1 100644
--- a/source/know/concept/parsevals-theorem/index.md
+++ b/source/know/concept/parsevals-theorem/index.md
@@ -24,11 +24,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 insert the inverse FT into the defintion of the inner product:
 
 $$\begin{aligned}
@@ -68,9 +65,8 @@ $$\begin{aligned}
     &= \frac{2 \pi A^2}{|s|} \int_{-\infty}^\infty f^*(x) \: g(x) \dd{x}
     = \frac{2 \pi A^2}{|s|} \Inprod{f}{g}
 \end{aligned}$$
+{% include proof/end.html id="proof-fourier" %}
 
-</div>
-</div>
 
 For this reason, physicists like to define the Fourier transform
 with $$A\!=\!B\!=\!1 / \sqrt{2\pi}$$ and $$|s|\!=\!1$$, because then it nicely
diff --git a/source/know/concept/repetition-code/index.md b/source/know/concept/repetition-code/index.md
index 678211e..89e6f4d 100644
--- a/source/know/concept/repetition-code/index.md
+++ b/source/know/concept/repetition-code/index.md
@@ -164,63 +164,12 @@ while $$ZZI$$ cannot protect the 3rd qubit.
 But by using both, we know exactly which qubit was flipped
 thanks to the eigenvalues:
 
-<table style="width:30%;margin:auto;text-align:center;">
-<tr>
- <th>
-  Error
- </th>
- <th markdown="1">
-  $$ZZI$$
- </th>
- <th markdown="1">
-  $$IZZ$$
- </th>
-</tr>
-<tr>
- <td markdown="1">
-  $$I$$
- </td>
- <td markdown="1">
-  $$+1$$
- </td>
- <td markdown="1">
-  $$+1$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$X_1$$
- </td>
- <td markdown="1">
-  $$-1$$
- </td>
- <td markdown="1">
-  $$+1$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$X_2$$
- </td>
- <td markdown="1">
-  $$-1$$
- </td>
- <td markdown="1">
-  $$-1$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$X_1$$
- </td>
- <td markdown="1">
-  $$+1$$
- </td>
- <td markdown="1">
-  $$-1$$
- </td>
-</tr>
-</table>
+| **Error** | $$ZZI$$ | $$IZZ$$ |
+| :-: | :-: | :-: |
+| $$I$$ | $$+1$$ | $$+1$$ |
+| $$X_1$$ | $$-1$$ | $$+1$$ |
+| $$X_2$$ | $$-1$$ | $$-1$$ |
+| $$X_1$$ | $$+1$$ | $$-1$$ |
 
 Where e.g. $$X_3$$ denotes that the 3rd qubit was flipped.
 The measurement outcomes on the last three rows are called **error syndromes**,
diff --git a/source/know/concept/residue-theorem/index.md b/source/know/concept/residue-theorem/index.md
index b58e3c2..a0f515e 100644
--- a/source/know/concept/residue-theorem/index.md
+++ b/source/know/concept/residue-theorem/index.md
@@ -41,11 +41,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-res-theorem"/>
-<label for="proof-res-theorem">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-res-theorem">Proof.</label>
+
+{% include proof/start.html id="proof-theorem" -%}
 From the definition of a meromorphic function,
 we know that we can decompose $$f(z)$$ like so,
 where $$h(z)$$ is holomorphic and $$z_p$$ are all its poles:
@@ -62,9 +59,8 @@ $$\begin{aligned}
     &= \oint_C h(z) \dd{z} + \sum_{p} R_p \oint_C \frac{1}{z - z_p} \dd{z}
     = \sum_{p} R_p \: 2 \pi i
 \end{aligned}$$
+{% include proof/end.html id="proof-theorem" %}
 
-</div>
-</div>
 
 This theorem might not seem very useful,
 but in fact, by cleverly choosing the contour $$C$$,
diff --git a/source/know/concept/selection-rules/index.md b/source/know/concept/selection-rules/index.md
index 373486e..620e345 100644
--- a/source/know/concept/selection-rules/index.md
+++ b/source/know/concept/selection-rules/index.md
@@ -25,6 +25,7 @@ between $$\ell_i$$, $$\ell_f$$, $$m_i$$ and $$m_f$$, which, if not met,
 guarantee that the above matrix element is zero.
 
 
+
 ## Parity rules
 
 Let $$\hat{O}$$ denote any operator which is odd under spatial inversion
@@ -73,6 +74,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 
+
 ## Dipole rules
 
 Arguably the most common operator found in such matrix elements
@@ -87,11 +89,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dipole-m"/>
-<label for="proof-dipole-m">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dipole-m">Proof.</label>
+
+{% include proof/start.html id="proof-dipole-m" -%}
 We know that the angular momentum $$z$$-component operator $$\hat{L}_z$$ satisfies:
 
 $$\begin{aligned}
@@ -166,8 +165,8 @@ whenever $$\matrixel{f}{\hat{z}}{i} \neq 0$$.
 Only if $$\matrixel{f}{\hat{z}}{i} = 0$$
 does the previous rule $$\Delta m = \pm 1$$ hold,
 in which case the inner products of $$\hat{x}$$ and $$\hat{y}$$ are nonzero.
-</div>
-</div>
+{% include proof/end.html id="proof-dipole-m" %}
+
 
 Meanwhile, for the total angular momentum $$\ell$$ we have the following:
 
@@ -177,11 +176,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dipole-l"/>
-<label for="proof-dipole-l">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dipole-l">Proof.</label>
+
+{% include proof/start.html id="proof-dipole-l" -%}
 We start from the following relation
 (which is already quite a chore to prove):
 
@@ -190,11 +186,8 @@ $$\begin{aligned}
     = 2 \hbar^2 (\vu{r} \hat{L}^2 + \hat{L}^2 \vu{r})
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-dipole-l-comm"/>
-<label for="proof-dipole-l-comm">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-dipole-l-comm">Proof.</label>
+
+{% include proof/start.html id="proof-dipole-l-commutator" -%}
 To begin with, we want to find the commutator of $$\hat{L}^2$$ and $$\hat{x}$$:
 
 $$\begin{aligned}
@@ -364,8 +357,8 @@ $$\begin{aligned}
 
 At last, this brings us to the desired equation for $$\comm{\hat{L}^2}{\comm{\hat{L}^2}{\vu{r}}}$$,
 with $$\vu{r} = (\hat{x}, \hat{y}, \hat{z})$$.
-</div>
-</div>
+{% include proof/end.html id="proof-dipole-l-commutator" %}
+
 
 We then multiply this relation by $$\Bra{f} = \Bra{\ell_f m_f}$$ on the left
 and $$\Ket{i} = \Ket{\ell_i m_i}$$ on the right,
@@ -458,9 +451,8 @@ $$\begin{aligned}
     (\ell_f - \ell_i)^2
     = 1
 \end{aligned}$$
+{% include proof/end.html id="proof-dipole-l" %}
 
-</div>
-</div>
 
 
 ## Rotational rules
@@ -502,11 +494,8 @@ $$\begin{aligned}
     }
 \end{aligned}$$
 
-<div class="accordion">
-<input type="checkbox" id="proof-rot-scalar"/>
-<label for="proof-rot-scalar">Proof</label>
-<div class="hidden" markdown="1">
-<label for="proof-rot-scalar">Proof.</label>
+
+{% include proof/start.html id="proof-rotation-scalar" -%}
 Firstly, we look at the commutator of $$\hat{s}$$ with the $$z$$-component $$\hat{L}_z$$:
 $$\begin{aligned}
     0
@@ -578,8 +567,8 @@ $$\begin{aligned}
 
 Which means that the value of the matrix element
 does not depend on $$m_i$$ (or $$m_f$$) at all.
-</div>
-</div>
+{% include proof/end.html id="proof-rotation-scalar" %}
+
 
 Similarly, given a general (pseudo)vector operator $$\vu{V}$$,
 which, by nature, must satisfy the following commutation relations,
@@ -631,6 +620,7 @@ $$\begin{gathered}
 \end{gathered}$$
 
 
+
 ## Superselection rule
 
 Selection rules are not always about atomic electron transitions, or angular momenta even.
diff --git a/source/know/concept/superdense-coding/index.md b/source/know/concept/superdense-coding/index.md
index ba6e898..4338205 100644
--- a/source/know/concept/superdense-coding/index.md
+++ b/source/know/concept/superdense-coding/index.md
@@ -27,63 +27,12 @@ Based on the values of the two classical bits $$(a_1, a_2)$$,
 Alice performs the following operations on her side $$A$$
 of the Bell state:
 
-<table style="width:70%;margin:auto;text-align:center;">
-<tr>
- <th markdown="1">
-  $$(a_1, a_2)$$
- </th>
- <th>
-  Operator
- </th>
- <th>
-  Result
- </th>
-</tr>
-<tr>
- <td markdown="1">
-  $$00$$
- </td>
- <td markdown="1">
-  $$\hat{I}$$
- </td>
- <td markdown="1">
-  $$\displaystyle \ket{\Phi^{+}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{0}_B + \Ket{1}_A \Ket{1}_B \Big)$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$01$$
- </td>
- <td markdown="1">
-  $$\hat{\sigma}_z$$
- </td>
- <td markdown="1">
-  $$\displaystyle \ket{\Phi^{-}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{0}_B - \Ket{1}_A \Ket{1}_B \Big)$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$10$$
- </td>
- <td markdown="1">
-  $$\hat{\sigma}_x$$
- </td>
- <td markdown="1">
-  $$\displaystyle \ket{\Psi^{+}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{1}_B + \Ket{1}_A \Ket{0}_B \Big)$$
- </td>
-</tr>
-<tr>
- <td markdown="1">
-  $$11$$
- </td>
- <td markdown="1">
-  $$\hat{\sigma}_x \hat{\sigma}_z$$
- </td>
- <td markdown="1">
-  $$\displaystyle \ket{\Psi^{-}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{1}_B - \Ket{1}_A \Ket{0}_B \Big)$$
- </td>
-</tr>
-</table>
+| $$(a_1, a_2)$$ | **Operator** | **Result** |
+| :-: | :-: | :-: |
+| $$00$$ | $$\hat{I}$$ | $$\displaystyle \ket{\Phi^{+}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{0}_B + \Ket{1}_A \Ket{1}_B \Big)$$ |
+| $$01$$ | $$\hat{\sigma}_z$$ | $$\displaystyle \ket{\Phi^{-}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{0}_B - \Ket{1}_A \Ket{1}_B \Big)$$ |
+| $$10$$ | $$\hat{\sigma}_x$$ | $$\displaystyle \ket{\Psi^{+}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{1}_B + \Ket{1}_A \Ket{0}_B \Big)$$ |
+| $$11$$ | $$\hat{\sigma}_x \hat{\sigma}_z$$ | $$\displaystyle \ket{\Psi^{-}} = \frac{1}{\sqrt{2}} \Big(\Ket{0}_A \Ket{1}_B - \Ket{1}_A \Ket{0}_B \Big)$$ |
 
 Her actions affect the state on Bob's side $$B$$ due to entanglement.
 Alice then sends her qubit $$A$$ to Bob over the quantum channel,