feat(hoogle): init

[jn-sena]

🎉 Theme for Hoogle 🎉

Hoogle is the Haskell's documentation and API search engine.

💬 Additional Comments 💬

The Hoogle logo is a non-transparent png unfortunately, so I left it closer to the original purplish color.
I also tried to make the colors close to Hackage since they're pretty complementary, even though I still think the Hackage colors may need a revisit.

The search and submit stuff at the top is not styled in Hoogle, so I made little changes to them.
Additionally, the collapse buttons at the left and results were just background images to texts and I couldn't apply filters to them, so I made some ::before and ::afters and put the images there.

🗒 Checklist 🗒

• I have read and followed Catppuccin's submission guidelines.
• I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
  • I have ensured that the new directory is in lower-kebab-case.
  • I have followed the template and kept the preprocessor as LESS.
• I have made sure to update the
  userstyles.yml
  file with information about the new userstyle.
• I have included the following files:
  • catppuccin.user.css - all the CSS for the userstyle, based on the
    template.
  • preview.webp - composite image of all four individual flavor screenshots (taken with the default accent color of mauve) stitched together, generated via Catwalk.

[uncenter]

For the SVGs we don't escape them in source code, we use the Less function to do so:

https://github.com/catppuccin/userstyles/blob/main/docs/tips-and-tricks.md#how-do-i-theme-images-and-svgs

You'll have something like this that will escape it for you:

.xyz {
  @svg: escape("<svg>...</svg>");
  background-image: url("data:image/svg+xml,@{svg}");
}

And then the SVGs look normal in source code and you can copy the contents straight into https://www.svgviewer.dev/ or whatever to test them out.

[isabelroses]

thank you very much, was looking forward to someone theming this site ❤️