Elf M. Sternberg
3e91b9498a
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. |
||
|---|---|---|
| .storybook | ||
| build-modern | ||
| demo | ||
| src | ||
| stories | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .eslintrc.precommit.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.json | ||
| LICENSE | ||
| LICENSE.md | ||
| README.md | ||
| package-lock.json | ||
| package.json | ||
| rollup.conf.js | ||
| tsconfig.json | ||
| web-dev-server.config.mjs | ||
README.md
<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.