
+++
title = "tranquil"
description = "A blog theme for zola, simple and clean"
template = "theme.html"
date = 2025-03-01T17:19:35+01:00

[taxonomies]
theme-tags = []

[extra]
created = 2025-03-01T17:19:35+01:00
updated = 2025-03-01T17:19:35+01:00
repository = "https://github.com/TeaDrinkingProgrammer/tranquil.git"
homepage = "https://github.com/TeaDrinkingProgrammer/tranquil"
minimum_version = "0.9.0"
license = "MIT"
demo = "https://teadrinkingprogrammer.github.io/tranquil-demo/"

[extra.author]
name = "TeaDrinkingProgrammer"
homepage = "https://github.com/TeaDrinkingProgrammer"
+++        

![A screenshot (dark theme) of the example page of the demo website](https://github.com/TeaDrinkingProgrammer/tranquil/blob/main/screenshot.png?raw=true)
![A screenshot (light theme) of the example page of the demo website](https://github.com/TeaDrinkingProgrammer/tranquil/blob/main/screenshot-light.png?raw=true)
<br />
A blog theme for [Zola](https://www.getzola.org). Simple, elegant and uses Tailwind. Based on [Isunjns Serene theme](https://github.com/isunjn/serene).

## Demo

-  <https://teadrinkingprogrammer.github.io/tranquil-demo/>
-  My own blog: <https://teadrinkingprogrammer.github.io>

## Features

- A simple and elegant design.
- Projects page: display a list of the projects you have worked on with links.
- Theme toggle: switch between light and dark theme regardless of your browser preference.
- Image zooming using [Lightense](https://github.com/sparanoid/lightense-images): zoom in on images by clicking on them.
- Out-of-date alert: show alerts when your post is outdated.
- Callouts (note, warning, alert, etc.) that can be used right in Markdown.
- Comments using [Giscus](https://giscus.app).
- Mathematical notations using [KaTeX](https://katex.org).
- Diagrams and visualizations using [Mermaid](https://github.com/mermaid-js/mermaid).

## Shoutouts

This theme wouldn't have existed without [Isunjns Serene theme](https://github.com/isunjn/serene). It's a great theme, so go check that one out as well.

When I doubted about layout, I always went to look at [FasterThanLimes blog](https://fasterthanli.me) to see how he did it.

Of course, this website wouldn't render without [Zola](https://getzola.org) and it wouldn't show anything without [Tailwind](https://tailwindcss.com/).

## Tranquil vs Serene

Tranquil is a fork of Serene. The main reason to fork was not that I thought Serene was bad: I just wanted to try out Tailwind for a while and reimplementing a blog theme seemed like the perfect way to do so.

The main and pretty much only difference between Tranquil and Serene is that the styling is built from scratch with Tailwind. The icons have also been changed to align better with Tailwind.

## Usage

- Check the [USAGE.md](./USAGE.md) of `main` branch.

## Contributing

- Before you make any non-trivial changes, consider opening an issue so we can discuss the change.

        