feat: enhance mobile and tablet responsiveness; adjust theme toggle and gallery styles for better usability

public/style.css

@@ -151,6 +151,17 @@ h1 {
   color: white;
 }
 
+/* Mobile theme toggle adjustments */
+@media (max-width: 480px) {
+    .theme-toggle {
+        top: 12px;
+        right: 12px;
+        padding: 6px 10px;
+        font-size: 0.8rem;
+        border-radius: 6px;
+    }
+}
+
 
 #gallery {
     display: grid;
@@ -161,6 +172,37 @@ h1 {
     padding: 40px;
 }
 
+/* Tablet responsiveness */
+@media (max-width: 768px) {
+    #gallery {
+        padding: 12px;
+        gap: 3px;
+        grid-template-columns: repeat(auto-fit, 200px);
+    }
+    
+    .image-container {
+        width: 200px;
+    }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+    #gallery {
+        padding: 12px;
+        gap: 2px;
+        grid-template-columns: repeat(auto-fit, 200px);
+    }
+    
+    .image-container {
+        width: 200px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+        margin-top: 1rem;
+    }
+}
+
 
 .image-container {
   width: 200px;
@@ -219,9 +261,41 @@ h1 {
   background: var(--open-btn-hover);
 }
 
-.image-container:hover .copy-btn,
-.image-container:hover .open-btn {
-  opacity: 1;
+/* Mobile button adjustments */
+@media (max-width: 480px) {
+    .copy-btn,
+    .open-btn {
+        padding: 3px 6px;
+        font-size: 0.75rem;
+        top: 6px;
+    }
+    
+    .copy-btn {
+        left: 6px;
+    }
+    
+    .open-btn {
+        right: 6px;
+    }
+    
+    /* Show buttons on mobile since hover doesn't work well */
+    .image-container .copy-btn,
+    .image-container .open-btn {
+        opacity: 0.7;
+    }
+    
+    .image-container:hover .copy-btn,
+    .image-container:hover .open-btn {
+        opacity: 1;
+    }
+}
+
+/* Desktop hover behavior - only applies when not on mobile */
+@media (min-width: 481px) {
+    .image-container:hover .copy-btn,
+    .image-container:hover .open-btn {
+        opacity: 1;
+    }
 }
 
 .image-container img {