Design series – visually separating footer and header

Alright. Let’s get started with changing the design of the site. When I look at the home page right now, I see a few things that I’d like to improve. I want to start with separating header, content and footer visually.

I do that by slightly dimming the background from a pure white to a grey and a line at the bottom for the header and at the top for the footer with the following code in minima.scss:

.site-header {
  background: #f8f8f8;
  border-bottom: 1px solid #8f8f8f;
}

.site-footer {
  background: #f8f8f8;
  border-top: 1px solid #8f8f8f;
}

site-header and site-footer are used in the minima layout default.html to identify header and footer.

Using magic numbers in here is a code smell. I should refer to a color palette instead, but that would be getting to far ahead of ourselves. But the very least I can do is to introduce a small local semantic layer.

Then it looks like this:

:root {
  --bg-shade: #f8f8f8;
  --line: 2px dashed #8f8f8f;
}

.site-header {
  background: var(--bg-shade);
  border-bottom: var(--line);
}

.site-footer {
  background: var(--bg-shade);
  border-top: var(--line);
}

(To show the changes I also used a different line styling.)