Blogger CSS Grid Responsive Layout

Yeah, a post about how to build a blog. Because owning a blog means that at least 20% of your posts need to be about the tech used in it's own creation. But this one is different. It's the tech used to upgrade a legacy Blogger site to a more modern responsive layout 😃

Why?

Well, while simultaneously an item of pride and embarrassment, I've had this Uncommented Bytes blog running for 17+ years somehow. (And more like 18-19 years but I lost the first bit of it when jRoller, the best hosted blog engine, went under and required the original migration to Blogger.) 

I wrote a post for the first time in a while, and was pretty annoyed with how it looked on mobile

https://twitter.com/sheetsj/status/1352434228483514371

I originally had a green-ish theme, and thought I'd tweak it to be responsive. But even though it was simple-ish, it was using some images for backgrounds and shading that were just overwhelming to try to update in the super-wordy blogger html template. (look at that beautifully retro Google+ link)

https://web.archive.org/web/20181227163052/http://uncommentedbytes.blogspot.com/

So I decided to "upgrade" to a cleaner look theme in Awesome, Inc --- which despite the genius name, was lacking in a couple areas:

1. Fixed margins -- meaning not responsive to browser width
2. No mobile friendly view -- mostly because it wasn't responsive, but also because I had used a Blogger switch to render a super generic mobile view too (which I think was triggered by user agent headers, yikes)
   

How?

Trial-and-error isn't fun to describe, especially when it mostly involves browser devtools CSS hacking. But basically I took the super-wordy HTML template and hacked in some CSS Grid layout. 90% of the hack-magic was accomplished with this bit:

        div.content {
            display: grid;
            gap: 20px;
            grid-template-areas:
                "header"
                "content"
                "sidebar"
                "footer";
            max-width: 100vw;
            margin: 0 auto;
}

Plus a tiny bit of responsive handling:

        @media (min-width: 800px) {
            div.content {
                grid-template-columns: 2fr 1fr;
                grid-template-areas:
                    "header header"
                    "content sidebar"
                    "footer footer";
            	max-width: 1280px;
            }
        }
        @media (min-width: 1024px) {
            div.content {
                grid-template-columns: 4fr 1fr;
            }
        }
        .gist .blob-code-inner {
            white-space: pre-wrap !important;
        }

And the last 10% was a few margin and padding tweaks sprinkled in other places. You can see the full code in my Github blogger-css-grid-layout project. And just in case I redesign again in the future, the full inception final product looks like this today: