From f7baeafd2880edef6d0c16cc1b9f8dceca6908ef Mon Sep 17 00:00:00 2001
From: honney <h.gehrmann@proton.me>
Date: Thu, 8 Jan 2026 18:57:19 +0100
Subject: [PATCH] % scaling

---
 home.html | 424 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 229 insertions(+), 195 deletions(-)
diff --git a/home.html b/home.html
index 86389d1..f6f3650 100644
--- a/home.html
+++ b/home.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Website Launcher</title>
+
   <style>
     :root {
       --bg: #0f1115;
@@ -11,285 +12,318 @@
       --text: #e6e6eb;
       --muted: #9aa0aa;
       --accent: #5da9ff;
-      --radius: 16px;
+      --radius: 1.2rem;
     }
 
     * {
       box-sizing: border-box;
     }
 
-    html {
-        min-height: 100vh;
-        background: var(--bg);
+    html,
+    body {
+      min-height: 100vh;
+      background: var(--bg);
     }
 
     body {
-        margin: 0;
-        min-height: 100vh;
-        background: var(--bg);
+      margin: 0;
 
-        display: flex;
-        flex-direction: column;   /* ← stack containers vertically */
-        align-items: center;      /* horizontal centering */
-        justify-content: center;  /* vertical centering of whole block */
-        gap: 48px;                /* space between the two tables */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        color: var(--text);
+      gap: 6vh;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--text);
     }
 
+    /* ===== Containers ===== */
+
     .container {
-        text-align: center;
-        padding: 24px;
+      width: 90%;
+      max-width: 1200px;
+      text-align: center;
     }
 
-    h1 {
-        margin-bottom: 28px;
-        font-weight: 600;
-        letter-spacing: 0.4px;
+    h1,
+    .collapsible-grid summary {
+      font-size: clamp(1.6rem, 2.5vw, 2.2rem);
+      font-weight: 600;
+      letter-spacing: 0.4px;
+      margin-bottom: 3vh;
     }
 
+    /* ===== Grid ===== */
+
     .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-        gap: 20px;
-        max-width: 1000px;
-        justify-content: center;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 3%;
+      justify-content: center;
     }
 
-    /* Make summary look like your h1 */
+    /* ===== Collapsible ===== */
+
     .collapsible-grid summary {
-        font-size: 2rem;          /* same as h1 */
-        font-weight: 600;
-        letter-spacing: 0.4px;
-        margin-bottom: 0px;
-        cursor: pointer;
-        color: var(--text);
-        list-style: none;          /* remove default marker */
-        outline: none;
-        display: flex;             /* to align text and arrow */
-        align-items: center;
-        justify-content: center;   /* center title + arrow horizontally */
-        gap: 12px;                 /* space between text and arrow */
-        transition: color 0.2s;
+      cursor: pointer;
+      list-style: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1%;
+      transition: color 0.2s ease;
     }
 
-    /* Custom arrow using pseudo-element */
     .collapsible-grid summary::after {
-        content: "▼";             /* down arrow by default */
-        font-size: 1.2rem;
-        transition: transform 0.2s ease;
+      content: "▼";
+      font-size: 0.9em;
+      transition: transform 0.2s ease;
     }
 
-    /* Rotate arrow when expanded */
     .collapsible-grid[open] summary::after {
-        transform: rotate(180deg); /* up arrow when open */
+      transform: rotate(180deg);
     }
 
     .collapsible-grid summary:hover {
-        color: var(--accent);
+      color: var(--accent);
     }
 
+    .ghost {
+      visibility: hidden;
+    }
+
+
+    /* ===== Tiles ===== */
+
     .tile {
-        background: var(--card);
-        border-radius: var(--radius);
-        text-decoration: none;
-        color: inherit;
-        padding: 20px 16px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 14px;
-        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+      background: var(--card);
+      border-radius: var(--radius);
+      text-decoration: none;
+      color: inherit;
+
+      padding: 10% 6%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10%;
+
+      transition:
+        transform 0.15s ease,
+        box-shadow 0.15s ease,
+        background 0.15s ease;
     }
 
     .tile:hover {
       background: var(--hover);
-      transform: translateY(-3px);
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+      transform: translateY(-4%);
+      box-shadow: 0 10% 30% rgba(0, 0, 0, 0.35);
     }
 
+    /* ===== Icons ===== */
+
     .logo {
-      width: 56px;
-      height: 56px;
-      border-radius: 14px;
+      width: 70%;
+      height: 70%;
+
+      border-radius: 22%;
       object-fit: contain;
+
       background: #0b0d12;
-      padding: 8px;
+      padding: 8%;
     }
 
     .label {
-      font-size: 0.95rem;
+      font-size: clamp(0.8rem, 1vw, 1rem);
       font-weight: 500;
       text-align: center;
     }
 
+    /* ===== Mobile tweak ===== */
+
     @media (max-width: 600px) {
       body {
-        padding: 24px;
+        justify-content: flex-start;
+        padding-top: 4vh;
       }
 
-      .logo {
-        width: 48px;
-        height: 48px;
+      .grid {
+        grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
+        gap: 5%;
       }
     }
   </style>
 </head>
+
 <body>
 
-<div class="container">
-  <h1>Own Websites</h1>
-  <div class="grid">
-
-    <a class="tile" href="https://www.honney333.work/" target="_blank">
-      <img src="https://www.honney333.work/static/themes/simple/img/favicon.png" alt="SearXNG" class="logo">
-      <div class="label">SearXNG</div>
-    </a>
-
-    <a class="tile" href="http://192.168.1.1/" target="_blank">
-      <img src="http://192.168.1.1/icon.svg" alt="FritzBox" class="logo">
-      <div class="label">FritzBox!</div>
-    </a>
-
-    <a class="tile" href="http://localhost:14564/" target="_blank">
-      <img src="http://localhost:14564/favicon.ico" alt="GoXLR" class="logo">
-      <div class="label">GoXLR</div>
-    </a>
-
-    <a class="tile" href="http://192.168.1.22:30022/nginx/proxy" target="_blank">
-      <img src="https://nginxproxymanager.com/logo.svg" alt="Nginx" class="logo">
-      <div class="label">Nginx</div>
-    </a>
-
-    <a class="tile" href="https://192.168.1.22:30021" target="_blank">
-      <img src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png" alt="TrueNAS" class="logo">
-      <div class="label">TrueNAS local</div>
-    </a>
-
-    <a class="tile" href="https://nas.honney333.work" target="_blank">
-      <img src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png" alt="TrueNAS" class="logo">
-      <div class="label">TrueNAS net</div>
-    </a>
-
-    <a class="tile" href="https://honney333.work/" target="_blank">
-      <img src="https://honney333.work/favicon-32x32.png" alt="Homepage" class="logo">
-      <div class="label">Homepage</div>
-    </a>
-
-  </div>
-</div>
-
-<div class="container">
-  <details class="collapsible-grid">
-    <summary>WLED</summary>
-  <div class="grid">
-
-    <a class="tile" href="http://192.168.1.209" target="_blank">
-      <img src="./wled.png" alt="Bett-Decke" class="logo">
-      <div class="label">Bett-Decke</div>
-    </a>
-
-    <a class="tile" href="http://192.168.1.124" target="_blank">
-      <img src="./wled.png" alt="PC-Schrank" class="logo">
-      <div class="label">PC-Schrank</div>
-    </a>
-
-    <a class="tile" href="http://192.168.1.200" target="_blank">
-      <img src="./wled.png" alt="PC-Decke" class="logo">
-      <div class="label">PC-Decke</div>
-    </a>
-  </div>
-  </div>
-</div>
-
-<div class="container">
-  <h1>Frequently Used Websites</h1>
-  <div class="grid">
-
-    <a class="tile" href="https://www.github.com" target="_blank">
-      <img src="https://github.githubassets.com/favicons/favicon.svg" alt="GitHub" class="logo">
-      <div class="label">GitHub</div>
-    </a>
-
-    <a class="tile" href="https://www.youtube.com" target="_blank">
-      <img src="https://www.youtube.com/favicon.ico" alt="YouTube" class="logo">
-      <div class="label">YouTube</div>
-    </a>
-
-    <a class="tile" href="https://www.crunchyroll.com" target="_blank">
-      <img src="https://www.crunchyroll.com/build/assets/img/favicons/favicon-v2-96x96.png" alt="Crunchyroll" class="logo">
-      <div class="label">Crunchyroll</div>
-    </a>
-
-    <a class="tile" href="https://www.reddit.com" target="_blank">
-      <img src="https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png" alt="Reddit" class="logo">
-      <div class="label">Reddit</div>
-    </a>
-
-    <a class="tile" href="https://onedrive.live.com" target="_blank">
-      <img src="https://onedrive.live.com/_layouts/15/images/odbfavicon.ico?rev=49" alt="Onedrive" class="logo">
-      <div class="label">Onedrive</div>
-    </a>
-
-    <a class="tile" href="https://www.chatgpt.com" target="_blank">
-      <img src="https://chatgpt.com/cdn/assets/favicon-eex17e9e.ico" alt="ChatGPT" class="logo">
-      <div class="label">ChatGPT</div>
-    </a>
-
-    <a class="tile" href="https://gemini.google.com/app" target="_blank">
-      <img src="https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg" alt="Gemini" class="logo">
-      <div class="label">Gemini</div>
-    </a>
-
-  </div>
-</div>
-
-<div class="container">
-  <details class="collapsible-grid">
-    <summary>Proton</summary>
+  <!-- ===== Own Websites ===== -->
+  <div class="container">
+    <h1>Own Websites</h1>
     <div class="grid">
 
-      <a class="tile" href="https://mail.proton.me/u/1/inbox" target="_blank">
-        <img src="https://mail.proton.me/assets/favicon.ico" alt="Mail" class="logo">
-        <div class="label">Mail</div>
+      <a class="tile" href="https://www.honney333.work/" target="_blank">
+        <img class="logo" src="https://www.honney333.work/static/themes/simple/img/favicon.png">
+        <div class="label">SearXNG</div>
       </a>
 
-      <a class="tile" href="https://calendar.proton.me/u/1/" target="_blank">
-        <img src="https://calendar.proton.me/assets/favicon.ico" alt="Calendar" class="logo">
-        <div class="label">Calendar</div>
+      <a class="tile" href="http://192.168.1.1/" target="_blank">
+        <img class="logo" src="http://192.168.1.1/icon.svg">
+        <div class="label">FritzBox!</div>
       </a>
 
-      <a class="tile" href="https://drive.proton.me/u/1" target="_blank">
-        <img src="https://drive.proton.me/assets/favicon.ico" alt="Drive" class="logo">
-        <div class="label">Drive</div>
+      <a class="tile" href="http://localhost:14564/" target="_blank">
+        <img class="logo" src="http://localhost:14564/favicon.ico">
+        <div class="label">GoXLR</div>
+      </a>
+
+      <a class="tile" href="http://192.168.1.22:30022/nginx/proxy" target="_blank">
+        <img class="logo" src="https://nginxproxymanager.com/logo.svg">
+        <div class="label">Nginx</div>
+      </a>
+
+      <a class="tile" href="https://192.168.1.22:30021" target="_blank">
+        <img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
+        <div class="label">TrueNAS local</div>
+      </a>
+
+      <a class="tile" href="https://nas.honney333.work" target="_blank">
+        <img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
+        <div class="label">TrueNAS net</div>
+      </a>
+
+      <a class="tile" href="https://honney333.work/" target="_blank">
+        <img class="logo" src="https://honney333.work/favicon-32x32.png">
+        <div class="label">Homepage</div>
       </a>
 
     </div>
-  </details>
-</div>
+  </div>
 
-<div class="container">
+  <!-- ===== WLED ===== -->
+  <div class="container">
+    <details class="collapsible-grid">
+      <summary>WLED</summary>
+      <div class="grid">
+
+        <div class="ghost"></div>
+        <div class="ghost"></div>
+
+        <a class="tile" href="http://192.168.1.209" target="_blank">
+          <img class="logo" src="./wled.png">
+          <div class="label">Bett-Decke</div>
+        </a>
+
+        <a class="tile" href="http://192.168.1.124" target="_blank">
+          <img class="logo" src="./wled.png">
+          <div class="label">PC-Schrank</div>
+        </a>
+
+        <a class="tile" href="http://192.168.1.200" target="_blank">
+          <img class="logo" src="./wled.png">
+          <div class="label">PC-Decke</div>
+        </a>
+
+      </div>
+    </details>
+  </div>
+
+  <!-- ===== Frequently Used ===== -->
+  <div class="container">
+    <h1>Frequently Used Websites</h1>
+    <div class="grid">
+
+      <a class="tile" href="https://www.github.com" target="_blank">
+        <img class="logo" src="https://github.githubassets.com/favicons/favicon.svg">
+        <div class="label">GitHub</div>
+      </a>
+
+      <a class="tile" href="https://www.youtube.com" target="_blank">
+        <img class="logo" src="https://www.youtube.com/favicon.ico">
+        <div class="label">YouTube</div>
+      </a>
+
+      <a class="tile" href="https://www.crunchyroll.com" target="_blank">
+        <img class="logo" src="https://www.crunchyroll.com/build/assets/img/favicons/favicon-v2-96x96.png">
+        <div class="label">Crunchyroll</div>
+      </a>
+
+      <a class="tile" href="https://www.reddit.com" target="_blank">
+        <img class="logo" src="https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png">
+        <div class="label">Reddit</div>
+      </a>
+
+      <a class="tile" href="https://onedrive.live.com" target="_blank">
+        <img class="logo" src="https://onedrive.live.com/_layouts/15/images/odbfavicon.ico">
+        <div class="label">Onedrive</div>
+      </a>
+
+      <a class="tile" href="https://www.chatgpt.com" target="_blank">
+        <img class="logo" src="https://chatgpt.com/cdn/assets/favicon-eex17e9e.ico">
+        <div class="label">ChatGPT</div>
+      </a>
+
+      <a class="tile" href="https://gemini.google.com/app" target="_blank">
+        <img class="logo" src="https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg">
+        <div class="label">Gemini</div>
+      </a>
+
+    </div>
+  </div>
+
+  <!-- ===== Proton ===== -->
+  <div class="container">
+    <details class="collapsible-grid">
+      <summary>Proton</summary>
+      <div class="grid">
+
+        <div class="ghost"></div>
+        <div class="ghost"></div>
+
+        <a class="tile" href="https://mail.proton.me/u/1/inbox" target="_blank">
+          <img class="logo" src="https://mail.proton.me/assets/favicon.ico">
+          <div class="label">Mail</div>
+        </a>
+
+        <a class="tile" href="https://calendar.proton.me/u/1/" target="_blank">
+          <img class="logo" src="https://calendar.proton.me/assets/favicon.ico">
+          <div class="label">Calendar</div>
+        </a>
+
+        <a class="tile" href="https://drive.proton.me/u/1" target="_blank">
+          <img class="logo" src="https://drive.proton.me/assets/favicon.ico">
+          <div class="label">Drive</div>
+        </a>
+
+      </div>
+    </details>
+  </div>
+
+  <!-- ===== TU Berlin ===== -->
+  <div class="container">
     <h1>TU Berlin</h1>
     <div class="grid">
 
+      <div class="ghost"></div>
+      <div class="ghost"></div>
+
       <a class="tile" href="https://isis.tu-berlin.de/" target="_blank">
-        <img src="https://isis.tu-berlin.de/theme/nephthys/pix/favicon-96x96.png" alt="Isis" class="logo">
-        <div class="label">Isis</div>
+        <img class="logo" src="https://isis.tu-berlin.de/theme/nephthys/pix/favicon-96x96.png">
+        <div class="label">ISIS</div>
       </a>
 
       <a class="tile" href="https://moseskonto.tu-berlin.de/moses/index.html" target="_blank">
-        <img src="https://moseskonto.tu-berlin.de/moses/docs/images/favicon/apple-touch-icon.png" alt="Moses" class="logo">
+        <img class="logo" src="https://moseskonto.tu-berlin.de/moses/docs/images/favicon/apple-touch-icon.png">
         <div class="label">Moses</div>
       </a>
 
       <a class="tile" href="https://git.tu-berlin.de" target="_blank">
-        <img src="https://git.tu-berlin.de/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png" alt="Git" class="logo">
+        <img class="logo" src="https://git.tu-berlin.de/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png">
         <div class="label">Git</div>
       </a>
 
     </div>
-</div>
+  </div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
