Twenty Eleven: Tweaking the tiny bubbles

[iandstewart]

With the addition of an icon for the "Leave a Comment" link on the index pages it's brother, the comments number link, is looking a little out of place.

The attached patch tweaks the bubble text just a bit so it better matches the weight and style of the icon. There's a little less contrast but I think, as a somewhat decorative element, that's OK.

Nacin brought up an interesting design flaw that free-bubbles.diff (get your bubbles in bubbles.zip) attempts to correct.

"my test blog only has a few comments per post. I imagine that's common. a giant circle with a relatively small 1 in the middle that lights up like crazy on hover just looks… weird. he comment icon looks great, but the moment there's one comment, it makes me … sad."

Props to koopersmith for suggesting a subtle shadow on the icon.

Just noticed that .leave-reply isn't specific enough and is hiding footer reply links

matveb is working on a refreshed patch for this.

Some thoughts on this: one of the points in using a geometrical CSS figure was so that we didn't rely on images for relevant visual elements; thus allowing for easy customizations with background colors, etc. Changing this would be a step backward for extensibility, in a way. See ​http://myphotomaton.wordpress.com/

Having said that, if we're going forward with it, we think something like the following fits the design a bit better (no drop shadow and with transparent border):
​http://cl.ly/1t0M083S3h4306262c2I
​http://cl.ly/2A2i110a0X0u0h0T1V3v

Revised bubbles courtesy of matveb

Refreshed patch courtesy of matveb

In [18255]:

New comment bubble styling! props matveb, iandstewart, fixes #17741.

The text in the "reply" bubbles is not vertically centered in Chrome. This can be fixed by slightly altering the line height. It is currently 36px and should probably be changed to 34px or 35px.

In [18336]:

Twenty Eleven: Tweaking the tiny bubbles, again. fixes #17741