Redecoration and un-Sassing my site

Posted 2 hours ago

Over two months ago, I launched new color schemes and un-Sassed my site. I would feel uncomfortable using the word redesign to describe this update to my site. The typography and layouts remained the same. Most of the work was behind the scenes as I reworked my stylesheet

I had been wanting to decouple my site away from Sass for over a year and had grown tired of the color schemes that had been part of my redesign in January 2024. I had grown tired on my light theme which used a beige color (#e7e5dc) as the background and darker blue (#06143d) as the foreground. The dark theme was just a reverse of it.

1. Beige
2. Navy Blue

Considering new color schemes

I liked the idea that Ethan Marcotte had of using color as a background for his light theme and then doing using black for his dark theme.¹ I wanted to move away from a light colored background.

At first, I did consider using my previous dark scheme color but I was in the mood for a change. Purple was the color that came to mind. I had several reasons why I was attracted to purple.

• Rebecca Purple (#663399) is the official color of the CSS logo. I wanted to pay homage to my favorite Web programming language.
• My oldest daughter’s favorite color is purple.
• Purple is the primary brand color of my oldest’s alma mater, Trevecca Nazarene University.
• I liked the purple color scheme in Ethan’s site (2 versions ago)

Choosing a color scheme took me awhile. I would play around with different shades and hues of purple in different spare moments I had. Using dev tools, I was able to quickly change the background colors to see how it interacted with my foreground text color.

Rebecca purple was too light of a background to contrast with a white or off-white text. I didn’t want to just copy Ethan’s purple color, even though it was more in the range of purple that I liked.

A lot of hues of purple looked a lot darker as a swatch against a white background than when I would apply it as a background color with lighter text. There is also a wide range of purple colors–some have more red or pink and others were just much lighter than I wanted to go.

I came across a purple color palatte on color-hex.com that I eventually chose my background color from. The hues were more in line with the purple I like. I thought I would choose the second darkest color (#360f5a) but ended up choosing the darker shade (#1c0333). It appealed to me the best when I saw it in the context of my site. I felt like it was a richer and deeper color of purple (a comment in my stylesheet).

The next decision to make was for the dark scheme. That decision came together pretty quickly as I chose #111 . I had decided earlier on that I wanted to keep the beige color as the foreground/text color.

Un-Sassing

In September 2025, I wrote an article for CSS Tricks, Is it Time to Un-Sass? I had been thinking about my own site when when thinking through that question. I wanted to move away from the build dependencies and I wanted other developers to be able to view my CSS source code.

I had already moved away from using Sass variables and had moved to CSS custom properties when I redesigned my site in January 2024. And I had thought through other solutions that I had outlined in my CSS Tricks article.

I copied over my SCSS file into a CSS file and renamed it “webcraftsman.css.” This would be the starting point for un-Sassing my CSS and creating the new color schemes. After I created the new CSS file, I started by editing my custom properties by creating new properties and deleting ones I no longer needed. I also got rid of my previous CSS reset and decided to use Andy Bell’s version as a starting point and then added a couple of my own preferences like zeroing out the margin for a figure element. There were also a few Sass variables that I need to convert over to custom properties.

Because nesting was now supporting in vanilla CSS, I only needed to make a few changes with my nested styles. I like to keep my levels to 3 at the most so I didn’t feel a need to make any updates to what I already had.

light-dark

One thing that I wanted to add to my stylesheet with the light-dark() function that allows you to define your light and dark color scheme colors in one declaration. This helps to cut down on code declarations as you only need to define one declaration to define both of your colors. I ended making my light-dark function into a custom property so I only had to define my colors once and then could use the custom property in different places in my stylesheet.

Replace my Sass functions with calc() functions

Another thing I needed to was to replace several of my custom Sass functions with calc() functions. I had created several custom functions for media queries that converted pixel values to ems. I like to use ems in my media queries because they work well with zoom (to make text bigger or smaller on the page). I also had a custom function to convert pixels to ems for font declarations.

Most of my typography is fluid and I used Utopia to create my scale for both type and spacing. But I still had a few places where I wasn’t using fluid type. I will probably move those over in the future but I was working quickly to replace the big things so that I could go ahead and launch my revised site. Those were mostly on custom pages that only I look at.

@media (min-width: calc((1024 / 16) * 1em)) { }

Evolution

The great thing about publishing on the web is that your site doesn’t have to be all “finished” to launch a new version. Sites evolve. And with that in mind, there were several things that I had wanted to do when I launched the new site that I decided to hold off on.

• Cleanup of my stylesheet – I did take some time to cleanup my stylesheet and also reordered some rules in order to group similar things and to try to keep more global styles at the top and more specific use cases lower down. But there is still more work that I would like to do and it was okay to set those as future projects in my digital gardening.
• Cleanup the UI of my theme selector – I had wanted to clean up the interface of my theme selector which currently uses radio buttons and text labels. I had wanted to add icons but had trouble figuring out a good icon for the “auto” preference that uses the user’s default color scheme preference.
• Simplifying and possibly moving the nav links to the header bar – I kicked around the idea of moving the nav links to replace the social icons and theme selector. But I was not sure where I wanted to put those elements and just decided to leave that alone till later in the future.

“Classic”

Right before I launched the new version of my site, I decided to add a third theme. I decided to keep my previous “dark” scheme with the navy background. I decided to name it “classic” because it was a previous theme and blue is my favorite color is “classic Jeff”.

I have also played around with the idea of coming up with some other seasonal themes like green for St. Patrick’s Day, though I am not one that really celebrates that day. I had that idea around St. Patrick’s Day. I also thought about creating a scheme based on the Revive Our Hearts site for April because I celebrated my one year anniversary in my job with them. I am not sure if I will ever pursue those ideas. Probably more work than the reward.

Three schemes

Footnotes

¹ I believe Ethan launched that redesign in March 2020, Let a website be a worry stone.