Day / Night Demo

So what is this?

This spage is an implementation of a day/night toggle with CSS doing the heavy lifting. This is handled by using hidden <input> checkboxes and CSS' new(ish) :checked attribute.

All the scripting is doing is tracking the day/night state of the checkbox in a cookie, and assisting the contact modal close to not fill up the browser history. Both the modal and night/day work without the scripting, though the night/day state is lost between page-loads when JS is disabled/missing.

Again, do as much as you can without scripting FIRST! Only dive for JS for things that obviously can't be handled otherwise!

How do I test it?

See the sun (or moon) in the top right corner? Click on it!

You can also check out the contact modal in both day and night modes by clicking the "Contact" link on the menu. The contact modal is :target triggered so you can apply it to any normal hash anchor.

The Layout

This is just a simple two column layout with a modal contact form, and a mobile friendly menu that is also written to function as a modal dialog.