Create GFO-light logo

[KonradHoeffner]

Associated with task issue #15.

• check in dark mode

[KonradHoeffner]

It looks a bit strange in dark mode, do we need an additional logo for dark backgrounds?
But in my opinion we don't really need a dark mode version because most important scientific products like Posters and Papers have a white background.

[ChristophB]

It would be great to have a version of the logo that works with dark mode, but it's not essential. Simply replacing the blue with a different colour would suffice.

[KonradHoeffner]

I experimented with a dynamic version using media queries like so (dark mode colors are just an example):

  <defs>
    <style>                                 
        @media (prefers-color-scheme: light) {
        .yellow {
            fill: #d4aa00;
            stroke: #d4aa00;
        }
        .blue {
            fill: #163255;
            stroke: #163255;
        }
        }

        @media (prefers-color-scheme: dark) {
        .yellow {
            fill: #d4aaff;
            stroke: #d4aaff;
        }
        .blue {
            fill: #a63255;
            stroke: #a63255;
        }
        }
    </style>
  </defs>

However I ended up deciding against this approach because websites can ignore the preferred user color scheme and still use a white background in which case it looks even worse.

[KonradHoeffner]

Next approach was using SVG parameters so the color scheme can be controlled over the URI as defined in https://www.w3.org/TR/SVGParamPrimer/ and https://tabatkins.github.io/specs/svg-params/.

Unfortunately those parameters never got implemented by browsers and the spec has been abandoned.

[KonradHoeffner]

There are custom CSS properties but they cannot currently be passed into an external SVG.
There are some experimental workarounds like https://kizu.dev/svg-linked-parameters-workaround/.

[KonradHoeffner]

Since those advanced solutions all don't work well I will just create a separate copy for dark mode background.

[KonradHoeffner]

f7951d

ffbd35

d4aa00

[KonradHoeffner]

@AlexU75 @ChristophB: Please write which light color you prefer.

[KonradHoeffner]

Kannst Du bitte probieren, den Lichtstrahl etwas schmaler zu machen und dass nur/alle Knoten im Lichtstrahl beleuchtet werden und die Knoten außerhalb des Lichtstrahls (d.h. oben und unten) nicht. Vielleicht könnte man unten in kleinen Buchstaben "lightweight GFO version" ergänzen.

[KonradHoeffner]

schmalerer Lichtstrahl

[KonradHoeffner]

dark version

Maybe the yellow color could be improved but I didn't find a better one.

[KonradHoeffner]

Here the version with descriptive text underneath but I prefer the version without it.
Firstly it is hard to see when the logo is small and making it larger would not look good.
Secondly it is redundant with the "light" on top of it.

[ChristophB]

Firstly it is hard to see when the logo is small and making it larger would not look good.

I have the same impression. The logo also feels a bit cluttered with everything included.
If the subtitle is really necessary, perhaps it could be increased to around a third of the font size of "GFO light".

Secondly it is redundant with the "light" on top of it.

How about "A minimal GFO version"?

[ChristophB]

Which editor did you use to create the logo?

I prefer Inkscape. However, the colours you defined are not working there.

[KonradHoeffner]

@ChristophB I edit the logo in nvim and test it in Firefox.
Maybe Inkscape does not have complete CSS support?

[ChristophB]

Looks like, Inkscape doesn't like comments in the CSS. :D

I added a new version with another type of focus and rays.

[ChristophB]

For the dark-mode version, I suggest to define the blue CSS class as follows:

.blue {
    fill:#476993ff;
    stroke:#476993ff;
}

[KonradHoeffner]

Christoph's new version:

I think it's amazing! @AlexU75 what do you think?

[AlexU75]

Christoph's new version:

Yes, it's very good! The two nodes closest to the lamp should also be yellow.

[KonradHoeffner]

So we discard the version with the rays and fully move over to Christoph's version?
I will integrate the two, make the leftmost nodes yellow and add a background so we can check it here with dark mode activated.

[KonradHoeffner]

@AlexU75: If the two closest two the lamp are also yellow, then they are not in the inner focus circle. Should that still be done?

[KonradHoeffner]

@ChristophB: Do you have further suggestions or do you approve it with your last changes?

[KonradHoeffner]

Unfortunately I cannot merge this PR as the checks don't seem to progress.