New project: Melanie in Analog

Melanie Sumner once mentioned wanting to trade lists of favorite stationery items, so what do I do? Make a whole little site, but of course!

Melanie in Analog documents how I use my notebooks for memory keeping (run-of-the-mill journaling) and planning work and life. I have examples on the site of each of the pages and spreads I use consistently to organize my brain. There’s also a list of favorite stationery supplies that I’ll update over time.

Another use case for CSS aspect-ratio

Melanie in Analog (built on Webflow, my current employer) is pretty simple functionally and aesthetically. A minor detail I like, though, is that I found another application for the aspect-ratio property!

Often folks use aspect-ratio to ensure images or cards are rendered with consistent dimensions. On this analog site, I demonstrate how I use my pages in B6 and A6 notebooks. I wanted the dimensions of the example pages to match the aspect ratio of the physical notebooks—while ensuring that if content grew quite long, the sample page would grow with the content instead of overflowing in a way that looked broken. This is a perfect use case for aspect-ratio.

In this case the value is set to 125/176, which is quite an odd set of numbers for this CSS property, probably. Those are the dimensions of a B6 notebook in mm.

Plans for the site

Eventually I’ll add my nature journal to the site as well—maybe. I use a five-year journal to document the seasons, and sometimes I stop writing in it for awhile before beginning again.

I may also add my sketchbook there, and include some more arty favorite supplies.

For now, you can check out how I use my two main notebooks on Melanie in Analog!