Notebook Development Log
Started on May 5, 2022. Published on May 5, 2022. Modified on May 8, 2022.
This is the development log for the notebook.
I brought the archives and search page designs in line with the rest of the site. Most of the major design elements are in place now.
I also took some time to fiddle with color themes. I based my theme on the formula that Rob Weychert uses. I did use a different color for headers though, and renamed them to have more meaningful names in the CSS. I made good use of CSS variables to put them in the right places. For now, I’ve added one theme based on the Tufts color scheme. I will probably add more based on other university color themes in the future as well. I think ultimately the color theme will be uniform in one section of the site, but different between them. So the stream and essays will have a different theme.
I also cleaned up the display of the start, publish and modification dates to make them a little easier to scan.
I’m pretty happy with the way things have turned out, and I think I’m at a good stable point. Accordingly, I started a Git repo for the template so that I can keep track of changes.
Mostly a lot of stylistic tweak. I had picked one of the “archived” templates and did not really like it much, so I’ve been tweaking it to get something I like more. I stole the basic layout from Matthew Butterick’s Practical Typography. Having the title and metadata for a note tucked into the side makes good use of widescreens.
I also fiddled with the CSS for the landing page tag-grid to get something that flows well for smaller screens as well. I might tweak the proportions in the future, but I like the general layout for now. The tag grid was inspired by Gwern Branwen.
Finally, the navigation bar design was lifted from Simon Collison. This actually took me the most time to get right because getting the CSS right for the bar to be tall enough was very annoying. In the end, it came down to having the links being set to
display: inline-block, the menu items to
display: inline-flex and the menu bar itself to
display: flex. This is why I hate CSS.
I’m decently happy with the way the notebook looks at the moment. It is a little bland, to be honest, but the core functionality is in place. I will have to think about how to punch it up, probably with some more color. I’m also trying to keep the theme minimal and considerate, in the hope that I can use essentially the same with the rest of the site (as set out in [[Writing and Publishing Environments/Website Wishlist|the wishlist]]).
Speaking of color, I’ve started collecting a palette of various colors to use, mostly by raiding the Tufts and Cornell University color themes. So far, I have light and dark versions of red, blue, and green, as well as a purple, orange, brown and gray. I stuck to the blue end of the spectrum so far. I’m not looking for an explosion of color, just enough to make things interesting.
All that being said, I am slightly afraid that I will be spending more time and effort on designing the notebook, rather than making use of it, but I suppose only time will tell about that.
Today I just set up the initial structure of the notebook. Today was mostly about trying to understand how Blot works. The workflow is pretty interesting: I can do put Markdown files in a Dropbox folder and it gets rendered and published. Simple, stupid.
There are some subtleties though. It wasn’t immediately obvious how to get to the template to edit it. I had to fiddle with the dashboard a little before I got a
Templates folder to show up in Blot’s Dropbox folder. But now I can edit the template using Emacs. The syncing for template files is a little slow, especially for the CSS files, which seems to get cached. It takes a little while and a couple of refreshes for CSS changes to show up in the rendered site, which is less than ideal, but not the end of the world. Thankfully, any edits to Markdown source files seems to get picked up easily. I have a separate note on [[Writing and Publishing Environments/Evaluating Blot|Evaluating Blot]].
I’ve done a little bit of tinkering with templates and CSS. In particular, it was a relief to see that CSS supports grid layouts by default, so I may not need to pull in something like Bootstrap in order to get decent layouts. I managed to get notes showing by tag in a decent grid, which makes for a good landing page for the notebook. More tomorrow.