diff --git a/homepage/index.html b/homepage/index.html
index 59db79f96..74a73c1e2 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -25,18 +25,7 @@
     <style>
       body {
         --bs-body-font-size: 18px;
-      }
-
-      html,
-      body,
-      .fw-bold,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: #f8f8f2 !important;
+        --bs-border-radius: 0.5rem;
       }
 
       h1 {
@@ -82,7 +71,9 @@
       }
 
       img {
-        box-shadow: 10px 10px #1d1b22;
+        /* box-shadow: 10px 10px #1d1b22; */
+        border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+        border-radius: var(--bs-border-radius);
       }
 
       object {
@@ -101,6 +92,10 @@
         line-height: 45px;
       }
 
+      <!-- .card h2 { -->
+      <!--   text-align: center; -->
+      <!-- } -->
+
       @media only screen and (min-width: 900px) {
         .screenshot {
           max-width: 800px;
@@ -148,495 +143,516 @@
     </div>
 
     <div class="container col-xxl-8 px-4">
-      <div class="container px-4 pb-5">
-        <h2>
-          Focus On
-          <span class="green">What Changed</span>
-        </h2>
-
-        <!-- screenshot from difftastic commit e472acb8050e84c671470421f4fd5c74a9d3b2bd -->
-        <img src="add_wrap.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          Difftastic parses your code with tree-sitter. Unlike a line-oriented
-          text diff, difftastic understands that the inner expression hasn't
-          changed here.
-        </p>
+      <p class="px-5">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation.
+      </p>
+
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2 class="card-heading">
+            Focus On
+            <span class="green">What Changed</span>
+          </h2>
+
+          <!-- screenshot from difftastic commit e472acb8050e84c671470421f4fd5c74a9d3b2bd -->
+          <img src="add_wrap.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            Difftastic parses your code with tree-sitter. Unlike a line-oriented
+            text diff, difftastic understands that the inner expression hasn't
+            changed here.
+          </p>
+        </div>
       </div>
 
-      <div class="container px-4 pb-5">
-        <h2><span class="green">Ignore</span> Formatting Changes</h2>
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2><span class="green">Ignore</span> Formatting Changes</h2>
 
-        <img src="reformat.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          Has your code formatter decided to split something over multiple
-          lines? Difftastic can show what has actually changed.
-        </p>
+          <img src="reformat.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            Has your code formatter decided to split something over multiple
+            lines? Difftastic can show what has actually changed.
+          </p>
+        </div>
       </div>
 
-      <div class="container px-4 pb-5">
-        <h2><span class="green">Understand</span> Wrapping Changes</h2>
-
-        <img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          Have you added a wrapper? Difftastic can match the delimiters exactly.
-        </p>
-
-        <img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          Even if you change the inner content, difftastic can still show you
-          the additional wrapper.
-        </p>
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2><span class="green">Understand</span> Wrapping Changes</h2>
+
+          <img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            Have you added a wrapper? Difftastic can match the delimiters
+            exactly.
+          </p>
+
+          <img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            Even if you change the inner content, difftastic can still show you
+            the additional wrapper.
+          </p>
+        </div>
       </div>
 
-      <div class="container px-4 pb-5">
-        <h2>
-          <span class="green">Real</span>
-          Line Numbers
-        </h2>
-
-        <img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          Do you know how to read
-          <code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual line
-          numbers from your files, both before and after.
-        </p>
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2>
+            <span class="green">Real</span>
+            Line Numbers
+          </h2>
+
+          <img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            Do you know how to read
+            <code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual
+            line numbers from your files, both before and after.
+          </p>
+        </div>
       </div>
 
       <!-- https://devicon.dev/ provides SVG logos. -->
-      <div class="container px-4 pb-5">
-        <h2>Programming Languages</h2>
-
-        <div
-          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
-        >
-          <div class="col d-flex align-items-start">
-            <div class="foo">
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2>Programming Languages</h2>
+
+          <div
+            class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
+          >
+            <div class="col d-flex align-items-start">
+              <div class="foo">
+                <object
+                  class="me-3"
+                  width="45px"
+                  height="45px"
+                  data="cplusplus.svg"
+                  type="image/svg+xml"
+                ></object>
+              </div>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  C++
+                </h3>
+              </div>
+            </div>
+
+            <div class="col d-flex align-items-start">
               <object
                 class="me-3"
                 width="45px"
                 height="45px"
-                data="cplusplus.svg"
+                data="csharp.svg"
                 type="image/svg+xml"
               ></object>
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  C#
+                </h3>
+              </div>
             </div>
 
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                C++
-              </h3>
-            </div>
-          </div>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="clojure.svg"
+                type="image/svg+xml"
+              ></object>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="csharp.svg"
-              type="image/svg+xml"
-            ></object>
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                C#
-              </h3>
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Clojure
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="clojure.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Clojure
-              </h3>
-            </div>
-          </div>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="lisp.svg"
+                type="image/svg+xml"
+              ></object>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="lisp.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Common Lisp
-              </h3>
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Lisp
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="dart.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Dart
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="dart.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Dart
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="erlang.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Erlang
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="erlang.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Erlang
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="go.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Go
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="go.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Go
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="haskell.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Haskell
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="haskell.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Haskell
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="java.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Java
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="java.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Java
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="javascript.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                JavaScript
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="javascript.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  JavaScript
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="kotlin.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Kotlin
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="kotlin.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Kotlin
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="lua.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Lua
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="lua.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Lua
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="ocaml.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                OCaml
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="ocaml.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  OCaml
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="php.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                PHP
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="php.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  PHP
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="python.svg"
-              type="image/svg+xml"
-            ></object>
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Python
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="python.svg"
+                type="image/svg+xml"
+              ></object>
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Python
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="r.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                R
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="r.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  R
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="ruby.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Ruby
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="ruby.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Ruby
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="rust.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Rust
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="rust.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Rust
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="scala.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                Scala
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="scala.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  Scala
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="typescript.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                TypeScript
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="typescript.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  TypeScript
+                </h3>
+              </div>
             </div>
+
+            <!-- end languages -->
           </div>
 
-          <!-- end languages -->
+          <p>
+            And more! See the full
+            <a href="https://difftastic.wilfred.me.uk/languages_supported.html"
+              >list of supported languages</a
+            >
+            in the manual.
+          </p>
         </div>
+      </div>
 
-        <p>
-          And more! See the full
-          <a href="https://difftastic.wilfred.me.uk/languages_supported.html"
-            >list of supported languages</a
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2>File Formats</h2>
+
+          <div
+            class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
           >
-          in the manual.
-        </p>
-      </div>
+            <div class="col d-flex align-items-start">
+              <!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="braces.svg"
+                type="image/svg+xml"
+              ></object>
 
-      <div class="container px-4 pb-5">
-        <h2>File Formats</h2>
-
-        <div
-          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
-        >
-          <div class="col d-flex align-items-start">
-            <!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="braces.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                HCL
-              </h3>
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  HCL
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="html5.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                HTML
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="html5.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  HTML
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="json.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                JSON
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="json.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  JSON
+                </h3>
+              </div>
             </div>
-          </div>
 
-          <div class="col d-flex align-items-start">
-            <object
-              class="me-3"
-              width="45px"
-              height="45px"
-              data="yaml.svg"
-              type="image/svg+xml"
-            ></object>
-
-            <div>
-              <h3 class="fw-bold mb-0 fs-4">
-                YAML
-              </h3>
+            <div class="col d-flex align-items-start">
+              <object
+                class="me-3"
+                width="45px"
+                height="45px"
+                data="yaml.svg"
+                type="image/svg+xml"
+              ></object>
+
+              <div>
+                <h3 class="fw-bold mb-0 fs-4">
+                  YAML
+                </h3>
+              </div>
             </div>
+            <!-- end formats -->
           </div>
-          <!-- end formats -->
-        </div>
 
-        <p>
-          And even more! See the full
-          <a
-            href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats"
-            >list of supported file formats</a
-          >
-          in the manual.
-        </p>
+          <p>
+            And even more! See the full
+            <a
+              href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats"
+              >list of supported file formats</a
+            >
+            in the manual.
+          </p>
+        </div>
       </div>
 
-      <div class="container px-4 pb-5">
-        <h2>Works With <span class="green">Git</span></h2>
-        <img src="git_difftool.png" class="img-fluid mb-4" alt="screenshot" />
-        <p>
-          See the
-          <a href="https://difftastic.wilfred.me.uk/git.html"
-            >git configuration instructions</a
-          >
-          in the manual.
-        </p>
+      <div class="card p-4 mx-5 my-4">
+        <div class="card-body">
+          <h2>Works With <span class="green">Git</span></h2>
+          <img src="git_difftool.png" class="img-fluid mb-4" alt="screenshot" />
+          <p>
+            See the
+            <a href="https://difftastic.wilfred.me.uk/git.html"
+              >git configuration instructions</a
+            >
+            in the manual.
+          </p>
+        </div>
       </div>
 
-      <div class="container px-4 pb-5">
+      <div class="card p-4 mx-5 my-4">
         <h2>Fully <span class="green">Open Source</span></h2>
         <p>
           Difftastic is
@@ -647,7 +663,7 @@
       </div>
 
       <div class="container px-4">
-        <p>
+        <p class="px-5">
           <em
             >Made with Emacs and coffee by
             <a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
