Tailwind pro kino

Vítejte u třetího projektu cesty! Web Kina Hvězda načítá program, nechá návštěvníky vybrat místa a pamatuje si jejich vstupenky. Teď dostane nový vzhled v Tailwindu a s ním i to, co mu kurz CSS dát nemohl: bude fungovat na mobilu. Na úzké obrazovce mobilu starý web mačká tři karty filmů vedle sebe, pár slov na řádek, protože kurz CSS se ke změnám rozvržení podle šířky obrazovky nedostal. S breakpointy Tailwindu je to snadné: každou část webu rozvrhnete nejdřív pro mobil a pak pro širší obrazovky.

Soubory. V editoru je váš web tak, jak jste ho dokončili v projektu s programem. Náhled ukazuje program.html, první stránku. Úvodní stránku uvidíte, když v náhledu kliknete na Úvod, a zpátky se dostanete přes Program. (Po každém spuštění začne náhled zase na stránce s programem.) Ať se díváte na kteroukoli stránku, kontroly se dívají na obě.

Zapnutí Tailwindu. Ze style.css se stanou styly pro Tailwind, jako v kurzu Tailwindu. Stará pravidla zmizí, všechna: CSS mimo vrstvy Tailwindu by nad jeho třídami vyhrávalo. Místo nich dostane web vlastní motiv kina, jako v lekci Přizpůsobení Tailwindu:

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

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

To jsou dvě barvy ze starých stylů: tmavá modř noční oblohy v záhlaví a zlatá barva hvězdy na tlačítku. Jsou skoro stejné jako indigo-950 a amber-500 z palety Tailwindu a mohli byste použít ty. Vlastní jména ale říkají, k čemu barva v kině slouží (bg-noc, text-zlata), a když kino jednou barvy změní, změníte jeden řádek. Playfair Display je písmo pro logo a nadpisy, s elegancí starého kina. Pamatujte, že @import písma musí být první.

Po spuštění stránka přijde o svůj vzhled: Preflight odstraní styly prohlížeče a žádné třídy tu zatím nejsou. To je v pořádku, v dalších cvičeních web nastylujete část po části. Dokud nenastylujete stránku s programem, neuvidíte ani, který den je zvolený a která místa jsou obsazená: skript je pořád označuje třídami, jen ty třídy zatím nemají žádný vzhled. Jakmile style.css importuje Tailwind, objeví se nad náhledem lišta Šířka náhledu. Budete ji potřebovat pořád.

Základ obou stránek. body dostane pozadí a barvu textu. main dostane šířku obsahu, jako ve cvičení Šířka obsahu na velkých obrazovkách: mx-auto max-w-5xl a polstrování po stranách, na mobilu menší než na počítači.