Banality is designed, built and maintained by Gerard Keane. The site uses Astro which is a static site generator. The site was previously built with Gatsby, and was migrated to Astro.
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 Astro 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 functionality somewhat, including tailwindcss-pseudo-elements 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
MDX, Specifically
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.
The markup is much simpler and cleaner this way, though admittedly at the expense of some functionality. On mobile screens, asides are collapsed into a togglable <details> element with an "N.B." summary—handled by a small script at page load.
Now, span.aside elements are used in the markup—aside is a block-level element that causes the HTML parser to split surrounding p elements, orphaning text and creating visible layout gaps. The span.aside elements are positioned to
the right of the main text on wide screens, or displayed inline within the body text on narrower screens.
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.