add style for mobile

templates/gallery.html

@@ -124,6 +124,44 @@
         .button-link:hover {
             background: #555;
         }
+
+        @media (max-width: 600px) {
+            body {
+                padding: 1rem;
+                font-size: 14px;
+            }
+
+            .gallery {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: 12px;
+            }
+
+            .gallery img {
+                border-radius: 8px;
+            }
+
+            .lightbox .close {
+                font-size: 36px;
+                top: 10px;
+                right: 15px;
+            }
+
+            .arrow {
+                font-size: 48px;
+                top: 50%;
+            }
+
+            #lightbox-prompt {
+                font-size: 14px;
+                max-width: 90%;
+                padding: 8px 16px;
+            }
+
+            .button-link {
+                font-size: 14px;
+                padding: 8px 16px;
+            }
+        }
     </style>
 </head>
 
@@ -150,8 +188,8 @@
     <script>
         const allImages = [
             {% for image in images %}
-            { filename: "{{ image.filename }}" },
-            {% endfor %}
+        { filename: "{{ image.filename }}" },
+        {% endfor %}
         ];
     </script>
 
@@ -254,4 +292,4 @@
     </script>
 </body>
 
-</html>
+</html>