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",
......
This diff is collapsed.
......@@ -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