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
blank
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.
All Comments
21 comments
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.
1 0 ReplyThis doesn't change that, it's just that user styles only apply to a specific domain (usually).
1 0 Reply
21 comments
Scroll to top