I have published a new design to my blog! I decided to name it Flores. It was an interesting choice, but given that I named the previous two designs Bermuda and Atlantis, after two ‘lost’ and mysterious sorts of places, I felt that Flores was a good fit. The island of Flores makes Wikipedia’s list of non-fictional lost worlds, where remains of short (a metre tall) humans and unusually small elephants were found. I find it interesting that the island is located in Indonesia, which is part of my heritage, but I had never heard of it before.

Colour and Typography

This design boasts the same teal and coral red colours, but the main change is the switch from a two column layout to a single column one. I found that – as I usually do find, actually – I did not use the sidebar as much as I had anticipated. It became more of a distraction. The homepage now serves as more of a welcoming preview of the recent posts, and individual posts have more finesse with a larger heading and images standing out slightly beyond the side margins of the content. More often these days we link to individual articles, so I thought, why not let them have all the attention? That’s why I chose to make them big and bold.

I chose to go with Fira Sans as a global font – you may recognise it as Mozilla’s official font. It was the only font that I thought went well for every component. Not too round, not too skinny, and not too light. Only the error pages have the Karla font I used to use in the navigation. I do love that font, but it was time for a change.

Main navigation

The navigation between post listings and posts has quite an interesting look on larger screens. I made small arrows in circles that display a panel when hovered over. I added what seems to be a subtle animation, but in reality it was quite a challenge to get all the individual parts of the component to work the way I wanted. I definitely spent too much time on it but I am pleased with the result.

Quite a bit of tweaking was done with the navigation to make it look a bit better on smaller screens. I did not like the way I did it previously, requiring the menu to be opened before navigating to another page. I thought about only having a few links visible on smaller screens, but that meant I had to cut down on navigation items. It was something I was thinking about anyway, I guess, so I just made all the links visible on smaller screens.

Search bar

The search bar was something I usually put in the sidebar but it needed a new spot for a single column layout. I wanted to make it a full width one like the one I did on Liz’s blog, but it didn’t look as subtle as I wanted it to because of the colours. I ended up wedging it next to the navigation links but I am not completely happy with it. I believe the search bar should be somewhere prominent.

Footer

The footer was quite fun. Following along from what I have on my personal website (it is really just a one-page CV/resume), I wanted to include my funny ‘footers are overrated’ colophon. At the same time I wanted to add some humour and not just a coloured bar with text, so I added a random quote. This is something I honestly have not done since my community-contributed projects What is Love? and Love Is…, which displayed user-submitted quotes on rotation. That was back in 2010, I can’t quite remember. Around the time, it was common for me to include song lyrics on rotation as my designs were typically inspired by music. This time, on Flores, it is really just a handful of things I have tweeted or probably said out loud.

Browser support

I chose to drop support for anything below IE10, especially since Microsoft does not support updating those old browsers. Most of the people who visit my blog use Chrome, and very few use IE at all. For this reason I used a bit of flexbox in the layout. ;)

Other improvements

Emoji

Something external but something I found could be embedded into the theme was emoji. I mentioned some time ago that Nick had helped me convert my database to the correct format so that emoji could be used. Unfortunately during a server change, the database was not moved with the correct format in mind, so all the emoji turned into question marks.

I found that I could create a function to simply replace pieces of text in my posts and comments with emoji, so I allowed simple keyboard shortcuts such as :) to translate to :) and :( to translate to :(. It’s not completely bulletproof though, as some words trapped between punctuation marks might unexpectedly turn into emoji, but for the most part, it works with a handful of combinations that I have added by hand.

Edit: It is worth noting that emoji appears differently on different computers (Apple has the original coloured ones, Windows has it appear the same colour as the text), and that some ‘newer’ emoji (for those who are familiar) won’t display on Windows. It’s something I can change if it ever becomes a huge problem. I was simply hoping to avoid using a plugin for emoji.

Tags

I converted all the categories of friends’ names to be tags instead, for example Lilian. I haven’t changed Nick to a tag instead of a category yet though… :P I also made sure a description was visible on the tag landing page.

On GitHub

I have actually been working on this design since late last year. It was just sitting in the works, really. I didn’t think it would take that long to do but there were lots of little bits and pieces that I came up with, just when I thought I was done.

I have been maintaining version control with Git but the hilarious thing is that I didn’t want to push all 50 of my commits related to this theme until today, just in case someone was snooping. Either way, you can checkout the source code for this theme on GitHub. There are still some things hard-coded, I know…

Bugs

There are probably bugs, and I will not be surprised if there are bugs on old pages and posts. I’m sure very few people will look at those, though. I’ve already spotted the checkbox in the comment form… but let me know if anything else needs fixing. :)

I was going to put some screenshots of the various changes but I figured it would be better for a user to experience it. All the changes are there, after all!