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:
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:
<pendor-clock with-internal-font></pendor-clock>
Along with the CSS Custom Attributes, there is only CSS target within the clock: '<div part="clock" />'. 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.
@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;
}
LICENSE
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.