Skip to content

Commit b978d90

Browse files
merittmeritt
committed
🎓 Добавил оглавление
1 parent 83dd31f commit b978d90

21 files changed

+69
-33
lines changed

‎app/css/chapter.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
}
3737

3838
& + .chapter-part-col {
39-
background-color: var(--light-subtle-color);
4039
border-top: 1px solid var(--subtle-color);
4140

4241
@media (--viewport-large) {
@@ -52,3 +51,7 @@
5251
max-width: 32rem;
5352
}
5453
}
54+
55+
.gray-bgcolor {
56+
background-color: var(--light-subtle-color);
57+
}

‎app/templates/index.hbs

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,38 @@
1717
<main>
1818
{{~> header ~}}
1919

20+
<section class="chapter">
21+
<h2>Оглавление</h2>
22+
<article class="chapter-part">
23+
<div class="chapter-part-col">
24+
<h4>HTML</h4>
25+
<ul>
26+
<li><a href="#html-syntax">Синтаксис</a></li>
27+
<li><a href="#html-validator">Валидность</a></li>
28+
<li><a href="#html-doctype">HTML-доктайп</a></li>
29+
<li><a href="#html-encoding">Кодировка символов</a></li>
30+
<li><a href="#html-style-includes">Подключение стилей</a></li>
31+
<li><a href="#html-js-includes">Подключение скриптов</a></li>
32+
<li><a href="#html-attribute-order">Порядок атрибутов</a></li>
33+
<li><a href="#html-boolean">Логические атрибуты</a></li>
34+
<li><a href="#html-form-labels">Подписи полей ввода</a></li>
35+
<li><a href="#html-img-sizes">Размеры картинок</a></li>
36+
<li><a href="#html-language">Атрибут языка</a></li>
37+
</ul>
38+
</div>
39+
<div class="chapter-part-col">
40+
<h4>CSS</h4>
41+
<ul>
42+
<li><a href="#css-syntax">Синтаксис</a></li>
43+
<li><a href="#css-order">Порядок свойств</a></li>
44+
<li><a href="#css-class-names">Имена классов</a></li>
45+
<li><a href="#css-import">Правило @import</a></li>
46+
<li><a href="#css-font-variant">Варианты шрифта</a></li>
47+
</ul>
48+
</div>
49+
</article>
50+
</section>
51+
2052
<section class="chapter">
2153
<h2>HTML</h2>
2254
{{~> html/html-rules ~}}

‎app/templates/partials/css/css-rules.hbs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="chapter-part-col">
33
{{~> css/rules/css-syntax ~}}
44
</div>
5-
<div class="chapter-part-col">
5+
<div class="chapter-part-col gray-bgcolor">
66
<figure>
77
<pre><code class="language-css">
88
{{~> css/examples/css-syntax-example ~}}
@@ -15,7 +15,7 @@
1515
<div class="chapter-part-col">
1616
{{~> css/rules/css-order ~}}
1717
</div>
18-
<div class="chapter-part-col">
18+
<div class="chapter-part-col gray-bgcolor">
1919
<figure>
2020
<pre><code class="language-css">
2121
{{~> css/examples/css-order-example ~}}
@@ -28,7 +28,7 @@
2828
<div class="chapter-part-col">
2929
{{~> css/rules/css-class-names ~}}
3030
</div>
31-
<div class="chapter-part-col">
31+
<div class="chapter-part-col gray-bgcolor">
3232
<figure>
3333
<pre><code class="language-css">
3434
{{~> css/examples/css-class-names-example ~}}
@@ -41,7 +41,7 @@
4141
<div class="chapter-part-col">
4242
{{~> css/rules/css-import ~}}
4343
</div>
44-
<div class="chapter-part-col">
44+
<div class="chapter-part-col gray-bgcolor">
4545
<figure>
4646
<pre><code class="language-markup">
4747
{{~> css/examples/css-import-example ~}}
@@ -54,7 +54,7 @@
5454
<div class="chapter-part-col">
5555
{{~> css/rules/css-font-variant ~}}
5656
</div>
57-
<div class="chapter-part-col">
57+
<div class="chapter-part-col gray-bgcolor">
5858
<figure>
5959
<pre><code class="language-css">
6060
{{~> css/examples/css-font-variant-example ~}}

‎app/templates/partials/css/rules/css-class-names.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Имена классов</h4>
1+
<h4 id="css-class-names">Имена классов</h4>
22
<ul>
33
<li>Имена классов пишутся строчными буквами, используется дефис (но&nbsp;не&nbsp;знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во&nbsp;взаимосвязанных классах (например, <code>.button</code> и <code>.button-danger</code>).</li>
44
<li>Имена классов должны быть такими, чтобы по&nbsp;ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение&nbsp;&mdash; <code>.btn</code> для кнопок), но&nbsp;не&nbsp;делайте их&nbsp;слишком длинными (более трёх слов).</li>

‎app/templates/partials/css/rules/css-font-variant.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Варианты шрифта</h4>
1+
<h4 id="css-font-variant">Варианты шрифта</h4>
22
<p>
33
Альтернативные варианты шрифта и&nbsp;тип семейства указываются в&nbsp;конце перечисления <code>font-family</code>.
44
</p>

‎app/templates/partials/css/rules/css-import.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Правило <code>@import</code></h4>
1+
<h4 id="css-import">Правило <code>@import</code></h4>
22
<p>
33
Правило <code>@import</code> работает медленнее, чем тег <code>&lt;link&gt;</code>. В&nbsp;стилях <code>@import</code> не&nbsp;должен использоваться.
44
</p>

‎app/templates/partials/css/rules/css-order.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Порядок свойств</h4>
1+
<h4 id="css-order">Порядок свойств</h4>
22
<p>
33
Объявления логически связанных свойств группируются в&nbsp;следующем порядке:
44
</p>

‎app/templates/partials/css/rules/css-syntax.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Синтаксис</h4>
1+
<h4 id="css-syntax">Синтаксис</h4>
22
<ul>
33
<li>После значения свойства обязательно ставится точка с&nbsp;запятой.</li>
44
<li>Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл <a href="https://github.com/htmlacademy/codeguide/blob/master/.editorconfig" target="_blank">.editorconfig</a> в&nbsp;вашем редакторе.</li>

‎app/templates/partials/css/rules/css-vertical-align.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Указание <code>vertical-align</code></h4>
1+
<h4 id="css-vertical-align">Указание <code>vertical-align</code></h4>
22
<p>
33
Значение <code>vertical-align</code> должно быть <i>явно</i> указано для блоков с <code>display: inline-block</code>.
44
</p>

‎app/templates/partials/html/html-rules.hbs

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="chapter-part-col">
33
{{~> html/rules/html-syntax ~}}
44
</div>
5-
<div class="chapter-part-col">
5+
<div class="chapter-part-col gray-bgcolor">
66
<figure>
77
<pre><code class="language-markup">
88
{{~> html/examples/html-syntax-example ~}}
@@ -16,11 +16,12 @@
1616
{{~> html/rules/html-validator ~}}
1717
</div>
1818
</article>
19+
1920
<article class="chapter-part">
2021
<div class="chapter-part-col">
2122
{{~> html/rules/html-doctype ~}}
2223
</div>
23-
<div class="chapter-part-col">
24+
<div class="chapter-part-col gray-bgcolor">
2425
<figure>
2526
<pre><code class="language-markup">
2627
{{~> html/examples/html-doctype-example ~}}
@@ -33,7 +34,7 @@
3334
<div class="chapter-part-col">
3435
{{~> html/rules/html-encoding ~}}
3536
</div>
36-
<div class="chapter-part-col">
37+
<div class="chapter-part-col gray-bgcolor">
3738
<figure>
3839
<pre><code class="language-markup">
3940
{{~> html/examples/html-encoding-example ~}}
@@ -46,7 +47,7 @@
4647
<div class="chapter-part-col">
4748
{{~> html/rules/html-style-includes ~}}
4849
</div>
49-
<div class="chapter-part-col">
50+
<div class="chapter-part-col gray-bgcolor">
5051
<figure>
5152
<pre><code class="language-markup">
5253
{{~> html/examples/html-style-includes-example ~}}
@@ -59,7 +60,7 @@
5960
<div class="chapter-part-col">
6061
{{~> html/rules/html-js-includes ~}}
6162
</div>
62-
<div class="chapter-part-col">
63+
<div class="chapter-part-col gray-bgcolor">
6364
<figure>
6465
<pre><code class="language-markup">
6566
{{~> html/examples/html-js-includes-example ~}}
@@ -72,7 +73,7 @@
7273
<div class="chapter-part-col">
7374
{{~> html/rules/html-attribute-order ~}}
7475
</div>
75-
<div class="chapter-part-col">
76+
<div class="chapter-part-col gray-bgcolor">
7677
<figure>
7778
<pre><code class="language-markup">
7879
{{~> html/examples/html-attribute-order-example ~}}
@@ -85,7 +86,7 @@
8586
<div class="chapter-part-col">
8687
{{~> html/rules/html-boolean ~}}
8788
</div>
88-
<div class="chapter-part-col">
89+
<div class="chapter-part-col gray-bgcolor">
8990
<figure>
9091
<pre><code class="language-markup">
9192
{{~> html/examples/html-boolean-example ~}}
@@ -98,7 +99,7 @@
9899
<div class="chapter-part-col">
99100
{{~> html/rules/html-form-labels ~}}
100101
</div>
101-
<div class="chapter-part-col">
102+
<div class="chapter-part-col gray-bgcolor">
102103
<figure>
103104
<pre><code class="language-markup">
104105
{{~> html/examples/html-form-labels-example ~}}
@@ -111,7 +112,7 @@
111112
<div class="chapter-part-col">
112113
{{~> html/rules/html-img-sizes ~}}
113114
</div>
114-
<div class="chapter-part-col">
115+
<div class="chapter-part-col gray-bgcolor">
115116
<figure>
116117
<pre><code class="language-markup">
117118
{{~> html/examples/html-img-sizes-example ~}}
@@ -124,7 +125,7 @@
124125
<div class="chapter-part-col">
125126
{{~> html/rules/html-language ~}}
126127
</div>
127-
<div class="chapter-part-col">
128+
<div class="chapter-part-col gray-bgcolor">
128129
<figure>
129130
<pre><code class="language-markup">
130131
{{~> html/examples/html-language-example ~}}

‎app/templates/partials/html/rules/html-attribute-order.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Порядок атрибутов</h4>
1+
<h4 id="html-attribute-order">Порядок атрибутов</h4>
22
<p>
33
Атрибут класса у&nbsp;HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и&nbsp;быстрее разбираться в&nbsp;назначении блоков по&nbsp;их&nbsp;классам.
44
</p>

‎app/templates/partials/html/rules/html-boolean.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Логические атрибуты</h4>
1+
<h4 id="html-boolean">Логические атрибуты</h4>
22
<p>
33
Для логических атрибутов (например, <code>checked</code>, <code>disabled</code>, <code>required</code>) значение не&nbsp;указывается, а&nbsp;сами атрибуты указываются последними и&nbsp;в&nbsp;единообразной последовательности во&nbsp;всём документе.
44
</p>

‎app/templates/partials/html/rules/html-doctype.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>HTML доктайп</h4>
1+
<h4 id="html-doctype">HTML-доктайп</h4>
22
<p>
33
В&nbsp;начале страницы обязательно должен быть указан актуальный <code>doctype</code>, чтобы браузер отображал её&nbsp;в&nbsp;режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во&nbsp;всех современных браузерах.
44
</p>

‎app/templates/partials/html/rules/html-encoding.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Кодировка символов</h4>
1+
<h4 id="html-encoding">Кодировка символов</h4>
22
<p>
33
Кодировка символов на&nbsp;странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка <code>utf-8</code> предпочтительна.
44
</p>

‎app/templates/partials/html/rules/html-form-labels.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Подписи полей ввода</h4>
1+
<h4 id="html-form-labels">Подписи полей ввода</h4>
22
<p>
33
Для улучшения взаимодействия пользователя с&nbsp;элементами форм, при нажатии на&nbsp;подпись поля, оно должно активироваться. Для этого элемент формы связывается с&nbsp;его описанием с&nbsp;помощью идентификатора и&nbsp;атрибута <code>for</code> тега <code>&lt;label&gt;</code>.
44
</p>

‎app/templates/partials/html/rules/html-img-sizes.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Размеры картинок</h4>
1+
<h4 id="html-img-sizes">Размеры картинок</h4>
22
<p>
33
Изображениям <code>&lt;img&gt;</code> должны быть явно заданы с&nbsp;помощью атрибута размеры в&nbsp;пикселях или в&nbsp;процентах. В&nbsp;случае пикселей размерность не&nbsp;нужна.
44
</p>

‎app/templates/partials/html/rules/html-js-includes.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Подключение скриптов</h4>
1+
<h4 id="html-js-includes">Подключение скриптов</h4>
22
<p>
33
Скрипты должны подключаться в&nbsp;самом низу страницы, чтобы при её&nbsp;загрузке не&nbsp;блокировать отображение содержимого.
44
</p>

‎app/templates/partials/html/rules/html-language.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Атрибут языка</h4>
1+
<h4 id="html-language">Атрибут языка</h4>
22
<p>
33
Для элемента <code>&lt;html&gt;</code> в&nbsp;атрибуте <code>lang</code> должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
44
</p>

‎app/templates/partials/html/rules/html-style-includes.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Подключение стилей</h4>
1+
<h4 id="html-style-includes">Подключение стилей</h4>
22
<p>
33
Стилевые файлы с&nbsp;помощью <code>&lt;link&gt;</code> подключаются внутри <code>&lt;head&gt;</code>. При этом атрибут <code>type</code> для тега <code>&lt;link&gt;</code> не&nbsp;указывается, так как его значение <code>text/css</code> устанавливается по&nbsp;умолчанию.
44
</p>

‎app/templates/partials/html/rules/html-syntax.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Синтаксис</h4>
1+
<h4 id="html-syntax">Синтаксис</h4>
22
<ul>
33
<li>Для отступов у&nbsp;вложенных элементов используются два пробела. Для правильного форматирования используйте файл <a href="https://github.com/htmlacademy/codeguide/blob/master/.editorconfig" target="_blank">.editorconfig</a> в&nbsp;вашем редакторе.</li>
44
<li>Теги и&nbsp;их&nbsp;атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.</li>

‎app/templates/partials/html/rules/html-validator.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h4>Валидность</h4>
1+
<h4 id="html-validator">Валидность</h4>
22
<p>
33
Документ должен проходить проверку на&nbsp;валидность. Для проверки используется <a href="http://validator.w3.org/nu/" target="_blank">современный валидатор</a>.
44
</p>

0 commit comments

Comments
 (0)