But it turned out to be much simpler than I thought!

The challenge was to recreate a site I made once in J!3, where the sidebar and the content-area were equal width. The site also had a big, floating button-type thing with the social links.

At the time, if memory serves, this was quite a lot of work, and it involved modifying the template's index.php. I needed to change the span widths for the sidebar- and content columns, and add a new div to hold the floater.

Either I've learned a lot over the past years, or J4 is simply easier to work with... 

Copying layout of an old site

Three challenges:

• the left sidebar and the content area are equal width;
• there's a little svg inserted before every H1;
• there's a floating div stuck to the right side of the screen (for social links).

First, I made a copy of the template to work with, because this page needs it's own CSS file, mostly because I'm changing the basic .site-grid, also because all colors are different.

Roll on Child Templates! They weren't there yet when I wrote this, but I think they will arrive with version 4.0.6...

Well, the equal width thing was easy! Change the line with the component area (it used to be side-l comp comp side-r).

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

The dots (unnamed cell tokens) at the beginning and end of each line of areas represent an unnamed area in the container. Interesting, that... 

Adding the svg in front of the H1 was a piece of cake too - simply used the same CSS :before as in the original site.

And adding the floater was a breeze! I just popped a module into the bottom-b position, and did the rest in CSS! (See Fonts and FontAwesome for the coding of FA icons).

.grid-child.container-bottom-b {
    width: 5rem;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

The "position: fixed" takes the module right out of the page flow and puts it where it needs to go.

I am frankly amazed at how easy all this was! I remember it all being such a complicated puzzle when I made the original site.