Websites · Front end
A Mac desktop as a home page
deskio.org is now a desktop. Icons open windows, the dock grows under your pointer, and the clock ticks. Almost none of it needs JavaScript.
Open deskio.org on a laptop and you get a wallpaper, a menu bar, widgets on the left, app icons on the right and a dock at the bottom. Each icon is one of my live products.
Windows without JavaScript
Every icon is a plain link to #w-edgery, #w-floorvia and so on. Each window is a section that stays hidden until it is the URL's target: .win:target{display:grid}. The red close button links back to #desk. Back and forward buttons work, and every window has its own shareable link.
A dock that magnifies
The icon under the pointer scales to 1.5. Its neighbours scale to 1.22. The next one along is a:hover + a. The one before needs the newer a:has(+ a:hover). Only transform changes, so the browser never lays the page out again.
The one script
The menu bar clock and the calendar widget update from a twelve-line script set to Malta time. Without it the page still works and shows "Malta, CET".
What the checks caught
- On a 360-pixel phone the page was 369 pixels wide. A single-column grid sizes its column to the widest content. Setting
grid-template-columns: minmax(0, 1fr)let it shrink. - On phones the app icons sat below three widgets, out of sight. The widget column now uses
display: contentsso the icons can move up to sit right after the introduction.
Result
Lighthouse on mobile scored 100 for performance, accessibility, best practices and SEO, with the largest paint at about 1.4 seconds in the lab test. The wallpaper is original artwork, 29 KB as WebP at 2880 pixels wide.