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