Punkter.net
11.11.2024

The website was intended with minimalism in mind. While the flashy presentations with animated loading screens are an eye treat, they rarely awe anyone outside the tech community looking for their next inspiration. The vast majority comes only for the information they want. And they – like everyone else – want it fast.

CSS

My approach was to reuse as much code as possible in order to achieve small footprint. Instead of a single CSS file or separate ones for mobile/menu/blocks and so on, the website in its current form consists of three CSS files:

• main – here you’ll find the code that covers elements that show on every single page. Fonts, colours, margins and paddings, menu, and header are among those defined in this file;
• front page – additional file with CSS code that loads only when front page is loaded therefore minimizing the lines of unused code per load;
• page – as with front page, this file only loads when viewing an article or a page on this site.

Header and footer

On front page the header and the footer go full height since the latter also includes large call to action link. On all other pages the header and the footer are stripped down to just the menu and copyright text respectively.

Menu

Since there are only three items in the menu at the moment, I decided to drop the hamburger/mobile menu and just always display all the items whether the website is seen on desktop, tablet or mobile.

Web accessibility

While I admit I need to learn more about the best a11y practices, I did my best by using the (prefers-reduced-motion: reduce) media query and disabled or at least watered down the animations on front page, most notably the headline zoom and the the background noise animation on header, and the parallax background behind the “About” section. The menu bar being always visible – as opposed to being slided up/down – affects every single page, not just the front page.

Dark mode

The majority of the website can be considered “light” mode though “About” section and full height footer on front page have both dark backgrounds. The dark mode is triggered by browser or device settings. Background goes dark, text turns bright (but not white) and the links remains same blue colour as in default light mode.

Conclusion

This website – like many others – are never really finished and changing the old code with the newer (usually shorter) one makes it a constant work in progress. I do my best to keep it up with the best practices. This post will also be updated with major changes when needed.