CSS is fun!

This post demonstrates custom CSS that won’t display in RSS readers.

One of the things that Cohost taught me is that CSS is actually fun. Styling a website is a really lovely form of self-expression and I have been really enjoying styling this this website¹. And I thought I’d highlight some of the things I’ve done.

Colours

The site has two different colour schemes for dark mode and light mode. I much prefer the dark mode one but I generally use dark mode for everything I can. The dark mode has a cool, blue palette while the light mode uses a warmer colour scheme with oranges and peach colours. Most of the colours I used are picked from the Pico-8 palette.

There is a gradient as you scroll down the page in both colour schemes ending in a different footer images². In dark mode stars also come out as you scroll down.

Links

External links and internal links have different colours³ and also some links have special decorations. If I link to the atom feed for the bog or my page about Snolf they have little Nintendo dialogue icons appended to them or if I link to Transy it uses the typeface that she talks in: Hobo.

This applies whenever those specific things are linked to and I don’t need to do anything special with this post to apply them.

Cursors

The site also has custom cursors based off of old Windows cursors. If you mouse over the above links you might have noticed that there are also different cursors depending on what type of link they are.

Fonts

For the Irish language portions of my site I use Mínċló GC from Gaelċlo instead of Crimson Text which is used for English text. I also use it for the title of The Bog because using silly fancy text for headings is fun. Other examples: Gallery pages use Tate Regular, collect my pages is Slender and a bunch of other fonts I use for titles on my homepage are references to Sonic the Hedgehog because of course they are.

Buttons!

The most important part of any site is 88×31 pixel buttons, obviously, to which I have a crippling addiction. I’ve copied some CSS from Hyphinett to embiggen them when you mouseover them and also set rendering mode to pixellated to keep them nice and crispy.

If you have your browser set to prefer reduced motion the mouseover effect is disabled and all the animated buttons are replaced with static ones.

For sites that don’t have buttons I use a little 88×31 image of a little piece of paper that I tore up with the names rendered on top slightly askew in Cinema Calligraphy.

Layout

The homepage divides into multiple columns depending on the screen width. Other pages generally have a single-column layout with navigation elements on either side that collapse to the top of the page if the screen is narrow enough, like on mobile. The avatar for the bog also snaps to the top on narrow screens and otherwise sits beside posts and scrolls with the page.

Gallery exhibits

Gallery pages have sets of links next to/under the title that all change to the site’s link hover colour when mouseovered. This applies is applied to images using a combination of -webkit-filter sepia and hue-rotate. This also changes with light and dark mode. Projects with git repos have an icon here that expands into an info box with the git repo address.

And sometimes I just do little bespoke things for pages, such as the vertical ogham text on the Cló Piocó-8 page. Trivia: ogham is one of the few scripts that is written bottom-to-top.

Printing

I also have some custom CSS for printing. I don’t really plan on printing pages from this site nor do I expect anyone else to, but it was fun to play with. Colour is drained out of styling to save on coloured ink, links are instead underlined and the addresses they point to appended after them in brackets. Videos and audio players are hidden, the link icons in gallery pages are turned into a bullet point list under the header and the comment box is hidden.

When there’s no CSS

Printing is just one alternative way I like to think about how my site could be displayed. While I don’t test the site with Netscape Navigator⁴, I do read back over posts in my RSS reader and sometimes check the site in the terminal-based web browser Lynx.

Again I don’t really expect people to be navigating this site in the terminal but it does make me mindful of how the site functions in terms of pure HTML content elements without the fancy styling and I think it’s important to keep it understandable and navigable in that mode too. That is how the site is going to be parsed by accessibility tools. I also try to have as little Javascript involved as possible as well and not use it to render page content⁵.

At the top of this post there is a little infobox warning. There is CSS to make this eye-catching but it’s also defined as an <b> element so that even in the absence of CSS it will display bold and be a little attention-grabbing.

On gallery pages, and especially on podcast episode pages, there is a credits/links section at the bottom of the page in smaller text. There is a heading about this section saying “Credits” but it’s hidden by CSS as I thought the page flowed better without it. It’s still there for if the page is being read without CSS and the styling can’t be used to differentiate it as a separate element from the main page text as clearly.

I used to some invisible horizontal rules across the page, set to not display using CSS, that would divide the header and footer of the site from the main content to try and make it read cleaner in situations where there was no CSS. That was before I simplified the site layout somewhat and took out the more divided header and footer areas with links in them that the site used to have.

Conclusion

That’s all that I can think of off the top of my head. Bye.