Skip to content

K
kpp
Commit 2c98fff8 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Доработал глобальные стили, типографику, представление кода

parent 46b119c9
Show whitespace changes
Inline Side-by-side
Showing with 167 additions and 256 deletions
gulpfile.js
View file @ 2c98fff8
...@@ -58,6 +58,7 @@ gulp.task('clean', function () { ...@@ -58,6 +58,7 @@ gulp.task('clean', function () {
gulp.task('style', function () { gulp.task('style', function () {
const sass = require('gulp-sass'); const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps'); const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait');
console.log('---------- Компиляция стилей'); console.log('---------- Компиляция стилей');
return gulp.src(dirs.srcPath + 'scss/style.scss') return gulp.src(dirs.srcPath + 'scss/style.scss')
.pipe(plumber({ .pipe(plumber({
...@@ -69,6 +70,7 @@ gulp.task('style', function () { ...@@ -69,6 +70,7 @@ gulp.task('style', function () {
this.emit('end'); this.emit('end');
} }
})) }))
.pipe(wait(100))
.pipe(gulpIf(isDev, sourcemaps.init())) .pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Style:"})) .pipe(debug({title: "Style:"}))
.pipe(sass()) .pipe(sass())
...@@ -90,6 +92,7 @@ gulp.task('style:single', function () { ...@@ -90,6 +92,7 @@ gulp.task('style:single', function () {
if(pjson.configProject.singleCompiled.length) { if(pjson.configProject.singleCompiled.length) {
const sass = require('gulp-sass'); const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps'); const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait');
console.log('---------- Компиляция добавочных стилей'); console.log('---------- Компиляция добавочных стилей');
return gulp.src(pjson.configProject.singleCompiled) return gulp.src(pjson.configProject.singleCompiled)
.pipe(plumber({ .pipe(plumber({
...@@ -101,6 +104,7 @@ gulp.task('style:single', function () { ...@@ -101,6 +104,7 @@ gulp.task('style:single', function () {
this.emit('end'); this.emit('end');
} }
})) }))
.pipe(wait(100))
.pipe(gulpIf(isDev, sourcemaps.init())) .pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Single style:"})) .pipe(debug({title: "Single style:"}))
.pipe(sass()) .pipe(sass())
......
src/blocks-demo.html
View file @ 2c98fff8
...@@ -52,7 +52,15 @@ ...@@ -52,7 +52,15 @@
<h2 class="blocks-library__item-title">Страница и типографика</h2> <h2 class="blocks-library__item-title">Страница и типографика</h2>
<p>Блок страницы, благодаря которому применяются некоторые глобальные стили.</p> <p>Блок страницы (<code>&lt;html class="page"></code>), благодаря которому применяются некоторые глобальные стили:</p>
<ul>
<li>Смена боксовой модели на всех узлах: <code>box-sizing: border-box;</code> наследуется от <code>html</code></li>
<li>Нормализация вьюпорта для windows-телефонов.</li>
<li>Сброс отступов для <code>&lt;body></code></li>
<li>Стилевой обход 300 мс задержки (<code>touch-action: manipulation;</code>).</li>
<li>Ограничение размера картинок до 100% ширины родителя.</li>
</ul>
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
...@@ -71,21 +79,7 @@ ...@@ -71,21 +79,7 @@
<h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2> <h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2>
<div class="blocks-library__sub-item">
<p>Параграфы, расстояние между ними. <a href="qwert1234">Далеко-далеко</a> за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Параграфы, расстояние между ними. <a href="qwert1234">Далеко-далеко</a> за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class=&quot;p&quot;&gt;...&lt;/div&gt;</code>
</pre>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-headers">
<h2 class="blocks-library__sub-item-title">Заголовки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1</h1> <h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
...@@ -99,13 +93,6 @@ ...@@ -99,13 +93,6 @@
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6> <h6>Заголовок 6</h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-lists">
<h2 class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row">
<div class="col-md-6">
<ul> <ul>
<li>Пункт 1 <li>Пункт 1
<ul> <ul>
...@@ -116,8 +103,6 @@ ...@@ -116,8 +103,6 @@
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ul> </ul>
</div>
<div class="col-md-6">
<ol> <ol>
<li>Пункт 1 <li>Пункт 1
<ol> <ol>
...@@ -128,13 +113,6 @@ ...@@ -128,13 +113,6 @@
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ol> </ol>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-lists-dl">
<h2 class="blocks-library__sub-item-title">Список определений и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl> <dl>
<dt>Определяемая сущность 1</dt> <dt>Определяемая сущность 1</dt>
...@@ -144,21 +122,10 @@ ...@@ -144,21 +122,10 @@
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd> <dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl> </dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-hr">
<h2 class="blocks-library__sub-item-title">Разделитель уровня параграфа</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr> <hr>
<p>. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-inline-tags">
<h2 class="blocks-library__sub-item-title">Строчные теги</h2>
<div class="row">
<div class="col-lg-6">
<table> <table>
<tbody><tr> <tr>
<td><code>&lt;a&gt;</code></td> <td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка</a></td> <td><a href="">ссылка</a></td>
</tr> </tr>
...@@ -190,11 +157,7 @@ ...@@ -190,11 +157,7 @@
<td><code>&lt;ins&gt;</code></td> <td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td> <td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr> </tr>
</tbody></table> <tr>
</div>
<div class="col-lg-6">
<table>
<tbody><tr>
<td><code>&lt;mark&gt;</code></td> <td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td> <td><mark>акцент маркерным выделением</mark></td>
</tr> </tr>
...@@ -222,15 +185,7 @@ ...@@ -222,15 +185,7 @@
<td><code>&lt;code&gt;</code></td> <td><code>&lt;code&gt;</code></td>
<td><code>code</code></td> <td><code>code</code></td>
</tr> </tr>
</tbody></table> </table>
</div>
</div>
</div>
<div class="blocks-library__sub-item" id="text-address">
<h2 class="blocks-library__sub-item-title">Контактная информация автора материала</h2>
<p>Тег <code>address</code> представляет контактную информацию для ближайшего элемента-предка <code>article</code> или <code>body</code>. Если это элемент <code>body</code>, то контактная информация применяется ко всему документу целиком. Тег обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. <a href="http://spec.piraruco.com/html5/sections.htm#the-address-element">Подробнее</a></p>
<hr>
<address> <address>
<strong>Имя Фамилия</strong> <strong>Имя Фамилия</strong>
<br> <br>
...@@ -240,24 +195,16 @@ ...@@ -240,24 +195,16 @@
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml"> <pre class="code">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">address</span>&gt;</span></span> <code>&lt;address></code>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Имя Фамилия<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span></span> <code> &lt;strong>Имя Фамилия&lt;/strong></code>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span> <code> &lt;br></code>
<span class="code__line"> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span> <code> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) &lt;br></code>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"mailto:imya@mail.com"</span>&gt;</span>imya@mail.com<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span> <code> &lt;a href="mailto:imya@mail.com">imya@mail.com&lt;/a></code>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">address</span>&gt;</span></span> <code>&lt;/address></code>
</code>
</pre> </pre>
</div> </div>
</div> </div>
</div>
<div class="blocks-library__sub-item" id="text-blq">
<h2 class="blocks-library__sub-item-title">Блочные цитаты</h2>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote> <blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p> <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer> <footer>Emmet</footer>
...@@ -265,12 +212,11 @@ ...@@ -265,12 +212,11 @@
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml"> <pre class="code">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span></span> <code>&lt;blockquote></code>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span> <code> &lt;p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p></code>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span>Emmet<span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span></span> <code> &lt;footer>Emmet&lt;/footer></code>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span> <code>&lt;/blockquote></code>
</code>
</pre> </pre>
</div> </div>
</div> </div>
...@@ -278,19 +224,6 @@ ...@@ -278,19 +224,6 @@
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p> <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer> <footer><cite>Emmet</cite></footer>
</blockquote> </blockquote>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">cite</span>&gt;</span>Emmet<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span></span>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item" id="text-pre"> <div class="blocks-library__sub-item" id="text-pre">
<h2 class="blocks-library__sub-item-title">Форматированный текст</h2> <h2 class="blocks-library__sub-item-title">Форматированный текст</h2>
......
src/blocks/code/code.scss
View file @ 2c98fff8
...@@ -10,8 +10,8 @@ $border-radius: 3px !default; ...@@ -10,8 +10,8 @@ $border-radius: 3px !default;
display: block; display: block;
width: 100%; width: 100%;
max-height: 50rem; max-height: 50rem;
overflow-x: auto;
padding: 1em; padding: 1em;
overflow-x: auto;
background-color: $gray-lightest; background-color: $gray-lightest;
border-radius: $border-radius; border-radius: $border-radius;
border: 1px solid $gray-lighter; border: 1px solid $gray-lighter;
...@@ -22,5 +22,6 @@ $border-radius: 3px !default; ...@@ -22,5 +22,6 @@ $border-radius: 3px !default;
display: block; display: block;
padding: 0; padding: 0;
white-space: pre; white-space: pre;
background-color: transparent;
} }
} }
src/blocks/page/page.scss
View file @ 2c98fff8
...@@ -51,3 +51,8 @@ select, ...@@ -51,3 +51,8 @@ select,
textarea { textarea {
touch-action: manipulation; touch-action: manipulation;
} }
img {
max-width: 100%;
height: auto;
}
src/blocks/typo/typo.scss
View file @ 2c98fff8
...@@ -101,7 +101,7 @@ h6 { ...@@ -101,7 +101,7 @@ h6 {
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
} }
.p, // .p,
p, p,
ul, ul,
ol, ol,
...@@ -121,7 +121,7 @@ address { ...@@ -121,7 +121,7 @@ address {
ul, ul,
ol { ol {
padding-left: 1.8em; padding-left: 1.2em;
} }
ol ol, ol ol,
...@@ -133,7 +133,7 @@ ul ol { ...@@ -133,7 +133,7 @@ ul ol {
} }
li { li {
line-height: $line-height; line-height: inherit;
} }
dt { dt {
...@@ -185,38 +185,9 @@ abbr[title] { ...@@ -185,38 +185,9 @@ abbr[title] {
} }
blockquote { blockquote {
padding: 0 0 0 0.5em; padding: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
border-left: 1px solid $border-color;
@media (min-width: $screen-sm) {
padding: 0 0 0 1.8em;
margin-left: 0;
border-left-width: 5px;
}
p,
ul,
ol {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
footer {
text-align: right;
color: $gray;
// &:before {
// content: '— ';
// }
}
} }
code, code,
...@@ -227,9 +198,9 @@ samp { ...@@ -227,9 +198,9 @@ samp {
} }
code { code {
padding: 0.06em 0.3em;
color: $text-color; color: $text-color;
background-color: $gray-lightest; background-color: $gray-lightest;
padding: 0.06em 0.3em;
border-radius: $border-radius; border-radius: $border-radius;
} }
...@@ -249,8 +220,4 @@ pre { ...@@ -249,8 +220,4 @@ pre {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
tab-size: 2; tab-size: 2;
code {
background-color: transparent;
}
} }
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