Tailwind для кинотеатра

Добро пожаловать в третий проект пути! Сайт кинотеатра «Звёздный свет» загружает расписание, позволяет выбирать места и помнит билеты посетителей. Теперь у него появится новый вид на Tailwind, а вместе с ним то, чего не мог дать курс CSS: сайт будет работать на телефонах. В окне такой же ширины, как экран телефона, старый сайт сжимает три карточки фильмов в ряд, по несколько слов в строке, а настоящий телефон уменьшает всю страницу так, что текст становится крошечным. В курсе CSS мы не дошли до того, как менять раскладку в зависимости от ширины экрана. С контрольными точками Tailwind это просто: каждую часть сайта вы сначала оформите для телефона, а потом для более широких экранов.

Файлы. В редакторе лежит ваш сайт в том виде, в каком вы закончили его в проекте с расписанием. В окне просмотра показан showtimes.html, первая страница. Чтобы увидеть главную, нажмите в окне просмотра «Главная», а чтобы вернуться, — «Расписание». (После каждого запуска окно снова открывается на странице с расписанием.) На какую бы страницу вы ни смотрели, проверки смотрят на обе.

Включаем Tailwind. style.css становится таблицей стилей Tailwind, как в курсе Tailwind. Все старые правила уходят: CSS вне слоёв Tailwind перебил бы его классы. Вместо них появляется собственная тема кинотеатра, как в уроке «Настройка Tailwind»:

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");
@import "tailwindcss";

@theme {
    --color-night: #1e1b4b;
    --color-gold: #f59e0b;
    --font-display: "Playfair Display", serif;
}

Это два цвета старой таблицы стилей: глубокий индиго ночного неба в шапке и янтарный цвет кнопки, золотой, как звезда. Они почти совпадают с indigo-950 и amber-500 из Tailwind, и можно было бы взять их. Но собственные названия говорят, для чего нужен каждый цвет (bg-night, text-gold), а если кинотеатр когда-нибудь сменит цвета, вы поменяете одну строку. Playfair Display — шрифт для логотипа и заголовков, с изяществом старого кинотеатра. Помните, что @import шрифта должен стоять первым.

После нажатия «Запустить» страница теряет оформление: Preflight убирает стили браузера, а классов пока нет. Так и должно быть. В следующих упражнениях вы оформите сайт по частям. Пока вы не оформите страницу с расписанием, вы также не увидите, какой день выбран и какие места заняты: скрипт по-прежнему помечает их классами, но у этих классов пока нет вида. Как только style.css подключит Tailwind, над окном просмотра появится панель «Ширина просмотра». Она понадобится вам постоянно.

Основа обеих страниц. body получает фон и цвет текста. main получает ширину содержимого, как в упражнении «Ширина содержимого на больших экранах»: mx-auto max-w-5xl, с внутренними отступами по бокам, на телефоне меньшими, чем на компьютере.