NFT Preview Card with Astro, Sass and CUBE CSS

Community feedback

• 

  P

  Eli Silk•750

  @elisilkPosted about 2 months ago

  Hi 👋 @kaamiik,

  Congrats on a very nice solution. 👏

  I really like how you tried to use the CUBE CSS methodology, as I also just completed this same challenge with the same goal. It was a little counterintuitive to me, but it looks like you were able to implement it well.

  If you are up for diving in 🤿 a little further, here are a couple things I noticed:

  • I think you can try combining the pseudo-elements for the hover overlay effect on the image into one ::before pseudo-element. That way you don't need to worry about z-index at all. You can also put the opacity directly onto the color using the relative value syntax of hsl(), which is one of my favorite features. This way the opacity applies only to the color, and is not also on the SVG image. In the end, the CSS would be something like this:

  .card__imgButton::before {
    border-radius: 8px;
    background-color: hsl(from var(--primary-400) h s l / 50.3%);
    background-image: url(/assets/images/icon-view.svg);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
  }
  
  .card__imgButton:is(:hover,:focus)::before {
    opacity: 1;
  }
  

  • I'd also suggest taking off the width and height from the .card__img class. The image will resize to fill it's container, so those aren't really needed. And when you keep them in there, the image can get distorted or not fill up the full width of the card as the browser window is resized.

  • Finally, I think the font sizes in your final .card__profile section could be cleaned up a bit. It looks like the link to the name is a font size that is too large, while the font size for the text "Creation of" is too small. In the design, all of the text in that section is one, consistent font size, and it actually goes from 15px in the mobile version to 16px in the desktop version. For simplicity, I'd suggest making them all one font size, and so using your .fs-400 class would work.

  Anyway, just some ideas to consider if you are thinking about improving on your solution. 🤔

  Great job overall! Happy coding. 💻

  Eli

  0