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

[Jordan Justen]

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?

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.

> Jason's: https://codepen.io/anon/pen/gKXobw

It appeared to render correctly on Windows and Linux.

The gears did not turn.

--

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).

-Jordan

> 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.
> _______________________________________________
> mesa-dev mailing list
> mesa-dev at lists.freedesktop.org
> https://lists.freedesktop.org/mailman/listinfo/mesa-dev