Commenting On.

So, I've stepped into the wild world of blogging. I've tried paper journaling, trying my hand at journaling, but not everyday is a blockbuster movie, and sometimes my life's just stuck in an infinite cycle of the mundane. And if writing and grammar were my parents – they orphaned me at birth.

Thankfully, I'm infinitely curious, and anything can hook me. That's the why I started this blog – to splash down my thoughts onto a blog for the web to see. I'm hoping through brute-force, my writing levels up to a fifth-grade essay.

---

Alright, let's dive into the title of this post; the writefreely theme I've crafted for this blog. I so badly wanted a “gruvbox-dark” based theme. When I realized there were none, I knew there was no one to save this damsel. So I decided, “I'll do it my self!”.

This is the legendary gruvbox theme

But that was ambitious – like, I'm not versed in CSS at all. It feels like trying to decipher a secret code. I've spent a good amount of time trying to grasp the writefreely's template instructions. I can tell the wording was clear as day, but my mind refused to understand the tongues it was whispering to me.

Adding to the complexity, write.as has its own way of handling themes. Some of the usual CSS tricks don't seem to work quite right on this platform.

Still, I managed to wrestle the theme into some form of submission. The trickiest parts were getting the main body text and the footer that says “published with write.as” to cooperate. The body text, in particular, proved to be quite stubborn no matter how much I searched online. None of the solutions seemed to fit.

Finally, I found a solution by targeting both the “article” and “body” elements and using the “!important” rule for the font-family. Like so:

body, article {
  background-color: #1d2021;
  color: #fbf1c7;
  font-family: 'Karla', sans-serif !important;
  font-weight: 400;
}

Next, the challenge of styling the footer that proudly proclaims “published with write.as.” This turned into a puzzle with no clear answers from online sources. Impatient by nature, I decided to put on the ol' detective hat and used the browser's inspect element feature to pinpoint the elements I needed to modify. Here's what I came up with:

body footer nav {
  margin: 6em 10em 4em;
  color: #fbf1c7;
}

body footer a.home:link, body footer a.home:visited {
  color: #fbf1c7;
}

I understand that my CSS might not be the most sophisticated solution, but it serves its purpose for now. Until I become more skilled, this is the extent of my toolkit. Thanks for taking the time to check out my progress, and hopefully, I'll be sharing more thoughts more regularly.

#tech #meta

---

Leave your comments below: Discuss... | Reply by email...