After finishing the general architecture of the site and automating post generation via Jekyll, I turned to styling the site. Previously I had left this task to front-end frameworks like Foundation, but for the new site all of the CSS will be written by me (with the exception of the reset and basic styling provided by normalize.css). I approached it in a way that does not seem very logical when looking back on it.
The first styling and infrastructure problem I decided to tackle was the inclusion of code-blocks with good syntax highlighting in my site. The reason I chose to do this first was because this is a feature I know I want for the site, but have not properly tied into the site previously. So I sat down to tackle this before anything else.
Perhaps it is a good thing that Jekyll supports a variety of options for syntax highlighting, but for me it was annoying to find that out of the box Jekyll does not have any support for parsing code-blocks in markdown. On top of this, getting code to be syntax highlighted is another struggle. What the differences between the markdown parsers for Jekyll are is beyond me, but the one I am currently using is Kramdown. I had originally intended to use Pygments for syntax highlighting, because of its greater language support and because I am blindly loyal to Python-based tech. However, I ended up using Rouge instead, because it seemed to me to fit in better in the Jekyll ecosystem and there was more documentation around explaining how to make it work. With those choices made, along with a few lines added to the _config.yml, the Jekyll side of getting syntax highlighting to work was done.
There are three styling choices to make for syntax highlighting: a monospace font, a color theme, and the framing for code blocks. I am a fan of Google Fonts. Thus, I limited my search for fonts to the monospace fonts there. In the end, I decided on Droid Sans Mono because it seemed to be the right combination of soft on the eyes and unambiguous.
Finding a good color theme was significantly harder. After searching for a long time, I happened upon a class of color themes called base16. The general idea is that 16 colors can cover all the colors you need for syntax highlighting, including background colors. A problem I ran into is that my favorite themes didn’t have stylesheets. So I took the colors and made a quick change to my sass setup that put the colors in variables and imported a specific theme to apply that color theme. This was the first time in this project that I took advantage of sass variables, and I began using it a lot more after that. My final choice for a syntax theme was a theme called tomorrow_light. It had the right combination of softer, but clear colors and a white background that made it idea for my site. But I take comfort in knowing that if I find something better that is base16, I can just plug it in and it should work.
Framing the code blocks was comparatively a simple task. All I did was add appropriate padding internally to space the code and line numbers away from the edges and add a simple curved border outside the whole block. The border between the line numbers and the code was a little more subtle; initially, I placed it on the pre object, but that border did not extend all the way to the top and bottom. Instead, putting the border on the .gutter block achieved the desired styling.
After starting with styling for code blocks, I moved to make general typography decisions. In retrospect, I think this is the proper place to start working on the styling for a site.
In the past, I had stayed away from using serif fonts for body text, because I like the aesthetic of sans-serif fonts more almost universally. However, I acknowledge that serif fonts are better suited to large blocks of text and can be effectively used in some situations. So I decided to go with a pretty generic sans-serif font for headings and navigation related things and put the character of the site in a serif font for the body text. While browsing the serif font choices on Google Fonts, I decided pretty quickly on Crimson Text for my body font. For the headings, I wanted something less recognizable than Open Sans, so I was interested in a couple of the Hind fonts, which have Indian characters included. The Google Fonts API supports getting only subsets of fonts, which would allow me to bypass having users download a bunch of Indian glyphs that would never actually get used. However, the real issue with all the Hind fonts is that they do not have true italics, which is a huge issue. After searching a bit longer, I decided to bite the bullet and just use Open Sans.
For the heading sizes, I decided to leave them as is. The general font size is 16px, with it shrinking to 14px on mobile screens. Everything else is written relative to that, so sweeping changes across the site are possible. Links are colored differently in general and change color when hovering, but do not have a different color when visited (a personal preference of mine). Beyond that, the general typography is pretty simple.
There are a couple things that haven’t been implemented yet. I still need to set up good default formatting for tables. I also need to figure out what I want to do for block-quotes. I don’t imagine I will use block-quotes much in my writing, but I feel better knowing that I have properly set up the styling for them so they actually appear reasonable if I do use them.
The general site layout went through several iterations, but in general it was pretty consistent. I pretty much always use the flexbox sticky footer. Initially, the header had a blog link as well, which was removed when I realized that I didn’t know how to move the site blog-post pagination to another page. So, for now, the site will have pagination at / and for each category. The footer will be empty until I decide what I want to put there, but the pagination information will be stuck to the bottom.
I am very happy with the site layout so far. The code seems easy to maintain, but I need to make sure to add more comments. I plan on adding more formatting to posts and the general typography. Here are all the things I want to do in terms of styling: