I would like to help styles

[ihsan6133]

Any way I can work on the proj in my local machine? When I clone it, the networking code does not work since the socket io is bound to https://reddark.untone.uk/, so it is difficult to develop this. It is just stuck here what do i do?

[Tanza3D]

you need to run it using node.js through a terminal, also please wait a moment as i'm just about to push a reasonably large change to the css :3

[Tanza3D]

oh, my bad, the domain is hardcoded, i'll fix that too :sweat_smile:

[Tanza3D]

should work now!

[ihsan6133]

I think you could make the subreddits in tiles, somethign like this (Ik the color schemems are all probably stupid, but like the tiling could be good)

[Tanza3D]

could you share the css used to do this? i was trying to do this earlier to be honest, but i could never figure out why the padding on the bottom of the tiles were so big...

[ihsan6133]

That is the same case on larger grids. I think it is because the height of the .subreddit is calculated by the grid. so if any single subreddit element is big (if it has a big name, which goes multiple lines), then all of the subreddit divs get the same height.

[Tanza3D]

hmm... then in that case this may not look so good

[ihsan6133]

maybe, make the long subreddit names cut off without wrapping to the next line? and add a tooltip with the full name

[Tanza3D]

i'd prefer to make the font size smaller and rows wider to be honest, but i could still see there being issues with that, i think it's best to keep no background for the time being

[ihsan6133]

[Tanza3D]

yeah, looks weird to me

[samstorment]

How about something like this instead?

Uses flexbox instead of grid on the .section-grid containers:

/* would make sense to rename the class*/
.section-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

Adds the following to the .subreddit class:

.subreddit {
    border: 1px solid #fff2;
    padding: .5rem 1rem;
    border-radius: 25rem;
}

And removes the margin-bottom from the .subreddit-private class as well as adding a different different border color with some box shadow glow:

.subreddit-private {
    color: #00ffaa !important;
    text-shadow: 0px 0px 20px #00ffaa !important;
    /* margin-bottom: 15px; */
    font-weight: 900;
    position: relative;
    border-color: #0fa !important;
    box-shadow: 0 0 10px 0 hsla(160, 100%, 50%, .2);
}

I haven't dug too deeply into the CSS, but I had to use !important to override the border color for some reason. With that being said, I highly recommend avoiding !important as much as possible. I just threw it on to make my example work but I'd definitely prefer never using it if possible (which is almost always possible) since it's just something that causes tons of selector specificity headaches.

[ihsan6133]

thats pretty sick!

[ihsan6133]

is there a way to align the right edges?

[chrisephoto]

@ihsan6133 adding the following line of css should align everything nicely

.subreddit {
    flex: 1 0 auto;
}