I've just updated the style of this web page and this blog post is mainly to test that everything works correctly.

Colors

I wanted to keep the website colorful, but with less color chaos. So I've tried to reduce the number of colors, while keeping some interesting hues. I've also tried to keep the contrast that I had, so it's easy to read (at least for me). The final palette is below: Here's the list of colors in CSS:

:root {
  --color-bg: #1A1717;
  --color-bg-mid: #2B2626;
  --color-bg-top1: #4C4337;
  --color-bg-top2: #47564F;
  --color-text-white: #E6E6E6;
  --color-text-black: #1A1717;
  --color-link: #FF8000;
  --color-deselected: #BD642A;
  --color-selected: #DBAF67;
  --color-accent-green: #3A7D4D;
}

Refactoring

I've simplified the CSS because it was pretty chaotic after the years. That means some pages may not render well at the moment, but I will update them with time.

I've also ditched the style variations that I had. Not sure people ever noticed them, but you could click on some subtle bars under the logo to switch to some retro styles, inspired by the Commodore 64 and the Amiga Workbench 1.3, respectively: The blog entries were inside a table, but I've replaced them by divs. Historically I used tables because they were easier to layout, but they aren't very flexible. Again, some old pages may still use tables, so I'll try to update them when I can (or ditch them).

Animation

I kept some subtle animations that add drop shadows when you hover over buttons, and some scaling animations for the shortcuts to my apps. But still, it feels the page is quite static and dull. I've changed the logo to some pixel art and I've animated it. It's an animated GIF, old-school but lightweight. At least something is subtly moving all the time, without being a distraction:

Font

I'm now using a single font everywhere, and I adjust the font size and weight only. I think everything looks more consistent this way. It also seems that thinner font weights is what is considered "modern" these days.

Before and after

Finally, here's the before and after, rendered in Safari.

Before: After:

The UI is responsive, so in principle it should render fine in narrow windows (i.e. smart phones on portrait mode).

I'll post in Twitter a few screenshots of the slides I made when I was thinking of the new design. Take a look if you want to see some other color variations that I prototyped in Keynote. And message me in Twitter if you have any comments.

Tweet