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)

    • joobeejoo47@kbin.social
      1·
      1 year ago

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