On a random whim, I updated this site’s theme. I kind of like this 2017 theme thingy. Well, after applying a bunch of modifications, that is…

Top menu

It’s gone. I tried adding the built in menu but it triggered a bunch of javascript craps and stuff. So I moved it to sidebar.

Header cover

The choices are either a huge cover or no cover at all. Like, what. I don’t do that full page cover crap thingy. Thankfully with a bit of css hackery I safely injected some NSFW cover.

Web font

I generally hate web fonts. Part of it is remnant of my slow internet days where it makes browsing web so annoying.

The other part is it’s loading from Google. How about no.

While the font loading is defined in the main template itself and can’t be easily removed, thankfully browsers are smart enough to not load it if it’s not used anywhere. So gone it goes. With a bit more efforts than I expected because it’s defined in various places. There’s of course the main objects ( body etc) and then there’s the input placeholders. They all must be defined separately because they’re browser prefixed and mixing them up will render the whole block invalid because it contains invalid selector.

Font selection is stolen from Twitter widget I have at the sidebar.

Letter spacing obsession and font size

Because I overrode the font, now a bunch headers look terrible. All the letter spacing which don’t look too bad in the original font, looks rather horrible with my new fonts. Off it goes. There are four places I needed to override. Hopefully there isn’t more.

The resulting texts look too small so I also had to resize them. I like how they’re so concerned about browser compatibility and have size set both in rem unit and px. Thankfully I don’t care so I defined them all in single rem unit.

Sidebar size

Lastly, the sidebar and content are defined in percent. I like having my sidebar in constant size so I overrode it with some arbitrary number (250px). In the past it’s rather difficult to have fixed size (I think) but with invention of calc(), there’s nothing to be afraid of. I just make the content width 100% - 300px (extra 50px for spacing) and the posts now have more fluid width.

Featured image header

I don’t know  what’s with the obsession with gigantic header image. This theme properly displays featured image. In full page size. I don’t even. display: none and it’s gone.

Conclusion

With a lot of effort, I turned a supposedly beautiful theme into horrible mess you’re seeing now. You’re welcome.

My day job turning a bunch of psd into css sure came in handy.