Add categories

src/jakecharman/templates/links.html

@@ -2,7 +2,10 @@
 <main id="links-main">
     <h2>Useful Links</h2>
     <section id="links">
-        {% for link in links %}
+        {% 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>
@@ -23,6 +26,8 @@
                 <p>{{ link.description }}</p>
             </div>
             {% endfor %}
+        </div>
+        {% endfor %}
     </section>
 </main>
 {% include 'footer.html' %}

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;
+}