add mobile view and bump images resolution

src/build.tsx

@@ -4,6 +4,7 @@ import fs from "fs";
 import Base from "./templates/Base";
 import Title from "./templates/Title";
 import Bento from "./templates/Bento";
+import NotBento from "./templates/NotBento";
 
 const environment: "prod" | "dev" =
   (process.env.ENVIRONMENT as "prod" | "dev") || "prod";
@@ -19,6 +20,7 @@ const html = renderToString(
   <Base isDev={environment == "dev"}>
     <Title />
     <Bento />
+    <NotBento />
   </Base>
 );
 fs.cpSync("src/static", "out/static", { recursive: true });

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");
+  const footer = document.getElementById("footer");
-  statusIconPing = document.getElementById("status-icon-ping");
+  const mobileFooter = document.getElementById("mobile-footer");
-  statusText = document.getElementById("status-text");
+
+  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);

src/templates/Bento.tsx

@@ -3,7 +3,7 @@ import Footer from "./Footer";
 
 export default function Bento() {
   return (
-    <div className="px-8 mt-8 lg:mt-16 xl:mt-0 w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
+    <div className="hidden lg:grid px-8 mt-8 lg:mt-16 xl:mt-0 w-full grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
       <BentoCard
         logo="/static/images/logos/xbb.png"
         image="/static/images/cards/xbb.png"
@@ -61,7 +61,7 @@ export default function Bento() {
         className="row-[4]"
         link="https://links.wah.su"
       />
-      <Footer className="col-span-full col-start-2" />
+      <Footer className="col-span-full col-start-2" id="footer" />
     </div>
   );
 }

src/templates/Footer.tsx

@@ -1,11 +1,13 @@
 interface FooterProps {
   className?: string;
+  id: string;
 }
 
-export default function Footer({ className }: FooterProps) {
+export default function Footer({ className, id }: FooterProps) {
   return (
     <div
-      className={`bg-[#3b0d25] w-full h-full ${className} rounded-xl p-8 flex flex-col items-center justify-center ubuntu-regular`}
+      id={id}
+      className={`bg-[#3b0d25] w-full h-full ${className} rounded-xl text-xs sm:text-base p-8 flex flex-col items-center justify-center ubuntu-regular`}
     >
       <div className="flex items-start flex-col gap-4">
         <a
@@ -26,7 +28,7 @@ export default function Footer({ className }: FooterProps) {
           <p id="status-text">...</p>
         </a>
         <div className="flex gap-8">
-          <div className="flex gap-2">
+          <div className="flex gap-2 sm:gap-2 items-center">
             <div className="inline h-6 w-6 bg-white rounded-full overflow-hidden">
               <img
                 src="/static/images/Unsplash_Symbol.png"
@@ -37,23 +39,23 @@ export default function Footer({ className }: FooterProps) {
             <span>Photo by</span>{" "}
             <a
               href="https://unsplash.com/@lgtts"
-              className="hover:text-[#FF851A] transition-colors"
+              className="hover:text-[#FF851A] transition-colors -ml-1 sm:ml-0"
             >
               Ilse Orsel
             </a>{" "}
-            <span>on</span>{" "}
+            <span className="hidden sm:inline">on</span>{" "}
             <a
               href="https://unsplash.com"
-              className="hover:text-[#FF851A] transition-colors"
+              className="hover:text-[#FF851A] transition-colors hidden sm:inline"
             >
               Unsplash
             </a>
           </div>
         </div>
-        <div className="flex gap-8">
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-8">
           <a
             href="https://wah.su/radiquum"
-            className="flex gap-2 hover:text-[#FF851A] transition-colors"
+            className="flex gap-2 hover:text-[#FF851A] transition-colors items-center"
           >
             <div className="h-6 w-6 bg-white rounded-full  overflow-hidden">
               <img
@@ -66,7 +68,7 @@ export default function Footer({ className }: FooterProps) {
           </a>
           <a
             href="https://github.com/wah-su"
-            className="flex gap-2 hover:text-[#FF851A] transition-colors"
+            className="flex gap-2 hover:text-[#FF851A] transition-colors items-center"
           >
             <div className="h-6 w-6 bg-white rounded-full">
               <img

src/templates/NotBento.tsx

@@ -0,0 +1,60 @@
+import BentoCard from "./BentoCards/BentoCard";
+import Footer from "./Footer";
+
+export default function NotBento() {
+  return (
+    <div className="lg:hidden px-8 mt-8 lg:mt-16 xl:mt-0 w-full grid grid-cols-1 grid-rows-[repeat(7,210px)] sm:grid-rows-[repeat(7,144px)] gap-2">
+      <BentoCard
+        logo="/static/images/logos/xbb.png"
+        image="/static/images/cards/xbb.png"
+        title="XBackBone"
+        color="#111827"
+        description="Image uploading with ShareX compatibility."
+        link="https://file.wah.su"
+      />
+      <BentoCard
+        logo="/static/images/logos/matrix.png"
+        image="/static/images/cards/matrix.png"
+        title="Matrix"
+        color="#111827"
+        description="An open network for secure, decentralised communication."
+        link="https://chat.wah.su"
+      />
+      <BentoCard
+        logo="/static/images/logos/nextcloud.png"
+        image="/static/images/cards/nextcloud.png"
+        title="NextCloud"
+        color="#fff"
+        description="Privacy-Friendly, productivity suite, offering file sharing and collaboration tools."
+        className=" text-black"
+        link="https://cloud.wah.su"
+      />
+      <BentoCard
+        logo="/static/images/logos/vaultwarden.png"
+        image="/static/images/cards/vaultwarden.png"
+        title="Vaultwarden"
+        color="#fff"
+        description="Unofficial Bitwarden password manager compatible server."
+        className="text-black"
+        link="https://vault.wah.su"
+      />
+      <BentoCard
+        logo="/static/images/logos/immich.png"
+        image="/static/images/cards/immich.png"
+        title="Immich"
+        color="#000"
+        description="Platform for managing and browsing your photos. Privacy-Friendly Google Photos alternative."
+        link="https://photos.wah.su"
+      />
+      <BentoCard
+        logo="/static/images/logos/linkwarden.png"
+        image="/static/images/cards/linkwarden.png"
+        title="Linkwarden"
+        color="#111827"
+        description="Bookmark manager to collect, organize, and preserve webpages."
+        link="https://links.wah.su"
+      />
+      <Footer className="col-span-full" id="mobile-footer"/>
+    </div>
+  );
+}

src/templates/Title.tsx

@@ -1,6 +1,6 @@
 export default function Title() {
   return (
-    <div className="min-h-[438px] flex gap-4 px-8 flex-col-reverse lg:flex-row items-center justify-center">
+    <div className="min-h-[438px] flex gap-8 md:gap-4 px-8 flex-col-reverse lg:flex-row items-center justify-center">
       <div className="flex items-center justify-center gap-4 flex-col w-full max-w-[500px] xl:max-w-[590px]">
         <h1 className="text-[#FF851A] text-[64px] md:text-[128px] ubuntu-mono-regular leading-none">
           WAH.su<span className="text-[32px] md:text-[48px]">(d0)</span>