Matugen theme, responsive layout, search icon mask-image fix, and QoL improvements

[mj0x0]

14 commits, demo video below. Happy to split into separate PRs if preferred.

What's in here:

• Fix: search icons render as solid squares. When Vite inlines an SVG as a data URI and the SVG uses single quotes in attributes (e.g. potrace output like google.svg), the unquoted url(${src}) in SearchIcon produces invalid CSS and the mask is silently dropped. Fix: wrap in url("${src}"). Reproduces on main in current Firefox and Chromium.
• Matugen (Material) input template so accent colors follow the system palette.
• Responsive layout using clamp() instead of fixed sizes.
• Scroll / swipe to cycle search engines, with the engine name shown on hover. Mouse-wheel tested; touch implemented but untested on hardware.
• getRandomImage rotates pictures on each load. Added a set of AI-generated images in the Death and Milk style.

recording_small.mp4

[PrettyCoffee]

Hey @mj0x0!
First off, thank you for being interested in contributing to this project! :)
Also, sorry for the delay. For some reason I didn't see any notification about the PR...

However, I see a few issues with the changes and don't think most of them are changes I want to merge in this repository.

• There are some changes that either are not necessary or even break things. Such as adding whitespace, removing comments, adding vite server configuration, and removing my eslint setup.
• In some parts I am not sure if your changes are intentional or if they are reverting my own changes from a few months ago? Would have to look deeper into that.
• It seems like you also broke the collapsed Accordion width? At least the lines to the right of the accordion headers are visible in your video, but shouldn't.
• You mentioned ML generated images created based on the images by Death and Milk. I personally dislike LLM / ML generated content, especially when not being granted permissions by the artist to use their work to generate new content. So I would rather not add these images.
• I don't entirely get the Matugen part, but I think it doesn't match the project "vision". The idea is to have a standalone startpage website. No server and no external integrations. I get that it makes sense for you to have this feature, but it makes more sense to keep that in your fork, tailored for your requirements and setup.

---

If you still want to contribute some of your changes, I think the search engine cycling is a good idea!
As for the rest, I would have to test these myself first. If you want to, feel free to create isolated PRs for each change that I didn't explicitly criticize above and I will look into it :)

If you do so, please make sure to not delete the eslint setup, satisfy the linter rules as configured, don't change code that is unrelated and keep the commit history clean. I also won't merge any changes to dependencies in package.json / package-lock.json right now.

[mj0x0]

Fair enough.

The eslint removal was an oversight on my end, not intentional. I'll restore it.

The accordion lines were actually an intentional design choice on my part, but I get that it doesn't match how you want it to look, so I'm fine leaving that out of any future PR.

I'll close this PR and open isolated, single-purpose PRs instead, starting with the search engine cycling. I'm accepting what you said about the ML images, I'll keep those in my fork.

Besides the search engine cycling, there were a couple of other additions in there I did not commit yet, like a clock/greeting (evening, morning) widget and an expand/collapse-all toggle for the accordions. Both are purely local (no server, no external calls), so I think they fit the "standalone" constraint, but wanted to get your gut reaction before I put together isolated PRs for them.

[PrettyCoffee]

a clock/greeting (evening, morning) widget

Can you send a screenshot of how it looks like? But generally, if it fits the design and if you can add a toggle in the settings to show / hide it, sounds good to me. :)

an expand/collapse-all toggle for the accordions. Both are purely local

Can you send a video of this to show the behavior? I am wondering if this is necessary as the current implementation only allows having exactly one of the items open. Or would you also change this to have multiple open at the same time?

[mj0x0]

Screencast_20260717_095418.webm

The clock is pretty simple. Uses the theme's accent/default colors, and I kept it low opacity.

The Expand/collapse-all doesn't change the default model, exactly one accordion stays open as before. The button is additive, it fans all groups open at once, and clicking any accordion collapses it back to just that one.