fm recipe page
1.0.0
Dies ist eine Lösung für die Rezeptseite Challenge on Frontend Mentor. Frontend -Mentor -Herausforderungen helfen Ihnen, Ihre Codierungsfähigkeiten durch den Aufbau realistischer Projekte zu verbessern.
Der Brief für dieses Projekt bestand darin, die Rezeptseite aufzubauen und sie so nahe wie möglich auszusehen, beginnend mit den folgenden Vermögenswerten:
Diese Lösung umfasst drei Dinge, die für mich neu waren:
Die Rezeptseite enthält zwei ungeordnete Listen mit Vorbereitungszeit bzw. Zutaten sowie eine geordnete Liste mit den Anweisungen.
For the ordered list, I styled the counters using the ::marker pseudo-element:
. instructions li :: marker {
font-weight : 700 ;
color : var ( --brown-800 );
} Das Stylen der Listenmarkierungen für die ungeordneten Listen war etwas schwieriger. In der JPEG -Designdatei für das mobile Layout sitzen die Markierungen nicht neben der ersten Textzeile, sondern sind vertikal zentriert, wenn der Textinhalt des Listenelements über zwei Zeilen umschließt. I used custom markers with the ::before pseudo-element to position the markers with flexbox:
. unordered {
list-style : none;
padding-left : 0 ;
}
. unordered li {
display : flex;
align-items : center;
gap : 1.75 rem ;
padding-left : 0.25 rem ;
}
. unordered li :: before {
content : "•" ;
font-weight : 700 ;
} For better accessibility, I used role="list" on the <ul> elements in the HTML. Without it, list-style: none would causes the Safari browser to no longer recognize the lists in the accessibility tree, and screen reader would no longer announce information such as the number of items.
Ich muss Bildoptimierung lernen! Derzeit ist die größte Datei in diesem Projekt der Screenshot, den ich für diese Readme aufgenommen habe. Ich habe gelernt, wie man Schriftdateien optimiert. Jetzt ist die Dateigröße des Screenshot größer als die Größe aller Schriftdateien kombiniert.
Dieses Projekt verwendet den CSS -Reset von Josh Comeaus.
Die in diesem Projekt verwendeten Schriftfamilien sind junge Serif und Outfit. Die Schriftarten sind unter der offenen Schriftlizenz lizenziert.
