Олег

https://jsfiddle.net/98qb8hvk/

Удалите отступ между инпутами в html или укажите 0 размер шрифта для родителя (footer) или используйте float.

В чем смысл html-препроцессоров?

+ 10 к скорости, удобству, абстракции

Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется - вы сами это поймете и начнете поиск подходящего инструмента. Данный принцип вполне универсален и подходит не только в случае html-препроцессора, а вообще.

Под ретину нужно подготовить растовую графику с запасом по качеству (засунуть в смарт объект), в идеале еще иконки сделать в векторе, ну или тоже с запасом 2x. В принципе это все, в остальном это должен быть обычный макет и верстается как обычно.

http://codepen.io/werty1001/pen/NAwEOq

Это Slider

http://codepen.io/werty1001/pen/pbAbdW

Я в свое время (год назад) искал решение и не нашел, скорее всего ничего не изменилось. Единственное, можно добавить коммент:

.thumbnail
    .thumbnail-inner
        // Ссылка 1 
        a(href="#")
            img(src="img-1.jpg")
            span.overlay
        // Ссылка 2 
        a(href="#")
            img(src="img-1.jpg")
            span.overlay

<div class="thumbnail">
    <div class="thumbnail-inner">
        <!-- Ссылка 1 --><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a>
        <!-- Ссылка 2 --><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a>
    </div>
</div>

UPD 29.07.16

1. С помощью этого плагина можно более гибко контролировать код на выходе и отключить pretty от jade.

2. Еще можно открыть исходники Jade, там есть массив с инлайн тегами (jade/lib/inline-tags.js), можно нужные теги удалить из списка и они будут рендерится как блочные.

box-shadow: inset 0 0 0 2px red;

Идеально и чисто на CSS сделать сложно, лучше svg, а так вот:
http://codepen.io/werty1001/pen/qNjJKo

window.onresize = heighter;