Сергей delphinpro

%bgtrans {
  background: transparentize($cwhite,0.15);
}
.header {
  @extend %bgtrans;
  &:after {
      @extend %bgtrans;
  }
}

https://jsfiddle.net/kLb3L8pu/5/

align-items: flex-start;

префиксы сами расставьте

Эта задача должна решаться верстальщиком, вообще-то.

Ну а так - остаток от деления на 5.

if ($i % 5 == 0) {}

посмотрите локальную историю. может повезет.

codepen.io/anon/pen/jrXGRA?editors=1100

margin-top для текста задавайте в "em" (а размеры шрифта в rem)
для остального - в "rem"
Это позволить управлять ими задавая единственное правило font-size для html в медиазапросе.
С высотой сложнее, но не сильно. просто смотрите по обстоятельствам. Где-то высота зависит от шрифта (em, rem), где-то от экрана (vw, vh), где-то от родителя (%). Пиксели тоже никто не отменяет, случаи бывают разные.

Вообще никто вам не скажет универсальный рецепт на все случаи жизни. Отзывчивай дизайн он потому и отзывчивый, что отзывается на изменения режима просмотра.

ну вот - жертва indent синтаксиса +) а мне говорят что отступы прекрасны вместо скобок...

.header__nav
    float: left
    margin: 0
    padding: 0
    list-style-type: none
    font-size: 0.875rem
    li 
        display: inline-block
        padding: 0 40 0 0
    a
        text-decoration: none
        color: #000000
        &:hover // здесь отступа не хватало
            color: #FD683D

Поднять smtp сервер для реальной отправки, например.
Или использовать заглушку sendmail как это делают сборки Denwer и OpenServer, которая просто складывает письма в заданную папку.

не перечислять каждое поле с уникальным айди/именем.

перебирайте в цикле все элементы формы. правила валидации задавайте в дата-атрибутах.
В результате получите некое подобие jQuery Form Validator =)
Так что возьмите готовый, быстренько его настройте и радуйтесь жизни.

абсолютно спозиционированный псевдоэлемент у ссылки проще всего. Не стоит заморачиваться.

Для чего писать body { color: red; } когда можно просто писать body color: red?

я пишу body { <ENTER>
получаю

body {
  <CURSOR>
}

далее пишу c#f<TAB> получаю

body {
  color: #fff;
}

C Emmet'ом давно никто не пишет свойства полностью и не расставляет скобочки вручную. Все разворачивается само. А между тем "скобочный код" намного более выразительный и читабельный, что гораздо важнее скорости ввода.
Indent-based синтаксис - это самое тупое изобретение коллег-программистов=)

расставляйте в тексте переносы.
Так называемые "мягкие переносы" (soft hypens) - символы, указывающие место возможного переноса.
мнемоника - ­ или код сущности ­

Вручную, конечно, это делать утомительно. Можно воспользоваться онлайн-сервисом (например, первый из гугла - quittance.ru/hyphenator.php#effectus) или встроить алгоритм в свою систему.

https://jsfiddle.net/z4kju5ys/

https://jsfiddle.net/8fx9xznm/

Берем sass версию, комментируем строки 19-21 в grid.scss
https://github.com/twbs/bootstrap-sass/blob/master...
ну и заодно 82-84
https://github.com/twbs/bootstrap-sass/blob/master...
компилируем, радуемся.

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console

URL адрес не был добавлен в список разрешенных. Плиз, проверьте настройки вашего ключа в Google консоли.

Проверили? Добавили домен сайта в список разрешенных? Что-то еще не понятно? Всё вроде достаточно четко написано...

codepen.io/delphinpro/pen/QKAdYy

копируете package.json и gulpfile.js в новый проект
выполняете команду npm install - все пакеты установятся сразу
работаете

Для каждой точки создаем прямоугольник. Таких размеров, чтобы один угол находился в центре точки, а сам прямоугольник в центре блока с картинкой. Размеры в процентах. Таким образом при изменении размеров картинки относительные координаты точек будут соблюдены и они будут располагаться в нужных местах.
Далее внутри каждого прямоугольника создаем непосредственно точку.

Блоки с текстом располагаем в обычных дивах по бокам картинки.

Остается только вычислить положение точки и положение соответствующего ей прямоугольника с текстом и провести одну или две линии.

Задача не сказать, чтобы сложная.

Не знаю как правильно.
Скорее всего нельзя напрямую обратиться к ноде комментария. Но можно достать ее перебором всех нод.
Вам нужна рекурсивная функция обхода всех нод документа, в которой вы будете проверять тип ноды и ее содержимое.
Примечание: если ваш комментарий располагается на странице не рандомно, а подчиняется ккакой-то логике, например, всегда находится в каком-то узле, к кторому можно обратиться по селектору, то лучше просто перебрать дочерние ноды этого узла.

var e = ... // берем элемент
    var childs = e.childNodes,
        count = childs.length;
    var i = 0;
    while(i < count) {
        if (
            (childs[i].nodeType == 8) // тип 8 - это как раз комментарий
            &&(/more/.test(childs[i].nodeValue)) // а здесь проверяем наличие слова more внутри комментария
        ) {
            var container = document.createElement('div');
            container.innerHTML = '<div class="'+childs[i].nodeValue+'"></div>';
            childs[i].parentNode.replaceChild(container.firstChild, childs[i]);
        }
        i++;
    }