Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com
Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com
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.
You're viewing a single thread.
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.
1 0 ReplyIf 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.
1 0 ReplyYeah 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% }
1 0 ReplyOne of the versions I had up had "& gt ;" (html special character) instead of ">". Current version should be working on startrek.website.
1 0 ReplyAlso you probably need semicolons on each line with a property assignment.
1 0 ReplyI 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.
1 0 Reply