monochromer

Селектор li:hover ~ .active::after можно прочитать так:
выбрать псевдоэлементы after элементов с классом active, которые идут после элемента li, на который навели указатель. Почитать про селектор можно здесь.

Если вы работаете с проектом https://github.com/agragregra/optimizedhtml-start-... то вот инструкции:
1. Скачиваете проект, открываете консоль в папке проекта
2. Ставите все зависимости, перечисленные в package.json командой npm i. Можете проверить список установленных зависимотей командой npm list --depth=0
3. Далее нужно как-то запускать задачи. Некоторые ставят gulp глобально npm i -g gulp. Но можно использовать и локально установленную в проект копию gulp. Для этого есть два варианта:
- запуск задач c ипользованием утилиты npx, которая идет вместе npm (>=5.2) - npx gulp <taskname>
- делать псевдонимы задач для секции scripts файла package.json, например:

"scripts": {
  "build": "gulp build"
}

и затем запускать такие задачи как npm run build

В проекте используется версия gulp - 3, тогда как текущая версия - 4-ая имеет некоторые различия.
Чтобы лучше понимать, как работает node.js и npm, советую посмотреть ролики с 1 по 9 здесь

Наверно, здесь должны быть проценты вместо пикселей


В инспекторе сразу видно, что что-то не так:

mixin chart(value)
  script.
    updateChart(#{value})
    
+chart(10)

Вообще генерировать подобный js-код на стороне сервера не безопасно. Лучше прописывать начальные значения, например, в hidden-инпуты и читать значения из них с некоторой валидацией.

Нужно, чтобы элемент с sticky-top был непосредственным потомком скроллируемого контейнера (скорее всего, это у вас body).

Для полей ввода и кнопок:
-webkit-appearance: none;

При процентном задании размеры рассчитываются без учета gap, поэтому лучше использовать fr-единицы
grid-template-columns: repeat(4, 1fr);

each item in socials.socialsData
  a(href=item.href) #{item.title}

К элементам с transform применяется субпиксельное сглаживание из-за чего может возникать размытие.
Проще иконку и ромб вынести на разные уровни, чтобы трансформации применялись только к ромбу.

json сначала нужно преобразовать в данные вне шаблонизатора

var pug = require('pug');
var fn = pug.compileFile('path to pug file', options);
var locals = require('./block.json');
var html = fn(locals);

Шаблонизатор не должен реализовывать логику получения данных, его задача - отображать данные.

Если хотите самостоятельно парсить html-файлы, то пожалуйста, а так лучше используйте сheerio