Tailwind für das Kino

Willkommen beim dritten Projekt des Lernpfads! Die Website des Kinos Sternenlicht lädt ihr Programm, lässt Besucher Plätze auswählen und merkt sich ihre Tickets. Jetzt bekommt sie ein neues Aussehen, mit Tailwind gemacht, und damit etwas, das der CSS-Kurs ihr nicht geben konnte: Sie funktioniert auf Smartphones. In einem Fenster, das so schmal ist wie der Bildschirm eines Smartphones, quetscht die alte Seite die drei Filmkarten nebeneinander, mit ein paar Wörtern pro Zeile, und ein echtes Smartphone verkleinert die ganze Seite, bis ihr Text winzig ist. Wie man das Layout mit der Breite des Bildschirms ändert, kam im CSS-Kurs nicht mehr vor. Mit den Breakpoints von Tailwind ist es einfach: Du gestaltest jeden Teil der Website zuerst für ein Smartphone und dann für breitere Bildschirme.

Die Dateien. Im Editor liegt deine Website, so wie du sie im Projekt zum Kinoprogramm fertiggestellt hast. Die Vorschau zeigt programm.html, die erste Seite. Um die Startseite zu sehen, klicke in der Vorschau auf Startseite, und mit Programm kommst du zurück. (Nach jedem Ausführen beginnt die Vorschau wieder auf der Programmseite.) Auf welcher Seite du auch gerade bist, die Prüfungen sehen sich beide an.

Tailwind einschalten. style.css wird zu einem Tailwind-Stylesheet, wie im Tailwind-Kurs. Alle alten Regeln verschwinden: CSS außerhalb der Layer von Tailwind würde sich gegen seine Klassen durchsetzen. An ihre Stelle kommt das eigene Theme des Kinos, wie in der Lektion Tailwind anpassen:

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

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

Das sind die zwei Farben des alten Stylesheets: das tiefe Indigo des Nachthimmels im Header und das Bernsteingelb des Buttons, golden wie ein Stern. Sie sind fast dieselben wie indigo-950 und amber-500 von Tailwind, und du könntest diese nehmen. Aber eigene Namen sagen, wofür jede Farbe da ist (bg-nacht, text-gold), und wenn das Kino einmal seine Farben ändert, änderst du eine Zeile. Playfair Display ist eine Schrift für das Logo und die Überschriften, mit der Eleganz eines alten Kinos. Denk daran, dass das @import einer Schrift ganz am Anfang stehen muss.

Wenn du auf Ausführen klickst, verliert die Seite ihr Aussehen: Preflight entfernt die Stile des Browsers, und es gibt noch keine Klassen. Das ist so gewollt. In den nächsten Übungen gestaltest du die Website Teil für Teil. Solange du die Programmseite nicht gestaltet hast, siehst du auch nicht, welcher Tag gewählt oder welche Plätze belegt sind: Das Skript markiert sie weiterhin mit Klassen, aber diese Klassen haben noch kein Aussehen. Sobald style.css Tailwind importiert, erscheint über der Vorschau die Leiste Vorschaubreite. Du wirst sie ständig brauchen.

Die Basis beider Seiten. Der body bekommt den Hintergrund und die Farbe des Textes. main bekommt die Breite des Inhalts, wie in der Übung Inhaltsbreite auf großen Bildschirmen: mx-auto max-w-5xl, mit Padding an den Seiten, auf einem Smartphone kleiner als auf einem Computer.