This blog, at least how it was is generally bland. It is basically just a way to read text. I understand basic customization, and I'm willing to figure out some CSS and JavaScript if it would make my site prettier, but I didn't know where to start.

Finding a Direction

As an empty blog, I want this not to be just another way to read text, I want it to feel like me. I haven't spent the time looking through old images quite yet, but I do want to add images to posts, and I want all of this to stay low friction. Having 11ty generate the images is a surefire way to keep it simpler than having to set up the html for every single page.

I don't consider myself very creative, so I got one of my friends, Aqua who does graphic design to give me a mockup of what the website could look like. Of his main ideas were adding icons instead of buttons to navigate the site, show my profile more, and adding a background that was more my style to add some personality into the site.

The idea that stuck out to me the most was adding a background to the sides of the site. In its current form I had all the content on the center of the screen, on desktop, this leaves a ton of empty space on the sides.

Getting a Background

First I had to find a background I wanted to add. Aqua came up with the idea to use something from a game I enjoy. An old animated wallpaper of the ocean in an old Pokémon game, Pokémon Mystery Dungeon: Explorers of Sky, looked perfect. If able, it was going to be animated on the page, creating life in a static html page.

To get this in a form where it could be used on the website, I went and cropped the gif to work well for the sides, being thin horizontally and tall vertically. I uploaded this to the server, and now I just had to implement the gif.

Adding the Background

Now that I had one in the site, I simply had to add it in CSS.

I won't bore you with the code, if you want to use it or look at it, you can find it in developer tools.

Basically I have the ocean pixel art load on the left side of the page, and the right side of the page mirrored. While this at first had some small issues with the light mode and blur, I eventually was able to figure out that if I scaled the image up, it would fix any issues along the border of the site.

Down the Rabbit Hole

The rabbit hole, making the feature toggleable, and mobile responsive.

To make the toggle, I used the same code I had for the brightness toggle. I changed some variables and made it so the background would not display if toggled off. This took longer than I ever would have expected, as it was so fiddly to get correct.

Next I had to fix the problem of phones. Mobile devices don't have the free space desktops do. So in my code I added a rule, that if the device's resolution is thin enough, it should not display the background, or the button to toggle the background. This makes the site nicer on desktop, but doesn't introduce any issues in the style and focus on mobile.

Here is the current updated version of the blog now

Acknowledgments

Shoutout to Aqua, who gave me the idea to add a background on the sides of the site.