Lexicon 3 and timetable 2 for TPY
Sunday, 29Apr2018 Filed in: Webmaster
I've been taking some quiet time and revamping Technopagan Yearnings. You may remember that I ran into a problem with version 2 of the lexicon. I had recently discovered modal dialogues and I didn't realize that most browsers don't want too many modal dialogues on a web page. Since I was going to have one modal dialogue for every letter and one for every entry, well, the pages crashed when I tested them with my iPad.
Obviously I was going to have to do 27 pages, an index page and a page for each letter. That meant just one modal box per page. But part of what I wanted was the linking text for each definition. And I wanted the buttons to look good.
I took a version of my greenbar and put it under each definition. Then I needed to change the color to show better. And that is where I discovered that there's a limit to the number of text colors you can use in pseudo classes. So I eliminated the link at the page top label.
I messed with the indicta buttons, going through about seven versions. And none of them looked or worked quite right. Of course I had loaded about six versions, but it still didn't work.
Without the greenbar, I needed to find something else for the link text. It struck me that it was a shame that I just couldn't use the emphatic class and take out the italics. And then I wondered, why couldn't I?
That's when it hit me that I had already designed a button link pseudo class that looked pretty good. If I put non-breaking spaces and changed the indicta to index, it just might work.
And it did.
Version 3 uses the same revised blockquotes that version 2 did. One for definitions that I wrote and one for definitions I quoted. Each uses a separate font for the definition. The really fun bit was that the code on these boxes was pretty much identical, I just changed the blockquote class "defbox" to "defbox2" and the internal div class "mydef" to "def."
There is a variant for the "warning" words, a extra "caution" blockquote that put a dashed line around the other blockquote. These are either dangerous ideas or ideas I don't agree with. I had changed the text to red, but I decided that wasn't enough of a visual sign for someone who might be colorblind. I changed it to white letters on a red background. The link version took a bit of tweaking. Then I dialed back the red to a brick red that worked with my other colors.
External links were already taken care of, but I had three versions of internal links. One for lexicon links, one for the timetable, and one for specific blog posts and tag pages. The lexicon links were easy, I just created a new span class that made the link label UPPERCASE. The blog and tag links were already covered by my modified link, the link label was underlined and it got bigger and bolder when you put a mouse over it. I was already using a script for titles and headings on the timetable, so I used that span class for those links.
So it ends up like this. A regular link changes background color on hover. An internal link loses it's underline and grows on hover. A lexicon link changes from all uppercase, loses it's underline, and grows on hover. A timetable link is in script and loses it's underline and grows on hover. Four types of link that visually differentiate from each other.
One of these days I need to go in and change the headings and tags so they become internal links, but not today.
Speaking of the timetable, I've been meaning to take it out of Stacks and change it to regular CSS. It's easier to modify that way. So I did. I put a div at the top of the page with a brief explanation, and put everything else in two columns. That meant I had to put the moon phases under the calendar symbols. So I through in a "calendar symbols" and a "moon phases" link in the sidebar. I still need to make the internal divisions non-breaking, but that is a minor fix.
Back to the lexicon. There are some words that I'm listing, but those basically are synonyms for other words. So they don't get there own blockquote. While I mention those in the synonym with the rest of the see alsos, they won't have links.
Obviously I was going to have to do 27 pages, an index page and a page for each letter. That meant just one modal box per page. But part of what I wanted was the linking text for each definition. And I wanted the buttons to look good.
I took a version of my greenbar and put it under each definition. Then I needed to change the color to show better. And that is where I discovered that there's a limit to the number of text colors you can use in pseudo classes. So I eliminated the link at the page top label.
I messed with the indicta buttons, going through about seven versions. And none of them looked or worked quite right. Of course I had loaded about six versions, but it still didn't work.
Without the greenbar, I needed to find something else for the link text. It struck me that it was a shame that I just couldn't use the emphatic class and take out the italics. And then I wondered, why couldn't I?
That's when it hit me that I had already designed a button link pseudo class that looked pretty good. If I put non-breaking spaces and changed the indicta to index, it just might work.
And it did.
Version 3 uses the same revised blockquotes that version 2 did. One for definitions that I wrote and one for definitions I quoted. Each uses a separate font for the definition. The really fun bit was that the code on these boxes was pretty much identical, I just changed the blockquote class "defbox" to "defbox2" and the internal div class "mydef" to "def."
There is a variant for the "warning" words, a extra "caution" blockquote that put a dashed line around the other blockquote. These are either dangerous ideas or ideas I don't agree with. I had changed the text to red, but I decided that wasn't enough of a visual sign for someone who might be colorblind. I changed it to white letters on a red background. The link version took a bit of tweaking. Then I dialed back the red to a brick red that worked with my other colors.
External links were already taken care of, but I had three versions of internal links. One for lexicon links, one for the timetable, and one for specific blog posts and tag pages. The lexicon links were easy, I just created a new span class that made the link label UPPERCASE. The blog and tag links were already covered by my modified link, the link label was underlined and it got bigger and bolder when you put a mouse over it. I was already using a script for titles and headings on the timetable, so I used that span class for those links.
So it ends up like this. A regular link changes background color on hover. An internal link loses it's underline and grows on hover. A lexicon link changes from all uppercase, loses it's underline, and grows on hover. A timetable link is in script and loses it's underline and grows on hover. Four types of link that visually differentiate from each other.
One of these days I need to go in and change the headings and tags so they become internal links, but not today.
Speaking of the timetable, I've been meaning to take it out of Stacks and change it to regular CSS. It's easier to modify that way. So I did. I put a div at the top of the page with a brief explanation, and put everything else in two columns. That meant I had to put the moon phases under the calendar symbols. So I through in a "calendar symbols" and a "moon phases" link in the sidebar. I still need to make the internal divisions non-breaking, but that is a minor fix.
Back to the lexicon. There are some words that I'm listing, but those basically are synonyms for other words. So they don't get there own blockquote. While I mention those in the synonym with the rest of the see alsos, they won't have links.
blog comments powered by Disqus