Cassiopeia Positions

To find out where everything goes in Cassiopeia, I pulled the HTML from Cassiopeia's index.php and styled it a bit.

Some notes...

Sticky menu

If you choose to make the menu sticky, it will make the whole "header" section sticky...

Sidebar width

If you want to change the width of a sidebar, you will have to tinker with the CSS for the "site-grid" section. It is initially styled as a CSS grid, like this:

.site-grid {
    display: grid;
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". comp comp comp comp ."
        ". side-r side-r side-r side-r ."
        ". side-l side-l side-l side-l ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
    grid-gap: 0 1em;
}

And on larger screens, like this:

@media (min-width: 992px)
.site-grid {
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
}

Making the side bars smaller can be done like this:

.site-grid {
	grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 17.875rem) repeat(2, minmax(0, 21.875rem)) minmax(0, 17.875rem) [main-end] minmax(0, 1fr) [full-end];
}

or whatever width you prefer. The total max-width determines the width of the content area - in this example, I kept the same total in rems.