A series of front-end (non) updates - “Joins Darkside Post U-Turn”

    While a couple of enthusiasts took up the task of converting my ideas into a ready-made preset for Stylish, I had a motivating feeling to continue. Today we’ll go into the depths of the post, see how we can improve the visual perception of tree comments, in some places we will balance the styles. In general, what happened was what I was most afraid of - the craving for perfection curbed me and in some places I corrected not only the colors. Since interest in the darcula theme for Habré was palpable, I will allow myself to roll on with an “inversion” of color.



    By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers are allowed to create beautiful applications on their own, and team leads “sprint” sprints faster using ready-made design systems for team work.

    And if you have a serious project, our team is ready to deploy a design system within the organization based on our best practices and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken


    Let me remind you that in a previous post I turned inside out the Main one and if someone wants to join the enthusiasts and convert PSD> Stylish, I uploaded the source code on drive (sorry for the mess in the layers, but usually I’m diligent)

    By the way, you can already take off the test . Comrade bano-notit is just fine, grabbed a dropper in his hands and right from png shek began to unhook the whole color. Download see this preset for Stylish. Of course, there may be inaccuracies, because he went further than the main one on his own initiative to decorate. Then I realized that it was necessary to continue the work that had been started so that he would not go astray.

    Indeed, on a darkula, pictures with a white background can take much more attention. Comrade suggested a good solutionRondo in the comments: reduce the opacity for all images (I would recommend up to 70% / 0.7), and restore onhover to 100%. Cool and effective!

    The idea is again picked up by bano-notit , offering to make the effects smoother through css by:

    .img {opacity: .1;    transition: all 1s ease-out;}

    In general, caring for users!

    So - a U-turn. Let's see what's dark here:

    Posted by




    Nothing unusual here: links, karma color and rating have already been determined in the first post. In the block below, he only allowed himself to remove the separators, he added a 1px border, which visually strengthened the shape a bit. The selected area of ​​the block is painted in the same color.

    Post author below




    It seems that you just need to make a copy-paste. But no. For some reason, the original on Habré has different font size and intensity for both the “karma” and “rating” headers, and for their meanings. Decided to save, suddenly Habr understood something, but I - not yet!

    Similar publications




    With them, everything is the same as with the Hubs on the main one. Only the stripes were removed somewhere (not by me!). These are all some tricky styles of Habr, do not ask me. Just by analogy with karma, I used the same color for the number of comments on posts.

    Most read




    It is based on the same gamut as the aforementioned block located on the right. The color of the plate with display filters is taken from the main tabs from the main page.

    Comment Title




    It is strange that in Habr’s original there is some sort of already nts style of a font and not from this world. I suggest “pulling” here the font-face headings similar to all. After all, this is the headline ...

    Comments




    I'm trying to optimize UX here. It seems to me that if you slightly “deepen” the steps of the tree of comments, then visually the hierarchy will be better read. Therefore, I aligned the body of the commentary and “reply” not by the level of the avatar, but by the level of the nickname. Try to feel it at the very bottom when I show the whole picture.

    Hierarchy




    And without me you know what sometimes hot fights happen in comments right up to the ntsat level. Here again, I try to optimize the user experience a little bit by drawing a border-left for the container with the answers (yes, it turns out I can inspect elements in Chrome :). I think this is + N to the speed of awareness of the visual order. Specially complicated my task by showing a version with colorful avatars. Although if you suppress the transparency of avatars to alpha = 0.7 like all images in darcul'e, then + 2N is also possible ...

    Textarea bottom




    In general, of course, all of these slurred iconostases must be replaced with material ones, but it was lenient. Sorry. But it wasn’t lazy to apply the same style to buttons as for the button for writing a post at the top. In the original, the styles of these buttons are different. This is a little strange for me.

    Interesting publications


    One to one with “Most Read.” Okay, because I ’m probably tired of separate fragments ... Look at the whole “sheet”:



    Those who wish to download PSD can proceed to the city of disk

    Also popular now: