doctype
head
meta(charset='utf-8')
meta(http-equiv='Content-type' content='text/html; charset=utf-8')
title timezone-analog-clock
meta(name='viewport' content='width=device-width, initial-scale=1')
link(rel="stylesheet" href="./style.css")
//- script(async src="./script.js")
style.
*{margin:0;padding:0}
/*@media (prefers-color-scheme: light) {*/
@media (prefers-color-scheme: dark) {
html,body{ background: #111; color: white; }
}
.clock-wrap-center {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}
.clock-wrap {
width: 500px;
aspect-ratio: 1;
border-radius: 50%;
border: 5px solid red;
/* for testing: */
background: gray;
}
.clock-hand-second {
/* the line */
border-top: 1px solid lightgreen;
width: 200px;
}
.clock-hand-second.p-absolute {
inset: 50%;
}
.p-relative { position: relative; }
.p-absolute { position: absolute; }
.clock-hand-minute {}
.clock-hand-hour {}
h1.sr-only timezone-analog-clock
.clock-wrap-center
.clock-wrap.p-relative
.clock-hand-second.p-absolute
.clock-hand-minute.p-absolute
.clock-hand-hour.p-absolute
script.