Responsive recipe page; smooth thanks to transitions

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

I managed to incorporate transitions, making each change in the design smooth.

Also managed to stick the image to the top and sides, essentially ignoring padding, without using positioning.

• I would have done this differently if I knew how
• I would have also liked the transition to happen only at one spot because when adjusting mobile screen width (on a desktop) the image lags behind the viewport
  • Probably not that impactful, since mobile width cannot be adjusted in real life, as far as I know

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

The biggest challenge was properly adjusting the position of the image.

• Solved it with transform: translate and width: 100vw
• transform: scale and transform-origin: bottom did not work

The other challenge were the bullet points. I noticed that that each bullet point stays vertically in the middle of the text, which is not the case with vanilla unordered list. I had to make custom bullet points and adjust the position with flexbox.

ul > li {
    list-style-type: none;
    display: flex;
    align-items: center;

    &::before {
        content: "\2022";
        font-size: 1.6rem;

        position: relative;
        left: -1.5rem;

        line-height: 0;
    }

    & span {
        display: contents;
    }
}

I could have used padding or margin instead of position but the solution is complete and it works, so there is no need to change it.

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

If anyone has better ways to solve the problems above, I am happy to listen :)