WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 6 months ago

#46802 assigned defect (bug)

Twenty Eleven: Dark Mode Featured Post gradient overlay is overlapping

Reported by: ianbelanger Owned by: ianbelanger
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: Cc:
PR Number:

Description

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

Attachments (3)

46802-gradient-overlay-before.PNG (37.7 KB) - added by ianbelanger 6 months ago.
Before applying patch
46802.diff (405 bytes) - added by ianbelanger 6 months ago.
Adjusts alignment of feature text gradient overlay
46802-gradient-overlay-after.PNG (38.2 KB) - added by ianbelanger 6 months ago.
After applying patch

Download all attachments as: .zip

Change History (6)

@ianbelanger
6 months ago

Before applying patch

@ianbelanger
6 months ago

Adjusts alignment of feature text gradient overlay

@ianbelanger
6 months ago

After applying patch

#1 @ianbelanger
6 months ago

  • Keywords has-patch has-screenshots added
  • Milestone changed from Awaiting Review to Future Release

#2 @ianbelanger
6 months ago

  • Keywords needs-patch added; has-patch removed

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.

#3 @desrosj
6 months ago

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.

Note: See TracTickets for help on using tickets.