xref: /template/strap/resources/theme/default/pages/templates/holy.css (revision f62fa21fcd872511ea6a54d618dc0eb88a010fdb)

main > *, #page-core {
    min-width: 0; /** not auto */
}


@media (min-width: 768px) {

    #page-core {
        display: grid;
        gap: 1.5rem;
        grid-template-areas: "page-side page-main";
        grid-template-columns: minmax(min-content,1fr) 3fr;
        align-content: flex-start
    }

    #page-side {
        grid-area: page-side;
    }

    #page-main {
        grid-area: page-main;
    }

}


@media (min-width: 992px) {

    #page-core {
        grid-template-columns: minmax(min-content,1fr) 5fr;
    }

    main {

        grid-area: page-main;
        display: grid;
        grid-template-columns: [main] 7fr [side] minmax(auto,2fr);
        grid-auto-flow: row;
        gap: 1rem;
        grid-template-areas: unset;
        margin-left: 1rem;
        margin-right: 1rem;
        align-content: flex-start

    }

    #main-toc {
        grid-column: side;
        grid-row: 1 / span 5;
        position: sticky;
        top: 5rem;
        z-index: 2;
        height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    #main-header {
        grid-column: main;
    }

    #main-content {
        grid-column: main;
    }

    #main-footer {
        grid-column: main;
    }

    #main-side {
        grid-area: unset;
    }

}