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 () {
gulp.task('style', function () {
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait');
console.log('---------- Компиляция стилей');
return gulp.src(dirs.srcPath + 'scss/style.scss')
.pipe(plumber({
......@@ -69,6 +70,7 @@ gulp.task('style', function () {
this.emit('end');
}
}))
.pipe(wait(100))
.pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Style:"}))
.pipe(sass())
......@@ -90,6 +92,7 @@ gulp.task('style:single', function () {
if(pjson.configProject.singleCompiled.length) {
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const wait = require('gulp-wait');
console.log('---------- Компиляция добавочных стилей');
return gulp.src(pjson.configProject.singleCompiled)
.pipe(plumber({
......@@ -101,6 +104,7 @@ gulp.task('style:single', function () {
this.emit('end');
}
}))
.pipe(wait(100))
.pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Single style:"}))
.pipe(sass())
......
src/blocks-demo.html
View file @ 2c98fff8
......@@ -52,7 +52,15 @@
<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">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
......@@ -71,21 +79,7 @@
<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>
<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>
<h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
......@@ -99,13 +93,6 @@
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6>
<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>
<li>Пункт 1
<ul>
......@@ -116,8 +103,6 @@
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
<div class="col-md-6">
<ol>
<li>Пункт 1
<ol>
......@@ -128,13 +113,6 @@
<li>Пункт 2</li>
<li>Пункт 3</li>
</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>
<dl>
<dt>Определяемая сущность 1</dt>
......@@ -144,21 +122,10 @@
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-hr">
<h2 class="blocks-library__sub-item-title">Разделитель уровня параграфа</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr>
<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">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<table>
<tbody><tr>
<tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка</a></td>
</tr>
......@@ -190,11 +157,7 @@
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
</tbody></table>
</div>
<div class="col-lg-6">
<table>
<tbody><tr>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
......@@ -222,15 +185,7 @@
<td><code>&lt;code&gt;</code></td>
<td><code>code</code></td>
</tr>
</tbody></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>
</table>
<address>
<strong>Имя Фамилия</strong>
<br>
......@@ -240,24 +195,16 @@
<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">address</span>&gt;</span></span>
<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>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span>
<span class="code__line"> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span>
<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>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">address</span>&gt;</span></span>
</code>
<pre class="code">
<code>&lt;address></code>
<code> &lt;strong>Имя Фамилия&lt;/strong></code>
<code> &lt;br></code>
<code> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) &lt;br></code>
<code> &lt;a href="mailto:imya@mail.com">imya@mail.com&lt;/a></code>
<code>&lt;/address></code>
</pre>
</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>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
......@@ -265,12 +212,11 @@
<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>Emmet<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 class="code">
<code>&lt;blockquote></code>
<code> &lt;p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p></code>
<code> &lt;footer>Emmet&lt;/footer></code>
<code>&lt;/blockquote></code>
</pre>
</div>
</div>
......@@ -278,19 +224,6 @@
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</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">
<h2 class="blocks-library__sub-item-title">Форматированный текст</h2>
......
src/blocks/code/code.scss
View file @ 2c98fff8
......@@ -10,8 +10,8 @@ $border-radius: 3px !default;
display: block;
width: 100%;
max-height: 50rem;
overflow-x: auto;
padding: 1em;
overflow-x: auto;
background-color: $gray-lightest;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
......@@ -22,5 +22,6 @@ $border-radius: 3px !default;
display: block;
padding: 0;
white-space: pre;
background-color: transparent;
}
}
src/blocks/page/page.scss
View file @ 2c98fff8
......@@ -51,3 +51,8 @@ select,
textarea {
touch-action: manipulation;
}
img {
max-width: 100%;
height: auto;
}
src/blocks/typo/typo.scss
View file @ 2c98fff8
......@@ -101,7 +101,7 @@ h6 {
margin-bottom: ($line-height / 2);
}
.p,
// .p,
p,
ul,
ol,
......@@ -121,7 +121,7 @@ address {
ul,
ol {
padding-left: 1.8em;
padding-left: 1.2em;
}
ol ol,
......@@ -133,7 +133,7 @@ ul ol {
}
li {
line-height: $line-height;
line-height: inherit;
}
dt {
......@@ -185,38 +185,9 @@ abbr[title] {
}
blockquote {
padding: 0 0 0 0.5em;
padding: 0;
margin-left: 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,
......@@ -227,9 +198,9 @@ samp {
}
code {
padding: 0.06em 0.3em;
color: $text-color;
background-color: $gray-lightest;
padding: 0.06em 0.3em;
border-radius: $border-radius;
}
......@@ -249,8 +220,4 @@ pre {
width: 100%;
overflow-x: auto;
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