From f59515adf98418ac6ea269cc349c8024364ddf78 Mon Sep 17 00:00:00 2001
From: Marcel Hellkamp <marc@gsites.de>
Date: Sat, 15 Jul 2023 12:59:22 +0200
Subject: [PATCH] Fix layout: Remove whitespace on sides

Using rem-based sizing for the columns means that there is up to hallf a column (10rem) space on each side before another column can be added. We now use percent-based sizing instead and decide on the column count via CSS media queries based on avalable screen space. Still relative ro rem, so zoom still works.
---
 src/App.vue | 59 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 034884a..09b4480 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -278,8 +278,7 @@ const privacyLink = computed(() => {
     <main>
       <div v-if="filteredPosts.length === 0 && updateInProgress">Loading first posts ...</div>
       <div v-else-if="filteredPosts.length === 0">Nothing there yet ...</div>
-      <div v-else v-masonry transition-duration="1s" item-selector=".wall-item" stamp=".stamp" percent-position="true"
-        fit-width="true" id="wall">
+      <div v-else v-masonry transition-duration="1s" item-selector=".wall-item" percent-position="true" id="wall">
         <Card v-masonry-tile class="wall-item secret-hover" v-for="(post, index) in filteredPosts" :key="post.id"
           :post="post">
           <template v-slot:topleft>
@@ -330,7 +329,7 @@ body {
 }
 
 #page main {
-  padding: 1rem 1rem;
+  padding: 1rem 2rem;
 }
 
 .secret-hover .secret {
@@ -361,16 +360,58 @@ body {
 }
 
 .wall-item {
-  width: 100%;
-  max-width: 25rem;
+  width: 10%;
 }
 
-@media (max-width: 40rem) {
-
+@media (max-width: 180rem) {
   .wall-item {
-    width: 100%;
-    max-width: 100%;
+    width: 12.5%;
   }
 }
 
+@media (max-width: 160rem) {
+  .wall-item {
+    width: 14.7%;
+  }
+}
+
+@media (max-width: 140rem) {
+  .wall-item {
+    width: 16.6%;
+  }
+}
+
+@media (max-width: 120rem) {
+  .wall-item {
+    width: 20%;
+  }
+}
+
+@media (max-width: 100rem) {
+  .wall-item {
+    width: 25%;
+  }
+}
+
+@media (max-width: 80rem) {
+  .wall-item {
+    width: 33%;
+  }
+}
+
+@media (max-width: 60rem) {
+  #page main {
+    padding: 1rem .5rem;
+  }
+
+  .wall-item {
+    width: 50%;
+  }
+}
+
+@media (max-width: 40rem) {
+  .wall-item {
+    width: 100%;
+  }
+}
 </style>