HITCHHIKER'S GUIDE INTERFACE

This is a live demo of my attempt to recreate Shynola's animated interface for the Hitchhiker's Guide to the Galaxy in the 2005 film. I started the project partly as a personal passion and partly as an attempt to do as much work in pure (i.e. library-less) HTML, CSS, and JS (with Django running on the backend).

KNOWN ISSUES

- When window is resized from phone width to desktop width, if sidebar isn't open, sidebar toggle button disappears with no way to reopen it unless window is resized; either resize check should be implemented or sidebar translation should be included in media query (probably the latter)
- Recent regression: text in entries list jumps left on hover, possibly due to browser behavior change (happens on Chromium & Firefox) with inherited width; plan is to rewrite sidebar making better use of flexbox
- CSS animations might be blocked on each other, e.g. entry bars popping in and out might be blocked on entry text collapsing/expainding; might be helped by above-mentioned rewrite, simplifying structure and animations

SHAMELESS BRAGGING

I showed an earlier demo to the studio that made the original animations, who brought it to the attention of the director of the film. Gave me a proper warm fuzzy feeling.

Hey @netverk_ this cleverclogs @kienankbhas is making the Hitchhikers interface a reality! Doing a bloody good job of it too. https://t.co/TuiuwRvwex cc @GarthJennings

— Shynola (@SHYNOLAfilms) April 27, 2018

BRILLIANT

— Garth Jennings (@GarthJennings) April 27, 2018