kbin-css: decluttered and parameterized theme
kbin-css: decluttered and parameterized theme
Contribute to aclist/kbin-css development by creating an account on GitHub.
Hello, this theme is focused on high readability and removing extraneous visual widgets and icons. It is based on the way I liked to read content on that "other site."
For better or worse, the current kbin layout is very "mobile" in design and not the best for reading longform text on a desktop. This theme focuses on easing the layout and hopefully making threads look more forumlike.
It does take a "scorched earth" approach in removing stuff I don't like, but everything that starts disabled can be enabled again via the radio buttons provided, allowing you to toggle on/off various widgets on the fly.
This includes:
- sidebar
- footer
- activity
- thumbnails
- previews
- short description
- avatars
- upvotes, downvotes, or both
- icons
- elements of the text submission form
- numerous other elements
In addition, you can change the base color scheme via the color picker in order to globally control things like:
- body color
- link colors
- upvote/downvote colors
- blockquotes, code blocks, input fields
- hover/focus color
- text color
- etc.
Disclaimer: I have tested this at 1440P on a desktop environment at various scaling levels and dimensions and it seems to mostly be OK. I have not extensively checked for glitches on mobile aside from some rudimentary mocking. If you find something wrong, feel free to make a PR or inbox me.
Frontend is not my main focus area, so there may be some anti-patterns or things that are objectively stupid, particularly around the way I manipulated elements on the grid. Again, if something is being implemented wrongly here, please advise.
This is awesome! I'm having a bit of trouble getting the radio buttons to work with Stylus, but editing the stylesheet works just fine for configuring things. I'll let you know what I think once I've messed around with it some more
What browser and Stylus version are you using? You can also use the radio buttons after it's been installed, by clicking the gear icon. It takes a tick or two for the CSS to update.
If you want to manually edit, you can use the section dividers. You can also override the booleans set in definitions at the top, should be self-explanatory.
I'm using Edge dev and Stylus version 1.5.33. I'm not sure what the issue would be but editing it manually is working just fine so far. Thanks for the tip about the section dividers!
Edit: Seems like clicking the gear icon from the installed styles page works perfectly, not sure why it didn't let me edit them from the settings that popped up after the initial installation
Looks like a nice minimal and 'no distraction' experience for the site, well done!