From e07581c742b2cd3a0e8a8297bbcd228cdd7a0c62 Mon Sep 17 00:00:00 2001
From: Timothy Stack <timothyshanestack@gmail.com>
Date: Sat, 12 Jun 2021 22:07:02 -0700
Subject: [PATCH] [docs] responsive grid

---
 docs/_layouts/top.html | 18 ++++++++++++++++--
 docs/index.markdown    |  6 ++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/_layouts/top.html b/docs/_layouts/top.html
index f257f84c..3c24cdab 100644
--- a/docs/_layouts/top.html
+++ b/docs/_layouts/top.html
@@ -9,7 +9,7 @@
     }
 
     #top-description {
-        font-size: x-large;
+        font-size: xx-large;
         margin-top: 3em;
         margin-left: 1em;
     }
@@ -22,11 +22,24 @@
         margin-left: 2em;
     }
 
+    .dlrow {
+        display: grid;
+        align-items: start;
+        grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
+        width: 100%;
+    }
+
+    p:before, #top-description:before {
+        content: "";
+        width: 6em;
+        display: block;
+        overflow: hidden;
+    }
+
     dl {
         display: grid;
         grid-template-rows: auto auto;
         grid-auto-flow: column;
-        width: 100%;
     }
     dl dt {
         font-weight: normal;
@@ -34,6 +47,7 @@
         text-align: center;
         border-bottom: 1px solid #8d8;
         margin: 20px 30px;
+        height: 2em;
     }
     dl dd {
         margin: 0 30px 20px 30px;
diff --git a/docs/index.markdown b/docs/index.markdown
index 97115b7f..78687cea 100644
--- a/docs/index.markdown
+++ b/docs/index.markdown
@@ -17,6 +17,7 @@ An advanced log file viewer for the small-scale
 <p>No server. No setup. Still featureful.</p>
 </div>
 
+<div class="dlrow">
 <dl>
 <dt>In Your Terminal</dt>
 <dd>
@@ -25,16 +26,21 @@ large-scale deployments.  They require installing and configuring servers
 before they can be effectively used.  There is still a need for a robust log
 file analyzer for the terminal.
 </dd>
+</dl>
 
+<dl>
 <dt>Easy to Use</dt>
 <dd>
 Just point lnav to a directory and it will take care of the rest.  File formats
 are automatically detected and compressed files are unpacked on the fly.
 </dd>
+</dl>
 
+<dl>
 <dt>Improved Presentation</dt>
 <dd>
 Log files are a wealth of information, lnav can help highlight the parts that
 are important and filter out the noise.
 </dd>
 </dl>
+</div>