Colophon

Typography & Design

Webfonts include Catamaran for H1s, Cabin for body text, and Roboto Mono for monospace elements. All fonts are self-hosted via Google Webfonts Helper. A native system font stack serves as a fallback for optimal performance.

The logo was created by Linda Armelius. Icons are by Pixel Perfect via Flaticon.

The Open Graph image is from Ferenc Almasi on Unsplash.

See the live styleguide for a closer look at the website’s visual language.

Code

The site uses semantic HTML for structure. PHP handles dynamic includes and class logic. CSS and JavaScript include cache-busting to improve performance and update delivery.

Styles are based on the bullframe.css framework, written in SCSS using a modular Sass architecture and the BEM methodology.

JavaScript adds UX enhancements like smooth transitions and Chromium-specific theme colors, with support for light and dark modes. The vanilla-lazyload package ensures efficient lazy loading. Syntax highlighting uses Prism JS with the “tomorrow night” theme.

Development is done in Visual Studio Code with extensions like Auto Rename Tag, ESLint, Prettier, Stylelint, and PHP Intellisense for consistency and productivity.

Version control is managed using Git and GitHub.

Accessibility

Full keyboard navigation is supported with a visible focus indicator using the :focus-visible CSS pseudo-class.

“Skip to content” and “Back to start” links are included for easier navigation, especially for screen readers and keyboard users.

The site remains functional and readable up to 200% zoom.

ARIA roles and landmarks like role="main", role="navigation", and descriptive aria-labels are included to support assistive tech.

W3C HTML validity is mantained wherever possible. Validate it here.

File Processing & Performance

Webpack bundles and optimizes JavaScript, CSS, and image assets.

Performance tools like Google Lighthouse and strategies such as critical CSS, lazyloading, minification, and gzip compression ensure speed and responsiveness. See metrics via PageSpeed Insights.

Testing

Testing is conducted using Chrome DevTools, BrowserStack for cross-browser checks, Webhint for performance and accessibility, MDN HTTP Observatory for security, and various automated UI tools.

Cypress handles end-to-end testing, simulating user flows and verifying interactions.

Server & Hosting

The Apache configuration is a custom version of the one from HTML5 Boilerplate, with added security rules from Perishable Press. It manages CORS for fonts, removes www. prefixes, handles rewrites, enables caching and gzip, restricts sensitive files, and applies a Content Security Policy (CSP).

The site is hosted on Netsons SSD 50, while third-party assets remain on their original servers.

Privacy and Cookies

Visitor analytics are provided by Google Analytics, Matomo, and Tinylytics.

Cookie consent, the privacy policy, and cookie policy are managed via Iubenda.
To reset the cookie prompt, clear your cache or visit in private browsing.
Change preferences anytime by clicking “Your Privacy Choices” in the footer.

AI Assistance

ChatGPT was used to support research, writing refinement, and grammar checks across the site. GitHub Copilot provided suggestions for boilerplate code, SCSS optimization, and JS patterns.
All AI contributions were manually reviewed and edited to fit the tone, structure, and standards of the project.