kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix clock label responsiveness

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 09:37:11 +02:00
parent f97e99db1f
commit 3db31682b9
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
style.css
View File

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