64 lines
2.4 KiB

# \<pendor-clock>
Way back at the dawn of the Internet, I started writing (and sometimes still write) a long-running
adult space opera serial called [The Journal Entries]( One of the
conceits of the series in that the distant world of Pendor was built and terraformed to have a
30-hour day, but its years and Terra's years are of exactly the same length. A 30-hour day has a
different calendar, and one of the very first [Java
applets]( (remember those?) I wrote was a clock that
showed the time of day on Pendor.
This is the Pendorclock, but modernized into a custom Web Component, capable of running in any
browser without your needing to do anything at all to make it work correctly.
The following CSS Custom Attributes are exposed and you're free to change any of them:
``` JavaScript
background-color: var(--pendorclock-background-color, #000030);
color: var(--pendorclock-color, #ffffff);
font-size: var(--pendorclock-font-size, --default-font-size);
line-height: var(--pendorclock-line-height, 1.35);
font-weight: var(--pendorclock-font-weight, 700);
This is mostly my set-up these days, complete with the hard-core `lint:hard`, Codespell, and
automatic Prettier.
## Options
The clock has a single configurable attribute, `with-internal-font`. Setting that will cause the
component to use the Google Font [Audiowide](, which,
while stylish, is not the original font from 1993, which was Bitwise. Using it is just like using
any boolean attribute in HTML:
``` html
<pendor-clock with-internal-font></pendor-clock>
Along with the CSS Custom Attributes, there is only CSS target within the clock:
'<div&nbsp;part="clock"&nbsp;/>'. Using that target it is possible to use any font at all for the
clock by providing some additional CSS to the host page. This can be seen in the demo-with-font.html
file in the demo.
``` css
@font-face {
font-family: "Bitwise";
font-style: normal;
font-weight: 400;
src: url("./Bitwise.woff2") format("woff2"), url("./Bitwise.ttf") format("truetype");
pendor-clock::clock {
font-family: Bitwise;
The Pendorwright Clock is Copyright [Elf M. Sternberg]( (c) 2023, and
licensed with the Mozilla Public License vers. 2.0. A copy of the license file is included in the
root folder.