Site themes, colors, and delightful functions

Since this is my personal space on the web and not tied to any of the companies I run or work within I'd like to keep the interface and feeling aligned with the Indie Web movement that I've been appreciating for close to 30 years.

I think that the ability for everyone to publish something on the Internet available for all to see with a minimal amount of hurdles and money is something that is truly remarkable. Few things empower people to express their thoughts than a way to reach a people in all parts of the world.

This site has four distinct themes as briefly described on the start page:

An experiment in style. Set your preferred theme and color, from hi fidelity to low.

There are four different themes, each with three different color settings, white, color and black, on this site. You decide which one you prefer with the icons in the top center.

  • The classic mode, the C, represents the old serif based site with some textures. The font in this theme is Charter and is overall more sophisticated.

  • The M is the Monospace theme, where the content is displayed using the fixed-width font Commit Mono and gives you a feeling of a text-faced computer-inspired theme.

  • The S, without serifs, represents the Swiss design-inspired theme set in the Inter font. This plays on the fact that Sweden and Switzerland sometimes get mixed up in global references. So instead of portraying Swedish white, clean minimalism which we are famous for, I chose a grid and type-inspired Swiss design.

  • The last icon is an 8 representing the 8-bit font used on old IBM PC's. A 286 PC running DOS was my introduction to computers as a kid, and something about that font makes me feel cozy inside.

The idea was to go from a texture intense version, to a cleaner flat design, via the monospaced world, to the old retor DOS inspired PC of the 80's and 90's.

Features

I'd also added a little feature to each theme

  • On the Serif theme you can toggle the fine tuned typograhic styles on and off, just to emphasize the importance of typorgraphy and how much good typography can improve the experience.

  • Sans Serif them TBD

  • For the Monospaced theme you can select the font from a list of 10 curated open source type faces. There are so many good fonts out there and each of them kind of look the same, but still have so much personality that the experience will differ tremendously based on the font choice. I'm faschinated by the small and subtle differences in this constraint format still makes such an impact.

  • For the 8 bit DOS theme you can go all in DOS by turning on the EGA simulator. Viewing the site in a 80 × 25 character viewport. Use keyboard to get around!

Serif

Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Serif

Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Serif

Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Sans-serif

Inter (variable) — with Helvetica as a system fallback.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Sans-serif

Inter (variable) — with Helvetica as a system fallback.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Sans-serif

Inter (variable) — with Helvetica as a system fallback.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Monospace

Commit Mono (variable) — single size, hierarchy through weight and spacing.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Monospace

Commit Mono (variable) — single size, hierarchy through weight and spacing.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

Monospace

Commit Mono (variable) — single size, hierarchy through weight and spacing.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

8bit

IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

8bit

IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.

8bit

IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.

The quick brown fox

Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.