From d5b02cef7747056bd8c76553b524f19cc38d9817 Mon Sep 17 00:00:00 2001
From: r7wx <89222432+r7wx@users.noreply.github.com>
Date: Sat, 17 Jun 2023 23:31:35 +0200
Subject: [PATCH] improved mobile responsiveness

---
 internal/engine/template/index.html | 69 +++++++++++++----------------
 1 file changed, 32 insertions(+), 37 deletions(-)
diff --git a/internal/engine/template/index.html b/internal/engine/template/index.html
index d2cb035..cfbffae 100644
--- a/internal/engine/template/index.html
+++ b/internal/engine/template/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{.Title}}</title>
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <style>
@@ -39,25 +40,7 @@
       grid-template-columns: repeat(1, minmax(0, 1fr));
       margin-top: 0.5rem;
       margin-bottom: 0.5rem;
-    }
-
-    @media (min-width: 768px) {
-      .category-block {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .category-block {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .category-block {
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-      }
-    }
+    }   
 
     .service-block {
       padding: 0.3rem;
@@ -92,24 +75,6 @@
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
 
-    @media (min-width: 768px) {
-      .notes-block {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .notes-block {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .notes-block {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-      }
-    }
-
     .note-block {
       padding: 1rem;
       border-radius: 0.25rem;
@@ -134,6 +99,36 @@
       align-items: center;
       display: flex;
     }
+
+    @media (min-width: 768px) {
+      .category-block {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+       .notes-block {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .category-block {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .notes-block {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1280px) {
+      .category-block {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+      }
+
+      .notes-block {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+    }
   </style>
 </head>
 
