Published on: Jul 03, 2024
Whole lotta web work done today. Took out dark mode initially because it was stuck between different stages of the Astro blog tutorial. Is good now though. Thanks Joe Klaus! I still don’t like how I’m copying people for most things, but I think its unavoidable without knowing the basics. I can decipher many of the document methods for setting the dark theme, but not come up with them.
To offset that, I made a new logo, which taught me a lot about SVG files.
Here’s the process I went through. Wanted to add a dark mode using Joe Klaus’ page and required an Icon component as part of it. Could have used a picture, but heck, was a good excuse to write something and compress the Social component I had in the workbench section. In doing so, I had to convert my home picture to an SVG. Installed Inkscape, plopped the picture in and hit convert to SVG.
Doesn’t work like that though. The resulting SVG was a wrapper for the image and was barely touchable by CSS without turning ugly. Tried a bunch of different conversion methods using Path to Bitmap, but the resultant image had about 3000 points. For comparison, the dark mode palette icon has 28. Methods to combine the points looked ugly so what the heck, lets make an icon.
Got to work making an SVG. Put the original logo in and started drawing around it. Basically putting points to outline the image with the Path tool until I make a complete shape. Did that for all the major parts and put in ellipses for the eyes and head. I was hoping to make it duo-colour at this point, so the head was white to contrast the other black parts of the logo. Ideally I could invert the black and white colours in dark mode.
Alas. Having an SVG with many different paths instead of just one freaks out CSS. Trying to fill in with white only caught certain elements of the logo (like the eyes). Using filter: invert(1) as a CSS property only made it greyscale for some reason. I gave up and went to make it a mono-colour icon instead so I could just fill: white in dark mode and call it a night.
SVGs suck though. Trying to make it one colour and one path meant I had to merge all the groups together. Having a mix of filled shapes and strokes made it so that trying to merge layers together made strange jagged triangles as it tried to blend the two. Managed to combine like with like. Filled shapes with each other, and strokes with each other. From there I had two groups left. A mix of Union actions and Combine actions in Inkscape just broke it again. After some Googling. The following worked:
Ctrl + Alt + C to convert Stroke to Path; this will create a group of the two paths
Ctrl + Shift + G to ungroup
Ctrl + Shift + Plus to UnionDunno why, but I’ll take it.
In polishing the logo I figured I would wear my influences under my sleeve rather than on it. The ‘Yahtzee’ hat does look quite nice as a ‘low-detail’ hat, but the comparison’s pretty direct. Giving the bird a cap is close and looks a bit nicer with how the visual weight is managed. My loose sketch of a logo from a few years ago ends up looking kinda nice when drawn with math.
End result is a new logo that looks better and a dark mode that plays nice and doesn’t flash on reload. Nice.
As for the holiday, drove to Calgary and had a bad time getting into our house. Our Airbnb host gave us details for a house that was 10 blocks away from what was on the ad, and didn’t tell us about it being behind the main house. Turns out most blocks on Calgary have a house that is split into four.Two front houses and two basement houses, accessed from the back. After annoying our front house neighbours we eventually found it out back and got in.
Neighbours make me anxious to cause a ruckus when there’s metres of space and walls separating us in Perth. Being next to three neighbours and under them puts me on edge. One night only. Thank god.
Had some nice pho for dinner.
Back to Blog