Add brand label to analog clock

This commit is contained in:
Kiyomichi Kosaka 2025-06-15 01:14:37 +02:00
parent 1398c52e44
commit b96f402fc5
2 changed files with 15 additions and 1 deletions

View File

@ -6,7 +6,7 @@
<meta name="format-detection" content="telephone=no">
<title>CoBiE Time System Calendar</title>
<!-- Orbitron provides a high-tech, futuristic look for the analog clock markers -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
@ -31,6 +31,7 @@
<div class="hand chronon" id="handChronon"></div>
<div class="hand quantic" id="handQuantic"></div>
<div class="hand xeno" id="handXeno"></div>
<div class="clock-label">CoBiE Time</div>
</div>
</div>
</div>

View File

@ -410,6 +410,19 @@
z-index: 2;
}
.clock-label {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
font-family: 'Great Vibes', cursive;
font-size: 1.4em;
color: #ffaaff;
text-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
pointer-events: none;
z-index: 0;
}
.marker {
position: absolute;
width: 2em;