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

Merge pull request #31 from ok2/codex/add-time-system-label-to-analog-clock

Browse Source 
Add label inside analog clock face
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 01:14:48 +02:00 committed by GitHub
commit 0b79476e30
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
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>

13
style.css
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;