Site Design

The site is designed to work well on mobile devices. It is a static website, with interactive features powered by CSS and client-side JavaScript — no server round-trips for the tools.

Instead of a traditional menu bar with drop-down menus, I use a small set of large icon buttons for navigation. The layout adapts to screen size and orientation: a single column on small screens, multiple columns on larger ones.

I have implemented a dark mode to reduce eye strain in low-light conditions, which also saves battery on OLED displays. In bright surroundings, the light mode adapts to match. Making this work for graphical elements was the trickiest part. All icons and graphics are in SVG format, with CSS controlling their fill color — black on light backgrounds, white on dark.

I aim to support the current versions of Chrome, Safari, Firefox, and Edge. Consistent rendering across all of them is an ongoing challenge — Safari in particular has had issues with the multi-column layout. The layout relies on CSS Flexbox, which requires a browser from 2018 or later. The calculation tools use WebAssembly, which has the same minimum requirement.

Please keep your browser up to date to get the best experience.