Руководство › Часть II. Стили › 07. Секции 7–9

07. `style.css`: блог, статья, адаптив

Разбираем три секции — 7 (блог), 8 (полная статья) и 9 (адаптив). Две из них — задел на будущее: блог и полная статья. Сейчас на сайте блога нет, но CSS готов — когда понадобится, файлы просто вернутся из архива. И третья — самая объёмная: адаптив.

Про Секцию 10

В файле есть ещё Секция 10 — «Коммерческое предложение» с классами .price-* и .legal-note. Она разбирается отдельно — в разделе 16, вместе со страницей offer.html, которую обслуживает. Здесь её не трогаем.

Секция 7: блог

Стили для страницы blog.html — списка статей. Даже когда блог не подключён к меню, эти стили ждут своего часа.

7.1. Список статей — `.blog-list` и `.blog-post`

style.css — .blog-list

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 25px 0;
}

.blog-post {
  display: flex;
  flex-direction: column;
  background: #f8faff;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 18px 20px;
  transition: box-shadow 0.2s;
}
.blog-post:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.blog-list — это flex в колонку. В отличие от сетки, тут статьи идут одна под другой, как в блоге или в новостной ленте.

flex-direction: column — меняет направление. По умолчанию flex раскладывает детей в строку (row), а с этим свойством — в столбик. Дети будут идти сверху вниз.

display: flex (по умолчанию) display: flex + column ------------------------- --------------------- +-----+-----+-----+ +-------------+ | 1 | 2 | 3 | | 1 | +-----+-----+-----+ +-------------+ | 2 | +-------------+ | 3 | +-------------+

.blog-post:hover { box-shadow: … } — при наведении курсора карточка статьи получает тень. Простое, но заметное движение: пользователь видит, что элемент «живой» и на него можно кликнуть.

Заметьте: в обычном состоянии у .blog-post есть transition: box-shadow 0.2s. Это значит, что тень появится и исчезнет не мгновенно, а плавно за 0.2 секунды.

7.2. Заголовок и текст статьи

style.css — .post-content

.post-content { width: 100%; }
.post-content h3 {
  margin: 0 0 4px 0;
  font-weight: 500;
  font-size: 1.15rem;
}

.post-title {
  color: #1a3a5c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border 0.2s;
}
.post-title:hover { border-bottom-color: #2b6f9c; }

.post-excerpt {
  margin: 0 0 8px 0;
  font-weight: 300;
  font-size: 0.98rem;
  color: #2d3f54;
  text-align: justify;
}

.post-title — тот же приём, что и с меню: прозрачная нижняя граница «наготове», и при наведении она становится синей. Ссылка визуально «подчёркивается», но без резкого «прыжка» в разметке.

.post-excerpt — короткое описание статьи. text-align: justify — по ширине, как и остальной текст на сайте.

7.3. Мета-строка и категория

style.css — .post-meta

.post-meta {
  display: flex;
  gap: 15px;
  font-size: 0.85rem;
  color: #6a7e98;
}
.post-meta .post-category {
  background: #e7eff7;
  padding: 0 10px;
  border-radius: 12px;
  color: #1a3a5c;
  font-weight: 400;
}

.post-meta — небольшой блок с датой и категорией под текстом статьи. Мелкий шрифт (0.85rem), приглушённый цвет.

.post-meta .post-category — «таблетка» категории. Тот же приём, что и у бейджа: скругление 12px, светлый фон, компактные отступы.

7.4. Пагинация — `.pagination`

style.css — .pagination

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}
.pagination .page {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #dce5ef;
  border-radius: 4px;
  color: #1a3a5c;
  text-decoration: none;
  font-weight: 400;
  transition: all 0.2s;
}
.pagination .page:hover { background: #f0f6fc; }
.pagination .page.current {
  background: #2b6f9c;
  color: #fff;
  border-color: #2b6f9c;
}
.pagination .page.next { border-color: #2b6f9c; }

Пагинация — переключатель страниц: 1 2 3 Далее →. Каждый «номер» — отдельный блок с рамкой.

.pagination .page.current — текущая страница. Она выделяется тёмно-синим фоном и белым текстом. Сразу видно: «вы здесь».

.pagination .page.next — кнопка «Далее». Отличается только цветом рамки (синяя), фон остаётся белым. Такой приём — «намёк» на действие, но не такое активное, как текущая страница.

Секция 8: полная статья

Это стили для страницы отдельной статьи. Когда блог появится, эти правила сделают её удобной для чтения.

8.1. Контейнер статьи — `.article-full`

style.css — .article-full

.article-full {
  background: #ffffff;
  border-radius: 12px;
  padding: 40px 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  position: relative;
}

Внешне похоже на section: белый фон, скруглённые углы, тень. Но есть нюанс — position: relative.

Это свойство нужно, чтобы внутри этой статьи можно было что-то позиционировать абсолютно. В блоге это пригодится для кнопок «Скачать PDF» и «Распечатать», которые висят в правом верхнем углу.

8.2. Кнопки-инструменты — `.article-tools`

style.css — .article-tools

.article-tools {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.article-tools .tool-btn {
  background: #f5f9fe;
  border: 1px solid #dce5ef;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.article-tools .tool-btn:hover {
  background: #e7eff7;
  border-color: #2b6f9c;
}

justify-content: flex-end — выравнивание по правому краю. Кнопки скачать / распечатать уходят вправо, не занимая центр.

Кнопки используют те же принципы, что и .btn: свой фон, рамка, скругление. Но не такие крупные — это «служебные» кнопки в статье, они не должны отвлекать от текста.

8.3. Заголовок статьи и мета

style.css — .article-header

.article-header h1 {
  font-weight: 700;
  font-size: 2.2rem;
  color: #0b1a2b;
  letter-spacing: -0.5px;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.95rem;
  color: #4d6885;
  border-bottom: 1px solid #dce5ef;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.article-header h1 — единственный h1 на странице (кроме главной). Жирный, крупный — это название статьи, оно «правит» страницей.

.article-meta — строка с датой, категорией и автором. Снизу — тонкая линия-разделитель. После неё начинается тело статьи.

8.4. Тело статьи — `.article-body`

style.css — .article-body

.article-body h2 {
  font-weight: 500;
  font-size: 1.6rem;
  color: #1a3a5c;
  border-left: 6px solid #2b6f9c;
  padding-left: 18px;
  margin: 35px 0 15px 0;
}
.article-body p {
  font-weight: 300;
  font-size: 1.05rem;
  color: #2d3f54;
  margin-bottom: 15px;
  text-align: justify;
  text-indent: 1.5em;
}
.article-body ul, .article-body ol {
  padding-left: 25px;
  margin-bottom: 18px;
}

Похоже на общие стили текста, но с увеличенными отступами. Статья — это длинное чтение, поэтому margin: 35px 0 15px 0 у h2 больше, чем в обычных секциях (25/15). Так статья дышит воздухом.

text-indent: 1.5em — красная строка. Тот же приём, что в .text-block. Статья читается как книга — с красными строками.

8.5. Теги и похожие статьи

style.css — .article-tags

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dce5ef;
}
.article-tags .tag {
  background: #e7eff7;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #1a3a5c;
  font-weight: 400;
}

Теги — «пилюли» под статьёй. Тот же приём, что у .badge и .post-category. Единый язык бренда.

.related-posts — блок «Читайте также» с списком ссылок. Стилизуется через list-style: none — стандартные маркеры списка убираются, ссылки становятся кликабельными строками.

Секция 9: адаптив

Самая объёмная часть файла. Здесь сайт превращается из «широкой версии» в «мобильную». Разбираем по шагам.

Секция 9 — не последняя

Может показаться странным, что адаптив стоит до Секции 10. Но логика такая: медиа-запрос переопределяет правила для всех универсальных секций — и только после этого идёт специфика конкретной страницы (КП). Если бы Секция 10 шла до медиа-запроса, некоторые её правила могли бы «перебить» адаптив.

9.1. Что такое медиа-запрос

style.css — @media

@media (max-width: 768px) {
  /* правила, которые применятся только на экранах ≤ 768px */
}

@media — «медиа-запрос». Это конструкция, которая говорит браузеру: «применить эти правила только если условие выполнено».

Условие (max-width: 768px) — «если ширина окна не больше 768 пикселей». То есть на всех экранах от 0 до 768. Всё, что выше — десктопная версия, стили из медиа-запроса не применятся.

>= 769px <= 768px -------- ------- десктоп мобильный широкая версия сжатая версия горизонтальное вертикальное меню меню (бургер)

Почему именно 768? Это стандартная граница для планшетов. Примерно соответствует ширине iPad в вертикальной ориентации. Меньше 768 — уже «мобильный» опыт.

9.2. Что меняется на мобильных

Внутри медиа-запроса у нас пять групп правил. Разберём.

Контейнер и секции

CSS

.container { padding: 20px 15px; }
section { padding: 25px 20px; }

Отступы уменьшены. На мобильном каждый пиксель на счету — 40 пикселей сверху секции сжимаются до 25, 50 по бокам — до 20. Содержимое остаётся читаемым, но помещается в узкий экран.

Шапка

CSS

.header { flex-direction: column; align-items: stretch; gap: 12px; }
.header-left { flex: 1; order: 1; }

Шапка перестраивается в вертикальный стек: логотип сверху, бургер снизу. flex-direction: column меняет направление. order задаёт порядок: сначала header-left, потом бургер, потом меню.

Бургер и меню

CSS

.burger { display: flex; order: 2; }

.nav {
  display: none;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
  background: #ffffff;
  padding: 15px 20px;
  border-top: 1px solid #dce5ef;
  order: 3;
}
.nav.open { display: flex; }
.nav a {
  font-size: 1rem;
  padding: 8px 0 8px 15px;
  border-bottom: none;
  border-left: 3px solid transparent;
}
.nav a.active {
  border-left-color: #33ff33;
  border-bottom: none;
}

Самое интересное. На десктопе .burger { display: none } (не показывается), а .nav { display: flex } (меню в строку).

На мобильном меняются местами:

.burger { display: flex } — бургер появляется.
.nav { display: none } — меню скрыто.
.nav.open { display: flex } — но если у .nav есть класс .open (его добавляет JavaScript при клике по бургеру) — меню раскрывается.

Меню теперь вертикальное: flex-direction: column. Каждая ссылка на своей строке. Шрифт крупнее (1rem вместо 0.95rem) — для удобства нажатия пальцем.

border-left: 3px solid transparent — левая граница вместо нижней. Тот же приём, что и на десктопе, но по другой оси. У активной ссылки она становится зелёной #33ff33.

Сетки

CSS

.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

Одно правило переопределяет все три сетки. grid-template-columns: 1fr — одна колонка. Все карточки встают друг под друга, во всю ширину.

ДЕСКТОП МОБИЛЬНЫЙ .grid-3 +---+---+---+ +---------+ | 1 | 2 | 3 | -> | 1 | +---+---+---+ +---------+ | 2 | +---------+ | 3 | +---------+

Футер

CSS

.footer { flex-direction: column; text-align: center; }
.footer .right { text-align: center; margin-top: 10px; }

Футер из двух колонок становится вертикальным. Текст центрируется — читается лучше на узком экране.

Заголовки и статьи

CSS

h2 { font-size: 1.5rem; }
.hero-title { font-size: 1.7rem; }
.hero-lead { font-size: 1.05rem; }

.article-full { padding: 25px 20px; }
.article-header h1 { font-size: 1.6rem; }
.article-body h2 { font-size: 1.3rem; }
.article-tools { justify-content: flex-start; }

Все крупные заголовки уменьшаются на мобильном. 2.4rem главного героя становится 1.7rem — иначе на узком экране заголовок занял бы пол-экрана.

.article-tools { justify-content: flex-start } — кнопки в статье смещаются влево. На мобильном они не должны «висеть» справа — там место для большого пальца левой руки.

Итог по этим трём секциям

Секции 7–8 — блог и статья. Сейчас не используются, но лежат «наготове».
Секция 9 — медиа-запрос на max-width: 768px. Это вся мобильная версия сайта.
Ключевой приём адаптива: перестроение flex-направления и grid-template-columns: 1fr.
Бургер и меню работают в паре с классом .open, который ставит JavaScript.

Итого style.css состоит из десяти секций, каждая с паспортом. Здесь разобраны секции 7, 8 и 9. Секция 10 («Коммерческое предложение») — в разделе 16, вместе со страницей offer.html.

07. style.css: блог, статья, адаптив