Feeling cyberpunk? (lemmy.today)
submitted 6 months ago* (last edited 6 months ago) by [M] to c/lemmytoday@lemmy.today
 

Hi everyone!

There is a new theme called cyberpunkish in the web interface settings now.

I wanted to create a theme for this instance and this is my first stab at it. If you try it out, any feedback is very welcome!

I edited this post to show how it looks now in latest version. I will sticky this post for a day so regular users dont miss info about it.

Frontpage:

Comments:

Communities:

Huge thanks to @Allero@lemmy.today for so much great feedback about the theme.

If many people think its great, perhaps we set it as default for the instance.

you are viewing a single comment's thread
view the rest of the comments
[–] 4 points 6 months ago* (32 children)

Niiiice

Gonna try it out soon!

  • source
  • hideshow 32 child comments
  • [–] 3 points 6 months ago* (last edited 6 months ago) (31 children)

    Coming back after I tried, now I love it more than Photon! You really managed to breathe some fresh air into an otherwise bulky and rough interface

    If I would change anything after playing around with it for a while, it's the amount of gradient elements that make it look a bit too vibrant and cheap at the same time. Though I absolutely adore how you managed to highlight selected toggles like "Subscribed/Home/All" and "Hot/Top/Controversial/New/Old". And the top bar is pure gold, with cyberpunkish instance name and perfect menu grouping.

  • source
  • parent
  • hideshow 31 child comments
  • [–] [S] 2 points 6 months ago* (last edited 6 months ago) (30 children)

    Thank you! Im still working on it, so I really love the feedback. Which gradients would you get rid off? Take screenshots and show me if you have some time. :)

    I dont know if I like the right side gradients so much, something feels off here to me:

    And also not sure about the post form if its too much:

  • source
  • parent
  • hideshow 30 child comments
  • [–] 2 points 6 months ago* (last edited 6 months ago) (29 children)

    Yes, the right side is a big culprit indeed, especially the links. They may use something to be less bland, maybe, but they shouldn't be so vivid as to throw the visual balance.

    Also maybe something can be done about the gradient bar next to posts:

    Maybe extend and curve them a little to fit the post blocks, so that they would look more complementary?

    The comment field you demonstrated is fine by me - if only the text field should be more consistent. It should either be all black, without that gradient frame, or the gradient color should fill the whole field.

  • source
  • parent
  • hideshow 29 child comments
  • [–] [S] 2 points 6 months ago* (last edited 6 months ago) (28 children)

    Thank you, will see what I can do the coming days. I like that gradient next to the posts, but you are thinking they could be a bit curved to cover a bit of the top and bottom as well, like "[" ?

    Maybe each post could have some thin border around it with gradient, but could be too much also.

    Some experiments:

  • source
  • parent
  • hideshow 28 child comments
  • [–] 3 points 6 months ago* (27 children)

    Oooh, the second one is good! Even better than I envisioned. The first one has some merit too - especially if it could display upvote/downvote ratio, though as most posts have it on the side of upvotes, this adds some complexity. Also I don't know if it's even possible. But in any case, the second one is good as it is.

  • source
  • parent
  • hideshow 27 child comments
  • [–] [S] 3 points 6 months ago (26 children)

    Yeah it kind of fits well into the vibe. If you pick the "test3.css" theme you can use it and see how it fits overall.

  • source
  • parent
  • hideshow 26 child comments
  • [–] 2 points 6 months ago (25 children)
  • [–] [S] 1 point 6 months ago* (24 children)

    I made the gradient blue only, it felt like it was a bit too much color going on there... and changed the sidebar and the logotype a bit. What do you think?

    This is test5.css at the moment. :)

  • source
  • parent
  • hideshow 24 child comments
  • [–] 1 point 6 months ago* (23 children)

    Not bad! This elegantly solves the consistency of link design

    Absolutely love the highlight before "About us" section of the sidebar, but "LEMMY TODAY" on the sidebar would probably be better off colored.

  • source
  • parent
  • hideshow 23 child comments
  • [–] [S] 1 point 6 months ago (22 children)

    Yeah thats a good idea. So many details to try and get right. I very much appreciate your feedback :)

  • source
  • parent
  • hideshow 22 child comments
  • [–] 1 point 6 months ago (21 children)

    It's zero effort compared to you tweaking everything far and wide to make this place the best!

  • source
  • parent
  • hideshow 21 child comments
  • [–] [S] 2 points 6 months ago (20 children)

    Yeah I got more motivated now myself when the server is so fast. :) It was fine before too but definently feels more fun to use now.

  • source
  • parent
  • hideshow 20 child comments
  • [–] 2 points 6 months ago (19 children)

    A manly desire to play with powerful toys lol

    Totally understandable!

  • source
  • parent
  • hideshow 19 child comments
  • [–] [S] 1 point 6 months ago* (last edited 6 months ago) (18 children)

    The gradient on the left became ugly when it was a long post. I experimented a bit and what about this look? I think it looks really clean and cyber. :) Not sure about the purple on the right side, maybe too much.

    It also looks cool to remove the borders from the posts so they are floating in space:

    These are test5.css and test6.css if you want to try live.

  • source
  • parent
  • hideshow 18 child comments
  • [–] 1 point 6 months ago (17 children)

    Hell yeah! Can't tell if the purple on the right is too much or not, can you screenshot both options?

    Also, on the sidebar, either the line at the top needs to go away or there should be a bigger distance between it and LEMMY TODAY

  • source
  • parent
  • hideshow 17 child comments
  • [–] [S] 2 points 6 months ago (16 children)

    Added another screenshot. And yeah, I was thinking it becomes too much there also... its funny, because you always say the things that im also thinking of when it comes to the design. Must be a good sign. :)

  • source
  • parent
  • hideshow 16 child comments
  • [–] 2 points 6 months ago (15 children)

    Looks nice without post borders! But then the purple line on the right of the post is certainly unnecessary.

  • source
  • parent
  • hideshow 15 child comments
  • [–] [S] 1 point 6 months ago* (14 children)

    Totally agree yeah. I removed it, and also changed the neon blue line on the posts slightly, and made the form look better. Also Communities looks a bit styled now. And a pink ring on post hover.

    Still have to do the Create Community and Create Post later and also fine tune some buttons.

    The changes are in "test6.css" if you want to try it out yourself and play around.. :)

  • source
  • parent
  • hideshow 14 child comments
  • [–] 1 point 6 months ago (13 children)

    Will certainly give it a spin a bit later!

  • source
  • parent
  • hideshow 13 child comments
  • [–] [S] 1 point 6 months ago (12 children)

    Ok! Im all the time comparing to original screenshot and some things are better, some may be worse.

    Perhaps a background for posts are slightly better after all, it does look a bit empty without it. But have a try and see.

  • source
  • parent
  • hideshow 12 child comments
  • [–] 1 point 6 months ago (11 children)

    Yep, test5 is better than test6 in terms of posts. Makes sense to return background

  • source
  • parent
  • hideshow 11 child comments
  • [–] [S] 2 points 6 months ago (10 children)

    Yeah I guess. Thank you again! Will finish the theme within the next few days i hope.

  • source
  • parent
  • hideshow 10 child comments
  • [–] 1 point 6 months ago (9 children)

    Oh, one more thing, at least judging by test5.

    The whole comment section has that blue line on the left. In a default theme, lines on the left are reserved for comment responses, not for original comments on the post.

    As a result, the whole comment section looks like it's a response to a specific comment, which is confusing.

  • source
  • parent
  • hideshow 9 child comments
  • [–] [S] 1 point 6 months ago (7 children)

    Alright, check out test7. :) Ive changed how comments are drawn, fixed the line bug for parent comments, and also try clicking on the Communities, Create Post and Create Community buttons, lots of changes there. And post form is now without gradients and more integrated into the look.

    Feedback welcome :)

  • source
  • parent
  • hideshow 7 child comments
  • [–] 1 point 6 months ago* (6 children)

    Ooohhhh, that's gold! Love how you added gradient to comment lines - it makes things just right - and yes, now parent comments are easily identifiable, and also citations and highlights look awesome! The communities page is pure platinum, too! I think you reached absolute perfection there. One thing I would change is the Communities/Create Post/Create Community buttons themselves. No need to have gradient frame there IMO, maybe even a simple copy of Subscribed/Local/All/Moderator view would do, but that needs testing. Also, rounding the Search button in the Communities section would likely add consistency.

  • source
  • parent
  • hideshow 6 child comments
  • [–] [S] 2 points 6 months ago (5 children)

    Super! Yeah, the Search button there and the Next button on main page needs to be rounded, easy fix.

    Perhaps the gradient frame on top menu was a bit overboard.. -)

    But we are getting close to something that is quite nice to use. I would use this theme when im in the browser for sure.

  • source
  • parent
  • hideshow 5 child comments
  • [–] 1 point 6 months ago (4 children)

    I already use it when on browser! Switched from Photon because you finally made the default interface actually good

  • source
  • parent
  • hideshow 4 child comments
  • [–] [S] 1 point 6 months ago (3 children)

    Alright, I guess final changes, fixed the top bar so its more blending in:

    Also made these icons a bit smaller:

    A bit lighter background on comments since the black was giving me eye strain.. :)

    New comments stand out properly:

    Give it a try, its still test7.css. Starting to feel final enough to overwrite cyberpunkish.css. :)

  • source
  • parent
  • hideshow 3 child comments
  • [–] 1 point 6 months ago* (2 children)

    Testing new comment highlight while we're at it. Update: good!

    Also - somehow for me the Communities/Create post/Create Community boxes are still with that gradient frame, so it's either something on my end or you didn't apply this change. But looking by your screenshots, it should be very good!

    Update: you applied your changes to cyberpunkish, not test7. Now I see all changes properly, and they are all good!

  • source
  • parent
  • hideshow 2 child comments