2023-10-07 21:05:54 +00:00
|
|
|
# \<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
|
No longer automatically download external font, holidays and centaurs
This commit now makes the download of the Google-provided font opt-in,
rather than automatic. This is preferable, as most people wouldn't
care to have Google automatically know they're running this thing. For
modern browsers that understand CSS `::part()` syntax, this commit also
provides a way for them to specify exactly what font they want, and an
example of that is provided in the `./demo` folder.
There are a number of minor details in the Journal Entries that reflect
the growth and change of the culture. One was that several of the species
introduced, including Centaurs, Tindals, Felinzi and Uncia, had their
own language, and Centaurs had their own calendar. Most fell off as
use of the common Quen made everything easier, and Uncia found Felinzi
easy to learn and use and gave the felinoid species a common tongue that
worked well with their mouth and throat shapes. But I've added the
Centaur calendar. Use the flag attribute "centaurs" (no arguments,
it's a flag) in the component's HTML tag to see it. Again, the use
can be seen in the demo folder.
I've also fixed a bug where the holidays, which belong to no month and
have no weekday, are also rendered correctly.
2023-10-08 17:44:48 +00:00
|
|
|
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:
|
2023-10-07 21:05:54 +00:00
|
|
|
|
|
|
|
``` 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);
|
2021-11-16 03:41:26 +00:00
|
|
|
```
|
|
|
|
|
2023-10-07 21:05:54 +00:00
|
|
|
This is mostly my set-up these days, complete with the hard-core `lint:hard`, Codespell, and
|
|
|
|
automatic Prettier.
|
|
|
|
|
No longer automatically download external font, holidays and centaurs
This commit now makes the download of the Google-provided font opt-in,
rather than automatic. This is preferable, as most people wouldn't
care to have Google automatically know they're running this thing. For
modern browsers that understand CSS `::part()` syntax, this commit also
provides a way for them to specify exactly what font they want, and an
example of that is provided in the `./demo` folder.
There are a number of minor details in the Journal Entries that reflect
the growth and change of the culture. One was that several of the species
introduced, including Centaurs, Tindals, Felinzi and Uncia, had their
own language, and Centaurs had their own calendar. Most fell off as
use of the common Quen made everything easier, and Uncia found Felinzi
easy to learn and use and gave the felinoid species a common tongue that
worked well with their mouth and throat shapes. But I've added the
Centaur calendar. Use the flag attribute "centaurs" (no arguments,
it's a flag) in the component's HTML tag to see it. Again, the use
can be seen in the demo folder.
I've also fixed a bug where the holidays, which belong to no month and
have no weekday, are also rendered correctly.
2023-10-08 17:44:48 +00:00
|
|
|
## 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;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
|
2023-10-07 21:05:54 +00:00
|
|
|
## 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.
|
|
|
|
|
2021-11-16 03:41:26 +00:00
|
|
|
|
2021-11-16 03:27:41 +00:00
|
|
|
|