Bookmark landing page (with tailwindcss ver 4/postCSS)

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

It's was nice to work with Tailwind ver 4 with postCSS. Next time, I will improve the structure and investigate about atomic design.

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

I didn't want to copy the logo SVG code into my HTML, so I tried manipulating the color via CSS. I had to ask some partners and surf Google to get the answers. It was very interesting.

in your CSS add

.header .logo {
  --logo-text-color: var(--clr-blue-950);
  --logo-circle-color: var(--clr-blue-600);
  --logo-icon-color: var(--clr-white);
}

and modify the attributes fill inside of your SVG,

ex:

<circle class="logoCicle" fill="var(--logo-circle-color)"

and in your HTML:

        <a href="/" class="header__logo" aria-label="Go to homepage">
          <svg class="logo" width="148" height="25" aria-label="Bookmark logo">
            <use href="./assets/logo-bookmark.svg#icon-logo" />
          </svg>
        </a>

If you don't know about this, I hope this will help you

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

Any suggestions will be welcome, thanks