Main SITE - Community. Logo

[seregas]

Vivaldi browser (Win 11 + Android 15). Opera One too.

When to turn on the checkmark "on all sites" , this is the view.

EDGE,  FireFox doesn't have this jackdaw.  He shows Logo correctly

Edited April 21 by seregas

[seregas]

I conducted a serious investigation 
I noticed that the DARK READER extension works exactly the same as the browser - - Replaces the variable with its own.

And puts DARK color #3f3500

BUT the designer's original variable is LIGHT --- #fffce1. Her color is correct. 

 

But this variable was also chosen for

body { color: var(-color-surface-white); } 

same 

<span class="header__logo-text-line" style="background: var(-color-surface-white) "></span> 

 

For 

body { background-color: ... ; } 

several variables occur. Even with !important;

 

I put the green color in Logo in a variable from DARK READER - very beautiful

Therefore, I propose, in order to interrupt all browsers and all extensions in the future, to make a secret variable hidden from them in DOM-Shadow with random numbers #123456 => random color

Edited April 20 by seregas

[seregas]

For some reason I'm stuck on this topic.  I accidentally found this color #fffce1 on https://gsap.com/brand    . It  listed last.  

And this page shows everything correctly. In any scheme. 

To prevent designer from searching for for a long time, he may copy variables from  https://gsap.com/brand/     to    https://gsap.com/community/  .

-------------------

 

In general, I want to say thank you. https://gsap.com is one of the few sites so far made according to the principle - "dark only"  

I won't dig your website, I'll just assume:

 

<meta name= "color-scheme" content="dark only">

 

I fully support.  The time for Apple-style ("white only") is gone.

 

 

[seregas]

I still can't calm down. I need this random color on{ height: 6px; width: 30px; }

For FullHD   Area =  (30*6)/(1920*1080)*100=0,0087%  of the page area. 

There are simple ways to create a random color.

https://dev-ed.ru/blog/js-generate-random-colors/

Each user will have his own background-color.

[Cassie]

I'll get that dark bit of the logo fixed. Thanks for the bug report!

[seregas]

so far no changes are visible. 

Here's a picture like this: 

These 2 browsers have their own Dark Mode mechanism. How it works is not known. But this mechanism both inverts light colors into dark colors, and vice versa. Perhaps he sees this variable somewhere else. 

But 'if you made random colors, users would be much more likely to see bright colors that don't require inversion. I'm sure these 2 dangerous browsers won't be able to take aim at color: fuchsia )

[seregas]

document.querySelectorAll('.header__logo-text-line').forEach(el => {
  el.addEventListener('mouseover', () => {
    el.style.transform = 'rotateY(.5turn) scale(2)';
    el.style.transition = '2s ease';
    el.style.background = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  });
  
  el.addEventListener('mouseout', () => {
    el.style.transform = 'rotateY(-.5turn) scale(1)';
    el.style.transition = '2s ease';
  });
});

I tried inserting it somewhere. Your defense is cruel. 
In general, the situation is interesting because this element was clearly not conceived by the designer so that it would merge with the background of the drawing. It can't be the same color as the letter !
Do an author's idea to the finale!

 

width: 32px;

[Cassie]

I really don't understand what you're saying I'm afraid. Maybe you're using a translation service? This is a low priority issue for us. We will get to it soon.

If you need the logo for use somewhere you can grab the non-animated files from https://gsap.com/brand/

[seregas]

according to some surveys, Dark Mode is already used by 85% of Internet users.

This means we multiply the number of site users by 0.85. Then we take Opera and Vivaldi lovers. This sharply reduces the number of users who see an error.  But they all see the site's logo as CSAP

[Cassie]

There are three people on our team and we're working on a release! Patience please 🙏

[seregas]

I can't wait. 

The code has rotation animation, but this is hardly appropriate . 
 

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.header__logo-text-line').forEach(el => {
        el.style.transition = '1s ease';
        el.style.transformOrigin = 'center';
        //  let rota = 0;
        el.addEventListener('mouseover', () => {
        //    rota += 0.5; 
        //    el.style.transform = `rotateY(${rota}turn) skew(-14deg) scaleX(0.4)`;
        // HEX --  el.style.background = `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`;
            const Hue = Math.floor(Math.random() * 360);
            el.style.background = `hsl(${Hue}, 100%, 50%)`;
        });
  
    //    el.addEventListener('mouseout', () => {
    //        el.style.transform = 'rotateY(0) skew(-14deg) scaleX(0.4)';
    //        el.style.transform = '';
    //    });
    });
});

 

[Rodrigo]

Hi,

 

Sorry but why exactly you can't wait? I'm a bit confused by that statement. The issue with the logo, which is a small one and affects only a small set of browsers, is something that only affects a small visual element on our site, nothing more. Is not like we're spreading some faulty code around the web and doing nothing about it. As Cassie already mentioned we have our hands full and cannot tend to this right now, it is 100% in our todo list, but we have higher priorities now and being a small team means we have to be wise about setting our priorities. Also as Cassie mentioned, if you want to implement our logo in a project you can get one without that small part using the URL Cassie shared in her last post.

 

Finally it seems a bit odd to say the least that you're using our logo with CSS transitions, quite ironic IMHO 🙃

 

Please be patient 🙏

[seregas]

Small Black Part in Logo in Edge, Opera, Vivaldi ( + mobile). 

I don't use logos in my projects.

As we with Cassie and I have already found out, this is just a bug report.

[seregas]

at the beginning you can see the action of the DarkMode-mechanism of browser (Opera). It’s unlikely that I got exactly your brand color, but you can clearly see how the inverting occurs there any light color to black. And it will be like that all the time.

 

I'm not an expert, I don't know how to deal with it. But you can reduce the effect DarkMode-mechanism  is just a lot of other colors.

[Cassie]

Thanks for the report. It's noted and on the to-do list.  I have locked the post now as there is no more information necessary for us to resolve this