From 1ee8029d2d30209a86c78d27793b1c1d04dfad49 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 2 Jan 2026 10:47:41 +0000 Subject: [PATCH 1/4] Initial plan From 266e708caa0be05878b3e89274425684103f9b2c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 2 Jan 2026 10:51:27 +0000 Subject: [PATCH 2/4] fix: allow hamburger toggle to open settings panel Co-authored-by: Musheer360 <76395479+Musheer360@users.noreply.github.com> --- main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/main.js b/main.js index 7aa24a6..0ac0904 100644 --- a/main.js +++ b/main.js @@ -521,7 +521,6 @@ document.addEventListener("DOMContentLoaded", () => { if (elements.settingsMenuBtn) { elements.settingsMenuBtn.addEventListener("click", (e) => { - e.stopPropagation(); toggleMenu(elements.settingsMenuBtn); }); From 6b96de47b5dbb5ff779252b87321583c1c8df3e2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 2 Jan 2026 10:55:51 +0000 Subject: [PATCH 3/4] style: make hamburger icon responsive Co-authored-by: Musheer360 <76395479+Musheer360@users.noreply.github.com> --- style.css | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/style.css b/style.css index f56618c..4c39176 100644 --- a/style.css +++ b/style.css @@ -255,10 +255,15 @@ body .clockbox { padding: 0; } +.menu svg { + width: clamp(40px, 6vw, 60px); + height: clamp(40px, 6vw, 60px); +} + .line { fill: none; stroke: #fff; - stroke-width: 3.5; + stroke-width: clamp(3px, 0.5vw, 5px); transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); @@ -422,10 +427,10 @@ body .clockbox { font-size: 22.5px; } - .menu svg { - width: 45px; - height: 45px; - } +.menu svg { + width: clamp(40px, 5vw, 55px); + height: clamp(40px, 5vw, 55px); +} .selectormenu, .blurbox, @@ -495,10 +500,10 @@ body .clockbox { font-size: 32.5px; } - .menu svg { - width: 65px; - height: 65px; - } +.menu svg { + width: clamp(50px, 4vw, 72px); + height: clamp(50px, 4vw, 72px); +} .selectormenu, .blurbox, @@ -567,10 +572,10 @@ body .clockbox { font-size: 50px; } - .menu svg { - width: 100px; - height: 100px; - } +.menu svg { + width: clamp(70px, 4vw, 110px); + height: clamp(70px, 4vw, 110px); +} .selectormenu, .blurbox, From ee7b09702e549e7a67654a0f0f46fdb51d75cddc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 2 Jan 2026 11:01:17 +0000 Subject: [PATCH 4/4] style: scale entire UI responsively Co-authored-by: Musheer360 <76395479+Musheer360@users.noreply.github.com> --- style.css | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/style.css b/style.css index 4c39176..7cea258 100644 --- a/style.css +++ b/style.css @@ -52,7 +52,7 @@ body .clockbox { position: absolute; top: 4%; left: 2.5%; - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); cursor: default; } @@ -62,13 +62,13 @@ body .clockbox { } .time { - font-size: 125px; + font-size: clamp(100px, 8vw, 150px); letter-spacing: 3px; font-weight: 400; } .date { - font-size: 21.5px; + font-size: clamp(18px, 1.6vw, 28px); letter-spacing: 2.5px; } @@ -92,11 +92,11 @@ body .clockbox { .mainquote { margin-bottom: 8px; - font-size: 18px; + font-size: clamp(16px, 1.3vw, 22px); } .mainauthor { - font-size: 16px; + font-size: clamp(14px, 1.15vw, 20px); } .weather { @@ -107,18 +107,18 @@ body .clockbox { position: absolute; top: 4%; right: 2.5%; - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); z-index: 2; } .city { - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); cursor: pointer; } .cityblock, .tempblock { - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); padding: 0 5px; cursor: default; z-index: -1; @@ -126,12 +126,12 @@ body .clockbox { .description { text-transform: capitalize; - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); cursor: default; } .weather .temp { - font-size: 25px; + font-size: clamp(20px, 1.8vw, 32px); cursor: pointer; } @@ -140,10 +140,10 @@ body .clockbox { left: 50%; top: -10%; transform: translateX(-50%); - height: 40px; - width: 320px; + height: clamp(34px, 3vw, 46px); + width: clamp(260px, 25vw, 360px); border: 0; - font-size: 17px; + font-size: clamp(15px, 1.2vw, 18px); padding-left: 15px; background-color: #000; border-radius: 5px; @@ -182,10 +182,10 @@ body .clockbox { left: 50%; top: -10%; transform: translateX(-50%); - height: 40px; - width: 320px; + height: clamp(34px, 3vw, 46px); + width: clamp(260px, 25vw, 360px); border: 0; - font-size: 17px; + font-size: clamp(15px, 1.2vw, 18px); padding-left: 15px; background-color: #000; border-radius: 5px; @@ -203,10 +203,10 @@ body .clockbox { left: 50%; top: -10%; transform: translateX(-50%); - height: 40px; - width: 215px; + height: clamp(34px, 3vw, 46px); + width: clamp(180px, 18vw, 240px); border: 0; - font-size: 17px; + font-size: clamp(15px, 1.2vw, 18px); background-color: #000; border-radius: 5px; opacity: 65%; @@ -219,7 +219,7 @@ body .clockbox { .celsius, .fahrenheit { - font-size: 16px; + font-size: clamp(14px, 1.1vw, 17px); background: 0 0; color: #fff; border: 0; @@ -335,10 +335,10 @@ body .clockbox { align-items: center; position: absolute; left: -20%; - height: 40px; - width: 220px; + height: clamp(36px, 3vw, 52px); + width: clamp(200px, 18vw, 260px); border: 0; - font-size: 17px; + font-size: clamp(15px, 1.2vw, 19px); background-color: #000; border-radius: 5px; opacity: 0;