Twenty Eleven: Dark Mode Featured Post gradient overlay is overlapping

[ianbelanger]

While reviewing #46770 @desrosj noticed that the gradient overlay on .featured-post .feature-image.small:after is 10px lower than it should be while in the Dark Color Scheme. It becomes very noticeable due to the fact that the background it overlaps is a dark grey, while the gradient overlay is black. See screenshot

[ianbelanger]

Before applying patch

[ianbelanger]

Adjusts alignment of feature text gradient overlay

[ianbelanger]

After applying patch

[ianbelanger]

After some more testing, mainly in responsive views, it appears that my first patch does not completely fix the issue. I am going to do some further testing.

I think that the main issue is that section.featured-post has an explict height set at 288px so when a long excerpt is used, the Continue Reading Button gets pushed behind the content area below.

[desrosj]

The issue does also occur in light color scheme. It is just not noticable because the background is one shade of white. In dark mode, there are several shades of black/grey used, so you notice the difference.