The Backstory
After a bit of a setback (and getting a brand new laptop), I decided to sit down today and rebuild my vision for a minimalist Linux Game Checker. I wanted something that felt more like a high-end console interface than a standard database.
The Design Philosophy
Most game checkers are vertical lists. I wanted to utilize the full width of a 16:9 screen.
Horizontal Grid: I implemented a 4-column layout using CSS Grid to create “mini-long” rectangles.
Minimalism: No all-caps. I used proper Title Case for the game names to keep it looking professional and clean.
Performance: No heavy frameworks. It’s built with Vanilla JavaScript for instant filtering across the 50+ games currently in the library.
Features
Instant Search: Reactive filtering as you type.
Status Badges: Clear indicators for Native, Proton, and Blocked (anti-cheat) status using specific RGBA transparency for a modern look.
Cinematic Frame: Locked to a 16:9 aspect ratio for a consistent aesthetic.
The Tech
I kept the stack simple: HTML5, CSS3 (Tailwind for utility), and Vanilla JS. >
Links
Live Demo: [https://silxnce-is-him.github.io/linux-game-checker/]
GitHub Repo: [https://github.com/SiLXNCE-iS-HiM/linux-game-checker]
This is just the v1.0.0-beta. I’m planning on automating the data fetch in the future, but for now, I’m focusing on the UI/UX. Would love to hear your thoughts on the grid layout!