Article Preview Component (Vanilla CSS, no JS, Custom Hover States)

Salve lucas! tudo bem? Muito top este desafio man, quero fazer ele em breve!

Vou te falar como podemos fazer este popup com js, mas primeiro vou te dar uma dica sobre o layout.

Observei que em resoluções maiores, as duas divs author--mobile e modal--mobile estão aparecendo, podemos corrigir isso com o nosso amigo media-query acompanhado pelo display: none;

@media (max-width: 4000px) {
  .share__icon__popup,
  .modal--mobile,
  .author--mobile {
    display: none;
  }
}

Podemos usar um addEventListener no icon que quando receber o click chamará a lista que conter ativo no nosso css, e com essa lista teremos os posicionamento necessário para o conteudo aparecer, e quando essa lista estiver desativada o conteúdo tera o posicionamento da lista que não tem ativo no css.

Por exemplo:

.social-links { display: none; posicionamentos...... }

.social-links.ativo { display: flex; }

let botaoIcon = document.getElementById('share__icon')
let showLinks = document.querySelector('.social-links');

botaoIcon.addEventListener('click', function () {
    showLinks.parentElement.classList.toggle('ativo');
})

Ainda ta difícil explicar js, mas espero que tenha pegado a ideia, que é bem semelhante ao modo que você fez o qr-code-dark, mas o que ira mudar não será cores, e sim posicionamento e display.

Espero que ajude! 👍

Hello, Lucas. congrats on finishing the challenge. I have some tips for the mobile version:

• I see that you made another div for the author for mobile, however you do not need that, you can show the popup on the author div with position absolute and z-index. And don't forget to give the parent element position relative.
• Also give the button position relative and z-index:2; to make it appear on the popup