Colophon

ship Illustration by Gordon Browne, 1913

Banality is designed, built and maintained by Gerard Keane. The site uses Astro which is a static site generator.

All of the blog posts on the site are simple Markdown documents with a little YAML in the header for page metadata. These documents become pages during the Gatsby build process. The photography section of the site automatically generates the gallery from a single folder of images, and extracts the metadata from each file for display in fullscreen mode.

Inspiration

Features & Implementation

Tailwind CSS

The styling of this site is implemented almost wholesale via Tailwind CSS. I have included various plugins in order to extend the functionailty somewhat, including tailwindcss-pseudo-elements, tailwindcss-counter and tailwindcss-opentype.

Drop Caps

Drop caps appear at the start of every article on this site thanks to the following utility classes: 

              
                first-letter:float-left first-letter:text-8xl
                first-letter:pr-1 first-letter:-mt-1
the first-letter utility class is added by the tailwindcss-pseudo-elements plugin, and is an automatic process. Which is to say, posts are simply written in markdown and the drop caps appear automatically.

Opentype Font Features (incl. small-caps)

I love small caps font variants, and they are included here thanks to the tailwindcss-opentype plugin. The plugin adds various utility classes, including small-caps which I use from time to time. Any abbreviation using the abbr tag will have small caps applied automatically, thanks to a rule in the layer directives.

Furthermore, I sporadically apply small caps to the first line of a paragraph thanks to the first-line:small-caps tailwind selector. This behaviour is mobile responsive—only the first displayed line will be set in small caps, words being added or removed based on the viewport width. Pretty nice.

Margin Notes

I have long been fascinated by the concept of sidenotes, and used them liberally in previous versions of this site. Said previous versions all utilised tufte-css for sidenotes. This time around, I have decided to roll my own implementation.

Now, aside tags are used in the markup, and they are positioned either to the right of the main text on medium screens and larger, or displayed as asides in the middle of the body text. The styling is heavily influenced by Buttericks Practical Typography , which is highly recommended reading.

Dark Mode

I have also implemented a dark mode toggle, including my own custom toggle button which is in the navigation bar at the top of every page. Implementation is simple thanks to tailwindcss—the dark mode class flag is set in the config file, and a dark: pseudo selector is available for use as a utility class.

Fonts etc.

The base font in use on the site is Source Serif from Adobe. Designed by Frank Grießhammer, Source Serif is an open-source typeface with excellent features, including small-caps and real italics. Broadly speaking, all body text is set in Source Serif.

The Sans Serif font (used generally for headings) depends on the user's operating system, since it uses the standard Tailwind font stack. This stack is reasonable in my opinion.

The Monospace typeface is similarly dependent on the user's system.