improved images alignment

static/css/style.css

@@ -252,22 +252,22 @@ html {
     font-family: Arial, Helvetica, sans-serif;
 }
 
+/* container */
 .images {
-    margin: 0;
     display: flex;
     flex-wrap: wrap;
-    margin-right: 35.4%;
-    max-width: 100%;
-    position: relative;
+    justify-content: center;
 }
 
 .image {
-    flex-grow: 1;
+    flex: 1 1 auto;
     padding: .5rem .5rem 2rem .5rem;
     margin: .25rem;
     border: 1px solid #00000000;
     border-radius: 12px;
     height: 10rem;
+    max-width: 20rem;
+    min-width: 3rem;
 }
 
 .image_selected {
@@ -1894,63 +1894,4 @@ body, h1, p, a, input, button {
     .leaflet-control-attribution a {
         color: var(--link) !important;
     }
-}
-
-/* 
-:root {
-    --background-color: #ffffff;
-    --text-color: #000000;
-    --highlight: #007bff;
-    --border-color: #dddddd;
-    --search-bg: #f1f3f4;
-    --search-bg-input: #ffffff;
-    --search-bg-input-border: #dfe1e5;
-    --button: #f8f9fa;
-    --link: #1a0dab;
-    --fg: #202124;
-    --html-bg: #ffffff;
-    --snip-border: #dfe1e5;
-    --snip-background: #ffffff;
-    --image-view: #ffffff;
-    --image-view-titlebar: #f1f3f4;
-    --search-button: #5f6368;
-    --image-select: #e8f0fe;
-    --view-image-color: #f8f9fa;
-    --footer-bg: #f2f2f2;
-    --footer-font: #70757a;
-    --border: #e0e0e0;
-    --link-visited: #660099;
-    --publish-info: #70757a;
-    --green: #3c802c;
-    --box-shadow: #00000020; 
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #202124;
-        --text-color: #e8eaed;
-        --highlight: #8ab4f8;
-        --border-color: #5f6368;
-        --search-bg: #303134;
-        --search-bg-input: #202124;
-        --search-bg-input-border: #5f6368;
-        --button: #3c4043;
-        --link: #8ab4f8;
-        --fg: #e8eaed;
-        --html-bg: #202124;
-        --snip-border: #5f6368;
-        --snip-background: #303134;
-        --image-view: #202124;
-        --image-view-titlebar: #303134;
-        --search-button: #e8eaed;
-        --image-select: #5f6368;
-        --view-image-color: #202124;
-        --footer-bg: #303134;
-        --footer-font: #e8eaed;
-        --border: #5f6368;
-        --link-visited: #c79fff;
-        --publish-info: #e8eaed;
-        --green: #8ab4f8;
-        --box-shadow: #ffffff20; 
-    }
-} */
+}