Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com

3 years ago by dx1 to c/lemmyworld

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.

load all comments
blevok 1 point 3 years ago

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.

path: 0 119993, hotness: undefined, score: 1, children: 5
dx1 1 point 3 years ago

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.

path: 0 119993 128513, hotness: undefined, score: 1, children: 4
blevok 1 point 3 years ago

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%
}
path: 0 119993 128513 131659, hotness: undefined, score: 1, children: 3
lemmyworld
lemmyworld

@lemmy.world

login for more options
31471
771
649

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 info@lemmy.world 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

go to feed...