[-] Sintamo@beehaw.org 2 points 11 months ago

Appreciate it! I think a stretch-goal for the future could be a "muted colors" toggle, to tone things down a little while keeping the rest of the changes

[-] Sintamo@beehaw.org 3 points 11 months ago
[-] Sintamo@beehaw.org 4 points 11 months ago

Can't steal what is freely given! Hope you enjoy

[-] Sintamo@beehaw.org 3 points 11 months ago

Awesome! Happy to have provided a semi-decent place to start. I'm curious what things you end up tweaking :)

[-] Sintamo@beehaw.org 1 points 11 months ago

You're too kind :) I think themes are a great way to differentiate instances, and having some community-made Beehaw themes available would be really cool!

[-] Sintamo@beehaw.org 2 points 11 months ago

Thank you! I played with lemmy.ml a bit since that's been updated, and it looks like ~80% of what I did should still work. But it does reveal the issues with making these client-side changes

[-] Sintamo@beehaw.org 1 points 11 months ago

I tried, but it's either beyond the scope of CSS edits, or simply beyond my abilities haha. Maybe proper themes installed to the instance could make that possible though!

[-] Sintamo@beehaw.org 1 points 11 months ago

I just released a theme based on this post if you'd like to try it!

[-] Sintamo@beehaw.org 1 points 11 months ago

If you'd still like to try the dark theme, I just released a theme based on this post! Would love to hear your feedback :)

[-] Sintamo@beehaw.org 2 points 11 months ago

Hey there! If you're still interested in trying it, I just released a theme based on this post!

272
submitted 11 months ago by Sintamo@beehaw.org to c/technology@beehaw.org

Not sure if it's more relavant to Creative or Technology, so cross-posting here from: https://beehaw.org/post/743965

Exactly a week later, hello again!

I was so flattered by people's reaction to my last post - thank you for making me feel so welcomed by this community! I'm still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I've spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they're ready to share with you all.

I was able to incorporate lots of tweaks to Beehaw's UI, including:

  • Customisable levels of minimalisation
  • Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
  • Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
  • Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
  • Hover effects to reduce unnecessary line breaks with long hyperlinks
  • And more! But not that much more, it's just some CSS after all ;)

Hive Light:

Hive Dark:

There are more screenshots on the GitHub!

Installation is pretty simple as well:

  • Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn't work well for me :(
  • Check your Beehaw settings and select "darkly" if you want to use Hive Dark, and "litely" if you want to use Hive Light
  • Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the "code" section of Stylebot
  • Et Violà!

This isn't my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I'd love to see what other people create.

One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don't know when Beehaw will update, but I imagine it's imminent, so there will be more work to be done soon I'm afraid.

Thanks for reading, and take care!

100
submitted 11 months ago by Sintamo@beehaw.org to c/creative@beehaw.org

Exactly a week later, hello again!

I was so flattered by people's reaction to my last post - thank you for making me feel so welcomed by this community! I'm still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I've spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they're ready to share with you all.

I was able to incorporate lots of tweaks to Beehaw's UI, including:

  • Customisable levels of minimalisation
  • Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
  • Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
  • Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
  • Hover effects to reduce unnecessary line breaks with long hyperlinks
  • And more! But not that much more, it's just some CSS after all ;)

Hive Light:

Hive Dark:

There are more screenshots on the GitHub!

Installation is pretty simple as well:

  • Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn't work well for me :(
  • Check your Beehaw settings and select "darkly" if you want to use Hive Dark, and "litely" if you want to use Hive Light
  • Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the "code" section of Stylebot
  • Et Violà!

This isn't my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I'd love to see what other people create.

One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don't know when Beehaw will update, but I imagine it's imminent, so there will be more work to be done soon I'm afraid.

Thanks for reading, and take care!

4
submitted 11 months ago* (last edited 11 months ago) by Sintamo@beehaw.org to c/creative@beehaw.org

Exactly a week later, hello again!

I was so flattered by people's reaction to my last post - thank you for making me feel so welcomed by this community! I'm still toying with icon redesigns, but I noticed that people were equally (if not more) interested in the theme ideas I posted - so I've spent the last week trying to make them a reality! I call them Hive Light and Hive Dark, and I think they're ready to share with you all.

I was able to incorporate lots of tweaks to Beehaw's UI, including:

  • Customisable levels of minimalisation
  • Consistent padding and spacing site-wide, increasing legibility and cleanliness without sacrificing too much information density
  • Repositioned various UI/UX elements to make Beehaw easier and more intuitive to navigate
  • Consistent bee-themed colors! Lots of yellows, browns, and blues that play nice with each other and pass accessibility standards
  • Hover effects to reduce unnecessary line breaks with long hyperlinks
  • And more! But not that much more, it's just some CSS after all ;)

Hive Light:

Hive Dark:

There are more screenshots on the GitHub!

Installation is pretty simple as well:

  • Install Stylebot - this was the only CSS extension I found that worked reliably across browsers and consistently applied settings. YMMV with other extensions - Stylus just didn't work well for me :(
  • Check your Beehaw settings and select "darkly" if you want to use Hive Dark, and "litely" if you want to use Hive Light
  • Copy and paste the contents of either Hive_Light_Theme.css or Hive_Dark_Theme.css from the GitHub page into the "code" section of Stylebot
  • Et Violà!

This isn't my first time designing a UI, but it is my first time doing it with CSS edits, so I fully expect there to bugs and inefficient code. I would love to hear your feedback and incorporate new ideas into future versions. And feel free to copy my homework! If I can figure out this CSS stuff in a week, so can you, and I'd love to see what other people create.

One caveat: the Lemmy v0.18.0 release includes lots of (really awesome) updates to Lemmy-UI that will break this theme. I don't know when Beehaw will update, but I imagine it's imminent, so there will be more work to be done soon I'm afraid.

Thanks for reading, and take care!

[-] Sintamo@beehaw.org 7 points 11 months ago

Gasp, I've been found out!

[-] Sintamo@beehaw.org 6 points 11 months ago

What's the Picasso quote? Great artists steal? :P This is a good suggestion, I'll definitely try it out! I've long used #f7f7f7 for white and #1a1a1a for black, but breaking that dogma here could be valuable

175
submitted 11 months ago by Sintamo@beehaw.org to c/creative@beehaw.org

Hi everyone!

I'm an Industrial/Product Designer in my professional life, and I was so inspired by @UrLogicFails's fantastic new community icons that I wanted to try out some of my own design ideas for Beehaw.

First, I tried my hand at an icon for Beehaw. I'm endeared to the little pixelated bee-cowboy we have now, but my background is in cleaner, more minimal designs that are easy to deploy to lots of different devices. A good logo sets a good first impression, and I want new users to see Beehaw as a real, legitimate alternative vision for social media. I've tried to recreate the back of a bee, and used the wings to form a subtle letter "B." My personal favorite is the ~~hexagon~~ bestagon, but I have both iOS and Android variations. Icon design is always really contentious, but it's also really fun - I'd love to see other people's ideas!

Second, I took a stab at tweaking the design of Beehaw, with the goals improving the layout and padding, introducing a more consistent color scheme, increasing legibility, and (of course) incorporating more bee elements. I'm working on a CSS theme that incorporates some of these changes, but others are beyond the scope of CSS injections and will require actual work on Lemmy-UI.

Light Theme:

Dark Theme:

I'd love to hear your thoughts, and I'm happy to share more if people are interested :)

Thanks for viewing, take care!

view more: next ›

Sintamo

joined 11 months ago