Carousel "X"

[Marcal]

Of course, after following your indications, it works like a charm on mobile. So many things to keep present!

Again, thank you so much, Armin, for your priceless support.

[arminunruh]

aha thanks a lot!! <3 :))

[Marcal]

This post is deleted!

[Marcal]

Hi Armin!

Good news! My site logo now has the same mix-blend-mode: difference effect 🎊
I had to change the black logo SVG to a white one so this would work.

Anyway, I also have this custom CSS that does the job, even without the feature activated:

---

a.sitetitle,
a.sitetitle.is-fixed {
mix-blend-mode: difference;
background: transparent;
isolation: auto;
}

a.sitetitle img {
mix-blend-mode: normal;
}

---

Screenshot attached.

[Marcal]

Last thing: now the carousel "X" icon does not appear when landing on the home screen (good!), but it also does not appear when visiting any of the project links on the home page.

However, the "X" icon is still functional, so clicking on the "X" icon area when visiting a project closes it and returns to the home page.

Is it possible to have the "X" icon feature back, only when visiting any of the homepage project links?

Then I would add the following CSS to apply the mix-blend-mode: difference effect to the "X" icon.

---

div.close-projects-overlay {
mix-blend-mode: difference;
background-color: transparent;
isolation: auto;
}

---

Many thanks!

[arminunruh]

Hey, you need to set up the icon to be white, cuz that's what mix blend mode difference needs to work correctly.

[arminunruh]

div.close-projects-overlay {
color: #fff !important;
mix-blend-mode: difference;
background-color: transparent;
isolation: auto;
}

You can also try this CSS. <3

[Marcal]

Hi Armin!

Thank you so much for this. It works perfectly; now not only does the "X" icon appear when visiting the project, but it also has the mix-blend-mode effect.

Best support ever! 🙌

[Marcal]

This post is deleted!

[Marcal]

This post is deleted!