Colophon

This website is a static site built and maintained using Hugo¹, hosted via nginx on a VPS.

No existing themes or templates were used. All of the HTML, CSS, JavaScript, and template code were written completely from scratch. CSS is processed from Dart Sass source files written in SCSS syntax.

The guestbook is a custom Elixir application based directly on the Plug library. It runs as a separate app also on the same VPS as the website, and nginx is configured to serve as a proxy. Like the main website, all of its frontend code is written entirely from scratch.

This website has continually evolved from the Jekyll templates of the original melvian.xyz site since January 2024. Updates are generally made in batches, although updates are often made quietly, and announced only occasionally.

Read more about the history of this site.

Fonts

All of the text on this website are set in the Melvian fonts, a fully custom, proprietary font collection in continuous development since 2022. The body text uses Melvian Serif, while captions and all other elements use Melvian Sans. The Melvian fonts are not available for use by the public, except for Melvian Mono, which can be licensed from Rawrtype.

Although Melvian Sans does not have size-specific versions, some adjustments are made to the smaller text (such as footnotes, captions, and table of contents) to subtly improve readability. For instance, some alternate characters are enabled, such as a tailless a (a) and a single-storey g (g), and letter spacing is increased by 0.02 CSS em units.

In addition to being used on this site, the Melvian fonts are also used on other sites, such as the Safonts webring. Melvian Sans is the core of the font collection and carries the aesthetic’s DNA, so mainly out of respect for the fact that I didn’t create Safonts, only Melvian Serif is used.

The site is edited with Sublime Text. The choice of programming font is Melvian Mono, obviously. :P

More information about the history and development of the Melvian fonts will be made available in a future writing.

Media

As a media-heavy site, extensive use is made of Hugo’s image processing features. The vast majority of images are lossy WebP because it is a freely accessible standard (unlike JPEG), has more efficient compression than PNG, and Hugo doesn’t have image processing for AVIF. The only PNGs are mostly 88x31 badges and the full-res version of my reference sheet.

Videos are made available primarily as VP9, with H.264 as a fallback for browsers that do not support VP9. VP9 is chosen over AV1 because support for AV1 is spotty on Safari, where only M3 Macs and the iPhone 15 Pro and newer are supported (according to caniuse.com). Videos are encoded using ffmpeg via a script I use that generates all the videos and images for each animation that I need.

All animations are made in 4:3 aspect ratio, mainly 2048x1536 or 1024x768. 4:3 aspect ratio is chosen because it takes up the right amount of space on a social media feed (16:9 would be too small), and 1024x768 is a common resolution on many older screens and projectors.

Header images are 2048x640, picked because its width is a power-of-two, and with a wide aspect ratio to avoid taking up too much space on both the site and in link embeds such as on Discord. The images are carefully framed to anticipate some social media sites like Mastodon and Bluesky that crop the sides of the header image to approximately 16:9 ratio.

Despite my interest in color spaces, regular old sRGB for images and Rec. 709 for video are used because the vast majority of displays make use of these two color spaces. P3 and Rec. 2020 only favor newer displays and, in my opinion, do not bring significant advantages especially if it means people are throwing away perfectly usable older displays in the name of “more vivid colors”.

Design Philosophy

1. Do as much from scratch as is practical. All of the templates and CSS were built totally from scratch, and even the typefaces used for the site were built from scratch specifically for it. Every aspect of the site is an opportunity for me to craft a unique, precise and extremely consistent experience that wouldn’t be the same even if I e.g. used off-the-shelf fonts.
2. Ensure that the site works well across a wide range of sizes. Prioritize desktop, ensure that it works on resolutions down to phone sizes.
3. Nothing autoplays by default, not even GIFs. I never include any widgets that cannot have autoplay disabled without needing JavaScript.
4. JavaScript is used for extra functionality and various quality-of-life improvements, but is not required to view any of the site.
5. Everything from a design standpoint is an experiment that ultimately exists to help serve the things I have on the site. I don’t have hard strict design guidelines. If I want to introduce a new thing to the site and it doesn’t work with the design that I have, I tweak the design to accommodate it. If I find opportunities to make the site look a little nicer, I take them.