Ordinarily you want a simple website that doesn't waste frills.

But even more than this one, Technopagan Yearnings is designed to be messy and friendly. Teknologi is a three ring binder stuffed full, but TPY is a room full of bookshelves and cabinets. You never know what is there. So today I thought I'd talk about how the link behavior gives the site personality.

The default link changes the font color. When you hover over the link, the background color of the link changes slightly. Because that background color, I had to create a version that eliminated it for picture links.


The default works pretty well for external links with two simple variations.


I use this variation in my lexicon entries, it just makes the link more noticeable. Here's an example.. The second variation, that's when things get interesting.


That's what I use when I make book links to GoodReads. Here's an example. This is the same as the offsite link, except it makes the title italic. Hover over the title, and the italic becomes normal.

Link rot with external links can always be a problem. Particularly when I use personal websites that might not always be around or the information has been rewritten for political reasons. That doesn't mean the original citation is wrong, it just means that someone decided to shift emphasis. Here is an example.


The bad link is hard to read with a strikethrough. Hover over it and it shrinks/changes color as if to say "No, don't click on me! I don't want to! I don't work anymore!" The original link is still there, and can be copy/pasted.

Most TPY in-site links are underlined. But there are exceptions. The one that took me the longest is the button.


You can see the buttons all over the lexicon and in the lexicon section of the sidebar. As long as you don't hover, it sort of blends quietly in the background. But hover over it, the lettering leaps out and the background color changes to Technopagan Green.. Instantly you can tell that this does something. Most people never notice, but the button changes when you click it. It becomes a border with transparent background, and the lettering shifts to green instead of white.

Then there is the standard in-site links. This is where the underlining shows up.


But hover over it, and things get interesting. The link grows in-size and gets bolder. It's almost to say "click me, I can do it!" Here's an example that shows the timetable version.


Anything that links to the timeline gets a bolder script font. The rest of the behavior is the same as the default internal links.

Lexicon links have two kinds. Here's an example of the first.


This creates a rounded button around the link. It capitalizes the text. Hover over the text and it gets bolder, bigger, and loses the extra capitalization.


The second lexicon variation doesn't have the button. It acts as a standard internal link except the letters are capitalized.

Summing up, Image links don't have a color changing background. Broken links are coded to tell people they don't work. Internal links are underlined until you hover over them, then they lose the underline and get bolder and larger. Timetable links are internal links with script text. Lexicon links are internal links with capitalized text, hover over them and they lose the capitalization.