From 7222184024baafab7f56afd71bf96ab2ebcba6d5 Mon Sep 17 00:00:00 2001
From: Wilfred Hughes <me@wilfred.me.uk>
Date: Thu, 28 Dec 2023 00:04:30 -0800
Subject: [PATCH] Improve styling on phones

---
 homepage/home_static/style.css |  8 ++++++
 homepage/index.html            | 50 ++++++++++++++++------------------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/homepage/home_static/style.css b/homepage/home_static/style.css
index fe6c6148c..7933f2269 100644
--- a/homepage/home_static/style.css
+++ b/homepage/home_static/style.css
@@ -24,6 +24,14 @@ h3 {
   line-height: 45px;
 }
 
+/* Constrain container width even more than container-sm.
+https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work */
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px !important;
+  }
+}
+
 .container h2 {
   padding-bottom: 1rem;
 }
diff --git a/homepage/index.html b/homepage/index.html
index 1c5a90356..c7704b9ce 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -64,17 +64,15 @@
       </div>
     </div>
 
-    <div class="container col-xxl-8 px-4">
-      <div class="container px-4 my-5">
-        <p class="px-5">
-          Difftastic is a CLI diff tool that compares files based on their
-          syntax, not line-by-line. Difftastic produces accurate diffs that are
-          easier for humans to read.
-        </p>
-      </div>
+    <div class="container">
+      <p class="my-5 px-4">
+        Difftastic is a CLI diff tool that compares files based on their syntax,
+        not line-by-line. Difftastic produces accurate diffs that are easier for
+        humans to read.
+      </p>
 
       <div class="card-set">
-        <div class="card px-2 pt-2 mx-5">
+        <div class="card px-2 pt-2">
           <div class="card-body">
             <h2>
               <span class="green">Understand</span>
@@ -94,7 +92,7 @@
           </div>
         </div>
 
-        <div class="card px-2 pt-2 mx-5">
+        <div class="card px-2 pt-2">
           <div class="card-body">
             <h2><span class="green">Ignore</span> Formatting Changes</h2>
 
@@ -108,7 +106,7 @@
           </div>
         </div>
 
-        <div class="card px-2 pt-2 mx-5">
+        <div class="card px-2 pt-2">
           <div class="card-body">
             <h2><span class="green">Visualise</span> Wrapping Changes</h2>
 
@@ -134,7 +132,7 @@
           </div>
         </div>
 
-        <div class="card px-2 pt-2 mx-5">
+        <div class="card px-2 pt-2">
           <div class="card-body">
             <h2>
               <span class="green">Real</span>
@@ -157,7 +155,7 @@
         </div>
       </div>
 
-      <div class="card px-2 py-2 mx-5 mt-5">
+      <div class="card px-2 py-2 mt-5">
         <div class="card-body">
           <h2>60 Second <span class="green">Demo</span></h2>
 
@@ -167,12 +165,12 @@
 
       <!-- https://devicon.dev/ provides SVG logos. -->
       <div class="card-set">
-        <div class="card px-2 pt-2 mx-5 mt-5">
+        <div class="card px-2 pt-2 mt-5">
           <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"
+              class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
             >
               <div class="col d-flex align-items-start">
                 <object
@@ -504,12 +502,12 @@
           </div>
         </div>
 
-        <div class="card px-2 pt-2 mx-5">
+        <div class="card px-2 pt-2">
           <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"
+              class="row row-cols-2 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 -->
@@ -590,7 +588,7 @@
         </div>
       </div>
 
-      <div class="card px-2 pt-2 mx-5 mt-5">
+      <div class="card px-2 pt-2 mt-5">
         <div class="card-body">
           <h2>Works With <span class="green">Git</span></h2>
           <div class="img-wrapper mb-4">
@@ -606,7 +604,7 @@
         </div>
       </div>
 
-      <div class="card px-2 pt-2 mx-5 mt-5">
+      <div class="card px-2 pt-2 mt-5">
         <div class="card-body">
           <h2>Fully <span class="green">Open Source</span></h2>
           <p>
@@ -618,14 +616,12 @@
         </div>
       </div>
 
-      <div class="container px-4 mt-5">
-        <p class="px-5">
-          <em
-            >Made with Emacs and coffee by
-            <a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
-          >
-        </p>
-      </div>
+      <p class="px-4 mt-5">
+        <em
+          >Made with Emacs and coffee by
+          <a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
+        >
+      </p>
     </div>
 
     <link