663446 - Update look of website preview tiles

Status: RESOLVED FIXED

(Pancake Graveyard :: Front-end, defect)

Description

[Ian Barlow (:ibarlow)]

Right now, we divide our thumbnails and titles with a thin black line, which, it turns out, can make it difficult to distinguish the title bar from the website thumbnail. 

I propose this simple fix: http://www.cl.ly/2I3K160q43073w2L433b

1. Remove the black keyline
2. Add a subtle gradient overlay to the thumnail area. 

This way, no matter what the colour / content of the thumbnail, there is always a visual separation between the title bar and the thumbnail.

Comment 1

[Ian Barlow (:ibarlow)]

Note: this fade should only be applied to website thumbnail tiles, and not to icon tiles, headline tiles, etc.

Comment 2

[Ian Barlow (:ibarlow)]

Attachment: Transparent overlay for thumbnails

Comment 3

[[:fabrice] Fabrice Desré]

Ian, which colors should I use as start and end point for the gradient?

Comment 4

[Ian Barlow (:ibarlow)]

I have attached an image for you to use in comment 2. Let me know if that works, or if it needs to be drawn programmatically

Comment 5

[Ian Barlow (:ibarlow)]

Fabrice, the colour should fade from black (000000) with 30% opacity, to clear (or 0% opacity, depending on how you look at it). 

Note that the gradient should only be about 30px tall, rather than spanning the full height of the thumbnail.

Comment 6

[Jason Grlicky [:grlicky]]

Fixed in https://bitbucket.org/st3fan/fxhome/changeset/2f49249e95f2