Category: CSS

New Website Design

After who knows how long, I finally sat down and updated the landing page with a modern design.

The impetus for doing the redesign came from the work I just finished — setting up the landing page for the book I’m writing: From Plan to Prototype.

This gave me an opportunity to play with a few new technologies: Pug, Tailwind CSS, and Parcel.

The biggest improvement was the easy-to-use responsive design classes from Tailwind, which makes layout extremely simple and predictable.

I’m still in awe of this library.

Parcel handled the compiling, bundling, and development hot-reloading for Pug, and is a breeze to use as well.

As it turns out, Parcel has a “my way or the highway” style of compiling and bundling files together that didn’t make any sense to me once the redesign started to involve more than just the landing page. It was overkill.

So I had to take a step back and write a build script to generate the contents of the website, which gave me a chance to learn the command-line versions of pug, tailwind, PostCSS, and PurgeCSS.

New Landing Page

Much nicer, and now using dark mode!
Old and minimal, to a total fault.

New Food Reviews Website

This also gave me the chance to completely rework my food reviews Jekyll site to actually look like something usable in 2019.

Massive redesign of https://vilimpoc.org/food.
Super, super ugly and unappealing.

I pulled all of the posts and assets into the main website monorepo and set up an .htaccess mod_rewrite ruleset to forward all http and https requests for food.vilimpoc.org ⟶ https://vilimpoc.org/food.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^food.vilimpoc.org
RewriteRule ^(.*)$ https://vilimpoc.org/food/$1 [R=301,L,NC,QSA]

New Research Pages

I aligned the Research page styles with the main styles.

The subpages all have a unique style, as they were all written over the course of decades. They’ll keep their styles.

Wired.
Tired.

New Error Pages

Further updates aligned the error pages to the new aesthetic, and use flexbox to center everything.

New and hot.
Old and blindingly ugly.

Bless You, LESS CSS

I’ve been spending some time refactoring the CSS code on TandemExchange, and have been using the fantastic support for media queries in LESS CSS, to create very concise and adaptive style rules.

My general rule at the moment is that there are roughly three form factors to worry about (plus hidpi-style displays, though I haven’t tackled that yet) which are easy to define using LESS CSS’s media queries as variables terminology:

Which means in plain English that every screen up to 480px applies the @phone rule, up to 800px applies the @tablet rule, and anything more than 800px uses the @desktop rule.

Then, when defining the CSS class rules, you can just do neat things like this:

Though, I’m not sure why you’d ever want something to go bright red. For many positioning issues, and especially side-by-side element to inline layouts, this is a huge boon to maintaining a tight set of CSS rules.