this post was submitted on 19 Jun 2023
212 points (99.5% liked)

/kbin meta

639 readers
1 users here now

Magazine dedicated to discussions about the kbin itself. Provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics. ---- * Roadmap 2023 * m/kbinDevlog * m/kbinDesign

founded 1 year ago
 

I love the idea of kbin, but I've found the UX could be improved. Honestly, I like it better than new reddit already, but I find it doesn't quite feel as nice as old.reddit.com to me.

This motivated me to throw together a stylus theme to give kbin a little more of an old.reddit feel. I got rid of a lot of the whitespace which pads out the site, and made some other tweaks I think make it look better. I've also replaced both the upvoted and downvoted colors with ones that are a little easier to read regardless of which color theme you're using.

This stylesheet should be compatible with any kbin UX configuration. Its been tested with every theme, compact mode, thumbnails, all 3 font sizes, and all of the other kbin user options. It shouldn't interfere with the mobile view either, however, all of the changes, other than the vote colors, are turned off since kbin's vanilla mobile view is pretty solid. (at least, imo)

I also tried to keep this accessible, using rem for most sizing, so if you configure your browser to have a custom font size, this SHOULD play nicely.

This is a WIP, so if you notice that anything is broken or ugly, please don't hesitate to let me know.

If there's any interest in integrating any of these styles into kbin proper let me know. I'd love to help kbin look beautiful out of the box, and I'd happily put in a PR, but I figured starting with a stylus theme would be safer since I'm not sure if the admins or community have an interest in these changes yet. Obviously if I did put in a PR I'd rewrite a lot of this to take better advantage of custom properties and integrate these styles into the kbin stylesheets less awkwardly.

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 3 points 1 year ago (4 children)

Pretty slick. The absolute positioning and sizing of the avatars and voting buttons is a little finnicky on Chrome. But tweaking the sizes a bit made it workable.

[–] [email protected] 1 points 1 year ago (3 children)

So, I threw that together right before bed as an experiment. As I mentioned in this comment it actually uses MORE space, but looks a little nicer imo... but yes, I had to do some really hacky stuff with the positioning to get it to work with the grid used for comments.

If you wouldn't mind, could you provide a screenshot of the issue you're experiencing and/or the code you changed to fix it? That way I could fix if for everyone :) Do you use a non-standard font-size?

[–] [email protected] 2 points 1 year ago (2 children)

Not sure honestly. And I reallllly suck at CSS so take what I say and did with a grain of salt. Here's what it looked like before my changes (me replying to you):

I then lowered a few sizes.

        .comment figure > a > .no-avatar {
           //
            border-radius: 5px;
            width: 1.615em !important;
            height: 1.615em !important;
          //
      }

Same for the vote buttons

[–] [email protected] 1 points 1 year ago (1 children)

Hmm... no matter what I do I can't seem to replicate this... I'm going to make a top level comment in this thread later tonight or tomorrow and tag everyone who's said they're using the this stylesheet to ask for feedback on a few changes I've made that I keep going back and forth on. I'll also include this issue, maybe someone else has experienced something similar or can figure out how I can configure my settings to replicate the issue... I'd really like to figure this out

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago)

I'm on Linux (Arch with KDE) for whatever that's worth. So I am very likely using different fonts than you. I haven't messed with any of the browser font settings though so those should all be the defaults. Happy to pair with you on this further if you want. Tho not sure the best medium for that.