From 3db31682b9bcffece6e7e402e3bf1457f122fe5e Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sun, 15 Jun 2025 09:37:11 +0200
Subject: [PATCH] fix clock label responsiveness

---
 style.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/style.css b/style.css
index 90a4c6e..d4d9476 100644
--- a/style.css
+++ b/style.css
@@ -376,9 +376,11 @@
   gap: 20px;
 }
 
+
 .analog-clock-container {
+  --clock-size: 40vmin;
   flex: 0 0 auto;
-  width: 40vmin;
+  width: var(--clock-size);
   margin-left: auto;
   display: flex;
   justify-content: center;
@@ -387,8 +389,8 @@
 
 #clock {
   position: relative;
-  width: 40vmin;
-  height: 40vmin;
+  width: var(--clock-size);
+  height: var(--clock-size);
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   background: radial-gradient(circle at center, #0a0e27 0%, #1a1f3a 100%);
@@ -416,7 +418,7 @@
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Great Vibes', cursive;
-  font-size: 2em;
+  font-size: calc(var(--clock-size) * 0.08);
   color: #ffaaff;
   text-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
   pointer-events: none;
@@ -424,7 +426,7 @@
 }
 
 body.fullscreen-clock .clock-label {
-  font-size: 3em;
+  font-size: calc(var(--clock-size) * 0.08);
 }
 
 .marker {
@@ -512,11 +514,12 @@ body.fullscreen-clock .time-display {
 }
 
 body.fullscreen-clock .analog-clock-container {
-  width: 80vmin;
+  --clock-size: 80vmin;
+  width: var(--clock-size);
   margin-left: 0;
 }
 
 body.fullscreen-clock #clock {
-  width: 80vmin;
-  height: 80vmin;
+  width: var(--clock-size);
+  height: var(--clock-size);
 }