Запилил сборку стилей

config.js

@@ -14,8 +14,7 @@ let config =
     "main-nav",
     "burger",
     "page-footer",
-    "some-new-class",
-    "catalog"
+    "some-new-class"
   ],
   "addStyleBefore": [
     "./src/scss/functions.scss",

gulpfile.js

 'use strict';
 
+// Пакеты, использующиеся при обработке
+const { series, parallel, src, dest, watch, lastRun } = require('gulp');
+const fs = require('fs');
+const plumber = require('gulp-plumber');
+const del = require('del');
+const pug = require('gulp-pug');
+const through2 = require('through2');
+const replace = require('gulp-replace');
+const getClassesFromHtml = require('get-classes-from-html');
+const jsonFormat = require('json-format');
+const browserSync = require('browser-sync').create();
+const htmlbeautify = require('gulp-html-beautify');
+const debug = require('gulp-debug');
+const sass = require('gulp-sass');
+const notify = require('gulp-notify');
+const gulpIf = require('gulp-if');
+const postcss = require('gulp-postcss');
+const autoprefixer = require("autoprefixer");
+const mqpacker = require("css-mqpacker");
+const atImport = require("postcss-import");
+const cleanss = require('gulp-cleancss');
+const inlineSVG = require('postcss-inline-svg');
+const objectFitImages = require('postcss-object-fit-images');
+
 // Настройки из файла
 let config = require('./config.js');
 // Директории из настроек (dir.src = "./src/", dir.build = "./build/", dir.blocks = "./src/blocks/")
@@ -10,29 +34,25 @@ let blocksList = [];
 let oldBlocksListString = JSON.stringify(config.blocks);
 // Адрес репозитория
 let repoUrl = require('./package.json').repository.url.replace(/\.git$/g, '');
+// Определение: разработка это или финальная сборка
+const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
+// Сообщение для компилируемых файлов
+let doNotEditMsg = '\n ВНИМАНИЕ! Этот файл генерируется автоматически.\n Любые изменения этого файла будут потеряны при следующей компиляции.\n Любое изменение проекта без возможности компиляции ДОЛЬШЕ И ДОРОЖЕ в 2-3 раза.\n\n';
 // Настройки pug-компилятора
 let pugOption = {
   data: { repoUrl: repoUrl, },
   filters: { 'show-code': filterShowCode, },
 };
-
-// Определение: разработка это или финальная сборка
-// NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
-// const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
-
-// Пакеты, использующиеся при обработке
-const { series, parallel, src, dest, watch, lastRun } = require('gulp');
-const fs = require('fs');
-const plumber = require('gulp-plumber');
-const del = require('del');
-const pug = require('gulp-pug');
-const through2 = require('through2');
-const replace = require('gulp-replace');
-const getClassesFromHtml = require('get-classes-from-html');
-const jsonFormat = require('json-format');
-const browserSync = require('browser-sync').create();
-const htmlbeautify = require('gulp-html-beautify');
-const debug = require('gulp-debug');
+// Список и настройки плагинов postCSS
+let postCssPlugins = [
+  autoprefixer(), // настройки вынесены в package.json, дабы получать их для любой задачи
+  mqpacker({
+    sort: true
+  }),
+  atImport(),
+  inlineSVG(),
+  objectFitImages(),
+];
 
 
 function compilePug() {
@@ -41,12 +61,12 @@ function compilePug() {
     .pipe(debug({title: 'Compiles '}))
     .pipe(pug(pugOption))
     .pipe(through2.obj(getClassesToBlocksList))
-    .on('end', function checkBlockListWithClear(){checkBlockList(true)}) // компилируются все; можно убирать блоки, которых больше нет
+    .on('end', function(){checkBlockList(true)}) // компилируются все; можно убирать блоки, которых больше нет
     .pipe(dest(dir.build));
 }
 exports.compilePug = compilePug;
 
-// Компиляция только изменившегося (с последнего запуска задачи) pug-файла
+
 function compilePugFast() {
   return src([ `${dir.src}pages/**/*.pug` ], { since: lastRun(compilePugFast) })
     .pipe(plumber())
@@ -59,12 +79,11 @@ function compilePugFast() {
 exports.compilePugFast = compilePugFast;
 
 
-
 function writePugMixinsFile(cb) {
   const regExp = dir.blocks.replace('./','');
   let allBlocksWithPugFiles = getDirectories(dir.blocks, 'pug');
   // console.log(allBlocksWithPugFiles);
-  let pugMixins = `//- ВНИМАНИЕ! Этот файл генерируется автоматически. Не пишите сюда ничего вручную!\n//- Читайте ./README.md для понимания.\n\n`;
+  let pugMixins = doNotEditMsg.replace(/\n /gm,'\n//- ');
   allBlocksWithPugFiles.forEach(function(blockName) {
     pugMixins += `include ${dir.blocks.replace(dir.src,'../')}${blockName}/${blockName}.pug\n`;
   });
@@ -74,6 +93,40 @@ function writePugMixinsFile(cb) {
 exports.writePugMixinsFile = writePugMixinsFile;
 
 
+function compileSass() {
+  return src(`${dir.src}scss/style.scss`, { sourcemaps: true })
+    .pipe(plumber())
+    .pipe(debug({title: 'Compiles:'}))
+    .pipe(sass({includePaths: [__dirname+'/']}))
+    .pipe(postcss(postCssPlugins))
+    .pipe(gulpIf(!isDev, cleanss()))
+    .pipe(dest(`${dir.build}/css`, { sourcemaps: '.' }))
+    .pipe(browserSync.stream());
+}
+exports.compileSass = compileSass;
+
+
+function writeSassImportsFile(cb) {
+  // console.log( config.blocks );
+  let msg = `\n/*!*${doNotEditMsg.replace(/\n /gm,'\n * ').replace(/\n\n$/,'\n */\n\n')}`;
+  let styleImports = msg;
+  config.addStyleBefore.forEach(function(src) {
+    styleImports += `@import "${src}";\n`;
+  });
+  config.blocks.forEach(function(block) {
+    let src = `${dir.blocks}${block}/${block}.scss`;
+    if(fileExist(src)) styleImports += `@import "${src}";\n`;
+  });
+  config.addStyleAfter.forEach(function(src) {
+    styleImports += `@import "${src}";\n`;
+  });
+  styleImports += msg;
+  fs.writeFileSync(`${dir.src}scss/style.scss`, styleImports);
+  cb();
+}
+exports.writeSassImportsFile = writeSassImportsFile;
+
+
 function clearBuildDir() {
   return del([
     `${dir.build}**/*`,
@@ -97,7 +150,7 @@ function serve() {
     open: false,
   });
   // Файлы разметки страниц (изменение, добавление)
-  watch([`${dir.src}pages/**/*.pug`], { events: ['change', 'add'], delay: 100 }, series(compilePugFast, reload));
+  watch([`${dir.src}pages/**/*.pug`], { events: ['change', 'add'], delay: 100 }, series(compilePugFast, writeSassImportsFile, compileSass, reload));
   // Файлы разметки страниц (удаление)
   watch([`${dir.src}pages/**/*.pug`], { delay: 100 })
     .on('unlink', function(path, stats) {
@@ -108,11 +161,15 @@ function serve() {
       });
     });
   // Файлы разметки БЭМ-блоков (изменение, добавление)
-  watch([`${dir.blocks}**/*.pug`], { events: ['change', 'add'], delay: 100 }, series(compilePug, reload));
+  watch([`${dir.blocks}**/*.pug`], { events: ['change', 'add'], delay: 100 }, series(compilePug, writeSassImportsFile, compileSass, reload));
   // Файлы разметки БЭМ-блоков (удаление)
   watch([`${dir.blocks}**/*.pug`], { events: ['unlink'], delay: 100 }, series(writePugMixinsFile));
-  // Прочие pug-файлы, кроме файла примесей (все события)
-  watch([`${dir.src}pug/**/*.pug`, `!${dir.src}pug/mixins.pug`], { delay: 100 }, series(compilePug, reload));
+  // Глобальные pug-файлы, кроме файла примесей (все события)
+  watch([`${dir.src}pug/**/*.pug`, `!${dir.src}pug/mixins.pug`], { delay: 100 }, series(compilePug, writeSassImportsFile, compileSass, reload));
+  // Стилевые файлы БЭМ-блоков (любые события)
+  watch([`${dir.blocks}**/*.scss`], { events: ['all'], delay: 100 }, series(writeSassImportsFile, compileSass));
+  // Глобальные стилевые файлы, кроме файла с импортами (любые события)
+  watch([`${dir.src}scss/**/*.scss`, `!${dir.src}scss/style.scss`], { events: ['all'], delay: 100 }, series(compileSass));
 }
 // exports.serve = serve;
 
@@ -120,6 +177,8 @@ function serve() {
 exports.default = series(
   parallel(clearBuildDir, writePugMixinsFile),
   compilePugFast,
+  writeSassImportsFile,
+  compileSass,
   serve,
 );
 
@@ -198,28 +257,14 @@ function getArraysDiff(a1, a2) {
   return a1.filter(i=>!a2.includes(i)).concat(a2.filter(i=>!a1.includes(i)))
 }
 
-/**
- * Получение дефолтных файлов блока (стили, JS, картинки, доп. файлы)
- * @param  {string} block     Искомый блок
- * @param  {string} blocksDir Директория, в которой лежат все блоки
- * @return {object}           Объект с соотв. путями, если они существуют { "style": [], "js": [], "img": [], "assets": [] }
- */
-// function getBlockDefaultFiles(block, blocksDir = dir.blocks) {
-//   let res = {};
-//   // Существует дефолтный стилевой файл?
-//   let defaultStyleFilePath = blocksDir + block + '/' + block + '.scss';
-//   fileExist(defaultStyleFilePath) ? res.style = [defaultStyleFilePath] : res.style = [];
-//   // Существует дефолтный JS-файл?
-//   let defaultJsFilePath = blocksDir + block + '/' + block + '.js';
-//   fileExist(defaultJsFilePath) ? res.js = [defaultJsFilePath] : res.js = [];
-//   // Существует дефолтная папка с картинками?
-//   let defaultImgFolderPath = blocksDir + block + '/img/';
-//   fileExist(defaultImgFolderPath) ? res.img = [defaultImgFolderPath] : res.img = [];
-//   // Существует дефолтная папка с доп. файлами?
-//   let defaultAssetsFolderPath = blocksDir + block + '/assets/';
-//   fileExist(defaultAssetsFolderPath) ? res.assets = [defaultAssetsFolderPath] : res.assets = [];
-//   return res;
-// }
+function uniqueArray(arr) {
+  var obj = {};
+  for (var i = 0; i < arr.length; i++) {
+    var str = arr[i];
+    obj[str] = true;
+  }
+  return Object.keys(obj);
+}
 
 /**
  * СЛУЖЕБНАЯ: Добавляет список классов из принятого HTML в переменную blocksList, используется в потоке обработки Pug.
@@ -271,6 +316,7 @@ function checkBlockList(removeBlocks = false) {
     Array.prototype.push.apply(config.blocks, getArraysDiff(blocksList, config.blocks));
     // ИМЕЕМ СПИСОК ИСПОЛЬЗОВАННЫХ СЕЙЧАС НА ПРОЕКТЕ БЛОКОВ
     // console.log(config.blocks);
+    config.blocks = uniqueArray(config.blocks);
     // Если есть изменения списка блоков
     if(oldBlocksListString != JSON.stringify(config.blocks)) {
       // Записать новый конфиг

src/blocks/main-nav/main-nav.data.pug

@@ -47,6 +47,6 @@
     {
       "id": "30",
       "name": "Контакты автора",
-      "url": "http://nicothin.pro/"
+      "url": "https://nicothin.pro/contact"
     },
   ];

src/blocks/page/page.scss

-// Стилизация БЭМ-блока page и общие стили тегов
+// Стилизация БЭМ-блока page.
+// Общие стили тегов.
+// Подключение шрифтов.
+// Типографика.
+
+$gray:                        hsl(0, 0%, 50%) !default;
+$gray-lighter:                hsl(0, 0%, 80%) !default;
+$gray-lightest:               hsl(0, 0%, 90%) !default;
+
+$font-size--root:             16px !default;
+
+$font-size:                   1rem !default; // rem(16px)
+
+$font-size--h1:               rem(40px) !default;
+$font-size--h2:               rem(32px) !default;
+$font-size--h3:               rem(24px) !default;
+$font-size--h4:               rem(18px) !default;
+$font-size--h5:               rem(16px) !default;
+$font-size--h6:               rem(16px) !default;
+
+$font-size--small:            80% !default;
+
+$line-height:                 1.5 !default;
+
+$font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$font-family--serif:          'Georgia', 'Times New Roman', 'Times', serif !default;
+$font-family--monospace:      SFMono-Regular, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !default;
+$font-family--headings:       $font-family !default;
+
+$text-color:                  hsl(0, 0%, 10%) !default;
+$border-color:                hsl(0, 0%, 60%) !default;
+
+$border-radius:               3px !default;
 
 $body-bg:                     #fff !default;
 $link-color:                  hsl(208, 98%, 43%) !default;
 $link-color--hover:           darken(hsl(208, 98%, 43%), 15%) !default;
 
+$screen-sm:                   480px !default;
 $screen-xl:                   1200px !default;
 
 
@@ -17,6 +50,15 @@ $screen-xl:                   1200px !default;
   }
 }
 
+// @font-face {
+//   font-family: 'FONTNAME';
+//   src: url('../fonts/FONTNAME.woff2') format('woff2'),
+//        url('../fonts/FONTNAME.woff') format('woff');
+//   font-weight: 400;
+//   font-style: normal;
+//   font-display: swap;
+// }
+
 .page { // html
 
   $block-name:                &; // #{$block-name}__element
@@ -27,6 +69,7 @@ $screen-xl:                   1200px !default;
   -ms-text-size-adjust: 100%;
   min-width: 320px;
   min-height: 100%;
+  font-size: $font-size--root;
 
   &__inner {
     min-height: 100vh;
@@ -54,13 +97,16 @@ $screen-xl:                   1200px !default;
 }
 
 body {
-  // Типографика проекта — в блоке typo
   display: flex;           // Исправляем баг в IE для min-height and flexbox (flex-direction:column)
   flex-direction: column;  // и прижимаем footer в IE 10-11
   background-color: #fff;
   margin: 0;
   min-height: 100%;
   word-break: break-word;
+  font-family: $font-family;
+  font-size: $font-size;
+  line-height: $line-height;
+  color: $text-color;
 }
 
 [tabindex='-1']:focus {
@@ -170,4 +216,183 @@ a {
 hr {
   box-sizing: content-box; // Проблема Firefox
   overflow: visible;       // Проблема Edge и IE
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  border: 0;
+  border-top: 1px solid $border-color;
+}
+
+// .h1,
+// .h2,
+// .h3,
+// .h4,
+// .h5,
+// .h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-family--headings;
+  font-weight: 700;
+  line-height: 1.2;
+  color: currentColor;
+}
+
+// .h1,
+// .h2,
+// .h3,
+h1,
+h2,
+h3 {
+  margin-top: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+// .h4,
+// .h5,
+// .h6,
+h4,
+h5,
+h6 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+// .h1,
+h1 { font-size: $font-size--h1; }
+
+// .h2,
+h2 { font-size: $font-size--h2; }
+
+// .h3,
+h3 { font-size: $font-size--h3; }
+
+// .h4,
+h4 { font-size: $font-size--h4; }
+
+// .h5,
+h5 { font-size: $font-size--h5; }
+
+// .h6,
+h6 { font-size: $font-size--h6; }
+
+// .p,
+p,
+ul,
+ol,
+dl,
+table,
+blockquote,
+pre,
+address,
+figure {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+address {
+  font-style: normal;
+}
+
+ul,
+ol {
+  padding-left: 1.5rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+li {
+  line-height: inherit;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-left: 0;
+
+  @media (min-width: $screen-sm) {
+    margin-left: 1.5rem;
+  }
+
+  & + dt {
+    margin-top: ($line-height / 2);
+  }
+}
+
+// .small,
+small {
+  font-size: $font-size--small;
+}
+
+sub,
+sup {
+  font-size: $font-size--small;
+}
+
+// .mark,
+mark {
+  background: rgba($color-warning, 0.3);
+  padding: 0.1em 0.3em;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+blockquote {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family--monospace;
+}
+
+code {
+  padding: 0.06em 0.3em;
+  color: $text-color;
+  background-color: rgba(#000, 0.08);
+  border-radius: $border-radius;
+}
+
+kbd {
+  padding: 0.06em 0.3em;
+  color: $text-color;
+  background-color: $gray-lightest;
+  border-radius: $border-radius;
+
+  kbd {
+    padding: 0;
+  }
+}
+
+pre {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  tab-size: 2;
+  background-color: rgba(#000, 0.08);
+
+  code {
+    background: transparent;
+  }
 }

src/pages/catalog/index.pug

-extends ../../pug/layout.pug
-
-block meta
-  title Каталог
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип в каталоге
-    +main-nav('10')
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-  .catalog Каталог, сученька!
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP0.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP01.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP02.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP03.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP04.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP05.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP06.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP07.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP08.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP09.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP10.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP11.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP12.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP13.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP14.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP15.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP16.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP17.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP18.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP19.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index-TEMP20.pug

-extends ../pug/layout.pug
-
-block meta
-  title Главная
-  meta(name='description', content='')
-
-//- block append head
-//-   link(rel='stylesheet', href='css/some.css')
-
-block header
-  +page-header()
-    +logo('/')
-      span Логотип
-    +main-nav('10')
-    .some-new-class Class
-      .some-new-class__eee EEE!
-    .some-new-class.some-new-class--error Class
-      .some-new-class__eee EEE!
-
-block content
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
-
-block footer
-  +page-footer()
-    p «Подвал»
-    p Контактный телефон: #[a(href="tel:+70000000000") +7 000 000 00 00]
-
-//- block page-bottom
-//-   script(src='js/some.js')

src/pages/index.pug

@@ -10,10 +10,11 @@ block meta
 block header
   +page-header()
     +logo('/')
-      span Логотип
+      span Логотип 1
     +main-nav('10')
 
 block content
+  h1 Заголовок с каким-то эффектом
   p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
 
 block footer

src/pug/layout-off-canvas.pug

@@ -29,7 +29,7 @@ html(class='no-js  page', lang='ru')
       title Home
 
     block head
-      link(rel='stylesheet', href='css/style.min.css')
+      link(rel='stylesheet', href='css/style.css')
       script.
         document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
       script

src/pug/layout.pug

@@ -29,7 +29,7 @@ html(class='no-js  page', lang='ru')
       title Home
 
     block head
-      link(rel='stylesheet', href='css/style.min.css')
+      link(rel='stylesheet', href='css/style.css')
       script.
         document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
       script

src/scss/functions.scss

-
-/**
- * Преобразование пикселей в rem на основе переменной с базовым размером шрифта.
- * @param  {number} $px Число пикселей (с единицами измерения или без)
- * @param  {string} Число пикселей, размер контентного шрифта на проекте
- * @return {string} Результат преобразования $px в rem
- */
-
 $font-size--root:             16px !default;
 
 @function rem($px, $font-size: $font-size--root) {