I suggest giving a different colour to a:active, to distinguish it from a:hover, perhaps along these lines:

.nav-primary li a:hover,
.nav-primary li a:focus,
.nav-primary .active:hover,
.nav-primary .active:focus {
    background-color: #b3002d;
    color: #fff;
    }

.nav-primary li a:active,
.nav-primary .active,
.nav-primary .active:active {
    background-color: #b300ad;
    color: #fff;
    }

Of course, this is just a minor side issue in your excellent tutorial.

rudifa

When I fork your repo, on public page I have 404 error page.

Example : http://fablab23.github.io/christmas-recipes

View site, hosted on Github Pages. When I click on it, I get a 404 error