From 7620f980c1363c68c17efa380a6c9bc27f081c2c Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Sat, 17 May 2025 15:59:56 +0100
Subject: [PATCH] Fix mobile layout

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
---
 templates/index.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 4144ccf..71fd495 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -43,10 +43,22 @@
       padding: 6px;
     }
 
+    main > .category:nth-of-type(1),
+    main > .category:nth-of-type(2),
+    main > .category:nth-of-type(3) {
+      grid-column: span 4;
+    }
+
     @media screen and (max-width: 768px) {
       main {
         grid-template-columns: repeat(1, 1fr);
       }
+
+      main > .category:nth-of-type(1),
+      main > .category:nth-of-type(2),
+      main > .category:nth-of-type(3) {
+        grid-column: span 2;
+      }
     }
   </style>
 </head>
@@ -67,7 +79,7 @@
     <main>
       {{ $cat := "Fiction" }}
       {{ $book := index .Books $cat }}
-      <div class="category" style="grid-column: span 4;">
+      <div class="category">
         <h3>{{ $cat }}</h3>
         <a href="{{ $book.Link }}" target="_blank">
           <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
@@ -77,7 +89,7 @@
       </div>
       {{ $cat := "Non-Fiction" }}
       {{ $book := index .Books $cat }}
-      <div class="category" style="grid-column: span 4;">
+      <div class="category">
         <h3>{{ $cat }}</h3>
         <a href="{{ $book.Link }}" target="_blank">
           <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
@@ -87,7 +99,7 @@
       </div>
       {{ $cat := "Comics" }}
       {{ $book := index .Books $cat }}
-      <div class="category" style="grid-column: span 4;">
+      <div class="category">
         <h3>{{ $cat }}</h3>
         <a href="{{ $book.Link }}" target="_blank">
           <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />