optimize tile layout for small screens

metager/resources/js/startpage/tiles.js

@@ -52,6 +52,7 @@
         let tile_width = parseFloat(window.getComputedStyle(document.querySelector("#tiles > a")).width.replace("px", ""));
         let tile_gap = parseFloat(window.getComputedStyle(document.querySelector("#tiles"))["column-gap"].replace("px", ""));
         let client_width = document.querySelector("html").clientWidth;
+        let client_height = document.querySelector("html").clientHeight;
 
         let desired_tile_count = 8;
 
@@ -72,7 +73,12 @@
         console.log(client_width, tile_width, tile_gap, desired_tile_count);
         console.log("Six Tiles", tile_width * 6 + 5 * tile_gap);
         if (native_tile_count + min_advertisements > desired_tile_count) {
-            desired_tile_count *= 2;
+            // Allow 2x3 Tiles on small displays
+            if (desired_tile_count == 2 && client_height > 850) {
+                desired_tile_count *= 3;
+            } else {
+                desired_tile_count *= 2;
+            }
         }
 
 

metager/resources/less/metager/pages/startpage/tiles.less

@@ -32,7 +32,7 @@ div#tiles-container {
         }
 
         @media(max-width: @four_row_width) {
-            width: @two_row_width;
+            width: 100%;
         }
 
         display: flex;
@@ -46,6 +46,11 @@ div#tiles-container {
 
         >a {
             width: @tile_width;
+
+            @media(max-width: @four_row_width) {
+                width: calc(50% - @tile_gap);
+            }
+
             display: flex;
             row-gap: .5rem;
             flex-direction: column;
@@ -62,7 +67,7 @@ div#tiles-container {
                 width: @image_size;
                 height: @image_size;
                 padding: 0.5rem;
-                background-color: @highlight-color;
+                background-color: fade(@highlight-color, 60%);
                 border-radius: 5px;
                 transition: background-color 0.5s;
 
@@ -79,7 +84,6 @@ div#tiles-container {
             >div.title {
                 font-size: .8rem;
                 color: fade(@text-color, 60%);
-                transition: color 0.5s;
                 width: @tile_width;
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -87,6 +91,10 @@ div#tiles-container {
                 text-align: center;
                 line-height: 1;
 
+                >div.main-title {
+                    transition: color 0.5s;
+                }
+
                 >div.sub-title {
                     height: 1em;
                 }
@@ -94,7 +102,7 @@ div#tiles-container {
 
             &:hover {
                 >div.image {
-                    background-color: lighten(@highlight-color, 10%);
+                    background-color: @highlight-color;
                 }
 
                 >div.title {