Clean up CSS, minor design changes

29 files changed, 156 insertions, 93 deletions

diff --git a/config.toml b/config.toml
index 9596e57..efb0ec8 100644
--- a/config.toml
+++ b/config.toml
@@ -11,3 +11,9 @@ allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$', '^pandoc$']
   [markup.goldmark]
     [markup.goldmark.renderer]
       unsafe = true
+
+[server]
+[[server.headers]]
+  for = "/**"
+  [server.headers.values]
+    Content-Security-Policy = "default-src 'self' 'unsafe-inline';"
diff --git a/content/_index.md b/content/_index.md
index 833d7b3..47e1c33 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -4,14 +4,13 @@ date: 2021-02-22T17:15:50+01:00
 draft: false
 ---
 
-Welcome to my website.
+<img src="/logo256.png" class="darkinv" style="border: 2px solid #121212;">
 
-Once in a blue moon, I'll post something here
-related to my areas of interest:
-programming, optimization,
-mathematics, physics and even linguistics.
+Welcome to my website.
 
-You might be interested in my [knowledge base](/know/),
+Once in a blue moon, I post something related to my areas of interest:
+physics, mathematics, programming and even linguistics.
+Perhaps you're interested in my [knowledge base](/know/),
 where I explain STEM concepts I've learned over the years.
 
 This website is made by me using [Hugo](https://gohugo.io),
diff --git a/content/blog/2022/email-server-revisited/index.md b/content/blog/2022/email-server-revisited/index.md
index 3f45993..838fe24 100644
--- a/content/blog/2022/email-server-revisited/index.md
+++ b/content/blog/2022/email-server-revisited/index.md
@@ -184,7 +184,7 @@ 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" style="width:100%;display:block;margin:auto;">
+<img src="microsoft-bounce.png" class="darkinv" style="width:100%">
 </a>
 
 To their credit, they seem to be offering a way out.
diff --git a/content/know/concept/bernstein-vazirani-algorithm/index.pdc b/content/know/concept/bernstein-vazirani-algorithm/index.pdc
index 22de51a..40f41be 100644
--- a/content/know/concept/bernstein-vazirani-algorithm/index.pdc
+++ b/content/know/concept/bernstein-vazirani-algorithm/index.pdc
@@ -42,7 +42,7 @@ allows a quantum computer to do it with only a single query.
 It uses the following circuit:
 
 <a href="bernstein-vazirani-circuit.png">
-<img src="bernstein-vazirani-circuit.png" style="width:52%;display:block;margin:auto;">
+<img src="bernstein-vazirani-circuit.png" style="width:52%">
 </a>
 
 Where $U_f$ is a phase oracle,
diff --git a/content/know/concept/bloch-sphere/index.pdc b/content/know/concept/bloch-sphere/index.pdc
index 27abb54..7f0dfda 100644
--- a/content/know/concept/bloch-sphere/index.pdc
+++ b/content/know/concept/bloch-sphere/index.pdc
@@ -19,7 +19,7 @@ the **Bloch sphere** is an invaluable tool to visualize qubits.
 All pure qubit states are represented by a point on the sphere's surface:
 
 <a href="bloch.jpg">
-<img src="bloch-small.jpg" style="width:50%;display:block;margin:auto;">
+<img src="bloch-small.jpg" style="width:50%">
 </a>
 
 The $x$, $y$ and $z$-axes represent the components of a spin-1/2-alike system,
diff --git a/content/know/concept/deutsch-jozsa-algorithm/index.pdc b/content/know/concept/deutsch-jozsa-algorithm/index.pdc
index a3acaf4..d8dce8d 100644
--- a/content/know/concept/deutsch-jozsa-algorithm/index.pdc
+++ b/content/know/concept/deutsch-jozsa-algorithm/index.pdc
@@ -46,7 +46,7 @@ To do this, we use the following quantum circuit,
 where $U_f$ is the oracle we query:
 
 <a href="deutsch-circuit.png">
-<img src="deutsch-circuit.png" style="width:48%;display:block;margin:auto;">
+<img src="deutsch-circuit.png" style="width:48%">
 </a>
 
 Due to unitarity constraints,
@@ -147,7 +147,7 @@ other possibilities are assumed to be impossible.
 This algorithm is then implemented by the following quantum circuit:
 
 <a href="deutsch-jozsa-circuit.png">
-<img src="deutsch-jozsa-circuit.png" style="width:52%;display:block;margin:auto;">
+<img src="deutsch-jozsa-circuit.png" style="width:52%">
 </a>
 
 There are $N$ qubits in initial state $\ket{0}$, and one in $\ket{1}$.
diff --git a/content/know/concept/dispersive-broadening/index.pdc b/content/know/concept/dispersive-broadening/index.pdc
index cae856d..6efda9f 100644
--- a/content/know/concept/dispersive-broadening/index.pdc
+++ b/content/know/concept/dispersive-broadening/index.pdc
@@ -65,7 +65,7 @@ with parameter values $T_0 = 1\:\mathrm{ps}$, $P_0 = 1\:\mathrm{kW}$,
 $\beta_2 = -10 \:\mathrm{ps}^2/\mathrm{m}$ and $\gamma = 0$:
 
 <a href="pheno-disp.jpg">
-<img src="pheno-disp-small.jpg">
+<img src="pheno-disp-small.jpg" style="width:100%">
 </a>
 
 The **instantaneous frequency** $\omega_\mathrm{GVD}(z, t)$,
diff --git a/content/know/concept/fabry-perot-cavity/index.pdc b/content/know/concept/fabry-perot-cavity/index.pdc
index e4195d0..066749c 100644
--- a/content/know/concept/fabry-perot-cavity/index.pdc
+++ b/content/know/concept/fabry-perot-cavity/index.pdc
@@ -25,7 +25,7 @@ The cavity $C$ has length $\ell$ and is centered on $x = 0$.
 Let $n_L$, $n_C$ and $n_R$ be the respective domains' refractive indices:
 
 <a href="cavity.png">
-<img src="cavity.png" style="width:70%;display:block;margin:auto;">
+<img src="cavity.png" style="width:70%">
 </a>
 
 
diff --git a/content/know/concept/feynman-diagram/index.pdc b/content/know/concept/feynman-diagram/index.pdc
index 600be61..98ed668 100644
--- a/content/know/concept/feynman-diagram/index.pdc
+++ b/content/know/concept/feynman-diagram/index.pdc
@@ -43,7 +43,7 @@ and $\mathcal{T}\{\}$ denote the
 [time-ordered product](/know/concept/time-ordered-product/):
 
 <a href="freegf.png">
-<img src="freegf.png" style="width:60%;display:block;margin:auto;">
+<img src="freegf.png" style="width:60%">
 </a>
 $$\begin{aligned}
     = i \hbar G_{s_2 s_1}^0(\vb{r}_2, t_2; \vb{r}_1, t_1)
@@ -64,7 +64,7 @@ a causal Green's function $G$ for the entire Hamiltonian $\hat{H}$,
 where the subscript $H$ refers to the [Heisenberg picture](/know/concept/heisenberg-picture/):
 
 <a href="fullgf.png">
-<img src="fullgf.png" style="width:60%;display:block;margin:auto;">
+<img src="fullgf.png" style="width:60%">
 </a>
 $$\begin{aligned}
     = i \hbar G_{s_2 s_1}(\vb{r}_2, t_2; \vb{r}_1, t_1)
@@ -79,7 +79,7 @@ hence it starts and ends at the same time,
 and no arrow is drawn:
 
 <a href="interaction.png">
-<img src="interaction.png" style="width:60%;display:block;margin:auto;">
+<img src="interaction.png" style="width:60%">
 </a>
 $$\begin{aligned}
     = \frac{1}{i \hbar} W_{s_2 s_1}(\vb{r}_2, t_2; \vb{r}_1, t_1)
@@ -102,7 +102,7 @@ One-body (time-dependent) operators $\hat{V}$ in $\hat{H}_1$
 are instead represented by a special vertex:
 
 <a href="perturbation.png">
-<img src="perturbation.png" style="width:35%;display:block;margin:auto;">
+<img src="perturbation.png" style="width:35%">
 </a>
 $$\begin{aligned}
     = \frac{1}{i \hbar} V_s(\vb{r}, t)
@@ -179,7 +179,7 @@ Consider the following diagram and the resulting expression,
 where $\tilde{\vb{r}} = (\vb{r}, t)$, and $\tilde{\vb{k}} = (\vb{k}, \omega)$:
 
 <a href="conservation.png">
-<img src="conservation.png" style="width:40%;display:block;margin:auto;">
+<img src="conservation.png" style="width:40%">
 </a>
 $$\begin{aligned}
     &= (i \hbar)^3 \sum_{s s'} \!\!\iint \dd{\tilde{\vb{r}}} \dd{\tilde{\vb{r}}'}
diff --git a/content/know/concept/metacentric-height/index.pdc b/content/know/concept/metacentric-height/index.pdc
index 1fc6aca..1668cc0 100644
--- a/content/know/concept/metacentric-height/index.pdc
+++ b/content/know/concept/metacentric-height/index.pdc
@@ -32,7 +32,7 @@ as is illustrated in the following sketch
 of our choice of coordinate system:
 
 <a href="sketch.png">
-<img src="sketch.png" style="width:67%;display:block;margin:auto;">
+<img src="sketch.png" style="width:67%">
 </a>
 
 Here, $B$ is the **center of buoyancy**, equal to
diff --git a/content/know/concept/modulational-instability/index.pdc b/content/know/concept/modulational-instability/index.pdc
index 993dec9..a0c2c91 100644
--- a/content/know/concept/modulational-instability/index.pdc
+++ b/content/know/concept/modulational-instability/index.pdc
@@ -178,7 +178,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 <a href="pheno-mi.jpg">
-<img src="pheno-mi-small.jpg">
+<img src="pheno-mi-small.jpg" style="width:100%">
 </a>
 
 Where $L_\mathrm{NL} = 1/(\gamma P_0)$ is the characteristic length of nonlinear effects.
diff --git a/content/know/concept/optical-wave-breaking/index.pdc b/content/know/concept/optical-wave-breaking/index.pdc
index 30305f5..ecd5a4f 100644
--- a/content/know/concept/optical-wave-breaking/index.pdc
+++ b/content/know/concept/optical-wave-breaking/index.pdc
@@ -40,7 +40,7 @@ small waves start "falling off" the edge of the pulse,
 hence the name *wave breaking*:
 
 <a href="pheno-break-inst.jpg">
-<img src="pheno-break-inst-small.jpg">
+<img src="pheno-break-inst-small.jpg" style="width:100%">
 </a>
 
 Several interesting things happen around this moment.
@@ -59,7 +59,7 @@ which eventually melt together, leading to a trapezoid shape in the $t$-domain.
 Dispersive broadening then continues normally:
 
 <a href="pheno-break-sgram.jpg">
-<img src="pheno-break-sgram-small.jpg" style="width:80%;display:block;margin:auto;">
+<img src="pheno-break-sgram-small.jpg" style="width:80%">
 </a>
 
 We call the distance at which the wave breaks $L_\mathrm{WB}$,
@@ -189,7 +189,7 @@ This prediction for $L_\mathrm{WB}$ appears to agree well
 with the OWB observed in the simulation:
 
 <a href="pheno-break.jpg">
-<img src="pheno-break-small.jpg">
+<img src="pheno-break-small.jpg" style="width:100%">
 </a>
 
 Because all spectral broadening up to $L_\mathrm{WB}$ is caused by SPM,
diff --git a/content/know/concept/quantum-fourier-transform/index.pdc b/content/know/concept/quantum-fourier-transform/index.pdc
index 5a3de7b..cfdbc07 100644
--- a/content/know/concept/quantum-fourier-transform/index.pdc
+++ b/content/know/concept/quantum-fourier-transform/index.pdc
@@ -178,7 +178,7 @@ excluding the swapping part to get the right order.
 Here, $R_m$ means $R_\phi$ with $\phi = 2 \pi / 2^m$:
 
 <a href="qft-circuit-noswap.png">
-<img src="qft-circuit-noswap.png" style="width:100%;display:block;margin:auto;">
+<img src="qft-circuit-noswap.png" style="width:100%">
 </a>
 
 Again, note how the inputs $\ket{x_j}$ and outputs $\ket{k_j}$ are in the opposite order.
@@ -186,7 +186,7 @@ The complete circuit, including the swapping at the end,
 therefore looks like this:
 
 <a href="qft-circuit-swap.png">
-<img src="qft-circuit-swap.png" style="width:85%;display:block;margin:auto;">
+<img src="qft-circuit-swap.png" style="width:85%">
 </a>
 
 For each of the $n$ qubits, $\mathcal{O}(n)$ gates are applied,
diff --git a/content/know/concept/quantum-gate/index.pdc b/content/know/concept/quantum-gate/index.pdc
index 189145f..b9682ec 100644
--- a/content/know/concept/quantum-gate/index.pdc
+++ b/content/know/concept/quantum-gate/index.pdc
@@ -209,7 +209,7 @@ With that said, the first two-qubit gate is $\mathrm{SWAP}$,
 which simply swaps $\ket{\psi_1}$ and $\ket{\psi_2}$:
 
 <a href="swap.png">
-<img src="swap.png" style="width:22%;display:block;margin:auto;">
+<img src="swap.png" style="width:22%">
 </a>
 
 $$\begin{aligned}
@@ -238,7 +238,7 @@ Next, there is the **controlled NOT gate** $\mathrm{CNOT}$,
 which "flips" (applies $X$ to) $\ket{\psi_2}$ if $\ket{\psi_1}$ is true:
 
 <a href="cnot.png">
-<img src="cnot.png" style="width:22%;display:block;margin:auto;">
+<img src="cnot.png" style="width:22%">
 </a>
 
 $$\begin{aligned}
@@ -265,7 +265,7 @@ we can define a two-qubit **controlled U gate** $\mathrm{CU}$,
 which applies $U$ to $\ket{\psi_2}$ if $\ket{\psi_1}$ is true:
 
 <a href="cu.png">
-<img src="cu.png" style="width:22%;display:block;margin:auto;">
+<img src="cu.png" style="width:22%">
 </a>
 
 $$\begin{aligned}
diff --git a/content/know/concept/random-phase-approximation/index.pdc b/content/know/concept/random-phase-approximation/index.pdc
index ed85106..0089dff 100644
--- a/content/know/concept/random-phase-approximation/index.pdc
+++ b/content/know/concept/random-phase-approximation/index.pdc
@@ -77,21 +77,21 @@ i.e. the ones where all $n$ interaction lines
 carry the same momentum and energy:
 
 <a href="rpasigma.png">
-<img src="rpasigma.png" style="width:92%;display:block;margin:auto;">
+<img src="rpasigma.png" style="width:92%">
 </a>
 
 Where we have defined the **screened interaction** $W^\mathrm{RPA}$,
 denoted by a double wavy line:
 
 <a href="screened.png">
-<img src="screened.png" style="width:95%;display:block;margin:auto;">
+<img src="screened.png" style="width:95%">
 </a>
 
 Rearranging the above sequence of diagrams quickly leads to the following
 [Dyson equation](/know/concept/dyson-equation/):
 
 <a href="dyson.png">
-<img src="dyson.png" style="width:55%;display:block;margin:auto;">
+<img src="dyson.png" style="width:55%">
 </a>
 
 In Fourier space, this equation's linear shape
@@ -110,7 +110,7 @@ Abbreviating $\tilde{\vb{k}} \equiv (\vb{k}, i \omega_n^B)$
 and $\tilde{\vb{q}} \equiv (\vb{q}, i \omega_n^F)$:
 
 <a href="pairbubble.png">
-<img src="pairbubble.png" style="width:45%;display:block;margin:auto;">
+<img src="pairbubble.png" style="width:45%">
 </a>
 
 We isolate the Dyson equation for $W^\mathrm{RPA}$,
diff --git a/content/know/concept/repetition-code/index.pdc b/content/know/concept/repetition-code/index.pdc
index 7245cbc..d9eec2c 100644
--- a/content/know/concept/repetition-code/index.pdc
+++ b/content/know/concept/repetition-code/index.pdc
@@ -82,7 +82,7 @@ Such a transformation is easy to achieve with the following sequence
 of [quantum gates](/know/concept/quantum-gate/):
 
 <a href="bit-flip-encode.png">
-<img src="bit-flip-encode.png" style="width:32%;display:block;margin:auto;">
+<img src="bit-flip-encode.png" style="width:32%">
 </a>
 
 So, a little while after encoding the state $\ket{\psi}$ like that,
@@ -208,7 +208,7 @@ by applying $\mathrm{CNOT}$s to some ancillary qubits
 and then measuring those:
 
 <a href="bit-flip-detect.png">
-<img src="bit-flip-detect.png" style="width:62%;display:block;margin:auto;">
+<img src="bit-flip-detect.png" style="width:62%">
 </a>
 
 The two measurements, respectively representing $ZZI$ and $IZZ$,
@@ -260,7 +260,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 <a href="phase-flip-encode.png">
-<img src="phase-flip-encode.png" style="width:40%;display:block;margin:auto;">
+<img src="phase-flip-encode.png" style="width:40%">
 </a>
 
 A phase flip along the $Z$-axis
@@ -269,7 +269,7 @@ In this case, the stabilizers are $XXI$ and $IXX$,
 and the error detection circuit is as follows:
 
 <a href="phase-flip-detect.png">
-<img src="phase-flip-detect.png" style="width:70%;display:block;margin:auto;">
+<img src="phase-flip-detect.png" style="width:70%">
 </a>
 
 This system protects us against all single-qubit phase flips,
@@ -313,7 +313,7 @@ which simply consists of the phase flip encoder,
 followed by 3 copies of the bit flip encoder:
 
 <a href="shor-code-encode.png">
-<img src="shor-code-encode.png" style="width:55%;display:block;margin:auto;">
+<img src="shor-code-encode.png" style="width:55%">
 </a>
 
 We thus use 9 physical qubits to store 1 logical qubit.
diff --git a/content/know/concept/rutherford-scattering/index.pdc b/content/know/concept/rutherford-scattering/index.pdc
index c89b477..d91ae40 100644
--- a/content/know/concept/rutherford-scattering/index.pdc
+++ b/content/know/concept/rutherford-scattering/index.pdc
@@ -25,7 +25,7 @@ Coulomb repulsion causes 1 to deflect by an angle $\theta$,
 and pushes 2 away in the process:
 
 <a href="two-body.png">
-<img src="two-body.png" style="width:50%;display:block;margin:auto;">
+<img src="two-body.png" style="width:50%">
 </a>
 
 Here, $b$ is called the **impact parameter**.
@@ -75,7 +75,7 @@ we can see that $v_x$ is unchanged for any given $\pm t$,
 while $v_y$ simply changes sign:
 
 <a href="one-body.png">
-<img src="one-body.png" style="width:60%;display:block;margin:auto;">
+<img src="one-body.png" style="width:60%">
 </a>
 
 From our expression for $\vb{r}$,
diff --git a/content/know/concept/self-energy/index.pdc b/content/know/concept/self-energy/index.pdc
index 935cca8..c6aa0c5 100644
--- a/content/know/concept/self-energy/index.pdc
+++ b/content/know/concept/self-energy/index.pdc
@@ -210,7 +210,7 @@ so we are left with non-equivalent diagrams only.
 Let $G(b,a) = G_{ba}$:
 
 <a href="fullgf.png">
-<img src="fullgf.png" style="width:90%;display:block;margin:auto;">
+<img src="fullgf.png" style="width:90%">
 </a>
 
 A **reducible diagram** is a Feynman diagram
@@ -223,7 +223,7 @@ as the sum of all irreducible terms in $G(b,a)$,
 after removing the two external lines from/to $a$ and $b$:
 
 <a href="selfenergy.png">
-<img src="selfenergy.png" style="width:90%;display:block;margin:auto;">
+<img src="selfenergy.png" style="width:90%">
 </a>
 
 Despite its appearance, the self-energy has the semantics of a line,
@@ -244,7 +244,7 @@ you can convince youself that $G(b,a)$ obeys
 a [Dyson equation](/know/concept/dyson-equation/) involving $\Sigma(y, x)$:
 
 <a href="dyson.png">
-<img src="dyson.png" style="width:95%;display:block;margin:auto;">
+<img src="dyson.png" style="width:95%">
 </a>
 
 This makes sense: in the "normal" Dyson equation
diff --git a/content/know/concept/self-phase-modulation/index.pdc b/content/know/concept/self-phase-modulation/index.pdc
index 3d33746..64f68d4 100644
--- a/content/know/concept/self-phase-modulation/index.pdc
+++ b/content/know/concept/self-phase-modulation/index.pdc
@@ -72,7 +72,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 <a href="pheno-spm.jpg">
-<img src="pheno-spm-small.jpg">
+<img src="pheno-spm-small.jpg" style="width:100%">
 </a>
 
 The **instantaneous frequency** $\omega_\mathrm{SPM}(z, t)$,
diff --git a/content/know/concept/self-steepening/index.pdc b/content/know/concept/self-steepening/index.pdc
index 7349854..808240b 100644
--- a/content/know/concept/self-steepening/index.pdc
+++ b/content/know/concept/self-steepening/index.pdc
@@ -119,7 +119,7 @@ which turns out to be accurate,
 although the simulation breaks down due to insufficient resolution:
 
 <a href="pheno-steep.jpg">
-<img src="pheno-steep-small.jpg">
+<img src="pheno-steep-small.jpg" style="width:100%">
 </a>
 
 Unfortunately, self-steepening cannot be simulated perfectly: as the
diff --git a/content/know/concept/shors-algorithm/index.pdc b/content/know/concept/shors-algorithm/index.pdc
index 643337c..8fc528e 100644
--- a/content/know/concept/shors-algorithm/index.pdc
+++ b/content/know/concept/shors-algorithm/index.pdc
@@ -52,7 +52,7 @@ To do this, the following $2q$-qubit quantum circuit is used,
 with $q$ chosen so that $N^2 \le 2^q < 2 N^2$:
 
 <a href="shors-circuit.png">
-<img src="shors-circuit.png" style="width:70%;display:block;margin:auto;">
+<img src="shors-circuit.png" style="width:70%">
 </a>
 
 Here, $\mathrm{QFT}_q$ refers to the $q$-qubit
diff --git a/content/know/concept/simons-algorithm/index.pdc b/content/know/concept/simons-algorithm/index.pdc
index f6b7d69..a8c5eb1 100644
--- a/content/know/concept/simons-algorithm/index.pdc
+++ b/content/know/concept/simons-algorithm/index.pdc
@@ -57,8 +57,8 @@ A quantum computer needs to query $f$ only $\mathcal{O}(n)$ times,
 although the exact number varies due to the algorithm's probabilistic nature.
 It uses the following circuit:
 
-<a href="simons-circuit.png" style="width:52%;display:block;margin:auto;">
-<img src="simons-circuit.png">
+<a href="simons-circuit.png">
+<img src="simons-circuit.png" style="width:52%">
 </a>
 
 The XOR oracle $U_f$ implements $f$,
diff --git a/content/know/concept/step-index-fiber/index.pdc b/content/know/concept/step-index-fiber/index.pdc
index 8847fff..4ca2ade 100644
--- a/content/know/concept/step-index-fiber/index.pdc
+++ b/content/know/concept/step-index-fiber/index.pdc
@@ -246,7 +246,7 @@ $$\begin{aligned}
 \end{aligned}$$
 
 <a href="bessel.jpg">
-<img src="bessel.jpg" style="width:90%;display:block;margin:auto;">
+<img src="bessel.jpg" style="width:100%">
 </a>
 
 Looking at these solutions with our constraints for $R_o$ in mind,
@@ -400,7 +400,7 @@ is illustrated below for a fiber with $V = 5$,
 where red and blue respectively denote the left and right-hand side:
 
 <a href="modes.jpg">
-<img src="modes.jpg" style="width:90%;display:block;margin:auto;">
+<img src="modes.jpg" style="width:100%">
 </a>
 
 This shows that each $\mathrm{LP}_{\ell m}$ has an associated cut-off $V_{\ell m}$,
diff --git a/content/know/concept/toffoli-gate/index.pdc b/content/know/concept/toffoli-gate/index.pdc
index f3ab0ba..f0b39ad 100644
--- a/content/know/concept/toffoli-gate/index.pdc
+++ b/content/know/concept/toffoli-gate/index.pdc
@@ -22,7 +22,7 @@ and flips $C$ if both $A$ and $B$ are true.
 In circuit diagrams, its representation is:
 
 <a href="toffoli.png">
-<img src="toffoli.png" style="width:19%;display:block;margin:auto;">
+<img src="toffoli.png" style="width:19%">
 </a>
 
 This gate is reversible, because $A$ and $B$ are preserved,
@@ -31,7 +31,7 @@ Moreover, this gate is universal,
 because we can make a NAND gate from it:
 
 <a href="nand.png">
-<img src="nand.png" style="width:38%;display:block;margin:auto;">
+<img src="nand.png" style="width:38%">
 </a>
 
 A NAND is enough to implement every conceivable circuit.
@@ -39,15 +39,15 @@ That said, we can efficiently implement NOT, AND, and XOR using a single Toffoli
 Note that NOT is a special case of NAND:
 
 <a href="not.png">
-<img src="not.png" style="width:32%;display:block;margin:auto;">
+<img src="not.png" style="width:32%">
 </a>
 
 <a href="and.png">
-<img src="and.png" style="width:35%;display:block;margin:auto;">
+<img src="and.png" style="width:35%">
 </a>
 
 <a href="xor.png">
-<img src="xor.png" style="width:35%;display:block;margin:auto;">
+<img src="xor.png" style="width:35%">
 </a>
 
 Using these, we can, as an example, make an OR gate
@@ -56,7 +56,7 @@ thanks to the fact that $A \lor B = \neg (\neg A \land \neg B)$,
 i.e. OR is NAND of NOT $A$ and NOT $B$:
 
 <a href="or.png">
-<img src="or.png" style="width:50%;display:block;margin:auto;">
+<img src="or.png" style="width:50%">
 </a>
 
 Thanks to its reversibility and universality,
diff --git a/layouts/home.html b/layouts/home.html
index 58fce38..af50f09 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -6,7 +6,6 @@
 </head>
 <body>
 {{ partial "navigation.html" . }}
-<img src="/logo256x256.gif" style="float:left;margin-right:16px;border:2px solid #666">
 {{ .Content }}
 {{ partial "footer.html" . }}
 </body>
diff --git a/layouts/know/single.html b/layouts/know/single.html
index 122b20e..3deff24 100644
--- a/layouts/know/single.html
+++ b/layouts/know/single.html
@@ -4,12 +4,6 @@
 {{ partial "head.html" . }}
 {{ partial "mathjax.html" . }}
 <title>{{ .Title }} | {{ .Site.Title }}</title>
-<style>
-img {max-width:100%; height:auto;}
-@media (prefers-color-scheme: dark) {
-img {filter:invert(100%);}
-}
-</style>
 </head>
 <body>
 {{ partial "navigation.html" . }}
diff --git a/static/logo256.png b/static/logo256.png
new file mode 100644
index 0000000..d6b9961
--- /dev/null
+++ b/static/logo256.png
diff --git a/static/logo256x256.gif b/static/logo256x256.gif
deleted file mode 100644
index a778340..0000000
--- a/static/logo256x256.gif
+++ /dev/null
diff --git a/static/main.css b/static/main.css
index b9ac894..f275aa6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,34 +1,99 @@
+/* Colour scheme */
+:root {
+	--b: #ededed;
+	--f: #121212;
+	--a: #0000ff;
+}
+.darkinv {}
+@media only screen and (prefers-color-scheme: dark) {
+	:root {
+		--b: #121212;
+		--f: #ededed;
+		--a: #ffff00;
+	}
+	.darkinv {filter: invert(100%)}
+}
+
+/* Basic elements */
 body {
-	background:#e3e3e3;
-	color:#161616;
-	max-width:80ch;
-	margin:auto;
-	padding:1em 0;
-	font-family:sans-serif;
-}
-h1,h2,h3 {text-align:center}
-h1 {font-size:200%;}
-h2 {font-size:160%;}
-h3 {font-size:120%;}
-a {text-decoration:none;color:#0000ff;}
-.noha a:link, .noha a:visited {color:#161616;}
-.noha a:hover, .noha a:focus, .noha a:active {color:#0000ff;}
-.nav {height:3rem;font-size:250%;}
-.navl {float:left;text-align:left;}
-.navr {float:right;text-align:right;}
-.footl {float:left;text-align:left;}
-.footr {float:right;text-align:right;}
-pre {filter:invert(100%);}
-@media (prefers-color-scheme: dark) {
-	body {background:#161616;filter:invert(100%);}
+	background: #ededed;
+	background: var(--b);
+	color: #121212;
+	color: var(--f);
+
+	max-width: 80ch;
+	margin: auto;
+	padding: 1rem 0;
+
+	font-family: sans-serif;
+	line-height: 1.5;
+}
+h1,h2,h3 {text-align: center;}
+h1 {font-size: 2.0rem;}
+h2 {font-size: 1.6rem;}
+h3 {font-size: 1.2rem;}
+a {
+	text-decoration: none;
+	color: #0000ff;
+	color: var(--a);
+}
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	margin: auto;
+}
+
+/* Header and footer */
+.nav {
+	height: 3rem;