Commit 2d7a3a72 authored by Nikolay Gromov's avatar Nikolay Gromov

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

parent 1a7fc7aa
......@@ -14,8 +14,7 @@ let config =
"main-nav",
"burger",
"page-footer",
"some-new-class",
"catalog"
"some-new-class"
],
"addStyleBefore": [
"./src/scss/functions.scss",
......
'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)) {
// Записать новый конфиг
......
......@@ -47,6 +47,6 @@
{
"id": "30",
"name": "Контакты автора",
"url": "http://nicothin.pro/"
"url": "https://nicothin.pro/contact"
},
];
// Стилизация БЭМ-блока 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;
}
}
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
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')
......@@ -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
......
......@@ -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
......
......@@ -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
......
/**
* Преобразование пикселей в rem на основе переменной с базовым размером шрифта.
* @param {number} $px Число пикселей (с единицами измерения или без)
* @param {string} Число пикселей, размер контентного шрифта на проекте
* @return {string} Результат преобразования $px в rem
*/
$font-size--root: 16px !default;
@function rem($px, $font-size: $font-size--root) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment