feat: adapt pinterests image alignment (merge pull request #30 from p…

…rycaustic/main) Mimic pinterest image view on search page
Ahwxorg · Jan 25, 2024 · 2f65f2b · 2f65f2b
2 parents ddf5e73 + 51c825d
commit 2f65f2b
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/misc/style-dark.css b/misc/style-dark.css
@@ -148,23 +148,19 @@ button {
   height: 100%;
   width: 100%;
   object-fit: cover;
+  border-radius:  0.2rem;
 }
 
 .img-container{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  grid-gap: 10px;
-  margin-bottom: 50px;
-  margin-left: 20px;
-  margin-right: 20px;
-
+  column-count: auto;
+  column-width: 14rem;
+  column-gap: 0.5rem;
+  padding: 1rem;
 }
 
 .img-result {
-  flex-grow: 1;
-  height: 12rem;
+  margin-bottom: 0.5rem;
+  display: block;
 }
 
 /* search css end */