Contents

Foreword

dunkel.css is a small (around 200 loc) classless css stylesheat, that focuses on being easy to use for writing on the web. It is largly inspired by the original Markdown from John Gruber.

dunkel.css started as an 25 loc file on the 30^th April 2025, but the basic style stays still intact. Over time the new colours got added, while trying to keep them very minimal.

dunkel.css is also fairly small with a gziped size (v1.0) of around 1.6 kB.

Foundation

古池や蛙飛びこむ水の音

Matsuo Bashō

Typography

Largly like in Dark Souls III the font used mainly for title cards and heading was a Garamond font and the next best free and good looking font was EB Garamond from Georg Duffner.

For everything except for code elements the Times New Roman font was choosen, because Dark Souls III also uses an serif font and as Times New Roman is one of well known ones, it was one of the easiest decision to use it.

Colours

The colours are not directly influenced by the idea and therefore only four different main colours were choosen. The colour that is used as the accent colour has in addition two variations, that were achieved with the modern color-mix() CSS function.

Elements

Headings

The following are the heading elements of dunkel.css. These reach from h1 to h6, with the only differences between these levels being the size of the elemtent and that the Headings five and six do not have are not visually underlined.

Furthermore there are two special cases for the header elements. The first one being that an h1 element in an header element has another size than an normal h1 element and the second one is that when an heading element has an a element inside it, the colour for the underline changes to the accent colour, as seen in the title of this page.

Link

Links are show in the accent colour if dunkel.css and change their colour on hover into a muted accent colour. In addition the links show their underline only when hovered.

Emphasis

Emphasis can be found in different variations, either the em element or the strong elemen. The i element is not in any way or form changed by dunkel.css. Both the strong and the em element show the text in the muted accent colour, with the only difference being, that the em element retains its italic form.

Horizontal Line

The horizontal line break is similar to the underline of the header elements, but still very different.

The only difference is that the colour of the line is grey, instead of the white of the heading elements.

Lists

List just sligtly styled, so that the ordered list shows the upper roman numerals.

Blockquotes

The blockquotes are of a well known format, with a background colour, that differs from the background colour of the body, to make it more visible, and with the accent at the left of the element.

You cheated not only the game but yourself.

You didn't grow.
You didn't improve.
You took a shortcut and gained nothing.

You experienced a hollow victory.
Nothing was risked and nothing was gained.

It's sad that you don't know the difference what true gamers are.

A popular meme on the internet.

Code Blocks

Code blocks are similar to the blockquote as the also have the same background, but with the left accent colour missing.

#include <stdio.h>

int main(void)
{
  printf("Hello, World!\n");
  return 0;
}
        

Images

While images are not styled heavily, they still have some basic style to not let them overflow on the page and let them be able to scale with the page.

Usage

Purpose

This stylesheet is, like the original Markdown, largly designed to be used by web writer. So the intention is to have it looking good when writing prose, but if you want to use it more and for something else you are able to easily extend dunkel.css.

Getting Started

The best way to use dunkel.css is to download the css file from here or from the github repository. Additionally the EB Garamond font is needed, that you can get via Google Fonts or by downloading it in any other way.

Appendum

This document was not generated by any machine and purely handwritten. The same extends to dunkel.css.
No machine generation was used in the creation of this work.