gumx: meta #01: style & writing flow

Website Style & My Writing Flow

This post is the start of the meta series where I’d write how I write in this blog, and any code or flow updates. The other ulterior motives behind this series are: One is to force myself to practice writing for an audience. The other is to serve as a log for the progress I make in this “writing system”.

The why

Let’s start by stating the obvious:

Also, bear with me here, let me list my blogging system intended “features”:

The website style

First things first, THE STYLE.css:

I want, at some point, to be able to write a post that contains both Arabic and English text, so the first thing I put in the stylesheet of this website and the versions before is this:

* {
    unicode-bidi: plaintext;

This should save me the trouble of adjusting the direction of each element. And as long as I start a paragraph with a language, the browser should automagically align and set text direction accordingly.

The second important thing, is that I wanted the website to use as few HTML tags as I could. This, along with my love for monospace font, and that I wanted the site to look like how I would like to see it in a terminal window, made me steal from a couple of the 1k club entries some ideas:

body {
    font-family: monospace;
    white-space: pre-wrap;

This would make the entire body a big <pre> tag. Not ideal for accessibility, but it takes away so much of the formatting and styling hassle.

Then there is the automatic dark-mode:

@media (prefers-color-scheme: dark) {
    html, body[theme="auto"] {
        filter: invert(1);

And for this to work correctly I had to set the text and background colors:

body {
    color: black;
    background: white;

Finally, some styling for code blocks:

code {
    display: block;
    border-style: solid;
    border-width: thin;
    padding: 0.3rem;

The remaining are just some adjustments to the page margins and width.

My writing flow

Now, there’s the matter of writing. I made a checklist for myself so I don’t forget a step in publishing:

  1. First thing I scribble my thoughts on OneNote and try to refine them till it resembles an article.
  2. I copy the blank.html file and give it another name related to the post as this will be the slug of the article.
  3. I copy the article in the <body> of the template, using <a> <em> <strong> <code> tags only for now.
  4. Then I add the current date in the article body.
  5. In the home page and the index of /writings section, I put the link of the new article.
  6. I git commit to set the exact time and date of writing the article.
  7. Using git log, I retrieve the time stamp of the last commit in RFC822 format.
  8. I update the RSS feed file.
  9. Finally, I commit the changes and push to sourcehut.


Have I mentioned that this site is hosted on sourcehut pages? Well, it is. And since it’s mostly static files, the build script is very, you guessed right, minimal. I used their basic example with only two additions:

git log --format='[%aD] %h %s' > log
rm -fr .* *.md

To generate /log page. And to keep markdown and other hidden files and directories from being published.

In the next couple of days I will try to automate this process a bit. And I will probably use Atom feed instead of RSS mainly because I don’t like RFC822 time and date format.

Till next time.