horizontal cohost by fournm

/* ==UserStyle==
@name           horizontal cohost
@namespace      fournm
@version        1.0.0
@description    Horizontal cohost! Not particularly eggbug approved nor currently mobille-functional.
@author         fournm
==/UserStyle== */

@-moz-document regexp("https://cohost.org/(?!rc.project).*") {
@media(min-width: 1024px) {
    /* main container */
    main > div.container {
        display: flex !important;
        flex-flow: row;
        gap: 4em;
        margin-left: 4em;
        margin-right: 0;
    }

    /* patch notes */
    main > div > section.text-sidebarText {
        order: -1;
        width: 400px;
        flex-shrink: 0;
    }

    /* feed */
    .container > section:not(.text-sidebarText) > *:nth-child(2) {
        flex-direction: row !important;
    }

    .container > section:not(.text-sidebarText) > *:nth-child(2) > .renderIfVisible {
        width: 600px;
    }
}

@media(max-width: 1023px) {
    /*
    main > div.container {
        display: flex !important;
        margin-left: 0;
        margin-right: 0;
    }

    .container > section:not(.text-sidebarText) > *:nth-child(1) {
        max-width: 100vw;
    }

    .container > section:not(.text-sidebarText) > *:nth-child(2) {
        margin-top: 2em;
        flex-direction: row !important;
        overflow-x: scroll;
    }

    .container > section:not(.text-sidebarText) > *:nth-child(2) > .renderIfVisible {
        width: 100vw;
    }
    */
}
}

@-moz-document regexp("https://cohost.org/rc/project/.*") {
@media(min-width: 1024px) {
    /* main container */
    main > div.container {
        display: flex !important;
        flex-flow: row;
        gap: 4em;
        margin-left: 4em;
        margin-right: 0;
    }

    /* feed */
    .container > section {
        flex-direction: row !important;
    }

    .container > section > div {
        width: 600px;
    }
}
}

@-moz-document regexp("https://cohost.org/rc/liked-posts.*") {
@media(min-width: 1024px) {
    /* main container */
    main > div.container {
        display: flex !important;
        flex-flow: row;
        gap: 4em;
        margin-left: 4em;
        margin-right: 0;
    }

    /* feed */
    .container > section > div {
        flex-direction: row !important;
    }

    .container > section > div .renderIfVisible {
        width: 600px;
    }
}
}