Der Hero und der Button

Jetzt die Startseite: Klicke in der Vorschau auf Startseite. Ganz oben steht der Hero, der Abschnitt mit der Überschrift und dem Button „Das läuft gerade“. In der Übung Zuerst das Smartphone hast du gesehen, dass eine Überschrift mit 60 Pixeln für ein Smartphone zu groß ist. Deshalb ist die Überschrift auf einem Smartphone text-4xl und ab 768 px md:text-6xl, und auch das Padding des Heros ändert sich: py-12 md:py-20.

Der Link „Das läuft gerade“ soll wieder wie ein Button aussehen. Ein Link ist ein Inline-Element, er braucht also inline-block, sonst würde sein Padding den Text darüber nicht wegschieben. Und ein Button braucht seine Zustände, aus der Lektion Hover, Fokus und andere Zustände:

• hover:bg-gold/80: unter dem Mauszeiger das Gold mit 80 % Deckkraft, sodass ein wenig vom Creme durchscheint und der Button heller wird. Die Farben deines Themes funktionieren mit dem Deckkraft-Modifikator genau wie die von Tailwind.
• transition-colors macht den Wechsel weich.
• focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nacht: ein dunkler Rahmen mit kleinem Abstand für Leute, die sich mit der Taste Tab durch die Seite bewegen.