article-preview-component

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

It took me a while to re-design the HTML and CSS when starting mobile design after finishing desktop design (basically where the wrapper/container divs should be). I should inspect the design images more carefully and think more thoroughly before I start writing codes.

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

What I learned:

1. how to make triangle shape by setting border properties on a div.
2. more familiar with "position: absolute", "transform: ...", "object-position" CSS properties.
3. the use of <svg>. I should use <svg> tag instead of import the svg by <img> or <object>, so that I can change the "fill" property (the color of curved arrow on share-button) by CSS.
4. Any click event on <object> element would be captured by whatever is inside the <object> element, and doesn't bubble it back out. So in order to make icon-facebook (which is imported by <object> element) part of <a> element and clickable, I just have to add "pointer-events: none" to the <object> element.
5. I should use "visibility: hidden" instead of "display: none" on div.share-links-wrapper when share-button not active. If I pop up the div.share-links-wrapper by changing "display: none" to "display: flex", the layout was re-calculated and cause a transient whole layout shift during transition.
6. to make an element visible when overlapped with "position: absolute" element, I just need to set "position: relative" and increase the Z-index on the element.

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

What's the exact layout method that align the drawers image and the article content? I use grid with "grid-template-columns: auto auto", but the widths of the two components were not the same as example.