“Notebook” style website

The website design should look like an notebook and the text is intended to perfectly fit the lines.

I started to build this website to create a very simple and lightweight platform for writing short stories.




Have a look at the projects git repository if you are interested.


The frontend uses the awesome but controvers “Open Sans” font. For the background i took an image of an notebook and devided it into 4 small parts. These parts are repeated in different patterns to create the responsive notebook design.

The text main size is 16em(16px) with a calculated padding. Every other element (e.g. h1 title) is caculated to fit 1 or 2 columns.


For the backend i decided to not use any framework and keep it lightweight. There are a few libraries included.
The authentication is very simple consisting of a simple yes/no permission system and a login and logout page.

Stories can be written with the Markdown syntax, which will be converted to html.

Main difficulty

The hardest thing at this project was to align all texts and other elements to the lines in the background. It needed a few calculcations in css to always have the perfect pixel height, even if you change the font size.

Room for improvements

The backend is very basic. It may be extended with a muti user login.
At the frontend, a visual markdown editor can be added to simplify the textwriting.