alvvi

sass-lang.com/documentation/file.SASS_REFERENCE.ht... вот для scss
для синтаксиса с пробелами вместо скобок, нужно, просто заменить скобки пробелами

@media (max-width: 320px) 
  .hello 
    rule: value

// а лучше

.hello
  @media (max-width: 320px)
    rule: value

Сколько по времени займет такая страница у хорошего верстальщика?

Не буду говорить за всех хороших, но у меня бы часа 2 заняло.

Обратите внимание на правильность/неправильность применения БЭМ, SCSS, семантику, адаптивность. На телефоне отображается все хорошо вроде.

Семантика хромает, даже очень: заголовки тэгом <a>, тэг<content></content> который deprecated вместо очевидного article, модификатор с названием _mod - тоже классно, сразу ведь понятно что он делает, да?) Глубже не стал смотреть, т.к. это довольно грубые ошибки.

Сейчас пытаюсь пробиться на стажера, достаточно ли этого?

Нет, не достаточно. Возьмите бесплатный красивый макет с дизайном и динамикой, или уже готовый сайт и заверстайте его. Если сможете и сделаете это семантично - значит время пришло.

как быть с закрытой версткой

Приватный репозиторий на github/bitbucket
На первом платно, но деньги небольшие, на втором бесплатно

следом идет как работать с gulp (если каждый имеет свои файлы для верстки, но после компиляции будем перезатирать друг друга)

скомпилированные файлы шарить не нужно, только исходники

Думаю, проблема не в глупости, а в непонимании git'a и отсутствии опыта работы с ним, просто потратьте вечер на его изучение и все встанет на свои места.

https://jsfiddle.net/Lcj1229L/2/

.main_block{
  top: 0;
}

Эх, как всегда проблема решалась самым банальным, хоть и крайне неочевидным способом. =\
Необходимо было явно задать расширение файла.

// Core variables and mixins
@import "variables.scss"
@import "mixins.scss" <== 
@import "custom"

// Reset and dependencies
@import "normalize"
@import "print"

// Core CSS
@import "reboot"
@import "type"
...

Хотя до сих пор не понимаю, почему это так важно для компилятора, за объяснение буду благодарен.

В ваших исходных файлах есть следующая функция, генерирующая тэги link :

<script>
		function loadCSS(hf) {
			var ms=document.createElement("link");ms.rel="stylesheet";
			ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
		}
		loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
		loadCSS("main.min.css");   //User Styles + Media Queries
	</script>

Исходя из нее аттрибут href ссылается на файлы лежащие напрямую в директории app/
Однако, gulp помещает ваши файлы в app/css, что видно из таска Styles :
.pipe(gulp.dest('app/css'))

Решение : изменить аргументы функции на корректные

loadCSS("css/header.min.css"); 
loadCSS("css/main.min.css");

либо поменять пути в таске :

.pipe(gulp.dest('app/'))