Merge pull request #33 from ok2/codex/fix-text-position-on-analog-clock

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);
 }