From 386588a118be8c796a2cbec7aa83624ebaf32496 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 08:49:28 +0200
Subject: [PATCH] Make info-panel fully responsive with vh/vw units

---
 index.html | 83 +++++++++++++++++++++++++++---------------------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index 7f3bf1d..d671220 100644
--- a/index.html
+++ b/index.html
@@ -10,45 +10,46 @@
         #vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
         #info-panel {
             position: fixed;
-            bottom: 20px;
-            right: 20px;
+            top: 2vh;
+            bottom: 2vh;
+            right: 1.5vw;
             color: #e6dfd1;
             background: rgba(28, 27, 31, 0.7);
-            padding: 14px 18px;
-            border-radius: 8px;
+            padding: 1.2vh 1.2vw;
+            border-radius: 0.6vh;
             z-index: 9999;
-            font-size: 13px;
+            font-size: clamp(11px, 1.5vh, 16px);
             line-height: 1.6;
-            min-width: 340px;
+            min-width: 22vw;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            max-height: calc(100vh - 4vh);
         }
         #analog-clock {
-            width: 280px;
-            height: 280px;
-            margin: 0 auto 10px auto;
+            width: min(70vh, 35vw);
+            height: min(70vh, 35vw);
+            margin: 0 auto 1vh auto;
             display: block;
-        }
-
-        #info-panel:not(:has(.weather-forecast)) #analog-clock,
-        #analog-clock {
-            width: 280px;
+            flex-shrink: 0;
         }
         #digital-clock {
             text-align: center;
-            font-size: 16px;
+            font-size: 1.3em;
             letter-spacing: 2px;
-            margin-bottom: 12px;
-            padding-bottom: 10px;
+            margin-bottom: 1vh;
+            padding-bottom: 0.8vh;
             border-bottom: 1px solid rgba(230, 223, 209, 0.2);
         }
         .info-row {
             display: flex;
             align-items: center;
-            gap: 10px;
-            padding: 3px 0;
+            gap: 0.8vw;
+            padding: 0.2vh 0;
         }
         .info-icon {
-            width: 18px;
-            height: 18px;
+            width: 1.5em;
+            height: 1.5em;
             flex-shrink: 0;
             display: flex;
             align-items: center;
@@ -62,7 +63,7 @@
             flex-grow: 1;
             display: flex;
             justify-content: space-between;
-            gap: 10px;
+            gap: 0.8vw;
         }
         .info-label {
             color: #b0a89a;
@@ -73,46 +74,46 @@
         }
         .info-sub {
             color: #999187;
-            font-size: 11px;
+            font-size: 0.85em;
             margin-left: 4px;
         }
         .weather-divider {
             height: 1px;
             background: rgba(230, 223, 209, 0.2);
-            margin: 8px 0;
+            margin: 0.8vh 0;
         }
         .weather-current {
             display: flex;
             align-items: center;
-            gap: 12px;
-            padding: 4px 0 8px 0;
+            gap: 0.8vw;
+            padding: 0.4vh 0 0.8vh 0;
             border-bottom: 1px solid rgba(230, 223, 209, 0.2);
-            margin-bottom: 8px;
+            margin-bottom: 0.8vh;
         }
         .weather-current-icon {
-            width: 36px;
-            height: 36px;
+            width: 2.5em;
+            height: 2.5em;
             flex-shrink: 0;
         }
         .weather-current-icon svg { width: 100%; height: 100%; }
         .weather-current-temp {
-            font-size: 22px;
+            font-size: 1.7em;
             font-weight: bold;
         }
         .weather-current-detail {
-            font-size: 11px;
+            font-size: 0.85em;
             color: #b0a89a;
             line-height: 1.4;
         }
         .weather-day {
-            margin-bottom: 6px;
+            margin-bottom: 0.5vh;
         }
         .weather-day-header {
             display: flex;
             justify-content: space-between;
             align-items: baseline;
-            padding: 2px 0;
-            font-size: 12px;
+            padding: 0.2vh 0;
+            font-size: 0.95em;
         }
         .weather-day-name {
             color: #e6dfd1;
@@ -120,29 +121,29 @@
         }
         .weather-day-minmax {
             color: #999187;
-            font-size: 11px;
+            font-size: 0.85em;
         }
         .weather-day-slots {
             display: flex;
             justify-content: space-between;
-            gap: 4px;
-            font-size: 11px;
+            gap: 0.3vw;
+            font-size: 0.85em;
         }
         .weather-slot {
             display: flex;
             flex-direction: column;
             align-items: center;
             flex: 1;
-            gap: 2px;
+            gap: 0.2vh;
         }
         .weather-slot-icon {
-            width: 22px;
-            height: 22px;
+            width: 1.8em;
+            height: 1.8em;
         }
         .weather-slot-icon svg { width: 100%; height: 100%; }
         .weather-slot-label {
             color: #999187;
-            font-size: 9px;
+            font-size: 0.7em;
         }
         .weather-slot-temp {
             color: #e6dfd1;