How’d they do that?

I was reading a site when i realized that despite its simplicity, i was confounded as to how they managed it.

https://www.sarvodaya.org/

The main index contents are wrapped in [li] style which makes them appear boxed, and on hover, the background changes.

the sidebar is open, and unrestricted.

When you click on the permalink title, the layout is reversed.

The sidebar is now contained, and on hover the background changes.
the article is open and formal.

this is lovely (imo)

But my question is how to get the index/single/archive to flop like that???

any idea?