Apparently Lemmy copied the new reddit layout which shoves everything into the middle of the screen and wastes a massive amount of space. Even on the monitor I oriented vertically this is the case: the post I’m typing right now is using like 30% of the available screen real-estate and wasting the other 2/3rds.

My philosophy has always been that if reddit removed support for the old style, that’s when I’d stop using reddit. Switching to Lemmy is like switching to new reddit though.

I made an account, but I can’t really see using this as a replacement. I’d guess (but I might be wrong) that the type of people clinging to the old reddit style are also the most likely to do something like switch to Lemmy out of principle.

(I looked around and it doesn’t seem like there are any browser addons or userscripts to restyle it either.)

  • metarmaskEnglish
    1·
    2 years ago

    While I don’t want text to take up my entire widescreen monitor, there are still lots of changes I would make. But there is practically no semantic information in the HTML, so it was annoying to create a user style. It would break if the site was another language or they decide they want a special color somewhere.

    Here’s my user style for sh.itjust.works:

    spoiler 
    body {
    font-family: sans-serif;
}

.comment-node [data-tippy-content*="Upvote"].text-info, .comment-node [data-tippy-content*="Upvote"].text-danger, [aria-label="Upvote"], [aria-label="Downvote"] {
    filter: hue-rotate(180deg);
}

/* username */
.comment-node > div:nth-child(1) > div:nth-child(1) > span:nth-child(1) > a.text-info {
    color: gray !important;
    font-size: 0.9em;
}

/* permalink */
.comment-node [title="link"] {
    filter: grayscale();
}

/* score */
.comment-node [data-tippy-content*="Upvote"], [aria-label="Expand"], [aria-label="Collapse"] {
    order: -1;
    font-size: 1.2em;
}

/* WIP attempt at making collapse vertical */
.comment-node {
    position: relative;
}
[aria-label="Expand"], [aria-label="Collapse"] {
    position: absolute;
    top: 0px;
    left: -50px;
    height: 500px;
    display: block;
    height: 100px;
}