Removed &.small class since it was commented -- there's a better way to handle the responsiveness through media queries.
Dealing with absolutely placed items is a pain... changed this to relative when the screen goes under 620px. This centers the navbar for small devices.
IMO you should use an unordered list for the innards of the navbar, but this will help aid making the navbar relatively placed as well as centering it without adding any unnecessary containers.
Let's center our background so it looks good at all sizes.
.sponsors.aux - the thing at the bottom saying "Sponsors TBA" shouldn't be hardcoded for a size. This is the primary reason why the page was broken on mobile (see the image in #4)
Another reason the page was broken on mobile was because it was still in two columns... let's make it one column and make the width slightly smaller so we're not reading from edge to edge (literally)
Yet another reason the page "broke" on mobile was because we weren't changing the h1 inside the giant hero/image. Let's scale the font-size down to 2.2em -- tested and this will work on mobile
Again, we shouldn't hardcode .w as a pixel value. To help responsivity, let's make it a percentage. Then we can scale the percentage down as the page decreases in width.
Change the padding on the links in the navbar to scale with the width shrinking.
When the page is small, let's make the logo centered and slightly smaller in height. This will let us put the navbar links below it in a nice snug fit.
Adding the generated CSS files for good measure.