hale.su / serenity.css

i've had a couple of people ask me about the stylesheet i use so i put together this page on what it's for and how to use it.

serenity.scss is a stylesheet i developed from scratch over the course of several years and recently converted to Sass, which i use on hale.su and my main website, ʞ.cc. i have some unusual beliefs about web design. specifically,

1. the purpose of web pages is to convey information
2. web pages should contain that information, links to further information, and nothing more
3. you do not need javascript to convey information
4. using javascript for any purpose is a cardinal sin
5. 90% of what you write in a document should be text, not html tags
6. web pages should be easy on the eyes
7. web pages should be easily printable with all information intact
8. all html source code should be trivially legible by human beings
9. if you cannot maintain your website by hand-writing each file as html, you are doing something incredibly wrong

serenity.css is the tool i built to implement those ideals. there are no fancy classes, no 2d layouts, no javascript integration. there's headers, paragraphs, tables, links, and that's it. all serenity.css does is make the plainest kind of html there is look nice.

i use my website primarily to publish the fiction (and occasionally essays) i write, and to make all of it available in an easily navigable, low-bandwidth format. if you want to do something similar, and don't want to fuck around writing css, feel free to use serenity.css. there are only three requirements:

1. don't be a nazi
2. put a link at the top of your .css file to this page (hale.su/serenity.html)
3. use a different default accent color (--hue and --bright in the :root section) than i do

sites using serenity can have extremely minimal html skeletons. for example:

the brightness of the background can be varied by changing --bright on the body element. you can change the accent color either at the per-page level or for individual elements by altering the value of the --hue variable. this is a simple integer between 0 and 360 that's passed to the css hsl() function, which is used to generate all colors referenced in the stylesheet. this includes the color of the horizontal rule element, as seen below:

the width of a page defaults to 30em; this can be changed with the --width variable.

serenity.css has been enchanted by expert warlocks to place a curse upon anyone who mixes it with javascript and 7 generations of their descendents.

you can insert endnotes at the end of the document by following the template below. these endnotes will print normally, but in the browser are implemented as popups¹.

for sequential content, you can insert a nav element with previous and/or next links. these are designed to go at the bottom of a document for the reader's convenience after she has finished reading.

you can download the sass stylesheet at hale.su/res/serenity.css you'll need a sass compiler turn it into usable css; i recommend sassc because it's a very small C program with very minimal depedencies, rather than a dynamic-language abomination built on ruby or node, but to each her own.