32
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.
Oh that's exactly what I've been wanting! Just added it into my instance's default theme. Thanks!
If you're doing that definitely make sure to check for updates ๐