[Mesa-dev] [PATCH 00/16] Move the Mesa Website to Sphinx

[Ilia Mirkin]

On Tue, Jun 19, 2018 at 11:00 PM, Jordan Justen
<jordan.l.justen at intel.com> wrote:
> On 2018-06-18 17:48:26, Ilia Mirkin wrote:
>> On Mon, Jun 18, 2018 at 7:19 PM, Jason Ekstrand <jason at jlekstrand.net> wrote:
>> > On Mon, Jun 18, 2018 at 3:57 PM, Ilia Mirkin <imirkin at alum.mit.edu> wrote:
>> >>
>> >> Not sure how much voting power I have, but I really like Erik's version at
>> >>
>> >> https://codepen.io/kusma/pen/vrXppL
>> >>
>> >> It uses CSS3 animation on hover, so it's pretty low impact. Some
>> >> slight cleverness could even include a fallback for a browser that
>> >> doesn't support SVG.
>> >
>> >
>> > Could you be more specific about what exactly it is that you like?  Do you
>> > like the font? colors? style? the fact that it uses css? the fact that it
>> > doesn't use JS?  To me, the later two are immaterial and pretty trivial to
>> > put into any logo design.  Using WebGL is a bit less trivial, obviously.
>>
>> For reference, I'm comparing these two versions:
>>
>> Erik's: https://codepen.io/kusma/pen/vrXppL
>> Jason's: https://codepen.io/anon/pen/gKXobw
>>
>> I like both the aesthetic and the tech in Erik's variant. In general I
>> prefer serif fonts for readability, but I think in this case, a
>> sans-serif font lends itself better to lining up with the holes (I
>> believe others have commented on this). Placing the biggest gear below
>> the M (as in Erik's variant) gives it better weighting than above the
>> M (as in Jason's), since the M is also taller than the other letters,
>> that red gear is further above the "esa" in that version. Also the top
>> right serif from the M covers an awkward portion of the blue gear in
>> Jason's version. I do like the fact that Jason's version has a heavier
>> font, so if it's an option, Erik, I'd suggest trying to increase the
>> font weight on yours to see what happens.
>>
>> Regarding the tech, svg animations appear to be on their way out:
>> https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/
>> (apparently it's not supported in IE or Edge[1]). So CSS3 animations
>> seem like the accepted thing to use all over.
>
> Does Erik or Jason's version use CSS3? Thus they should work 'all
> over' include Edge/IE11?

Erik's version is the CSS3 one. His earlier version used the <animate>
element, but I suggested he implement with CSS3 which he adopted.
Jason's uses the <animate> still, but would easily be convertable to
the CSS3 way.

>
> I tried them on Edge/IE11:
>
>> Erik's: https://codepen.io/kusma/pen/vrXppL
>
> The 'Mesa' text overflowed the box. (Should be easy to fix.)
>
> The gears did not turn.

Wow, massive fail (I should have seen this coming... it's IE after all):

https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

Looks like you can do it if you split it up into a bunch of separate SVG's.

>
>> Jason's: https://codepen.io/anon/pen/gKXobw
>
> It appeared to render correctly on Windows and Linux.
>
> The gears did not turn.

I think that's the lack of SMIL issue.

> I also fixed the Edge/IE11 issue with:
>
> https://people.freedesktop.org/~jljusten/webgl-logo/gears.html
>
> Now the webgl works and looks the same on Linux (Firefox, Chrome,
> WebKit), and Windows (Chrome, Edge, IE11).

Double-checked on IE11 on Win7, can confirm it renders OK.

  -ilia