Задание: добавление стилей в проекте OnlinePizza

В этом задании вы добавите стили к уже созданным компонентам. Используйте знания о scoped-стилях и CSS, полученные в предыдущих уроках. Цель — превратить конструктор пиццы в визуально структурированный и приятный интерфейс.

Шаг 1. Стилизуйте шапку

Откройте src/layouts/AppHeader.vue и добавьте блок <style scoped>.

Реализуйте следующую стилизацию:

Шапка (<header>) — горизонтальная полоса на всю ширину страницы. Используйте display: flex с justify-content: space-between для размещения логотипа слева и навигации справа
Задайте фоновый цвет, внутренние отступы и, при желании, тень (box-shadow) для визуального отделения от контента
Логотип — увеличенный размер шрифта, жирное начертание
Навигация (<nav> и <ul>) — горизонтальный список без маркеров (list-style: none), элементы расположены в ряд с помощью display: flex и отступами между ними (gap)
Кнопка входа — стилизуйте как кнопку с фоном, скруглёнными углами и изменением вида при наведении

Шаг 2. Стилизуйте конструктор на главной странице

Откройте src/views/HomeView.vue и добавьте блок <style scoped>.

Организуйте конструктор в чёткие визуальные секции:

Каждая секция (тесто, размер, соус, ингредиенты) должна иметь заголовок и визуальное отделение — например, отступы или разделительные линии
Элементы выбора теста, размера и соуса расположите в ряд с помощью display: flex и gap
Каждый элемент выбора оформите как карточку или кнопку с рамкой, скруглёнными углами и внутренними отступами
Активный (выбранный) элемент выделите цветом фона или рамки — стилизуйте класс active, который вы добавили в предыдущем задании
Секцию ингредиентов оформите как сетку карточек с помощью CSS Grid (display: grid с grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))) или Flexbox
Каждая карточка ингредиента должна показывать название и цену

Шаг 3. Создайте файл CSS-переменных

Создайте файл src/assets/styles/variables.css.

Определите в нём CSS-переменные (custom properties) для единообразного оформления всего приложения:

Цвета: основной цвет (--color-primary), цвет фона (--color-bg), цвет текста (--color-text), цвет рамок (--color-border), цвет активного элемента (--color-active)
Отступы: базовый отступ (--spacing), малый (--spacing-sm), большой (--spacing-lg)
Скругление углов: --border-radius
Тени: --shadow

Значения подберите на свой вкус. Например, основной цвет может быть оранжевым или красным — в стилистике пиццерии.

Шаг 4. Подключите переменные

Импортируйте файл variables.css в главный файл стилей вашего приложения. Это можно сделать в файле src/assets/main.css (или как он называется в вашем проекте) либо напрямую в src/App.vue.

Шаг 5. Примените переменные в компонентах

Вернитесь к стилям AppHeader.vue и HomeView.vue и замените захардкоженные значения цветов, отступов и скруглений на CSS-переменные. Например, вместо background: #ff6600 используйте background: var(--color-primary).

Это обеспечит единообразие оформления и упростит изменение дизайна в будущем.

Проверка

Запустите проект и убедитесь, что:

Шапка выглядит как горизонтальная панель с логотипом слева и навигацией справа
Конструктор разделён на чёткие визуальные секции: тесто, размер, соус, ингредиенты
Выбранные элементы (тесто, размер, соус) визуально отличаются от остальных
Ингредиенты отображаются в виде аккуратной сетки карточек
Общая цветовая схема единообразна благодаря CSS-переменным