IIIu6ko

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

Можно использовать обычный css и теги


Вот здесь можно почитать подробней https://habr.com/ru/post/252181/

Переработал/оптимизировал функцию, в итоге получилось такое:

const media = {
  queryList: {
    mobile: window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    tablet: window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    desktop: window.matchMedia('(min-width: 992px)'),
  },
  queryIf(func, type) {
    if (this.queryList[type].matches) func();
  },
  query(type, func) {
    this.queryIf(func, type);
    this.queryList.mobile.addEventListener('change', () => this.queryIf(func, type));
  },
};

export default media;

import media from '/path';

media.query('mobile', () => document.querySelector('body').style.background = 'red');
media.query('tablet', () => document.querySelector('body').style.background = 'green');

У класса .row уберите отрицательные margin

Да вроде всё нормально, какой браузер? Проверил в хроме и файрфоксе.

document.querySelector('.popup').style.display = 'none';

Хотите чего-то большего - сделайте пример в песочнице.
jsfiddle или codepen.

Попробуй шрифты подгружать раньше, чем всё остальное

<link rel="preload" href="fonts/ubuntu/ubuntu-v14-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2" as="font" type="font/woff2" crossorigin>

Нашёл пакет gulp-nunjucks-inheritance

Таск теперь выглядит вот так

function html() {
  return src('src/**/*.{html,njk}', { base: 'src', since: lastRun('html') })

    // Nunjucks
    .pipe(nunjucksInheritance({ base: 'src' })) // Ищем изменения в зависимостях
    .pipe(nunjucks({ path: 'src' })) // Компилируем в HTML

    // Добавляет индентацию для заинклюженных блоков.
    .pipe(prettyHtml({ indent_size: 2 }))

    // HTML-валидатор.
    .pipe(htmlhint('.htmlhintrc'))
    .pipe(htmlhint.reporter())

    // Манифест.
    // Если флаг --dist без --norev.
    .pipe(gulpif(dist, gulpif(!norev, revReplace({
      manifest: src('manifest/manifest.json', { allowEmpty: true }),
    }))))

    // Выгрузка.
    .pipe(dest(buildHtml))

    // browserSync.
    .pipe(gulpif(!dist, browserSync.stream())); // Если нет флага --dist.
}

Обязательно в src указывайте путь до всех .njk файлов, иначе пакет отказывается работать.

Либо columns + медиазапросы, либо Masonry .js

В общем, проблему решил. Обрезал фон сверху и снизу, подставил куда надо, но он не растягивался на всю ширину т.к. svg, там пропорции видимо. Решается это добавлением атрибута preserveAspectRatio="none" в сам svg.

Нашёл плагин Permalinks Customizer
Поставленную задачу выполняет, жаль не получилось решить без плагина.

Выглядит это вот так:

В настройках Permalinks Customizer заходим в раздел Taxonomy Settings и для нужного taxonomy пишем ссылку.

Держи https://codepen.io/IIIu6ko/pen/QWbjXRK

if ( is_home() ) :

endif;

is_home() - Это и есть проверка на "страницу записей"
is_front_page() - Проверка на "Главная страница"

barba.js

Видео с настройкой
https://www.youtube.com/watch?v=pwmHB_veoko

Добрый день. недавно делал таск для webp:

gulp.task("imgsWebp", function() {
  return gulp.src("src/blocks/**/*.{jpg,jpeg,png,gif,ico}")

    // Конвертирует изображение в webp и сжимает его.
    .pipe(webp({
      quality: 100
    }))

    // Выгрузка.
    .pipe(gulp.dest(buildImgs))

    // Browsersync.
    .pipe(gulpif(!dist, browserSync.stream())); // Если нет флага --dist.
});

webp - gulp-webp

Соответственно в итоге пара изображений с одинаковыми названиями, но с разными форматами

https://jsfiddle.net/shcogxa8/10/

Вот так.

Именно для checkbox и radio лучше использовать просто css.
https://codepen.io/anon/pen/wyZLdy

Держи https://jsfiddle.net/9nm4ctv9/1520/

<div class="container">
  <div class="row">
    <div class="col-2 sidebar">
      sidebar
    </div>
    <div class="col-10 offset-2">
      content
    </div>
  </div>
</div>

.sidebar {
  position: fixed;
  height: 100vh;
}

Чтобы фон не прокручивался под попапом нужно для body задать overflow: hidden

Сделай класс отдельный для этого и присваивай его к body при открытии попапа.