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)
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)
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.
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);
}