stared · stared · Nov 30, 2025 · Nov 23, 2025 · Nov 27, 2025 · Nov 27, 2025
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -20,13 +20,31 @@
     <meta property="twitter:description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
     <meta property="twitter:image" content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png" />
 
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
   </head>
   <body>
     <div id="app">
       <aside id="sidebar" class="sidebar">
         <h2>Equations</h2>
         <nav id="equation-selector" class="equation-selector"></nav>
+
+        <footer class="sidebar-footer">
+          <p>
+            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a>
+          </p>
+          <p>
+            Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a>
+          </p>
+          <p>
+            For more on interactive explanations, see:
+            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
+          </p>
+        </footer>
       </aside>
 
       <main id="main-content" class="main-content">
@@ -40,35 +58,23 @@ <h1 id="equation-title">Interactive Equations</h1>
         <div id="static-description" class="static-description"></div>
 
         <div id="hover-explanation" class="hover-explanation"></div>
-
-        <footer class="footer">
-          <p>
-            Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
-            <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
-          </p>
-          <p>
-            For more on interactive explanations, see:
-            <a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
-          </p>
-        </footer>
       </main>
 
       <aside id="editor-sidebar" class="editor-sidebar">
         <div class="editor-toolbar">
           <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
             <span class="icon">◀</span>
           </button>
-          <div class="export-dropdown">
-            <button id="export-btn" class="toolbar-btn" title="Export">Export as...</button>
-            <div id="export-menu" class="export-menu" style="display: none;">
-              <button class="export-option" data-format="html">HTML</button>
-              <button class="export-option" data-format="latex">LaTeX</button>
-              <button class="export-option" data-format="beamer">Beamer</button>
-              <button class="export-option" data-format="typst">Typst</button>
-            </div>
+          <div class="export-controls">
+            <select id="export-format" class="toolbar-select" title="Export as...">
+              <option value="" disabled selected>Export as...</option>
+              <option value="html">HTML</option>
+              <option value="latex">LaTeX</option>
+              <option value="beamer">Beamer</option>
+              <option value="typst">Typst</option>
+            </select>
           </div>
           <button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>
-          <button id="download-btn" class="toolbar-btn" title="Download file">Download</button>
           <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
         </div>
         <div id="editor-container" class="editor-container"></div>

diff --git a/public/examples/equations.json b/public/examples/equations.json
diff --git a/public/examples/navier-stokes.md b/public/examples/navier-stokes.md
diff --git a/public/examples/schrodinger.md b/public/examples/schrodinger.md
diff --git a/scripts/validate-content.ts b/scripts/validate-content.ts
@@ -7,19 +7,31 @@ console.log('Validating equation files...');
 
 let hasErrors = false;
 
-// Load equations list
-const equationsJson = readFileSync('./public/examples/equations.json', 'utf-8');
-const equations = JSON.parse(equationsJson);
+// Scan src/examples directory for markdown files
+const examplesDir = './src/examples';
+const files = readdirSync(examplesDir).filter(f => f.endsWith('.md'));
+
+console.log(`Found ${files.length} equation files`);
 
 // Validate each equation file
-for (const equation of equations) {
-  const filePath = `./public/examples/${equation.file}`;
-  console.log(`\nChecking ${equation.title} (${equation.file})...`);
+for (const file of files) {
+  const filePath = `${examplesDir}/${file}`;
+  console.log(`\nChecking ${file}...`);
 
   try {
     const content = readFileSync(filePath, 'utf-8');
     const parsed = parseContent(content);
+    console.log(`  ✓ Title: ${parsed.title || '(no title)'}`);
     console.log(`  ✓ ${parsed.termOrder.length} terms found`);
+
+    if (parsed.errors.length > 0) {
+      console.error(`  ✗ Validation errors:`);
+      parsed.errors.forEach(err => console.error(`    - ${err}`));
+      hasErrors = true;
+    }
+    if (parsed.warnings.length > 0) {
+      parsed.warnings.forEach(warn => console.warn(`  ⚠ ${warn}`));
+    }
   } catch (error) {
     console.error(`  ✗ Validation failed:`);
     if (error instanceof Error) {

diff --git a/src/examples/bayes.md b/src/examples/bayes.md
@@ -0,0 +1,36 @@
+# Bayes' Theorem
+
+## Equation
+
+$$
+\mark[posterior]{P(H|E)} = \frac{\mark[likelihood]{P(E|H)} \mark[prior]{P(H)}}{\mark[evidence]{P(E)}}
+$$
+
+## Description
+
+Your [updated belief]{.posterior} is your [prior view]{.prior} re-weighted by its [predictive power]{.likelihood} and normalized by the [total probability of the evidence]{.evidence}.
+
+## .posterior
+
+Posterior Probability $P(H|E)$.
+
+What you believe *after* seeing the data. It is the probability of the Hypothesis ($H$) being true given the Evidence ($E$). This is the output of the learning process.
+
+## .likelihood
+
+Likelihood $P(E|H)$.
+
+How well the hypothesis explains the data. It asks: "If my theory were true, how likely would this outcome be?" High likelihood means the theory strongly predicts the observed evidence.
+
+## .prior
+
+Prior Probability $P(H)$.
+
+Your starting assumption *before* seeing new data. It represents base rates or previous knowledge. Strong priors are hard to shift; weak priors change easily with new evidence.
+
+## .evidence
+
+Marginal Likelihood $P(E)$.
+
+The total probability of seeing the evidence under *all* possible hypotheses. It acts as a normalization factor. If the evidence is surprising (low $P(E)$), it has a stronger effect on updating your beliefs.
+
diff --git a/src/examples/dft.md b/src/examples/dft.md
@@ -0,0 +1,47 @@
+# Discrete Fourier Transform
+
+## Equation
+
+$$
+\mark[amplitude]{X}_{\mark[freq]{k}} = \mark[average]{\frac{1}{N}} \mark[average]{\sum_{n=0}^{N-1}} \mark[signal]{x_n} \mark[spin]{e}^{\mark[spin]{i} \mark[circle]{2\pi} \mark[freq]{k} \mark[average]{\frac{n}{N}}}
+$$
+
+## Description
+
+To find [the amplitude]{.amplitude} [at a particular frequency]{.freq}, [spin]{.spin} [your signal]{.signal} [around a circle]{.circle} [at that frequency]{.freq}, and [average a bunch of points along that path]{.average}.
+
+## .amplitude
+
+The transform output $X_k$.
+
+Represents the **complex amplitude** (magnitude and phase) of the signal at a specific frequency. Its magnitude tells you "how much" of that frequency is present.
+
+## .freq
+
+The frequency index $k$.
+
+Determines which frequency we are analyzing. It appears both in the output index (which bin?) and in the rotation term (how fast do we spin?).
+
+## .average
+
+The averaging operation.
+
+Combines the summation ($\sum$) and the division by $N$ (and the time index term $\frac{n}{N}$). It turns the sum into an average value over the signal's duration.
+
+## .signal
+
+The input signal $x_n$.
+
+Your raw data points (audio, image, stock prices) sampled over time.
+
+## .spin
+
+The exponential term $e^i$.
+
+This is the rotation operator basis.
+
+## .circle
+
+The full circle constant $2\pi$.
+
+Represents one full rotation in radians.
diff --git a/src/examples/einstein.md b/src/examples/einstein.md
@@ -0,0 +1,41 @@
+# Einstein Field Equations
+
+## Equation
+
+$$
+\mark[ricci]{R_{\mu\nu}} \mark[scalar]{- \frac{1}{2}R g_{\mu\nu}} + \mark[dark-energy]{\Lambda g_{\mu\nu}} = \mark[coupling]{\frac{8\pi G}{c^4}} \mark[matter]{T_{\mu\nu}}
+$$
+
+## Description
+
+The [Ricci curvature]{.ricci} and [scalar curvature]{.scalar} combined with [dark energy]{.dark-energy} are determined by the [matter distribution]{.matter} scaled by the [gravitational constant]{.coupling}.
+
+## .ricci
+
+Ricci Curvature Tensor ($R_{\mu\nu}$).
+
+This describes how the volume of a shape changes as it moves through spacetime. It represents the part of curvature that causes matter to converge or diverge, directly corresponding to the presence of mass and energy.
+
+## .scalar
+
+Scalar Curvature Term ($-\frac{1}{2}R g_{\mu\nu}$).
+
+This geometric correction involves the Ricci scalar $R$ and metric tensor $g_{\mu\nu}$. It ensures that the geometry side of the equation mathematically conserves energy and momentum, matching the physics of the matter side.
+
+## .dark-energy
+
+The Cosmological Constant ($\Lambda$).
+
+An intrinsic energy of empty space that pushes the universe apart. It opposes gravity and is responsible for the accelerating expansion of the universe.
+
+## .coupling
+
+Gravitational Coupling.
+
+This tiny factor ($\approx 2 \times 10^{-43}$) describes how "stiff" spacetime is. It explains why gravity is so weak: it takes a massive amount of matter (like the Earth) to produce even a modest curvature.
+
+## .matter
+
+Stress-Energy Tensor ($T_{\mu\nu}$).
+
+The source of gravity. It tells space how to curve using mass density ($\rho$), pressure ($p$), and momentum flux. In General Relativity, all energy gravitates, not just mass.