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.
21 Comments
PriorProject@lemmy.world · 5 pts · 3y
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@lemmy.world · 2 pts · 3y
Worth a shot, bit of work to be done besides just the CSS
joestaen@lemmy.world · 4 pts · 3y
cheers for this
i detest having content centered, so having this style + 80% magnification definitely sates my burning hatred for modern ui design
ifDogsCouldTalk@lemmy.click · 2 pts · 3y
Thanks. But how can we use this?
dx1@lemmy.world · 3 pts · 3y
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.
Glunkbor@lemmy.world · 2 pts · 3y
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@lemmy.world · 2 pts · 3y
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.
key@lemmy.keychat.org · 2 pts · 3y
Oh that's exactly what I've been wanting! Just added it into my instance's default theme. Thanks!
dx1@lemmy.world · 1 pts · 3y
If you're doing that definitely make sure to check for updates 🎃
NabiscoShredderWheat@lemmy.antemeridiem.xyz · 1 pts · 3y
cereal7802@lemmy.game-files.net · 1 pts · 3y
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@lemmy.world · 2 pts · 3y
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.
blevok@startrek.website · 1 pts · 3y
I added this to make the gap between posts smaller.
edit: For some reason this doesn't seem to work on some instances, not sure why.
dx1@lemmy.world · 1 pts · 3y
If you're looking for the hr my CSS is actually hiding those and doing margin+padding on the posts:
although the selector may be too specific. IDK what "my-3" is but figured it might be too general.
blevok@startrek.website · 1 pts · 3y
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.
dx1@lemmy.world · 1 pts · 3y
Also you probably need semicolons on each line with a property assignment.
blevok@startrek.website · 1 pts · 3y
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@lemmy.world · 1 pts · 3y
One of the versions I had up had "& gt ;" (html special character) instead of ">". Current version should be working on startrek.website.
GreyCat134@lemmy.world · 1 pts · 3y
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@lemmy.world · 1 pts · 3y
This doesn't change that, it's just that user styles only apply to a specific domain (usually).