Minor Updates - Typography

It's been over a month since I've touched this. Now that I work mostly in golang, I'm reeeally rusty with most things frontend. Anyways, my only goals for the night were to a) update the typography and b) add a basic navbar. I sincerely thought the changes would take me 30 minutes at the most. I was wrong.

So here's a recap of tonight's work:

• Browsed through some different blogs and sites, looking for some different typographies and font families.

• Downloaded the WhatFont Chrome extension to help me inspect fonts easier.

• Liked Github's font hierarchy (is that even a phrase?) the most.

• Looked up the best way to use the system-ui font and came across this awesome explanation of how to implement it.

• Tried enforcing the font-family rule from that article as I global style so I

  • brought in the emotion plugin for styling components and for the Global component
  • fought with the Global component for 30 mins.
  • scrapped the Global component and ended up just creating a top level wrapper div with those styles.

• This didn't fix all the fonts as the heading tags were still using a Merriweather or plain serif font.

• Uninstalled (npm uninstall) the wordpress typography theme that came stock with this starter.

• Realized that I could just choose a different theme from the typography.js library and that they provide a Github theme 😑.

• Installed the Github typography theme and updated the typography object (the contstructor takes a theme object that contains all the default styles)

So there was a a lot of head scratching when all I needed to do was just swap out the theme dependencies. Would have maybe taken 5 minutes.

The navbar wasn't too bad. Especially with emotion. I have a ton I can add and improve on but it's ok for now.

And now I rest.