Moving to: m/AskMbin!

19 readers

1 users here now

### We are moving! **Join us in our new journey as we take a new direction towards the future for this community at mbin, find our new community here and read this post to know more about why we are moving. Thank you and we hope to see you there!**

founded 1 year ago

Why is no one decorating their magazines? (kbin.social)

submitted 1 year ago* (last edited 1 year ago) by Jaysyn@kbin.social to c/AskKbin@kbin.social

88 comments fedilink hide all child comments

Why is no one using CSS to make their magazine's visual appearances more unique? That was the main draw of old Reddit for me.

(I mean I am, but that is why I asked)

you are viewing a single comment's thread
view the rest of the comments

[–] joobeejoo47@kbin.social 1 points 1 year ago (1 children)

Can you share your code for that? It looks really good! If you're okay with it, I'd like to copy it and tweak a bit for my own magazine.

[–] atocci@kbin.social 3 points 1 year ago* (last edited 1 year ago)

Edit: Added a comment and updated the option bar to match the navbar.
Sure, here you go! I've never done anything like this before so it's probably a formatting disaster, but I've done my best to clean it a bit and add some comments about what does what here. This is what I've come up with after a few hours of just poking around with the inspect element feature and reading some tutorials:

/* Navbar */
#header {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
position: relative; z-index: 4001
}

/* Page background image */
#middle {
background: url(https://toaru-project.com/railgun_t/core_sys/images/main/common/logo_t.svg) no-repeat center center fixed;
background-size: contain;
}

/* Post box transparency */
.section {
opacity: 0.96;
}

/* kbin footer background */
#footer {
background: linear-gradient(to top right, rgba(229, 0, 32, 1) , rgba(242, 151, 57, 1));
}

/* The little arrow button in the bottom right that takes you back to the top of the page */
#scroll-top {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}

/* Options bar */
#options {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
position: relative
}

/* upvote color */
.vote .active.vote__up button {
color: rgba(242, 151, 57);
}

/* Media viewer background blur */
.goverlay {
background: rgba(0,0,0,.5);
backdrop-filter: blur(15px);
}