From 2b2b1fcdd6ad102b490f9a78dfe6fa7e71a71490 Mon Sep 17 00:00:00 2001
From: cark <lp0@tilde.club>
Date: Fri, 20 Aug 2021 04:11:01 +0100
Subject: [PATCH] add some categories to the main page

---
 sass/main.scss       | 32 ++++++++++++++++++++++++++++++++
 templates/index.html | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)

diff --git a/sass/main.scss b/sass/main.scss
index d4d9847..fa4ac58 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -33,4 +33,36 @@ body {
 
     font-size: 1.5em;
     font-family: 'Crimson Text', serif;
+}
+
+.categories {
+    max-width: 600px;
+    margin: 12px auto;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    .category {
+        width: calc(50% - 24px);
+	    padding: 4px 0;
+        margin: 12px;
+	    * {
+            margin: 0;
+        }
+        .category-link {
+            display: flex;
+            align-items: center;
+            .icon {
+                margin-right: 4px;
+                margin-left: -2px;
+            }
+        }
+    }
+}
+
+a, a:focus {
+    color: #d9d5f3
+}
+
+.icon {
+    width: 24px;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 6ebcfc4..0f9f1cb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,6 +15,45 @@
         <div class="search-results__items"></div>
     </div>
 </div>
+
+<div class="categories">
+    <div class="category">
+        <h4><a class="category-link" href="/guides/">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
+              </svg>
+            Guides</a></h4>
+        <p>Words telling you how to do things, for children of all ages.</p>
+    </div>
+    <div class="category">
+        <h4><a class="category-link" href="/docs/">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
+              </svg>
+            Docs</a></h4>
+        <p>Things that are on this server, and how to use them.</p>
+    </div>
+    <div class="category">
+        <h4><a class="category-link" href="/docs/">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2h-1.528A6 6 0 004 9.528V4z" />
+                <path fill-rule="evenodd" d="M8 10a4 4 0 00-3.446 6.032l-1.261 1.26a1 1 0 101.414 1.415l1.261-1.261A4 4 0 108 10zm-2 4a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd" />
+              </svg>
+            Manual</a></h4>
+        <p>Ask the server nicely to retrieve an entry from the system's manual.</p>
+    </div>
+    <div class="category">
+        <h4><a class="category-link" href="/docs/">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+              </svg>
+            Extras</a></h4>
+        <p>Other things that didn't fit elsewhere.</p>
+    </div>
+</div>
+
+<!-- scripts here -->
+
 <script src="/elasticlunr.min.js"></script>
 <script src="/search_index.en.js"></script>