Recipe page with custom list markers

What are you most proud of, and what would you do differently next time?

I was able to style the custom markers for the two unordered lists for and the counters for the ordered list.

What challenges did you encounter, and how did you overcome them?

For the ordered list, I styled the counters using the ::marker pseudo-element.

Styling the list markers for the unordered lists was a bit more challenging. In the JPEG design file for the mobile layout, the markers do not sit next to the first line of text but are centered vertically if the text content of the list item wraps over two lines. I used custom markers with the ::before pseudo-element to position the markers with flexbox.

What specific areas of your project would you like help with?

I'm looking simpler CSS selectors to add the horizontal lines to the nutrition table. This is what I have now:

tr:not(:first-child) td,
tr:not(:first-child) th {
  border-top: 1px solid var(--stone-100);
}