Подготовил презентацию

This commit is contained in:
Legenda
2026-09-02 11:58:25 +03:00
commit 251a3975be
52 changed files with 4101 additions and 0 deletions
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 0. Cursor</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a class="current" href="00.html">0. Cursor</a>
<a href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 0. Cursor — зачем он тут</h1>
<img src="img/cursor-intro.png" alt="Cursor как мастерская" width="720">
<p>Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.</p>
<p>Сегодня он нам нужен как <strong>сцена</strong>:</p>
<ul>
<li>слева текст <code>.md</code></li>
<li>справа превью (как это выглядит «для людей»)</li>
<li>плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д.</li>
<li>если надо быстро привести документ в порядок — ИИ в чате, не Word</li>
</ul>
<p>Подробнее про ИИ — в <a href="03.html">блоке 3</a>. Сейчас просто открываем файлы и смотрим, как разметка оживает.</p>
<div class="pager">
<a href="index.html">← Содержание</a>
<a href="01.html">Блок 1. Разметка →</a>
</div>
</main>
</body>
</html>
+276
View File
@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 1. Языки разметки</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a class="current" href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 1. Языки разметки</h1>
<img src="img/markdown-hero.png" alt="Markdown: из каши в документ" width="720">
<p>Пишем <strong>текст с пометками</strong>. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.</p>
<table>
<thead><tr><th>Что</th><th>Когда</th></tr></thead>
<tbody>
<tr><td>Markdown</td><td>90% документа</td></tr>
<tr><td>HTML</td><td>md не умеет (размер картинки, выравнивание)</td></tr>
<tr><td>LaTeX</td><td>только формулы</td></tr>
<tr><td>Mermaid</td><td>схемы из текста</td></tr>
</tbody>
</table>
<h2>Markdown</h2>
<p>Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).</p>
<p>В Cursor / GitHub — <strong>GitHub Flavored Markdown</strong>. Этого хватает.</p>
<h3>Заголовки</h3>
<pre><code># Большой
## Поменьше
### Ещё меньше
#### Мелочь</code></pre>
<h1>Большой</h1>
<h2>Поменьше</h2>
<h3>Ещё меньше</h3>
<h4>Мелочь</h4>
<h3>Акцент</h3>
<p><strong>жирный</strong> и <em>курсив</em> и <strong><em>оба</em></strong>.</p>
<p>Можно <em>_курсив_</em> и <strong>__жирный__</strong> в исходнике md.</p>
<p><s>зачеркнуто</s> — ошибку видно, но история остаётся.</p>
<p><code>кусок кода</code> в строке: пишется в обратных кавычках.</p>
<h3>Абзацы и разрыв</h3>
<p>Пустая строка = новый абзац.</p>
<p>Два пробела в конце строки<br>дают перенос без нового абзаца.</p>
<hr>
<p>Горизонтальная линия — три минуса.</p>
<h3>Списки</h3>
<ul>
<li>пункт</li>
<li>ещё
<ul>
<li>вложенный</li>
<li>и ещё</li>
</ul>
</li>
<li>последний</li>
</ul>
<ol>
<li>первый</li>
<li>второй
<ol>
<li>вложенная нумерация</li>
</ol>
</li>
<li>третий</li>
</ol>
<ul>
<li><input type="checkbox" disabled> сделать</li>
<li><input type="checkbox" disabled checked> уже сделано</li>
<li><input type="checkbox" disabled> не забыть кофе</li>
</ul>
<h3>Ссылки и картинки</h3>
<p><a href="https://www.markdownguide.org/">Сайт Markdown</a></p>
<p>Сноска в тексте<sup><a href="#fn1">1</a></sup>.</p>
<p>Картинка «из коробки» — без размера и выравнивания:</p>
<pre><code>![лис в рамках](img/html-images.png)</code></pre>
<p><img src="img/html-images.png" alt="лис в рамках"></p>
<p>Для сайта так часто <strong>мало</strong>: огромная PNG, не туда прижата. Тогда HTML — ниже.</p>
<h3>Цитаты и код</h3>
<blockquote>
<p>Цитата.<br>Можно в несколько строк.</p>
<blockquote>и даже вложенная</blockquote>
</blockquote>
<pre><code>print("привет")</code></pre>
<pre><code>console.log("тоже привет");</code></pre>
<h3>Таблица</h3>
<table>
<thead><tr><th>Команда</th><th>Что делает</th></tr></thead>
<tbody>
<tr><td><code>#</code></td><td>заголовок</td></tr>
<tr><td><code>*</code> / <code>-</code></td><td>список</td></tr>
<tr><td><code>**</code></td><td>жирный</td></tr>
<tr><td><code>`</code></td><td>код</td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">влево</th>
<th style="text-align:center">центр</th>
<th style="text-align:right">вправо</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">a</td>
<td style="text-align:center">b</td>
<td style="text-align:right">c</td>
</tr>
<tr>
<td style="text-align:left">10</td>
<td style="text-align:center">20</td>
<td style="text-align:right">30</td>
</tr>
</tbody>
</table>
<h3>Мелочи</h3>
<p>Клавиша: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd></p>
<p>Верхний/нижний индекс чистым md <strong>нет</strong> — это HTML: H<sub>2</sub>O, E = mc<sup>2</sup>.</p>
<p>Экранирование в md: пишем <code>\*</code> если нужен символ, а не курсив.</p>
<p>Автоссылка: <a href="https://cursor.com">https://cursor.com</a></p>
<hr>
<h2>HTML внутри Markdown</h2>
<p>Когда md упирается — вставляем HTML. Зачем чаще всего: <strong>картинки</strong>. В чистом md нельзя сказать «ширина 240px, прижать вправо».</p>
<img src="img/html-images.png" alt="три кадра с лисом" width="640">
<h3>Размер</h3>
<pre><code>&lt;img src="img/html-images.png" alt="лиса" width="240"&gt;</code></pre>
<p>Узко:</p>
<img src="img/html-images.png" alt="лиса узко" width="240">
<p>Шире:</p>
<img src="img/html-images.png" alt="лиса шире" width="480">
<p>Или стиль <code>width: 40%</code>:</p>
<img src="img/html-images.png" alt="лиса 40%" style="width: 40%;">
<h3>Выравнивание</h3>
<p>По центру:</p>
<p align="center">
<img src="img/html-images.png" alt="центр" width="320">
</p>
<p>Вправо + подпись:</p>
<p align="right">
<img src="img/markdown-hero.png" alt="md" width="280"><br>
<em>маленькая справа</em>
</p>
<p>Обтекание текстом:</p>
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
<p>Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float.</p>
<br style="clear: both;">
<h3>Ещё HTML</h3>
<details>
<summary>Спойлер (клик)</summary>
<p>Секрет: внутри md можно прятать длинноты. На сайте — тем более.</p>
</details>
<p><mark>жёлтым</mark> и <span style="color: #c45c26;">акцент</span></p>
<p>Правило: <strong>сначала md, HTML — точечно</strong>. Целую страницу лучше уже как этот сайт, а не внутри <code>.md</code>.</p>
<hr>
<h2>LaTeX — только формулы</h2>
<img src="img/latex-board.png" alt="доска с формулами" width="720">
<p>LaTeX — целая система вёрстки научных текстов. <strong>Нам сегодня не это.</strong> В Markdown живёт кусок: математика в <code>$...$</code> / <code>$$...$$</code>. Здесь на сайте то же самое рисует KaTeX.</p>
<h3>В строке</h3>
<p>Энергия: $E = mc^2$.</p>
<p>Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$.</p>
<p>Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$.</p>
<p>Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$.</p>
<p>Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$</p>
<h3>Блоком</h3>
$$
i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t)
= \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t)
$$
<p>Система:</p>
$$
\begin{cases}
x + y = 1 \\
x - y = 0
\end{cases}
$$
<p>Матрица:</p>
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix} x \\ y \end{pmatrix}
=
\begin{pmatrix} p \\ q \end{pmatrix}
$$
<p>Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$</p>
<hr>
<h2>Mermaid</h2>
<img src="img/mermaid-pun.png" alt="русалка рисует блок-схему" width="720">
<p>Схемы текстом. Не лезем в Visio. На этой странице их рисует скрипт Mermaid.</p>
<h3>Стрелки</h3>
<pre class="mermaid">
flowchart LR
A[Идея] --> B[Markdown]
B --> C[Превью]
C --> D[PDF / HTML]
</pre>
<h3>Ветвление</h3>
<pre class="mermaid">
flowchart TD
Q{Нужен размер картинки?}
Q -->|нет| MD[Чистый md]
Q -->|да| HTML[Тег img]
</pre>
<h3>Кто кому пишет</h3>
<pre class="mermaid">
sequenceDiagram
participant Я
participant Cursor
Я->>Cursor: открой превью
Cursor-->>Я: вот документ
</pre>
<p>Дальше: выгрузка и лёгкие картинки — <a href="02.html">блок 2</a>.</p>
<p class="footnote" id="fn1"><sup>1</sup> Сноска. В pdf обычно тоже работает.</p>
<div class="pager">
<a href="00.html">← Блок 0. Cursor</a>
<a href="02.html">Блок 2. Экспорт →</a>
</div>
</main>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false }
],
ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true, theme: "neutral" });
</script>
</body>
</html>
+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 2. Экспорт и ffmpeg</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a href="01.html">1. Разметка</a>
<a class="current" href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 2. Экспорт и картинки для веба</h1>
<p>md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.</p>
<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720">
<h2>Из Markdown в другие форматы</h2>
<p>В Cursor те же расширения, что в VS Code: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.</p>
<h3>Markdown PDF</h3>
<p>Расширение: <strong>Markdown PDF</strong> (<code>yzane.markdown-pdf</code>).</p>
<p>Умеет из открытого <code>.md</code>:</p>
<ul>
<li>PDF</li>
<li>HTML</li>
<li>PNG (снимок)</li>
<li>иногда Markdown (пересобрать)</li>
</ul>
<p>Как пользоваться: правый клик по файлу или по превью → <code>Markdown PDF: Export (pdf)</code> / <code>Export (html)</code>.</p>
<p>Настройки, которые стоит глянуть один раз: формат A4, поля, переносы кода, math, тема/CSS.</p>
<p>Для доклада PDF — ок. Для сайта лучше HTML.</p>
<h3>Mermaid</h3>
<p>Расширение: <strong>Markdown Preview Mermaid Support</strong> (<code>bierner.markdown-mermaid</code>) — чтобы схемы из блока 1 рисовались в превью.</p>
<p>Без него блок mermaid так и останется серой простынёй.</p>
<p>Markdown PDF часто подхватывает mermaid, <strong>если</strong> превью его уже рисует. Экспортировал — открой PDF и проверь схемы.</p>
<h3>Что ещё бывает</h3>
<table>
<thead><tr><th>Плагин / штука</th><th>Зачем</th></tr></thead>
<tbody>
<tr><td>Markdown PDF</td><td>быстрый pdf/html из файла</td></tr>
<tr><td>Markdown Preview Mermaid Support</td><td>схемы в превью</td></tr>
<tr><td>Markdown All in One</td><td>оглавление, шорткаты</td></tr>
<tr><td>Pandoc</td><td>md → docx/tex/html, если припрёт Word</td></tr>
</tbody>
</table>
<p>Для сегодняшнего круга хватает <strong>Markdown PDF + Mermaid</strong>.</p>
<h2>ffmpeg — картинки для вёрстки</h2>
<p>ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.</p>
<p>Разбор «что это вообще такое» лучше смотреть тут (очень советую):</p>
<p><strong><a href="https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN">FFmpeg — крутое видео</a></strong></p>
<p>Нам из всего комбайна — узкий кусок: <strong>для сайта</strong>. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем <strong>WebP</strong>.</p>
<p>Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.</p>
<pre><code>ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp</code></pre>
<pre><code>ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp</code></pre>
<table>
<thead><tr><th>Кусок</th><th>Смысл</th></tr></thead>
<tbody>
<tr><td><code>-i ...</code></td><td>вход</td></tr>
<tr><td><code>-vf "scale=800:-1"</code></td><td>ширина 800, высота сама</td></tr>
<tr><td><code>-c:v libwebp</code></td><td>кодек WebP</td></tr>
<tr><td><code>-quality 80</code></td><td>качество, нормальный компромисс</td></tr>
</tbody>
</table>
<p>Папку <code>img_web</code> создай заранее.</p>
<pre><code>ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp</code></pre>
<pre><code>ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp</code></pre>
<p>В HTML потом:</p>
<pre><code>&lt;img src="img_web/cover.webp" alt="обложка" width="800"&gt;</code></pre>
<p>Исходники в <code>img/</code> не трогаем — это «негатив». На страницу отдаём WebP.</p>
<p>Проверка: в терминале <code>ffmpeg -version</code>.</p>
<p>Дальше: кто напишет md за нас, если лень — <a href="03.html">блок 3</a>.</p>
<div class="pager">
<a href="01.html">← Блок 1. Разметка</a>
<a href="03.html">Блок 3. ИИ →</a>
</div>
</main>
</body>
</html>
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 3. ИИ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a class="current" href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 3. ИИ для разметки</h1>
<p>Смысл не в том, чтобы «нейросеть написала роман». Смысл в <strong>форматировании</strong>: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.</p>
<p>Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.</p>
<h2>Почему именно форматирование</h2>
<p>Задача тупая и чёткая: заголовки, списки, таблицы, формулы в <code>$...$</code>, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.</p>
<p>В <strong>бесплатном</strong> Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.</p>
<p>Примеры промптов, без церемоний:</p>
<ul>
<li>«приведи этот файл к нормальному Markdown: заголовки, списки, таблица»</li>
<li>«формулы оберни в <code>$...$</code> / <code>$$...$$</code>»</li>
<li>«сделай mermaid-схему процесса из абзаца ниже»</li>
<li>«замени жирные картинки на <code>&lt;img width=...&gt;</code> по центру»</li>
</ul>
<p>Кидаешь черновик в чат или <code>@файл</code> — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».</p>
<h2>Если лимиты Cursor кончились</h2>
<p>Тот же черновик можно отнести наружу:</p>
<ul>
<li><strong>Gemini</strong></li>
<li><strong>ChatGPT (GPT)</strong></li>
</ul>
<p>Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.</p>
<p>Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.</p>
<p>ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.</p>
<p>Про то, как не плодить десять «финальных» копий — <a href="04.html">блок 4</a>.</p>
<div class="pager">
<a href="02.html">← Блок 2. Экспорт</a>
<a href="04.html">Блок 4. Git →</a>
</div>
</main>
</body>
</html>
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 4. Git</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a class="current" href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 4. Git — зачем, без команд</h1>
<img src="img/git-vs-word.png" alt="слева каша файлов Word, справа спокойное дерево версий" width="720">
<p>Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.</p>
<p>Имена, которые все видели:</p>
<pre><code>презентация_финал_конец_финал2_теперь_точно.docx</code></pre>
<p>Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.</p>
<h2>Чем git лучше (хотя порог выше)</h2>
<p>Git хранит <strong>историю</strong>, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.</p>
<p>Зачем это нам, раз документы — Markdown:</p>
<ul>
<li>md — текст. Git видит <strong>строки</strong>, не бинарный комбайн Word.</li>
<li>можно ветки: ты пилишь раздел, коллега — другой, потом склеить.</li>
<li>рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался».</li>
<li>откат: «как было в прошлый четверг» — не археология папки Загрузки.</li>
</ul>
<p>Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.</p>
<h2>Что взять с собой</h2>
<p>Сегодня <strong>не учим команды</strong>. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).</p>
<p>Освоил git + Markdown — документы живут как код. Почта с <code>финал3.docx</code> становится смешной.</p>
<p>Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, <strong>зачем</strong>.</p>
<div class="pager">
<a href="03.html">← Блок 3. ИИ</a>
<a href="index.html">Содержание →</a>
</div>
</main>
</body>
</html>
+200
View File
@@ -0,0 +1,200 @@
:root {
--bg: #f6f1e8;
--paper: #fffaf3;
--ink: #1f2a2e;
--muted: #5c6a70;
--teal: #1f7a72;
--teal-d: #155e58;
--coral: #c45c26;
--line: #e4d9c8;
--code-bg: #243033;
--code-fg: #e8efe8;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font: 18px/1.55 "Segoe UI", "PT Sans", sans-serif;
}
a { color: var(--teal-d); }
a:hover { color: var(--coral); }
.wrap {
max-width: 820px;
margin: 0 auto;
padding: 0 20px 64px;
}
.nav {
position: sticky;
top: 0;
z-index: 5;
background: rgba(246, 241, 232, 0.94);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(8px);
}
.nav-inner {
max-width: 960px;
margin: 0 auto;
padding: 10px 16px;
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
}
.brand {
font-weight: 700;
text-decoration: none;
color: var(--ink);
margin-right: 8px;
}
.nav-inner nav {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.nav-inner nav a {
text-decoration: none;
font-size: 14px;
padding: 4px 10px;
border-radius: 999px;
color: var(--muted);
}
.nav-inner nav a:hover,
.nav-inner nav a.current {
background: #e7f3f1;
color: var(--teal-d);
}
h1, h2, h3, h4 { line-height: 1.25; }
h1 { font-size: 2rem; margin: 1.2em 0 0.5em; }
h2 { font-size: 1.45rem; margin-top: 1.6em; }
h3 { font-size: 1.15rem; }
.lead { font-size: 1.15rem; color: var(--muted); }
img.hero,
.content img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
img.hero { display: block; margin: 8px 0 24px; }
.content img { margin: 8px 0; }
.card-list {
list-style: none;
padding: 0;
margin: 28px 0;
}
.card-list li {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
margin: 0 0 12px;
}
.card-list a {
display: block;
padding: 14px 16px;
text-decoration: none;
color: inherit;
}
.card-list a:hover { background: #e7f3f1; }
.card-list strong { color: var(--teal-d); }
.card-list span { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 4px; }
table {
border-collapse: collapse;
width: 100%;
background: var(--paper);
margin: 12px 0 20px;
}
th, td {
border: 1px solid var(--line);
padding: 8px 10px;
text-align: left;
}
th { background: #efe6d8; }
pre, code {
font-family: Consolas, "Cascadia Mono", monospace;
}
code {
background: #efe6d8;
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
pre {
background: var(--code-bg);
color: var(--code-fg);
padding: 14px 16px;
border-radius: 10px;
overflow: auto;
}
pre code { background: none; color: inherit; padding: 0; }
blockquote {
margin: 12px 0;
padding: 4px 0 4px 16px;
border-left: 4px solid var(--teal);
color: var(--muted);
}
hr {
border: 0;
border-top: 1px solid var(--line);
margin: 28px 0;
}
.pager {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.pager a {
text-decoration: none;
font-weight: 600;
}
kbd {
font-family: inherit;
border: 1px solid var(--line);
background: #fff;
padding: 0 6px;
border-radius: 4px;
box-shadow: 0 1px 0 var(--line);
}
.footnote { font-size: 0.9rem; color: var(--muted); }
.mermaid { background: var(--paper); padding: 12px; border-radius: 10px; }
@media (max-width: 640px) {
.nav-inner nav a { font-size: 13px; padding: 4px 8px; }
h1 { font-size: 1.6rem; }
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

+68
View File
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Демо разметки — содержание</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a class="current" href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap">
<h1>Содержание</h1>
<p class="lead">Небольшой сайт по блокам демо. Листай сверху или карточки ниже.</p>
<img class="hero" src="img/site-index-hero.png" alt="Книга, которая становится сайтом с оглавлением">
<ol class="card-list">
<li>
<a href="00.html">
<strong>Блок 0. Cursor</strong>
<span>Зачем редактор, совсем коротко. Потом будет подробнее.</span>
</a>
</li>
<li>
<a href="01.html">
<strong>Блок 1. Языки разметки</strong>
<span>Markdown, HTML внутри md, формулы, простой Mermaid.</span>
</a>
</li>
<li>
<a href="02.html">
<strong>Блок 2. Экспорт и ffmpeg</strong>
<span>PDF/HTML из md, плагины, картинки в WebP для сайта.</span>
</a>
</li>
<li>
<a href="03.html">
<strong>Блок 3. ИИ</strong>
<span>Форматирование документов: Cursor, а если лимиты кончились — Gemini / GPT.</span>
</a>
</li>
<li>
<a href="04.html">
<strong>Блок 4. Git</strong>
<span>Почему это лучше бесконечных «финал2.docx». Без команд.</span>
</a>
</li>
</ol>
<div class="pager">
<span></span>
<a href="00.html">Блок 0. Cursor →</a>
</div>
</main>
</body>
</html>