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

[Ilia Mirkin]

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. Now triggering with js
vs a hover style -- not hugely important, but IME the
mouseover/mouseout stuff is pretty unreliable. Maybe it actually works
now, who knows, but I've never had issues with :hover. Note that it's
also easy with CSS3 to do something like animate for 5s on load and
then stop (until the mouseover). (Yeah, you can do this with JS as
well...(most) )

Having some easter egg, as Rob Clark suggests, which flips it to a
full webgl thing would be cool, but seems like a separate endeavor.

[1] The annoying thing one has to deal with in web development ...
browser support. Animation is an "extra" feature, but why not just
make it work? IE11 has no trouble with (most?) CSS3 animation
features.