Restructure SCSS files & folders

Have been thinking over this while working. I think “layout” is a better name for larger components of a site, “components” sorta suggests micro/re-usable which header and footer aren’t. For small sites it doesn’t matter so much, but on bigger ones it feels weird having huge header/footer components mixed in with tiny re-usable ones - plus the list of files gets huge.

I also tend to put page-specific styles in their own directory (e.g. `pages/_document-search.scss` - could also be `content/_page-name.scss`), and put off-canvas stuff in `function/_off-canvas`. Not sure about the latter: I put it in its own file so it wasn’t imported into IE8 CSS and it’s more function than form, so I stole the folder name from the default Magento theme.

Old:
```
components:
  - _header.scss
  - _footer.scss
```

New:
```
components:
  - _breadcrumbs.scss
layout:
  - _header.scss
  - _footer.scss
```