New Theme

2023-06-18 | 2617 words | 14 minutes to read

tag: side-project

I wrote a theme for this blog. I am not a designer, and I am sure that there are many things that I could improve upon. I am looking forward to collecting feedback on the design.

For this post, I will be discussing the design decisions I made when creating the theme. I plan to make a few more changes to the theme in the future, I will talk more about this in detail at the end of this post.

Design Goals¶

I wanted to create a theme that mimicked the look and feel of a terminal screen. Some of the design goals I had in mind were:

• Easy to read
• Easy on the eyes
• Easy to navigate
• Minimalist
• Look cool

One decision I made early on was to make all the text the same size, you don't have different font sizes in a terminal after all. This makes an interesting challenge when it comes to displaying headings. I will talk more about this in the Headings section.

And of course, I wanted my blog to be responsive. Although I never use my phone to consume any content other than group chats, I still wanted the theme to look good on mobile devices for those who do.

Design Language...?¶

I am not sure what to call this section, I don't know what the correct term is. I will be talking about what I did to make the theme look and feel like a terminal.

As you may have seen when you first visited this blog, the index page is literally a (rather pointless but cool-looking) terminal, with a blinking cursor and current directory path. You will see the use of Unix file path format used a lot in this theme, on the navigation bar and the heading.

The navigation bar is styled like a result of the ls command if you imagine each tab as a directory or a file. The . and .. directories are functional too, you can click on the .. to navigate to the parent directory.

Color Palette¶

If I am going to create a theme that mimics a terminal, I need to choose a color palette that is reminiscent of a terminal.

The color palette I chose is called Nord. I was looking for a less saturated color palette that was easy on the eyes, and this one fit the bill. Plus, it is one of the available built-in syntax highlighting themes in Zola, so I won't have to write any custom CSS for that.

Nord does have support for a light mode, but I decided to stick with the dark mode. I think it looks better, and I prefer dark mode in general.

Typography¶

I chose Recursive as the font for the theme. I wanted a monospaced font that's easy to read, and Recursive is one of the few open-open source monospaced fonts that I like. It is a very powerful variable font, so it doesn't even have to be monospaced, but I decided to stick with the "Monospace" axis set to 1.0 since mono is the default in terminals.

The text you are reading right now has the "Casual" axis set to 0.5, which makes the normal text look a bit more casual, well, casual. For the code blocks, the "Casual" axis is set to 0.0, they are "serious" code blocks after all.

One thing I noticed during the writing of this theme is that sometimes for some reason I haven't figured out yet, The "casual" axis doesn't always work, some quick googling tells me that this might be an issue with Google Fonts, but I haven't been able to reproduce it consistently, so I am not sure. Here is a code block, see if it works for you:

public static void Main(string[] args)
{
	Console.WriteLine("Hello, World!");
}

Markdown Features¶

This section and the next are essentially just me showing off the features of the theme. I will be talking about the features I implemented and how I implemented some of them.

Headings¶

As I mentioned earlier, I wanted to make all the text the same size, so I had to come up with a way to display headings. Some friends suggested using bold text with a different color, with numbered headings to indicate the level of the heading. I decided to go with this approach, and I had a lot of fun implementing it (although it was a bit of a pain to get it to work).

If you haven't noticed already, the numbering before the heading is styled like a terminal directory path. I think it looks pretty cool, and it is a nice way to indicate the level of the heading: the longer the path, the deeper the heading.

There is also a "¶" (Pilcrow) symbol at the end of the heading, this is the anchor link to the heading, so you can share a link to that specific heading. I think this is a nice feature to have, and it just so happens that Recursive supports this symbol.

Bold and Italic¶

Of course, bold and italic text are supported. Here is some bold text, here is some italic text, and here is some bold italic text.

The bold text has its "Weight" axis set to 700, and the default text is 350, which is a bit lighter than the usual 400, I found it is easier on the eye this way. Although, all code blocks still have had their "Weight" axis set to 400.

The italic text has its "Slant" axis set to -15. A fun fact about Recursive is that this axis can be set to any value between -15 and 0, which is pretty cool. If you want to see what it looks like, you can try it out on their website.

Blockquotes¶

The look of Blockquotes is one of the things I might change in the future, I am not sure if the look right now fits the theme. I am open to suggestions.

I did take time to make sure that nested blockquotes look good though.

I also made sure that the blockquotes look good on mobile devices, if you are reading this on your phone or just on a narrow screen, you won't see any extra space on the left side of the blockquote.

Links¶

You have already seen many links in this post, but I do want to point out the little things I added around them here.

A link to a page on this blog will look like this: README. And a link to an external page will look like this: Cat. There is a little arrow next to the external link, which is in fact, the Unicode character "⇱" (U+21F1) mirrored. I don't understand why there isn't a Unicode character for the same arrow but pointing to the top right, they have one for the bottom right "⇲" (U+21F2). Looking at the same Unicode block "Arrows", many of the arrows have versions that point to each corner, but not this one. But I guess transform: scaleX(-1) will do just fine.

The link to a section in a post will have a "#" hash symbol at the front, like this: Markdown Features.

By the way, the detection of a normal link, an external link, or a section link is done completely in CSS, there might be a way to make Zola do it for me, but I haven't found it yet.

Images¶

I don't have any image that I plan to put in this post, so this is a cat image from Wikipedia:

Orange Tabby Cat Sitting on Fallen Leaves: Hisashi from Japan derivative work: Caspian blue, CC BY-SA 2.0, via Wikimedia Commons

The caption is styled similarly to the blockquote, it is implemented using the <small> tag. I have to add it manually in the markdown, I think it is worth the effort.

The image is centered, and the height is limited to 32em, so it won't take up too much space on the page.

Image with link also works:

Een Brits korthaar van Cattery lamium: Dovenetel at Dutch Wikipedia, Public domain, via Wikimedia Commons

You should see a cyan border around the image when mouse over it. The link will take you to the original image on Wikimedia Commons.

Lists¶

Unordered List¶

• This is an unordered list
• Look at how the bullets are styled
  • The nested list looks the same
• I think it is very terminal-looking

Ordered List¶

1. This is an ordered list
2. Look at how the numbers are styled
   1. The nested list looks the same
3. No any surprises here

Horizontal Rule¶

While browsing through Recursive's supported characters, I found it supports the "§" symbol (U+00A7), which is a section sign. I thought it would be a nice symbol to use for the horizontal rule, so here it is, implemented using CSS pseudo-elements:

---

You will see similar horizontal rules for the footnotes separator¹ and the footer separator.

Code¶

I have to say, I am very happy with how the inline code look, I think they are very easy to read. Note that the code blocks don't change the line height or the spacing of the text, so it doesn't look like a code block is "floating" in the middle of the text, and it keeps the characters aligned, just like a terminal using a monospace font.

This is achieved using the outline property and setting it to the same color as the background of the code block. The difference between the outline and the border is that the outline is drawn outside of the element, while the border is drawn inside of the element. This is why the outline doesn't affect the size of the element, and the border does.

This is how I wrote it in SASS, this also serves as an example of how code blocks are styled:

code
{
	background-color: $black;
	outline: $line-thickness solid $black;
	color: $yellow;
}

Of course, line numbers and line highlighting are also supported:

1
using System;
2

3
namespace HelloWorld;
4
public class Program
5
{
6
	public static void Main()
7
	{
8
		Console.WriteLine("Hello World!");
9

10
		// Keep the console window open in debug mode.
11
		Console.WriteLine("Press any key to exit.");
12
		Console.ReadKey();
13
	}
14
}

Non-Standard Markdown Features¶

Zola supports a few markdown features that are considered "non-standard", such as footnotes, tables, task lists, and strikethrough. I decided to add support for these features to the theme, as there's a pretty good chance. that I will use many of them in the future.

Tables¶

Here is an example of a table, I can have it left, center, or right aligned:

Id	Name	Age	Address
1	John	30	New York
2	Mary	25	London
3	Peter	40	Paris

I am pretty proud of the style of this table, it's all CSS pseudo-elements, with no borders or anything. I think it looks pretty good, very terminal-like.

Task Lists¶

• Create a blog
• Write a post about the blog
• Write a theme
• Write a post about the theme
• Write about my other side projects

Footnotes¶

Here is a footnote², and here is another one³. They look just like how you would define them in Markdown, just like task lists.

Strikethrough¶

This is a strikethrough, if you find it too hard to read the text under it, you can hover over it to see the original text. Tap on it should work on mobile devices

Spoilers¶

While implementing the strikethrough, I figured I could also implement spoilers, so here it is: This is a spoiler. It is implemented using the <spoiler> tag, I have to add it manually in the Markdown, I won't be using it very often, so I think it is OK.

Notice how, similar to inline code, the spoiler block also will not change the line height or the spacing of the text. They are achieved using the same technique as described in the Code section.

The spoiler itself is implemented by setting the color as the same as the background, and only changing it to the foreground color when the mouse is hovering over it.

I also made sure the spoiler works nicely with the strikethrough, like this: This strikethrough contains a spoiler in it. And This spoiler contains some strikethrough. I probably spent more time on this than I should have.

Details¶

I also implemented the details disclosure element in the theme, it looks like this:

Try click on me

This part is hidden by default, you can click on the summary to show it.

It is just the plain old HTML <details> and <summary> element, nothing too special, I have to add them manually in the Markdown as well.

Table of Contents¶

Technically, this is a Zola feature, but I think I made it look just like a part of the main content, so I think it is worth mentioning here. You can check it out at the top of the page.

The three-line burger symbol is not an icon, it is just a Unicode character "≡" (U+2261), the mathematical symbol for "Identical To".

Icons¶

You may have noticed all the "icons" you have seen so far are just Unicode characters. Why let the user load an extra icon file when they already have the font installed on their computer?

There is precisely one icon on the entire site, which is the feed symbol next to the RSS link on the navigation bar. It is an SVG icon that I made myself, it is very small and baked directly into the HTML so it won't affect the loading time that much.

Future Plans¶

I think I am pretty happy with the theme right now, but there are still a few things I want to add in the future. For example, adding a "copy code" button to code blocks will be great, but that's some JavaScript that I don't want to touch right now. Do I want any JavaScript on my blog at all? I don't know, I will think about it.

I also want to populate the "Friends" page on the navigation bar, if you are my friend and you have a blog, let me know and I will add you to the list.

If there is anything else I want to add, I will add it to this section in a future update.

Conclusion¶

I think that's all I have to say about the theme if I didn't manage to forget anything. I spent more time writing this post than writing the theme itself, the theme is completely done within a week, but this post took me more than two months to write for some reason. I guess I am just not very good at writing. If there is anything I forgot to mention, I will add it to the post later.

I hope you like the theme, and I hope you like the blog as well.