Site redesign w/Jekyll part 2 - SASS and fonts

Now that I had a theme that I liked, I set about modifying it slightly to fit my particular needs and likes. My first task was to make a decision about the fonts and whether to take the time to modify the theme to use the SASS syntax, which is a variation of CSS.

One more note: this series of posts will not explain the intricacies of Jekyll itself. The Jekyll documentation is excellent - a fantastic example of clear, pithy writing that just gets down elucidating the concepts with a minimum of words. It’s concision reminds me of the original Kernighan and Ritchie The C Programming Language¹ which is one of the most pithy, high information density pieces of technical writing I have ever encountered.

SASS

The original Lanyon Jekyll theme has all of its site styling done in CSS. I have come to prefer the SASS super-set of CSS, which allows all the styling to be a little more organized and allows one to adhere to the classic programmer’s maxim of DRY (Don’t repeat yourself).

As an example, rather than have the specific text color that has been chosen for the site littered over 15 CSS selector declarations, the color can be defined one time as a variable in a separate file so that it can easily be changed, and the change will propagate throughout the entire CSS file. A SASS variable might look something like this:$text-color: #3e3e3f; and in the rest of the CSS file, any place with the $text-color variable declared would subsitute in the appropriate hex code for the color. It makes changing things very easy and fool-proof.

Another very nice thing about SASS is that it has very handy helper functions defined. For instance, if you have defined a background color for the site in a variable $bg-color: #fafaf8;, and feel like you want to have a specific site element such as the code snippets appear in a similar, but slightly darker color, then this SASS statement would style all code content the same color but slightly darker:background-color: darken($bg-color,3%);

How Jekyll processes SASS files

Although I promised not to get too much in the weeds in regard to Jekyll-specific stuff, I do want to mention that there is one peculiar thing about using Jekyll to generate a complete CSS file from a set of SASS files. The SASS file that aggregates all of the input SASS lives in the CSS file directory. Even though it has a .scss file extension. In my case this file called styles.scss is located in my CSS file directory:

---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main scss files contain this front matter, not partials.
---
/*****************************************************************************/
/*
/* Lanyon fork (Lork?)
/* Based on Lanyon Copyright (c) 2014 Mark Otto under MIT license
/* This version is also under the MIT license
/*****************************************************************************/

// Imports to create final css file

@import "../_sass/settings";
@import "../_sass/syntax";
@import "../_sass/typography";
@import "../_sass/layout";
@import "../_sass/tables";

Note that the top of the file contains the very necessary Jekyll front-matter delimiters above all the import statements. After that, this SASS file imports a series of files that are written in SASS language. The first file that is imported is the ‘settings’ file, which contains all the items that are SASS variables. I decided that I would like the following variables to be user determined:

/* This file contains all the variables for colors and font styles */

$body-font:   BlinkMacSystemFont, -apple-system,"Segoe UI",Roboto,Helvetica, Arial, sans-serif;
$header-font:  BlinkMacSystemFont, -apple-system,"Segoe UI",Roboto,Helvetica, Arial, sans-serif;
$code-font: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier","Courier New",monospace !important;
$url-font: BlinkMacSystemFont, -apple-system,"Segoe UI",Roboto,Helvetica, Arial, sans-serif;
$text-color: #414141;
$bg-color: #fafaf8;
$contrast-color: rgba(170, 15, 20, 1.0);
$border-color: #333333;

When I decided on which variables I wanted to be able to change if I wanted, I added the ability to specify both a body font and a header font. This file enables me to change the site’s overall look – the colors and the fonts – without having to search through hundreds of lines of CSS.

Fonts

One decision I made for this site was to depend totally on the website visitor’s ‘native’ system fonts for display. This makes the site faster since a font file does not need to be downloaded, and it also allows me to use Apple’s beautiful San Francisco sans-serif font to build the site for any Apple devices visiting the site. I thought it would be a neat challenge to use just the native fonts on each system to build the site. Microsoft’s latest Windows 10 and 11 use a nice font named ‘Segoe UI’ that also is very good-looking.