this post was submitted on 13 Jun 2023
32 points (97.1% liked)

Lemmy.World Announcements

29082 readers
225 users here now

This Community is intended for posts about the Lemmy.world server by the admins.

Follow us for server news 🐘

Outages πŸ”₯

https://status.lemmy.world

For support with issues at Lemmy.world, go to the Lemmy.world Support community.

Support e-mail

Any support requests are best sent to [email protected] e-mail.

Report contact

Donations πŸ’—

If you would like to make a donation to support the cost of running this platform, please do so at the following donation URLs.

If you can, please use / switch to Ko-Fi, it has the lowest fees for us

Ko-Fi (Donate)

Bunq (Donate)

Open Collective backers and sponsors

Patreon

Join the team

founded 2 years ago
MODERATORS
 
h5, .h5{
  font-size: 1rem !important;
}
.post-title h5{
    font-size:0.9rem !important;
}
.btn {
  font-size:0.75rem !important;
}

/* main layout */
#app > div > div > .container-lg {
    max-width: 100% !important;
}
#app > div > nav {
    max-width: 100% !important;
}
#app > div > div > .container-lg > div > aside {
    font-size:0.8rem;
}
#tagline {
    background-color:rgb(2, 128, 96);
    border-radius:0.5rem;
    border:solid 1px rgba(255,255,255,0.7);
    padding:0.25rem 0.5rem;
    font-size:0.8rem;
    margin-bottom:0.5rem;
}
#tagline p{
    margin-bottom:0;
}
#sidebarContainer h1,h2,h3,h4,h5,h6{
   font-weight:bold;
}
#sidebarContainer h1{
   font-size:1.3rem;
}
#sidebarContainer h2{
   font-size:1.25rem;
}
#sidebarContainer h3{
   font-size:1.2rem;
}
#sidebarContainer h4{
   font-size:1.15rem;
}
#sidebarContainer h5{
   font-size:1.1rem;
}
#sidebarContainer h6{
   font-size:1.05rem;
}
/* post index page */
.post-listings hr.my-3, .person-details hr.my-3 {
   display: none;
}
.post-listing{
    background-color: rgba(255,255,255,0.023);
    margin: 0.4rem 0 !important;
    padding: 0.3rem 1rem !important;
    border: solid 1px rgba(255,255,255,0.2);
    border-radius:0.5rem;
}
.post-listing .post-container > div:first-child{
    min-width:70px;
}
.post-listing .thumbnail{
    width:7rem;
}
.post-listing .offset-sm-3{
    margin-left:180px;
}
.post-listing .person-listing picture img {
    width: calc(var(--bs-body-line-height) * 0.7rem);
    height: calc(var(--bs-body-line-height) * 0.7rem);
}
.post-title h1{
    font-size:0.9rem !important;
}
/* post listing middle row (e.g. @bob to Whatever English * 20 hours ago ) */
.post-container > .col > .row > .col > div.small{
    font-size:0.8rem !important;
}
/* post site domain */

.post-container > .col > .row > .col > p.small{
    font-size:0.8rem !important;
}
/* person profile */
.person-details .comments > .comment {
    margin-left:0 !important;
}
.person-details .comments {
    margin-bottom:0 !important;
}
.person-profile > .row {
    display: flex; 
}
.person-profile > .row > .col-md-8 {
    flex-basis:100%; /* nothing is showing up in the .col-md-4 sidebar right now? maybe temporary issue? */
}

/* comments general */
.comments .comments {
    border-left: solid 1px rgba(255,255,255,0.15);
    padding-left: 1rem !important;
    border-left-width:6px !important;
}
.comment {
    margin-left: 1rem !important;
    background-color:var(--bs-body-bg);
}
.comment .md-div p {
    font-size:0.825rem;
}
.comment .comment-node {
    background-color:rgba(255,255,255,0.028);
    border:solid 1px rgba(255,255,255,0.3);
    margin-bottom:3px;
    padding:0.25rem 0.5rem !important;
    border-radius:0.5rem;
    border-left-width: 3px !important;
}
.comment .comment-node .flex-grow-1 {
    display:none;
}
.comment-node > .ms-2 { 
  margin:0 !important;
}

/* post page */
.post ul.comments > .comment {
    margin-left: 0 !important;   
}

/* navbar */
.navbar-light .navbar-nav .nav-link {
  background-color: rgba(255,255,255,0.03);
  margin-right: 0.5rem;
}

/* bottom row of post listing right (comments, star, etc.) */
.post-listing .row .col-12 .d-flex:last-child{
    margin-bottom:0 !important;
}
.post-listing picture img.rounded-circle{
    width:1.25rem;
    height:1.25rem;
}
.post-listing .d-none .row .col-sm-2 {
    max-width:150px;
}
.post-listing .d-none .row .col-sm-9 {
    display:flex;
    align-items:center;
}
#app > .mt-4.p-0.fl-1 {
    margin-top:0rem !important;
}

I'll probably keep tweaking these, stay tuned.

edit 2023-07-02 - updated for new layout changes. Still need couple more classes in lemmy-ui for some big containers & comment stuff. Stay tuned and maybe I can get this in the main repo.

top 20 comments
sorted by: hot top controversial new old
[–] PriorProject 5 points 1 year ago (1 children)

This is cool, have you considered contributing it to lemmy-ui as a theme? https://github.com/LemmyNet/lemmy-ui/tree/main/src/assets/css/themes

[–] dx1 2 points 1 year ago

Worth a shot, bit of work to be done besides just the CSS

[–] joestaen 4 points 1 year ago

cheers for this

i detest having content centered, so having this style + 80% magnification definitely sates my burning hatred for modern ui design

[–] Glunkbor 2 points 1 year ago

This is great, thank you! It feels more like old-reddit, as you said, and I think having this option would make it even easier for people to transition to Lemmy. Well done!

[–] dx1 2 points 1 year ago

Note Lemmy has a serious lack of properly marked up HTML, things like ".post-listing .title" don't exist so there are nasty CSS selectors included here.

[–] [email protected] 2 points 1 year ago (1 children)

Thanks. But how can we use this?

[–] dx1 3 points 1 year ago* (last edited 1 year ago)

You use an extension like Stylus (not "Stylish" sorry) to graft the CSS onto your favorite Lemmy instance's CSS. Until they move everything around and it breaks at least.

[–] [email protected] 2 points 1 year ago (1 children)

Oh that's exactly what I've been wanting! Just added it into my instance's default theme. Thanks!

[–] dx1 1 points 1 year ago

If you're doing that definitely make sure to check for updates πŸŽƒ

[–] [email protected] 1 points 1 year ago (1 children)

Might want to create a git repo for this (maybe other themes) and get it converted to a full fledged theme for lemmy. I tacked your changes onto the end of the darkly-red theme and seems to look nice. I was just too lazy to remove the bits from the original theme. A git repo would be good though since a lot of the responses suggest coming back for updates. Git will let people know if there is a change and they can see what they are as they change.

[–] dx1 2 points 1 year ago

Yeah, I'm working on pushing some changes into lemmy-ui right now to make themes in general work. It might not even be far from there to getting user-contributed themes baked into the main lemmy-ui and being user selectable.

[–] GreyCat134 1 points 1 year ago (1 children)

I personally like how things are currently. A local front page for the instance I’m apart of and a front page of communities I subscribe to. If I want to see what’s going on in other instances I can go visit those.

[–] dx1 1 points 1 year ago

This doesn't change that, it's just that user styles only apply to a specific domain (usually).

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago) (1 children)

I added this to make the gap between posts smaller.

.my-3 {  
    margin-bottom: 0.2rem !important;
    margin-top: 0.2rem !important;
}

edit: For some reason this doesn't seem to work on some instances, not sure why.

[–] dx1 1 points 1 year ago (1 children)

If you're looking for the hr my CSS is actually hiding those and doing margin+padding on the posts:

#app > .mt-4 > .container-lg hr.my-3 {
   display: none;
}

although the selector may be too specific. IDK what "my-3" is but figured it might be too general.

[–] [email protected] 1 points 1 year ago (2 children)

Yeah it's the hr, which somehow i can still see. I have the same css on startrek.website and while it's still not hidden there, setting the margin does work, but not on lemmy.world for some reason. I can see that both sites have the same class for the hr (my-3), so i'm kinda stumped at the moment.

I also added the following to change the width and spacing of columns, and again it works on startrek.website, but not on lemmy.world. It's really strange.

.container,.container-lg,.container-md,.container-sm,.container-xl {
    max-width:1540px
}
.col-md-4 {
    flex: 0 0 25%;
    max-width: 25%
}
.col-md-8 {
    flex: 0 0 75%;
    max-width: 75%
}
[–] dx1 1 points 1 year ago (1 children)

Also you probably need semicolons on each line with a property assignment.

[–] [email protected] 1 points 1 year ago

I can't believe i left out semicolons. Sadly it changed nothing though. But it's weird, as i continued to screw with it, i refreshed after some random change, and suddenly everything worked. Then i refreshed again and it went back to not working. No changes, just another refresh. And i do see my values in the live css in the inspector. That seems to indicate that reality as i perceive it is a lie and i'm likely the subject of an experiment that's being conducted by beings living in a reality that's outside the realm of my awareness or comprehension.

[–] dx1 1 points 1 year ago* (last edited 1 year ago)

One of the versions I had up had "& gt ;" (html special character) instead of ">". Current version should be working on startrek.website.

load more comments
view more: next β€Ί