WordPress.org

Making WordPress.org

Opened 3 months ago

Last modified 7 weeks ago

#5341 reopened defect

p2-breathe: remove forced 11px font-size from <code> tags

Reported by: audrasjb Owned by: dd32
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: needs-patch
Cc:

Description

In p2-breathe theme, there is a very annoying font-size: 11px CSS style applied on each <code> HTML tag.

When applied to headings, it results in quite ugly rendering.
For reference, see this Post on Make/Core: https://make.wordpress.org/core/2020/07/29/miscellaneous-developer-focused-changes-in-wordpress-5-5/
(heading: "Comments: default comment_type value now enforced")

I guess it should be fixed upstream, but I didn't find the p2-breathe GitHub repository.
I found a SVN repository here: https://wpcom-themes.svn.automattic.com/p2-breathe/style.css

The following lines will need to be updated:

/* line 111, css/src/global/_text.scss */
pre {
  background: #f1f1f1;
  color: #222222;
  font-size: 11px; /* Need to be removed */
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 1.2em;
  padding: 1.2em;
  overflow: auto;
  max-width: 100%;
}

…

pre,
code,
kbd,
tt,
var {
  font: 11px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", "Courier New", monospace; /* Remove "11px" and replace "font" with "font-family" */
}

Attachments (3)

d291a99909d3fbdc9deccbb0db1f8965.gif (1.5 MB) - added by audrasjb 3 months ago.
5341.before.png (167.3 KB) - added by ocean90 3 months ago.
5341.after.png (166.1 KB) - added by ocean90 3 months ago.

Download all attachments as: .zip

Change History (8)

#1 @dd32
3 months ago

  • Owner set to dd32
  • Resolution set to fixed
  • Status changed from new to closed

In 10103:

Breathe: Use a more reasonable font-size for <code> tags.

The previous font-size was 11px, which was 2px smaller than the default paragraph font, seemingly to allow for the extra padding around the text.

Fixes #5341.

@ocean90
3 months ago

@ocean90
3 months ago

#2 @ocean90
3 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

[10103] doesn't look good to me, see attached screenshots. Let's use a value that matches the font size of the parent element. .9em seems to be good alternative?

#3 @audrasjb
3 months ago

I agree with you @ocean90, .9em looks better and would fit most of the use cases. It looks better for both headings and paragraphs, but also in other edge cases I noticed like for example when the font size is increased or decreased using <small> or Guttenberg font-size selector.

#4 @dd32
3 months ago

In 10107:

Breathe: Try setting <code> font-size to 0.9em.

Props ocean90, audrasjb.
See #5341.

#5 @dufresnesteven
7 weeks ago

Anything left here or can we close this out?

Note: See TracTickets for help on using tickets.