Merge pull request #270 from J-Siu/master

Fix#269

Author: medyo

src/App.tsx

@@ -35,7 +35,7 @@ export const App = () => {
   } = useUserPreferences()
 
   useLayoutEffect(() => {
-    document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
+    document.documentElement.style.setProperty('--user-cards-count', maxVisibleCards.toString())
   }, [maxVisibleCards])
 
   useEffect(() => {

src/assets/App.css

@@ -29,6 +29,7 @@ a {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  max-width: 3000px;
 }
 
 .errorMsg {
@@ -104,13 +105,17 @@ a {
   box-sizing: border-box;
   display: flex;
   flex: 1 1 auto;
-  gap: 12px;
+  gap: var(--cards-gap);
   height: 100%;
-  justify-content: space-between;
   overflow-y: hidden;
   padding-top: 20px;
   position: relative;
   scroll-snap-type: x mandatory;
+  flex-wrap: nowrap;
+}
+
+.Cards > * {
+  flex: 0 0 calc((100% - ((var(--visible-cards)) * var(--cards-gap))) / var(--visible-cards));
 }
 
 .HorizontalScroll {
@@ -185,23 +190,16 @@ a {
   fill: var(--app-name-text-color);
 }
 
-.cards {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
 .block {
   background-color: var(--card-background-color);
   border: 1px solid var(--card-border-color);
   flex-direction: column;
-  flex: 0 0 auto;
   height: calc(100% - 54px);
   overflow: hidden;
   padding-bottom: 56px;
+  box-sizing: border-box;
   scroll-snap-align: start;
-  width: 100vw;
+  width: 100%;
 }
 
 .blockContent {
@@ -1345,8 +1343,43 @@ Producthunt item
   }
 }
 
+@media (min-width: 768px) {
+  html {
+    --max-layout-cards-count: 2;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    --max-layout-cards-count: 4;
+  }
+  .App {
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 1800px) {
+  html {
+    --max-layout-cards-count: 5;
+  }
+  .App {
+    margin: 0 auto;
+    max-width: 1800px;
+  }
+}
+
+@media (min-width: 2048px) {
+  html {
+    --max-layout-cards-count: 6;
+  }
+  .App {
+    margin: 0 auto;
+    max-width: 3000px;
+  }
+}
+
 /* Small devices (portrait tablets and large phones, 600px and up) */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .floatingFilter {
     display: none;
   }
@@ -1355,7 +1388,6 @@ Producthunt item
     border-radius: 10px;
     height: 100%;
     padding-bottom: 0;
-    width: calc(95vw / min(2, var(--max-visible-cards)));
   }
 
   .blockContent {
@@ -1390,7 +1422,7 @@ Producthunt item
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .AppHeader {
     height: auto;
   }
@@ -1400,10 +1432,6 @@ Producthunt item
     width: auto;
   }
 
-  .block {
-    width: calc(96vw / min(3, var(--max-visible-cards)));
-  }
-
   .searchBar {
     width: auto;
   }
@@ -1416,41 +1444,6 @@ Producthunt item
   }
 }
 
-/* Large devices (desktops, 992px and up)*/
-@media only screen and (min-width: 992px) {
-  .block {
-    width: calc(96vw / min(3, var(--max-visible-cards)));
-  }
-}
-
-/* X-Large devices (large desktops, 1200px and up)*/
-@media only screen and (min-width: 1200px) {
-  .block {
-    width: calc(96vw / min(4, var(--max-visible-cards)));
-  }
-}
-
-/* XX-Large devices (larger desktops, 1400px and up)*/
-@media only screen and (min-width: 1400px) {
-  .block {
-    width: calc(95vw / min(4, var(--max-visible-cards)));
-  }
-}
-
-@media (min-width: 1800px) {
-  .App {
-    width: 1800px;
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  .block {
-    width: calc(
-      (1800px - 20px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
-    );
-  }
-}
-
 /***** PAGE ****/
 .Page {
   max-width: 1024px;

src/assets/variables.css

@@ -11,7 +11,10 @@
 }
 
 html {
-  --max-visible-cards: 4;
+  --user-cards-count: 4;
+  --max-layout-cards-count: 1;
+  --visible-cards: min(var(--max-layout-cards-count), var(--user-cards-count, 1));
+  --cards-gap: 12px;
 }
 
 html.dark {