QR code component

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

I already had some experience in solving similar problems, so I decided to make the layout more adaptive, using Flexbox, and more improveable, using CSS variables.

In order not to worry about resetting built-in browser styles, I used Normalize.css.

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

Unfortunately, I found out that the standard CSS does not have such functions as mixins, although they would be appropriate for adding text styles. See the example below.

@mixin text-preset-1 {
  font: 700 22px/120% "Outfit", sans-serif;
  letter-spacing: 0px;
}

@mixin text-preset-2 {
  font: 400 15px/140% "Outfit", sans-serif;
  letter-spacing: 0.2px;
}

.card__title {
  @include text-preset-1;
  margin: 0;
  text-align: center;
  color: var(--slate-900);
}

.card__subtitle {
  @include text-preset-2;
  margin: 0;
  text-align: center;
  color: var(--slate-500);
}

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

I'd be interested to know what fallback exists to reproduce mixin functionality in vanilla css.