Skip to content

K
kpp
Commit 869caa9e authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Merge branch 'sass' of github.com:nicothin/NTH-start-project into sass

parents 7c578531 f1ed0b84
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 375 deletions
package.json
View file @ 869caa9e
......@@ -14,11 +14,15 @@
"typo": [],
"page-header": [],
"page-footer": [],
"is-mobile": [],
"main-nav": [],
"sprite-svg": [],
"sprite-png": [
"__demo"
],
"is-mobile": []
"logo": [],
"code": [],
"thumb": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......
src/blocks/blockquote-right/blockquote-right.html deleted 100644 → 0
View file @ 7c578531
<!--DEV
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
-->
src/blocks/blockquote-right/blockquote-right.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/blockquote-right/blockquote-right.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.blockquote-right {
text-align: right;
border-left: 0;
padding: 0 0.5em 0 0;
border-right: 1px solid @border-color;
@media (min-width: @screen-sm) {
padding: 0 1.8em 0 0;
margin-left: 0;
border-right-width: 5px;
border-left: 0;
}
}
src/blocks/code/code.html
View file @ 869caa9e
<!--DEV
<pre class="code">
<code class="code__syntax css">
<span class="code__line">/* Родитель: */</span>
</code>
<code>/* Родитель: */</code>
</pre>
-->
src/blocks/code/code.js deleted 100644 → 0
View file @ 7c578531
This diff is collapsed.
src/blocks/code/code.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/code/code.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.code {
display: block;
width: 100%;
overflow-x: auto;
background-color: @gray-lightest;
padding: 1em;
border-radius: @border-radius;
border: 1px solid @gray-lighter;
white-space: normal;
tab-size: 2;
max-height: 50rem;
&__syntax {}
&__line {
display: block;
white-space: pre;
}
}
// Подсветка кода после обработки JS
.hljs {
display: block;
width: auto;
color: @text-color;
background-color: transparent;
padding: 0;
}
.hljs-comment,
.hljs-quote {
color: #999;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: 700;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #4f9fcf;
}
.hljs-string,
.hljs-doctag {
color: #d44950;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: 700;
}
.hljs-subst {
font-weight: 400;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: 700;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #2f6f9f;
font-weight: 400;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: 700;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
.less {
.hljs-selector-tag {
font-weight: 400;
}
.hljs-variable {
color: #f60;
}
}
src/blocks/code/code.scss 0 → 100644
View file @ 869caa9e
// В этом файле должны быть стили только для БЭМ-блока code, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-radius: 3px !default;
.code {
display: block;
width: 100%;
max-height: 50rem;
overflow-x: auto;
padding: 1em;
background-color: $gray-lightest;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
code {
display: block;
white-space: pre;
}
}
src/blocks/code/readme.md deleted 100644 → 0
View file @ 7c578531
См. [highlightjs.org/download/](https://highlightjs.org/download/)
src/blocks/list-bullet/list-bullet.html deleted 100644 → 0
View file @ 7c578531
<!--DEV
<ul class="list-bullet">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
<li>Власти, она себя за?</li>
<li>Решила алфавит, назад маленький.</li>
</ul>
-->
src/blocks/list-bullet/list-bullet.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/list-bullet/list-bullet.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.list-bullet {
list-style: none;
& > li {
position: relative;
&:before {
content: '';
position: absolute;
top: 0.6em;
left: -1.3em;
font-size: 80%;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: @color-main;
}
}
}
src/blocks/logo/logo.html
View file @ 869caa9e
<!--DEV
<a href="/" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><rect fill="#F90" width="100" height="100" rx="4" ry="4"/><rect fill="#FFB13B" width="50" height="50" rx="4" ry="4"/><rect x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/><g fill="#F90"><circle cx="50" cy="18.4" r="18.4"/><circle cx="72.4" cy="27.6" r="18.4"/><circle cx="81.6" cy="50" r="18.4"/><circle cx="72.4" cy="72.4" r="18.4"/><circle cx="50" cy="81.6" r="18.4"/><circle cx="27.6" cy="72.4" r="18.4"/><circle cx="18.4" cy="50" r="18.4"/><circle cx="27.6" cy="27.6" r="18.4"/></g><path d="M63.086 18.385c0-7.227-5.86-13.086-13.1-13.086-7.235 0-13.096 5.858-13.096 13.085-5.1-5.11-13.395-5.11-18.497 0-5.12 5.12-5.12 13.408 0 18.524-7.234 0-13.103 5.858-13.103 13.084 0 7.23 5.87 13.098 13.103 13.098-5.12 5.11-5.12 13.395 0 18.515 5.102 5.104 13.397 5.104 18.497 0 0 7.228 5.86 13.083 13.096 13.083 7.24 0 13.1-5.855 13.1-13.083 5.118 5.104 13.416 5.104 18.513 0 5.1-5.12 5.1-13.41 0-18.515 7.215 0 13.08-5.87 13.08-13.098 0-7.227-5.865-13.085-13.08-13.085 5.1-5.12 5.1-13.407 0-18.525-5.098-5.11-13.394-5.11-18.514 0z"/><path fill="#FFF" d="M55.003 23.405v14.488L65.26 27.64c0-1.812.69-3.618 2.066-5.005 2.78-2.77 7.275-2.77 10.024 0 2.77 2.766 2.77 7.255 0 10.027-1.377 1.375-3.195 2.072-5.015 2.072L62.1 44.982h14.49c1.29-1.28 3.054-2.076 5.01-2.076 3.9 0 7.08 3.18 7.08 7.087 0 3.906-3.18 7.088-7.08 7.088-1.956 0-3.72-.797-5.01-2.07H62.1l10.23 10.243c1.823 0 3.64.694 5.014 2.086 2.774 2.758 2.774 7.25 0 10.01-2.75 2.773-7.24 2.773-10.025 0-1.373-1.373-2.065-3.193-2.065-5.004L55 62.094v14.5c1.27 1.275 2.084 3.053 2.084 5.012 0 3.906-3.177 7.077-7.098 7.077-3.92 0-7.094-3.167-7.094-7.077 0-1.96.81-3.732 2.08-5.013v-14.5L34.74 72.347c0 1.812-.705 3.627-2.084 5.003-2.77 2.77-7.25 2.77-10.024 0-2.775-2.765-2.775-7.254 0-10.013 1.377-1.39 3.214-2.086 5.012-2.086L37.9 55.01H23.413c-1.29 1.275-3.072 2.07-5.015 2.07-3.918 0-7.097-3.18-7.097-7.087s3.177-7.087 7.096-7.087c1.94 0 3.724.796 5.014 2.076h14.488L27.646 34.736c-1.797 0-3.632-.697-5.012-2.07-2.775-2.773-2.775-7.26 0-10.028 2.773-2.77 7.256-2.77 10.027 0 1.376 1.386 2.084 3.195 2.084 5.005L44.98 37.895V23.407c-1.27-1.287-2.083-3.053-2.083-5.023 0-3.908 3.175-7.08 7.096-7.08 3.92 0 7.097 3.17 7.097 7.08-.002 1.972-.816 3.735-2.087 5.02z"/><g><path d="M5.3 50h89.38v40q0 5-5 5H10.3q-5 0-5-5z"/><path fill="#3F3F3F" d="M14.657 54.21H86.05c2.91 0 5.313 2.386 5.313 5.316v17.91c-27.584-3.403-54.926-8.125-82.01-7.683V59.526c0-2.93 2.39-5.315 5.304-5.315z"/><path fill="#FFF" stroke="#000" stroke-width=".503" d="M18.312 72.927c-2.103-2.107-3.407-5.028-3.407-8.253 0-6.445 5.223-11.672 11.666-11.672 6.447 0 11.668 5.225 11.668 11.672h-6.832c0-2.674-2.168-4.837-4.835-4.837-2.662 0-4.837 2.163-4.837 4.837 0 1.338.55 2.536 1.415 3.42.883.874 2.1 1.405 3.423 1.405v.01c3.233 0 6.146 1.31 8.244 3.417 2.118 2.11 3.424 5.034 3.424 8.248 0 6.454-5.22 11.68-11.667 11.68-6.44 0-11.665-5.222-11.665-11.68h6.828c0 2.68 2.175 4.835 4.838 4.835 2.668 0 4.836-2.156 4.836-4.835 0-1.33-.545-2.527-1.43-3.407-.863-.88-2.08-1.418-3.405-1.418-3.23 0-6.14-1.314-8.258-3.423zM61.588 53.005l-8.244 39.85h-6.85l-8.258-39.85h6.846l4.838 23.337 4.835-23.337zM73.255 69.513h11.683v11.664c0 6.452-5.226 11.678-11.67 11.678-6.44 0-11.665-5.226-11.665-11.678v-16.5h-.017c0-6.448 5.24-11.677 11.667-11.677 6.46 0 11.683 5.225 11.683 11.676h-6.85c0-2.674-2.15-4.837-4.833-4.837-2.647 0-4.82 2.162-4.82 4.836v16.5c0 2.676 2.173 4.838 4.82 4.838 2.682 0 4.834-2.162 4.834-4.827V76.348h-4.834l.002-6.835z"/></g></svg>
<img src="img/" alt="logo">
</a>
-->
src/blocks/logo/logo.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/logo/logo.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.logo {
display: block;
white-space: nowrap;
}
src/blocks/logo/logo.scss 0 → 100644
View file @ 869caa9e
// В этом файле должны быть стили только для БЭМ-блока logo, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.logo {
display: block;
white-space: nowrap;
}
src/blocks/main-nav/main-nav.html
View file @ 869caa9e
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/main-nav/main-nav.html')
-->
<div class="main-nav">content</div>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
</a>
<div class="main-nav__nested-lvl-1">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
<div class="main-nav__nested-lvl-2">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo-p" class="main-nav__link">
<span class="main-nav__link-text">Параграфы и заголовки</span>
</a>
</li>
<li class="main-nav__item">
<a href="#typo-lists" class="main-nav__link">
<span class="main-nav__link-text">Списки</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="http://nicothin.pro/" class="main-nav__link">
<span class="main-nav__link-text">Сайт автора</span>
</a>
</li>
</ul>
</nav>
src/blocks/main-nav/main-nav.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/main-nav/main-nav.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.main-nav {
position: relative;
z-index: 1;
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
&__list {
padding: 0;
margin: 0;
list-style: none;
@media (min-width: @screen-lg) {
display: flex;
flex-wrap: wrap;
}
}
&__nested-lvl {
@media (min-width: @screen-lg) {
position: absolute;
left: 0;
top: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
border: 1px solid @gray-lighter;
border-top: 0;
box-shadow: @shadow;
.main-nav__item:not(:last-child) {
border-bottom: 1px solid @gray-lighter;
}
}
.main-nav__list {
display: block;
}
.main-nav__link {
padding-left: @grid-gutter-width;
min-width: 15em;
@media (min-width: @screen-lg) {
padding-left: (@grid-gutter-width / 2);
}
}
// Вложение внутри вложения
& & {
@media (min-width: @screen-lg) {
position: absolute;
top: 0;
left: 100%;
background-color: @gray-lightest;
width: auto;
padding-top: 0;
border-top: 1px solid @gray-lighter;
.main-nav__link {
padding-left: (@grid-gutter-width / 2);
}
}
.main-nav__link {
padding-left: @grid-gutter-width * 1.5;
}
}
}
&__item {
display: block;
position: relative;
&--divider {
&:before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
border-top: 1px solid @gray-light;
}
}
// Сокрытие и показ по наведению
@media (min-width: @screen-lg) {
& > .main-nav__nested-lvl {
display: none;
}
&:hover {
& > .main-nav__nested-lvl {
display: block;
}
}
}
}
&__link {
display: block;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
color: @gray;
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
color: @text-color;
background-color: @gray-lighter;
text-decoration: none;
}
}
}
src/blocks/main-nav/main-nav.scss 0 → 100644
View file @ 869caa9e
// В этом файле должны быть стили только для БЭМ-блока main-nav, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.main-nav {
// position: relative;
// z-index: 1;
// margin-left: (@grid-gutter-width / -2);
// margin-right: (@grid-gutter-width / -2);
// &__list {
// padding: 0;
// margin: 0;
// list-style: none;
// @media (min-width: @screen-lg) {
// display: flex;
// flex-wrap: wrap;
// }
// }
// &__nested-lvl {
// @media (min-width: @screen-lg) {
// position: absolute;
// left: 0;
// top: 100%;
// background-color: @gray-lightest;
// padding-top: 0.3em;
// width: auto;
// border: 1px solid @gray-lighter;
// border-top: 0;
// box-shadow: @shadow;
// .main-nav__item:not(:last-child) {
// border-bottom: 1px solid @gray-lighter;
// }
// }
// .main-nav__list {
// display: block;
// }
// .main-nav__link {
// padding-left: @grid-gutter-width;
// min-width: 15em;
// @media (min-width: @screen-lg) {
// padding-left: (@grid-gutter-width / 2);
// }
// }
// // Вложение внутри вложения
// & & {
// @media (min-width: @screen-lg) {
// position: absolute;
// top: 0;
// left: 100%;
// background-color: @gray-lightest;
// width: auto;
// padding-top: 0;
// border-top: 1px solid @gray-lighter;
// .main-nav__link {
// padding-left: (@grid-gutter-width / 2);
// }
// }
// .main-nav__link {
// padding-left: @grid-gutter-width * 1.5;
// }
// }
// }
// &__item {
// display: block;
// position: relative;
// &--divider {
// &:before {
// content: '';
// position: absolute;
// top: -1px;
// left: 0;
// right: 0;
// border-top: 1px solid @gray-light;
// }
// }
// // Сокрытие и показ по наведению
// @media (min-width: @screen-lg) {
// & > .main-nav__nested-lvl {
// display: none;
// }
// &:hover {
// & > .main-nav__nested-lvl {
// display: block;
// }
// }
// }
// }
// &__link {
// display: block;
// padding-top: 0.9rem;
// padding-bottom: 0.9rem;
// padding-left: (@grid-gutter-width / 2);
// padding-right: (@grid-gutter-width / 2);
// color: @gray;
// text-decoration: none;
// cursor: pointer;
// &:hover,
// &:focus {
// color: @text-color;
// background-color: @gray-lighter;
// text-decoration: none;
// }
// }
}
src/blocks/thumb/thumb.html
View file @ 869caa9e
......@@ -2,4 +2,6 @@
<img class="thumb" src="" height="" width="" alt="">
<a href="" class="thumb"><img src="" height="" width="" alt=""></a>
-->
src/blocks/thumb/thumb.less deleted 100644 → 0
View file @ 7c578531
// Для импорта в диспетчер подключений: @import './src/blocks/thumb/thumb.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.thumb {
display: inline-block;
padding: 0.4rem;
line-height: @line-height;
background-color: @body-bg;
border: 1px solid @gray-light;
border-radius: @border-radius;
transition: all @transition-time;
a:hover & {
border-color: @link-color;
}
}
src/blocks/thumb/thumb.scss 0 → 100644
View file @ 869caa9e
// В этом файле должны быть стили только для БЭМ-блока thumb, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-light: hsl(0, 0%, 60%) !default;
$link-color: hsl(208, 98%, 43%) !default;
$line-height: 1.375 !default;
$body-bg: #fff !default;
$border-radius: 3px !default;
$transition-time: 0.3s !default;
.thumb {
display: inline-block;
padding: 0.4rem;
line-height: $line-height;
background-color: $body-bg;
border: 1px solid $gray-light;
border-radius: $border-radius;
transition: all $transition-time;
a:hover & {
border-color: $link-color;
}
}
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