The build system
This website was generated using a combination of Make and Pandoc. No other external tools are necessary, although for testing purposes a simple python static server is used. Each page was generated from a plain text file formatted as Markdown. The CSS was painstakingly handwritten, trying to minimize redundancy and future-proofing it for style changes with the use of variable colors, fonts and sizes.
Typography
Only system fonts are used, it is OK if the page does not look exactly the same across all browsers, but I might adjust some of the fall-back fonts in the future. The text should be big and easy to read in big displays, while keeping the number of characters per line below 80. The font sizes were generated using a modular typography system, with a line space of 1.5 and scaling factor of 1.333. The line spacing should be mostly consistent, providing a pleasant vertical rhythm, but since the Web is a dynamic medium, it is likely that images will break the uniformity.
Minimalism
A limited set of colors is used for the design. Text content is key. The contents of this page should not rely excessively on images. If vector graphics are used, they must have transparent backgrounds and be prepared to be inverted (black/white).
There is no tracking, no cookies and no JavaScript.
Media queries and other goodies
The single column layout lends itself well to responsive web design. As the resolution decreases, the images are adjusted with the container size, and the text size becomes slightly smaller. Additionally, this website supports dark mode, which will display white on black instead of the traditional black on white. Dark mode will invert svg images and desaturate the rest.
Future work
- Include an image minimization step for SVG and dithering/compression for PNG.
- Include a build step for HTML/CSS minimization.
- Ensure the content is properly compressed.
- Test the page speed and research new was of making it faster.
- Test the compliance with web standards.
- Check accessibility scores and ensure the page can be fully explored with text-to-speech or special braille keyboards.
- Set up RSS/Atom feed.
- Create script to generate post list automatically from content directory.
- Replace Pandoc workflow with a tailored approach.
- Include a git hash for the current website iteration.