I created a theme for this website inspired by Casper (v1), Medium and many other minimalist journal templates. Bento was just released in the Hugo Themes website and I decided to do here a show & tell about the work done.
I have decided to use the OS default typography and lots of gray and blue colors. The color palette is the default TailwindCSS color palette.
TailwindCSS is my go-to option for CSS in personal projects. It is easy to use, customizable (if I have to) and I just don’t need to reinvent the wheel. I did write a few CSS code in the theme (ex: styles of the articles) but even for that I use TailwindCSS
Little big details
In the theme I used transitions for links colors, a gradient in the bottom of the page and last not least, a cool reading progress bar in the top of the page.
One of my favourite things in this layout is the backdrop-filter in the sticky header. The
backdrop-filter CSS property is very popular in iOS and I wanted to add this touch in the theme instead of having the usual opacity.
Since I spend lots of my time on GitHub, I chose their color palette for code.
I built Bento with Performance in mind. I wanted to deliver fast pages and no bloated CSS.
From their README:
<head>, all without incurring the cost of a full page load.
Turbolinks is well-known in the Rails community but it can also be used outside the framework. I saw it first at Devin Schulz Hugo website and I decided to add it in my theme. The integration is painless: add the JS file from a CDN in your page and there is no step 2. Since I don’t have lots of JS interactions here, adding Turbolinks was very straightforward.
CSS libraries like Bootstrap and TailwindCSS are often critized for their weight. Offering modular styles has its tradeoff however packages like postcss-purgecss can avoid the big CSS files.
The setup I used here came from the hugopipes-tailwindcss, in case you are curious.
I am quite happy with Bento right now but I may work in some features in the future, like adding search or subtle animations for images. Talking about images, adding neumorphism shadows would also be a nice touch.