From e6ee67a46f80005da1288f9e115459ba317ce26d Mon Sep 17 00:00:00 2001
From: Jake Charman <jake@jakecharman.co.uk>
Date: Fri, 6 Feb 2026 21:43:34 +0000
Subject: [PATCH] Add categories

---
 src/jakecharman/templates/links.html | 43 ++++++++++++++++------------
 src/static/style/mobile.css          |  7 ++++-
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/jakecharman/templates/links.html b/src/jakecharman/templates/links.html
index 613ba0c..73fdbf5 100644
--- a/src/jakecharman/templates/links.html
+++ b/src/jakecharman/templates/links.html
@@ -2,25 +2,30 @@
 <main id="links-main">
     <h2>Useful Links</h2>
     <section id="links">
-        {% for link in links %}
-        <div class="link">
-            {% if link.get('img') is not none %}
-            <a href="{{link.src}}" target="_blank"></a>
-                <img class="link-thumb" 
-                    srcset="
-                        {% for i in range(200, 5100, 100) %}
-                            /image/{{ link.img }}?w={{i}} {{i}}w{{"," if not loop.last}}
-                        {% endfor %}
-                        "
-                        sizes="
-                            (max-width: 999px) 80vw,
-                            (min-width: 1000px) 20vw
-                        "
-                    src="/image/{{ link.img }}">
-            </a>
-                {% endif %}
-            <a href="{{link.src}}" target="_blank"><h3>{{ link.title }}</h3></a>
-            <p>{{ link.description }}</p>
+        {% for category in links %}
+        <div class="category">
+            <h3>{{category}}</h3>
+            {% for link in links.get(category) %}
+            <div class="link">
+                {% if link.get('img') is not none %}
+                <a href="{{link.src}}" target="_blank"></a>
+                    <img class="link-thumb" 
+                        srcset="
+                            {% for i in range(200, 5100, 100) %}
+                                /image/{{ link.img }}?w={{i}} {{i}}w{{"," if not loop.last}}
+                            {% endfor %}
+                            "
+                            sizes="
+                                (max-width: 999px) 80vw,
+                                (min-width: 1000px) 20vw
+                            "
+                        src="/image/{{ link.img }}">
+                </a>
+                    {% endif %}
+                <a href="{{link.src}}" target="_blank"><h3>{{ link.title }}</h3></a>
+                <p>{{ link.description }}</p>
+            </div>
+            {% endfor %}
         </div>
         {% endfor %}
     </section>
diff --git a/src/static/style/mobile.css b/src/static/style/mobile.css
index 670050d..734e339 100755
--- a/src/static/style/mobile.css
+++ b/src/static/style/mobile.css
@@ -290,15 +290,20 @@ pre{
 
 .link {
     border-top: 1px solid #e5e5e5;
+    clear: both;
 }
 
 .link>img {
     float: left;
     padding-right: 20px;
-    max-width: 100px;
+    width: 100px;
 }
 
 .link>a>h3 {
     padding-top: 10px;
     margin: 0
+}
+
+.category {
+    padding-top: 10px;
 }
\ No newline at end of file