Skip to content

K
kpp
Commit 26b76d69 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

перенес типографику в блок page

parent 9615b460
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 405 deletions
src/blocks/page/page.scss
View file @ 26b76d69
...@@ -313,21 +313,21 @@ li { ...@@ -313,21 +313,21 @@ li {
line-height: inherit; line-height: inherit;
} }
dt { // dt {
font-weight: 700; // font-weight: 700;
} // }
dd { // dd {
margin-left: 0; // margin-left: 0;
@media (min-width: $screen-sm) { // @media (min-width: $screen-sm) {
margin-left: 1.5rem; // margin-left: 1.5rem;
} // }
& + dt { // & + dt {
margin-top: ($line-height / 2); // margin-top: ($line-height / 2);
} // }
} // }
// .small, // .small,
small { small {
......
src/blocks/typo/readme.md deleted 100644 → 0
View file @ 9615b460
Реализуется блоком `typo`, все стили которого являются глобальными.
Параграфы, расстояние между ними. [Ссылка](qwert1234). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
# Заголовок 1
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
## Заголовок 2
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
### Заголовок 3
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
#### Заголовок 4
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
##### Заголовок 5
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
###### Заголовок 6
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
* Пункт 1
* Подпункт 1
* Подпункт 2
* Пункт 2
* Пункт 3
1. Пункт 1
1. Подпункт 1
2. Подпункт 2
2. Пункт 2
3. Пункт 3
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
* * *
Параграфы, расстояние между ними. [Ссылка](/empty). Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<table>
<tbody>
<tr>
<td><code>&lt;a></code></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong></code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b></code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i></code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em></code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s></code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del></code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins></code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
<tr>
<td><code>&lt;mark></code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small></code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr></code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd></code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup></code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub></code></td>
<td>H<sub>2</sub>O</td>
</tr>
<tr>
<td><code>&lt;code></code></td>
<td>`code`</td>
</tr>
</tbody>
</table>
<address><b>Имя Фамилия</b> <br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:user@mail.com">user@mail.com</a></address>
> Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
>
> <footer><cite>Emmet</cite></footer>
<pre>// Форматированный текст с символом переноса строки
// Вторая строка. Смотри так же [БЭМ-блок для кода](#code).
</pre>
src/blocks/typo/typo.scss deleted 100644 → 0
View file @ 9615b460
// Этот блок ответственен ТОЛЬКО за типографику проекта.
// Не пишите тут какую-либо стороннюю стилизацию.
$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;
$screen-sm: 480px !default;
$border-radius: 3px !default;
// @font-face {
// font-family: 'FONTNAME';
// src: url('../fonts/FONTNAME.woff2') format('woff2'),
// url('../fonts/FONTNAME.woff') format('woff'),
// url('../fonts/FONTNAME.ttf') format('truetype');
// font-weight: 400;
// font-style: normal;
// }
html {
font-size: $font-size--root;
// Для адаптивной типографики, менять font-size на html
// @media (min-width: $screen-md) {
// font-size: ($font-size--root + 2);
// }
}
body {
// ТОЛЬКО типографика!
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
color: $text-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 / ($font-size--h1 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h1;
}
// .h2,
h2 {
/* font-size: #{(($font-size--h2 / ($font-size--h2 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h2;
}
// .h3,
h3 {
/* font-size: #{(($font-size--h3 / ($font-size--h3 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h3;
}
// .h4,
h4 {
/* font-size: #{(($font-size--h4 / ($font-size--h4 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h4;
}
// .h5,
h5 {
/* font-size: #{(($font-size--h5 / ($font-size--h5 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h5;
}
// .h6,
h6 {
/* font-size: #{(($font-size--h6 / ($font-size--h6 * 0 + 1)) * $font-size--root)}; */
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);
}
}
hr {
margin-top: 2rem;
margin-bottom: 2rem;
border: 0;
border-top: 1px solid $border-color;
}
// .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;
}
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