add mobile view and bump images resolution

src/static/css/tailwind.css

@@ -602,6 +602,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -638,6 +641,9 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -662,12 +668,18 @@
   .min-h-\[438px\] {
     min-height: 438px;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-\[114px\] {
     width: 114px;
   }
@@ -743,6 +755,30 @@
   .grid-rows-\[repeat\(4\,minmax\(0\,136px\)\)\] {
     grid-template-rows: repeat(4,minmax(0,136px));
   }
+  .grid-rows-\[repeat\(7\,144px\)\] {
+    grid-template-rows: repeat(7,144px);
+  }
+  .grid-rows-\[repeat\(7\,164px\)\] {
+    grid-template-rows: repeat(7,164px);
+  }
+  .grid-rows-\[repeat\(7\,164spx\)\] {
+    grid-template-rows: repeat(7,164spx);
+  }
+  .grid-rows-\[repeat\(7\,180px\)\] {
+    grid-template-rows: repeat(7,180px);
+  }
+  .grid-rows-\[repeat\(7\,190px\)\] {
+    grid-template-rows: repeat(7,190px);
+  }
+  .grid-rows-\[repeat\(7\,200px\)\] {
+    grid-template-rows: repeat(7,200px);
+  }
+  .grid-rows-\[repeat\(7\,210px\)\] {
+    grid-template-rows: repeat(7,210px);
+  }
+  .grid-rows-\[repeat\(7\,288px\)\] {
+    grid-template-rows: repeat(7,288px);
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -767,6 +803,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -862,6 +901,14 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .text-\[24px\] {
     font-size: 24px;
   }
@@ -946,11 +993,61 @@
       }
     }
   }
+  .sm\:ml-0 {
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 0);
+    }
+  }
+  .sm\:ml-1 {
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 1);
+    }
+  }
+  .sm\:inline {
+    @media (width >= 40rem) {
+      display: inline;
+    }
+  }
+  .sm\:h-6 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:w-6 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:flex-shrink-1 {
     @media (width >= 40rem) {
       flex-shrink: 1;
     }
   }
+  .sm\:grid-rows-\[repeat\(7\,144px\)\] {
+    @media (width >= 40rem) {
+      grid-template-rows: repeat(7,144px);
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:gap-2 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+  .sm\:gap-3 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\:gap-8 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:py-14 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 14);
@@ -961,11 +1058,27 @@
       padding-block: 200px;
     }
   }
+  .sm\:text-base {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
   .md\:-my-8 {
     @media (width >= 48rem) {
       margin-block: calc(var(--spacing) * -8);
     }
   }
+  .md\:grid {
+    @media (width >= 48rem) {
+      display: grid;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
   .md\:scale-85 {
     @media (width >= 48rem) {
       --tw-scale-x: 85%;
@@ -982,6 +1095,11 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .md\:gap-4 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
   .md\:py-0 {
     @media (width >= 48rem) {
       padding-block: calc(var(--spacing) * 0);
@@ -1013,6 +1131,16 @@
       margin-top: calc(var(--spacing) * 16);
     }
   }
+  .lg\:grid {
+    @media (width >= 64rem) {
+      display: grid;
+    }
+  }
+  .lg\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
   .lg\:scale-95 {
     @media (width >= 64rem) {
       --tw-scale-x: 95%;

src/static/js/checkstatus.js

@@ -66,9 +66,18 @@ async function getServicesHealth() {
 }
 
 window.onload = () => {
-  statusIcon = document.getElementById("status-icon");
-  statusIconPing = document.getElementById("status-icon-ping");
-  statusText = document.getElementById("status-text");
+  const footer = document.getElementById("footer");
+  const mobileFooter = document.getElementById("mobile-footer");
+
+  if (footer.checkVisibility() == true) {
+    statusIcon = footer.querySelector("#status-icon");
+    statusIconPing = footer.querySelector("#status-icon-ping");
+    statusText = footer.querySelector("#status-text");
+  } else {
+    statusIcon = mobileFooter.querySelector("#status-icon");
+    statusIconPing = mobileFooter.querySelector("#status-icon-ping");
+    statusText = mobileFooter.querySelector("#status-text");
+  }
 
   getServicesHealth();
   setInterval(getServicesHealth, 600000);