feat(gimkit): init

[gradylink]

🎉 Theme for Gimkit 🎉

Gimkit is an educational platform similar to Kahoot and Blooket with more video game aspects.

(Screenshot was DOM manipulated to hide my kits)

💬 Additional Comments 💬

There are a total of 4 uses of generated styles (which about half of the site uses) in places where I couldn't figure out any other way to differentiate the elements. Also, due to the site using a lot of generated styles it was quite hard to grab specific elements, so there are probably a lot of subtle mistakes.

I also didn't fully implement the accent color, so I think some of the places I used Mauve should have been the accent color, so I'll update those in a few minutes. (EDIT: done)

🗒 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.less - all the CSS for the userstyle, based on the template.

[gradylink]

I also wrote this entire userstyle in like just 2.5 hrs, so there are bound to be mistakes

[gradylink]

OK it appears the kit editing screen is broken rn, I'll go fix that.

[gradylink]

Noticed some more issues while working on that commit, I'll undraft this once I fix those.

[gradylink]

Similar to how I included Desmodder support in the Desmos userstyle, should I include Gimloader support in this one?

EDIT: I did it.

[gradylink]

The linter appears to be broken again. It seems to really not like it when I combine :not and :has selectors...

[gradylink]

Oh btw, I used a single darken() call in one place, does that mean this PR will need to wait for tints and shades, it's a part of the UI that most users will never see and the ones that do see it will only see it 4 times a year?

[uncenter]

Oh btw, I used a single darken() call in one place, does that mean this PR will need to wait for tints and shades, it's a part of the UI that most users will never see and the ones that do see it will only see it 4 times a year?

That's not what the intention of pending certain userstyles was. Most userstyles use a fair bit of lighten/darken, which is acceptable. I had some concern with introducing new systems of doing such that wasn't standardized anywhere, and want to pause userstyles that redefine their own tint and shade parameters for entire color ramps until we have a better idea of the new tints and shades palettes.

[gradylink]

I think this should be done now.

[gradylink]

I decided not to theme the UI in-game, as I feel the Catppuccin colors with the vibrant game assets wouldn't really fit well.

[gradylink]

How would I go about styling this image (it's one full image, .png):

[gradylink]

Frick, I forgot to handle when you're logged out.

[uncenter]

Shall we mark this as a draft as it seems like changes are still coming?

[gradylink]

Shall we mark this as a draft as it seems like changes are still coming?

@uncenter Actually I pretty much just finished, the only thing that isn't properly styled (to my knowledge) is the GiveKit page which as I said above, I'm unsure as to how to properly style the logo for.

[gradylink]

Oh, and also btw, I know that you guys don't really like the use of the * selector, but it's pretty necessary for this userstyle due to the use of generated class names, having proper selectors (without using generated classes) for everything would likely (at least) double the size of the userstyle.

[uncenter]

How would I go about styling this image (it's one full image, .png):

Not really a way to do it as far as I know. Leave it as is if possible?

[gradylink]

Not really a way to do it as far as I know. Leave it as is if possible?

K, this is what that looks like, btw: