Skip to content

Sheezy - Two columns in art page by dipodidae

Screenshot of Sheezy - Two columns in art page

Details

Authordipodidae

LicenseNo License

Categorysheezy.art

Created

Updated

Size2.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A layout for sheezy.art that rearranges the artwork viewing pages to have a two column layout.

Notes

If you find any bugs or would like a custom tweaked version of this, hit me up on sheezy @dexaroth!

Source code

/* ==UserStyle==
@name           Sheezy - Recommendation highlights + Two columns in art page
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         @dexaroth
==/UserStyle== */
@-moz-document url-prefix("https://sheezy.art/") {

    /* main container */
    ._5i-I4:has(#artwork) {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(3, auto);
    }
    /* drawing  .u-cSI */
    ._5i-I4:has(#artwork) .u-cSI {
        grid-row: span 3;
    }
    /* description */
    ._5i-I4:has(#artwork) .sBkzs:nth-of-type(1) {
        max-width: 100%;
        grid-row: 1;
        grid-column: 2;
    }
    /* comments */
    ._5i-I4:has(#artwork) .sBkzs:nth-of-type(2) {
        grid-row: 2;
    }
    /* related artworks */
    ._5i-I4:has(#artwork) .sBkzs:nth-of-type(3) {
        grid-row: 3;
    }
    /* all previous three */
    ._5i-I4:has(#artwork) .sBkzs {
        grid-column: 2;
    }
    ._5i-I4:has(#artwork) #artwork {
        align-self: start;
        width: 98%;

        /*transition: width 0.5s;*/
    }
    /* removed hover effect
    ._5i-I4:has(#artwork) #artwork:hover {
        width: 100%;
        transition: width 0.5s;
        animation-direction: alternate;
    }
    ._5i-I4:has(#artwork) .kpIkk.mt-50 {
        margin-top: 0rem;
    }*/
    /* styles for when the image is zoomed in via the button */
    ._5i-I4:has(#artwork):has(._7H2QI._7FL9d._2zVj-) {
        display: unset;
    }
    ._5i-I4:has(#artwork):has(._7H2QI._7FL9d._2zVj-) {
        grid-template-columns: 1fr;
    }
    ._5i-I4:has(#artwork):has(._7H2QI._7FL9d._2zVj-) .sBkzs:nth-of-type(1) {
        max-width: 100%;
        grid-row: 2;
        grid-column: 1;
    }

    ._5i-I4:has(#artwork):has(._7H2QI._7FL9d._2zVj-) .sBkzs {
        grid-column: 1;
    }

    /* zoom button*/
    ._5i-I4:has(#artwork) .HazV7 {
        bottom: auto;
        right: 50%;
        left: 50%;
        top: 3rem;
    }

    @media (min-width: 900px) {
        .tablet\:mt-60 {
            margin-top: 6rem;
        }
    }
}

Reviews

No reviews yet.