m724.eu/template/static/style-bak.css

html {
    background: #222;
    background-attachment: fixed;
    color: white;
}

body {
    margin: 0 auto;
    min-width: min(calc(100vw - 40px), 1000px);
    width: calc(50vw - 20px);

@media screen and (max-width: 1200px) {
    width: calc(100vw - 40px);
}
}

#current-blurred {
    position: absolute;

    filter: blur(32px) hue-rotate(180deg) contrast(2) opacity(0.5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    min-width: min(calc(100vw - 50px), 1000px);
    width: 50vw;
    height: 180px;
    border-radius: 45px;
    z-index: -1;
}

.post-short:nth-of-type(1) > article {
    background-color: rgba(20, 20, 20, 0.3);
    margin-bottom: 60px;
    transform: scale(1.01) rotate(0.5deg);
}

.post-short:nth-of-type(1):hover > article {
/* background-color: rgba(20, 20, 20, 0.1); */
    transform: scale(1.02) rotate(1deg);
}

.post-short:hover > article {
    transform: scale(1.01) rotate(0.5deg);
}

.post-short:hover:focus > article {
    transition: transform .15s ease, opacity .2s ease;
    display: fixed;
    transform: scaleY(1.5) translateY(-60px);
    opacity: 0;
}

.post-short {
    article {
        margin-bottom: 20px;
        border-radius: 50px;
        background-color: rgb(37, 37, 37);
        width: calc(100% - 20px);
        height: 160px;
        padding: 10px;
        overflow: hidden;
        transition: .15s ease;

        @media screen and (max-width: 800px) {
            min-height: 160px;
            height: auto;
            img {
                display: none;
            }
        }

        header {
            margin-top: 30px;
            margin-left: 50px;
            width: calc(70% - 50px);
            float: left;
            .title {
                font-weight: 700;
                font-size: 2.3em;
                line-height: 58px;
                margin: 0;
                margin-bottom: 4px;
            }

            .description {
                color: #aaa;
                margin-left: 5px;
                margin-bottom: 30px;
            }
        }

        img {
            width: 30%;
            height: 100%;
            border-radius: 40px;
            object-fit: cover;
        }
    }

    /*@media screen and (max-width: 1200px) {
    width: calc(100vw - 40px);
    }
    */
    }
    #post {
        margin: 0 auto;
        margin-top: 30vh;
        margin-bottom: 20px;
        width: 50vw;
    @media screen and (max-width: 1200px) {
        margin-top: 20vh;
            width: 94vw;
        }
        header {
            padding-left: 20px;
            #title {
                font-weight: 700;
                font-size: 3.3em;
                line-height: 58px;
                margin: 0;
                margin-bottom: 4px;
                a:hover {
                    border-bottom: none;
                }
            }

            #description {
                color: #aaa;
                font-size: 1.13em;
                margin-left: 5px;
            }

            #details {
                margin-bottom: 24px;
                color: #aaa;
                span {
                    user-select: all;
                }

                .separator {
                    margin: 0 7px;
                }
            }
        }
        #image {
            width: 100%;
            aspect-ratio: 16/9;
            position: relative;
            display: flex;

            #front-image {
                position: absolute;
                width: 100%;
                aspect-ratio: 4/2;
                border-radius: 50px;
                object-fit: cover;
            }

            #blurred-image {
                z-index: -1;
                width: 100%;
                height: 100%;
                border-radius: 50px;
                filter: invert(15%) saturate(200%) brightness(52%) blur(32px);
            }
        }
    }

#footer {
    line-height: 4px;
    opacity: 0.5;
    text-align: center;
    font-size: small;
    margin-bottom: 20px;
}

/* content effects */

a {
    color: aqua;
    text-decoration: none;
    border-color: transparent;
    transition: border-radius 50ms ease-out, border-color 50ms ease-out;
    border-radius: 40px;
    cursor: pointer;
}

a:hover {
    border-bottom: 1px solid aqua;
    border-radius: 0;
}

small {
    color: #ddd;
}

.fading {
    background-image: linear-gradient(to right, rgb(150,150,150), transparent);
    background-clip: text;
    color: transparent;
}

.whiteout {
    background: white;
    border-radius: 5px;
}

@property --spoiler-pa {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

@property --spoiler-pb {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

@property --spoiler-pc {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(150, 0, 0);
}

.spoiler {
    color: transparent;
    border-radius: 5px;
    transition: --spoiler-pa .2s ease, --spoiler-pb .3s ease, --spoiler-pc .4s ease, color .2s ease;
    background: linear-gradient(to left, var(--spoiler-pc) var(--spoiler-pa), transparent var(--spoiler-pb));
}

.spoiler:hover {
    color: unset;
    --spoiler-pa: 0%;
    --spoiler-pb: 0%;
    --spoiler-pc: transparent;
}

.center {
    text-align: center;
}

.image-desc {
    position: absolute;
    font-size: small;
    text-align: center;
    opacity: 0.3;
    left: 50%;
    transform: translate(-50%, calc(-40px - 1vw));
}