Code cleanup and the emergency room
Tidied up some Eleventy templates, CSS, and took a trip to the ER
I had an idea of the look and layout I wanted for this blog, but I didn't do a mock in Sketch or anything. I wanted to "find" it while I was marking up the templates. It came together pretty quick. I changed the fonts a couple of times but that was about it.
But after I launched it I saw there was quite a bit I could clean up. Yeah it validated and was semantic, but there was a few things I could do better with CSS Grid..
Looking back through my notes from Rachel Andrews's workshop at Rustbelt Refresh, as well as a couple of videos from Jen Simmons and Miriam Suzanne, I quickly dumped a lot of classes and employed grid in 3 of the Eleventy templates.
My main HTML template now uses grid for its structure. The
<footer> are set as rows. With the footer always being at the bottom of the page with just four lines of CSS.
display:grid; grid-gap: 1em; grid-template-rows: auto 1fr auto; min-height: 100vh;
I have a couple of different templates at the moment, for different types of content. One for mini album reviews, one for photos, etc.
With these few lines of CSS I can get 2 columns laid out for the 'listen' type, within the grid that wraps the whole page.
display: grid; grid-template-columns: 240px 1fr; grid-gap: 1.5em; grid-auto-rows: minmax(auto, auto);
Halfway through writing this Josh came home with Julie. He had been complaining about a pain in his back in the morning. It hadn't got better with an Advil. Seeing as the local Urgent Care isn't open on Sunday, it was a trip to the ER as he was in pain walking around.
Pain pills, muscle relaxant injection, and an icy-hot patch later, he feels a little better and has a note to excuse hime from gym this week.
Hopefully that's all the excitement for the week out the way.