WIP

index.html

@@ -58,6 +58,7 @@
         padding: 5px;
       }
 
+      /* Colours from https://spec.draculatheme.com/#sec-Color-Palette */
       .white {
         color: #f8f8f2;
       }
@@ -80,7 +81,7 @@
       }
 
       object {
-        box-shadow: 5px 5px #1d1b22;
+        box-shadow: 5px 5px #a09fa2;
       }
 
       img.screenshot {
@@ -143,25 +144,42 @@
     <div class="container col-xxl-8 px-4 pb-5">
       <div class="container px-4 pb-5">
         <h2>
-          Focus on
+          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 class="container px-4 pb-5">
         <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>
       </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>
+          If you change the inner content, difftastic can still show you the
+          additional wrapper.
+        </p>
       </div>
 
       <div class="container px-4 pb-5">
@@ -172,13 +190,14 @@
 
         <img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
         <p>
-          difftastic uses real line numbers, not
-          <code>@@ -5,6 +5,7 @@</code> syntax.
+          Do you know how to read
+          <code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the line numbers
+          from your files, both before and after.
         </p>
       </div>
 
       <div class="container px-4 pb-5">
-        <h2>programming languages</h2>
+        <h2>Programming Languages</h2>
 
         <div
           class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"
@@ -518,7 +537,7 @@
       </div>
 
       <div class="container px-4 pb-5">
-        <h2>file formats</h2>
+        <h2>File Formats</h2>
 
         <div
           class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"