Article preview (Sass, BEM)

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

I am glad that I was able to making the interaction more enjoyable with CSS transitions, and also that I am beginning to understand accessibility better and how to make solutions more accessible. Next time I need to make sure that I consider the build out for both size designs before structuring the HTML, I had to make some large changes part way through to make the layout change correctly.

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

I had some challenges with the layout of the footer between the open and closed sharebar, wanting to make sure the share bar position did not move to make it appear cleaner. I had to play around with the HTML structure and padding on different elements until the content was aligned on the card footer and the share bar.

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

I would greatly appreciate some help with two things:

1. The CSS transition is not working correctly on the live site, but it works fine in the dev environment with parcel and I don't know why. On the live site, the position of the share bar before being opened is defaulting to the wrong location, so the transition is starting from the wrong place. In the large layout, it should start just below where it appears, but instead is starting from the middle of the card. In the small layout, it should scale up from the share button location. I don't know why it only works in local, I have tried using both the scss and css file for the parcel dev environment and both work fine, until it is deployed.

2. When I use a screen reader it won't read out anything more than the level on heading of 'article preview component', and I'm not sure why as I think I have my HTML structured correctly. Any suggestions to improve accessibility would be great too.

Any help would be greatly appreciated thank you for looking at my solution!