Sketchbook, pencil and colour swatches on a pink background.
Photo by Keila Hötzel on Unsplash

Little blog design updates

I had a little time to start going through the list of small updates I wanted to do to this blog. I updated the site settings schema (in the same way I added category pages outlined in this post) to add a site logo. I wanted a logo in the top corner, along with my name.

I imported the handwritten-style font Sue Ellen Francisco from Google fonts. I like the style of this font for the blog title - it reminds me of a signature and gives an element of personality, which is otherwise quite difficult to convey in a digital context!

I also moved the tagline to the footer, as it looked too crowded in the header. This also uses the handwritten font, but pulls the highlight colour to add a little interest. It's like a little Easter egg down there for readers to find if you make it all the way to the bottom of the page.

This all involved a small amount of reshuffling, making sure that the components all pulled in the required variables. The container layout.js is where the site title query is. I'm using GraphQL here which is actually super intuitive and predictable, and if you've ever used a query language before, it won't be difficult to pick up.

To do list

So here's the things I want to add next:

  • separate out the emoji icon and category title (to be more flexible in usage)
  • create a dynamic nav to generate based on categories
  • generate related posts for a section at the end of each blog post (will this article help?)
  • add a favicon using a favicon generator (and checking out this article about adding favicons to gatsby sites)
  • add social icons linking to my pages
  • add social sharing icons on each blog post page
  • create blog-wide search functionality
  • customise a block within the portable text component to style code
  • allow for inputting HTML into posts - for example embedding iframes and YouTube videos

I'm sure I'll come up with more soon, but this is enough for the first steps.

Check back soon to see how these get implemented!

A little digital blog, by a little analog person

© 2021 Ashley Chin