Another website update

After another five years, I’ve updated the main site theme again. I did fiddle with various aspects of the prior design over the years, including changing the sidebar from green to black, adding different elements to it, and changing the “logo,” but the primary structure of the site and theme remained the same.

Final version of the previous site layout.

But the asymmetry of the old design was beginning to feel more unbalanced and weird to me. There were also various other updates I wanted to make, too, so I figured I might as well address as many things as possible at once.

Theme base

The new theme is based off Donovan by ThemeZee, which is nice and simple while still having some pretty cool built-in customisation features. I really like its blog index display options in particular, since I’ve wanted to condense the index so more entries are visible at once for quicker browsing. Also great: built-in toggle to hide featured images from the top of individual posts while using them in the index. (I didn’t have featured images enabled for a long time since index-display of posts was truncated by manual “read more”s, but now that it uses excerpts instead, setting the featured image is important.)

I didn’t opt for the pro version of the theme and just built all the other bits I wanted myself, such as the widget-enabled footer. For the most part though, my edits were just to ensure compatibility with my custom post types (portfolio items and comics), redoing some templates for those post types, and various CSS tweaks.

It’s dumb to me that custom post types are defined on a by-theme basis? I don’t know why WP doesn’t just have them as built-in functionality. I guess it’s because themes wouldn’t necessary support them, but they could just default to a post template. I guess it’s probably not worth complicating the backend for the layperson though. Hmm.

Blog index of new theme, based off Donovan.

Gutenberg blocks

WordPress 5.0 in December 2018 introduced Gutenberg blocks. I hated them. The Classic Editor plugin has served me well in the time since, but I’ve been waiting and hoping for the blocks to get better.

Sadly, I still find them infuriatingly clunky to use in their quest to be simple. This is my complaint with virtually every web-builder interface though, both on and off WordPress — all of them endeavour to be drag-and-drop, but dragging and dropping never work smoothly. Layout blocks are hard to select and delete, and the most basic of functions are stupidly difficult to find and perform. I really hate the icon-heavy “minimalist” interfaces and don’t find them intuitive at all.

It’s a shame because I think one of the biggest advantages of blocks is built-in mobile responsiveness. Gutenberg blocks rearrange themselves for mobile without the need for manual handling, which is especially helpful any time you want to display things in columns on desktop. But maybe the problem is just me still building with a desktop-first mentality despite Google demanding mobile-first approaches and analytics indicating that site traffic’s an even split between desktop and mobile users (with a negligible percentage on tablets).

I fiddled around with building pages in Gutenberg while I worked on the site remodel. I liked resulting pages well enough, the process was just so immensely frustrating. Block formatting is unintuitive at best and utterly broken at worse. There’s a classic block, but the UI for the classic menu that should be attached to it just shows up at random, so you have to actively fight it to get it to do what you want? I hope someday the UI for using Gutenblocks won’t be totally rage-inducing for me, but I’m not holding my breath.

Thankfully though, even when the Classic Editor plugin is enabled, existing Gutenblocks are retained and rendered, so I ended up using Gutenblocks on several pages I felt would benefit from it, then switched back to Classic enabled as the default.

With Classic enabled, Gutenblocks look like this in HTML: a far easier format for me to do line edits in anyway. Go figure.

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":8392,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://kiriska.com/wp/wp-content/uploads/2018/10/Mew-web.jpg"><img class="wp-image-8392" src="https://kiriska.com/wp/wp-content/uploads/2018/10/Mew-web.jpg" alt="" /></a>
<figcaption>Primordial Soup. Ink, marker. February 2019.</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:html -->
<p style="text-align: center;"><a class="button" href="https://store.kiriska.com/product/primordial-soup/" target="_blank" rel="nofollow noopener noreferrer">Purchase prints</a> <a class="button" href="https://store.kiriska.com/product/primordial-soup-original/" target="_blank" rel="nofollow noopener noreferrer">Purchase original</a></p>
<!-- /wp:html --></div>
<!-- /wp:column -->

Portfolio display

Lightbox as a primary method of art display really needed to go. It was weird on mobile and I didn’t like how it constrained images to the size of screens with no option to enlarge further, especially since lightbox in conjunction with the portfolio plugin made opening the image in a new window weirdly difficult on desktop.

I also wanted to move from having all individual pieces displayed together (even by category) to having related pieces filed together on their own page. Having a static page would also give me a better place to include shop links to prints and originals for the pieces that had those available.

One of the reasons I ended up half-using Gutenberg blocks was because I have so many diptychs. Obviously, I wanted to display them side-by-side on desktop, but hell if I was going to manually handle cascading them into a stack for mobile. One thing I don’t like about the classic editor is definitely the difficulty of assigning custom CSS classes to objects without delving into HTML view, so that Gutenberg would handle mobile gracefully as a default was incredibly enticing.

Static page for a diptych in portfolio.

I haven’t gotten rid of lightbox entirely… it’s still the default for enlarging pieces, though now that pieces are all on their own page, most of them are already displayed at full size on desktop. It really only comes up in blog posts and a few comics. (Lightbox, of course, does nothing to show an enlarged image on mobile, but you can at least open it in a new tab more easily now.)

Comics

Not much changed here from a technical standpoint, but I finally added most of my more recent casual comics to this part of the site, as well as some guest comics from a while ago.

I’ve gone back and forth on whether I wanted to keep this section of the site at all. I haven’t worked on a “real” comic in a while, and most of the recent strips are really dumb? Are in a totally different style? And don’t fit with anything else I do? They don’t feel like they really belong, but I wanted to have those strips collected somewhere other than random social media, so here they are.

Since many of the recent strips are in a long vertical format (haha, mobile-first), which are absolutely awful for lightbox, I just stacked and displayed them all full-size on the page. This isn’t an ideal solution since I think it makes browsing difficult, but it’s good enough for now. I’d rather not spin these off onto their own site, which is probably the “better” solution.

All of the “proper” comics still use lightbox for the full size for now, but I might change them to the stacked format at some point, too. Mulling it over…

That’s it!

I’m sure I’ll continue making random tweaks to this as they occur to me, and there are still lots of technical improvements I could make to the site (image compression is a big one, sigh). But it was nice to sit down with a project and work relatively steadily from beginning to end. A fun distraction from being quarantined. 🎉

(Naturally, 30 minutes after publishing this post, I change all the white backgrounds to an off-white and throw another chrysanthemum in the header. ¯\_(ツ)_/¯ )

Home page with the new theme.