navigation and footer

<nav>

The navigation/main menu is a simple <ul> <li> list and allows for one level of links. If you need more than ~15 entries or any levels of hierarchy you might want to change what happens inside nav .menu in _nav.scss

To delay that situation you can fit two or three (short) links in one line, but you have to keep an eye on the mobile viewport — wrapping nav items is… yuck.

The script is similar to that of the modal dialogues, which toggles the class .in-action in this case.

But that is all js-trickery that is done here, if the links overflow their container you can‘t reach them, and the page behind is still scrollable. Again: prototypes, small sites, easy to build.

<footer>

The footer element uses regular f·p columns, responsive, stackable, wrapping…

<footer> in this case is only a bespoke name for a section with a background color; you can indeed replace it with a div.fullbox section container and have the same result.

So you can put everything in there from a single line with a copyright note to three and six-column layouts with 100+ links. (Don‘t!)