64 lines
2.4 KiB
Markdown
64 lines
2.4 KiB
Markdown
# \<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](https://pendorwright.com/journals). 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](https://en.wikipedia.org/wiki/Java_applet) (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](https://fonts.google.com/specimen/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 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.
|
|
|
|
``` 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;
|
|
}
|
|
```
|
|
|
|
|
|
## LICENSE
|
|
|
|
The Pendorwright Clock is Copyright [Elf M. Sternberg](https://elfsternberg.com) (c) 2023, and
|
|
licensed with the Mozilla Public License vers. 2.0. A copy of the license file is included in the
|
|
root folder.
|
|
|
|
|
|
|