Shift_JIS

Old Steam Theme for Hugo

It is with great embarrassment that I would like to announce that I spent the better part of my Saturday writing this ridiculous theme. You can clone the git repo and apply it to your own Hugo site from my repo on GitLain.

Read on for some instructions and design notes.

To install the theme, follow the standard theme installation instructions, i.e., clone the repo into your site’s themes folder, and change the theme in your config.toml if you so desire.

Currently, the theme has no configuration options, however, I hope to add a few booleans for toggling the taskbar, main element scrolling, and custom cursor, as well as being able to choose the character the prefixes the site’s name.

Design

If you were a PC gamer in the early 2000s, you might remember that Steam had a pretty distinct look in its early days. Forgoing the stock Windows controls, Valve opted instead to use the same look and feel found in Half-Life’s menus.

Half Life's options menu

Half Life's options menu

This style flaunted a flat military green, appropriate for the game’s theme. However, it looked a bit funny in a Windows environment.

For when your XP box needed more '90s aesthetics

For when your XP box needed more '90s aesthetics

By the time 2010 rolled around, the green color was totally gone from the Steam client and website, but the controls are still present in some modern-day Source games, albeit with a more pleasant grey color scheme.

Despite what people think about the design in hindsight, I always liked this style of UI. It looked minimal, yet wasted no screen real estate on white space. Even back in the day, it had a nostalgic look, and today can be classified as firmly in the aesthetic range.

Implementation

The markup is a very simple Hugo theme using standard HTML5 constructs. You can open up the page source and get a pretty good idea of what’s going on just by reading it.

Most of the magic is in CSS. For my nav box, I simply float the <nav> element left, and draw a nice box around it. The main window is a simple wrapper div with the same box drawn around it, and the actual content is styled with a <main> element, which has a darker background and an inset border.

Anything with the .button class will have a similar border and a nice clickable feel.

For those of you browsing on Chrom{e,ium}, you may notice the scrollbars also have the Steam style. While Webkit-based browsers (such as Chromium) support scrollbar styles, Firefox still does not have this feature. It does, however, have this 16-year-old bug featuring a flame war about the efficacy of Firefox as a browser in general. So Firefox users (like me) are stuck with the scrollbars provided by their theme or OS.

Speaking of scrolling, you may notice that the <main> element has overflow-y set, while the rest of the page remains static. I like how this looks, but it means that reloading the page does not maintain the scroll position of the article. I could fix this by limiting the size of the <body> and drawing the windows as a background image, but this wouldn’t look nice on Hi-DPI screens. If any CSS experts have any other ideas, I’m open to pull requests or even hints delivered by email.

The taskbar is three divs in the footer: one left div for the start menu and running programs, one for the task tray and clock, and one to house the horizontally repeated 1x30 background image for the space in between. The page also has the cursor set to the cursor from Windows XP.

On mobile (or rather, on screens less than 1150 CSS pixels wide; remembering that 1 CSS pixel = 1 screen pixel at 96 DPI), the nav bar moves to a horizontal layout at the top of the page, the height of the body becomes unlocked, and the taskbar disappears. You can see how this looks by hitting Ctrl-+ in your browser a few times.

I am open to issues and pull requests to the repo, so fire away! As always, you can also email me.