Header
I'm boring and bad at coming up with layouts that aren't boring, so to shake things up a bit, I've adapted the structure from this layout and made it responsive, as I am prone to do.
This code is a bit more complex than the others that I've done, so I actually commented some stuff out for once (though it's mostly just the weird stuff, so don't expect anything comprehensive), and I decided to try CSS variables out! So you won't need to dig through this awful code just to change colors! However, you'll still need to do slightly more intense tinkering with it to add images or change fonts - as always, you're free to shoot me an email if you're not sure what's going on (understandably).
Navigation
There are 2 different navigation styles that can be used in the sidebars and in the extra navigation in the header. There are examples of both in the sidebar: the first one uses the class "grid" and the second uses the class "list". I have done my best to make the naming transparent. The "list" class works best in the header if you have only a small number (4-ish) of links that you want to put there, though if you're good with CSS, you can make it fit more if you'd like.
Header images
There are 2 places where you'll need to add your header image if you want it to display on both desktop and mobile. They're commented in the CSS. Unless you use a tiled background or something smaller than ~400 pixels wide, you'll probably want to have 2 different images so anything important doesn't get cut off. This is something you'll just have to experiment with. (I avoided this problem on the main website by using a 200 pixel wide header image, so I'm probably not the best source of advice here!)
Formatting
H1
H2
H3
H4
You can change the color of each header type individually, but again, I'm boring.
- This
- is
- a
- list
- List
- inside
- of
- list