Problem/Motivation

Blockquote's content looks too big when placed into sidebar region.

Steps to reproduce

1. Create a custom block into sidebar region.
2. Add content.
3. Create Blockquote by clicking on Quotation Mark symbol.

Proposed resolution

We have to decreased font-size of p tag under blockquote element so that blockquote look's good into sidebar region.

Please refer to the screenshot attached.

CommentFileSizeAuthor
#12 After Patch 3212120.png618.59 KBchetanbharambe
#12 Before Patch 3212120.png560.56 KBchetanbharambe
#11 interdiff_8-11.txt775 byteskiran.kadam911
#11 3212120-11.patch1.06 KBkiran.kadam911
#10 blockquote.gif212.58 KBmherchel
#9 after--patch.jpg365.09 KBranjith_kumar_k_u
#9 before--patch.jpg385.09 KBranjith_kumar_k_u
#8 3212120-8.patch1.07 KBkostyashupenko
#5 Screenshot 2021-05-06 at 10.20.18 AM.png201.2 KBtushar_sachdeva
#3 Screenshot 2021-05-05 at 5.39.11 PM.png209.45 KBtushar_sachdeva
Screenshot 2021-05-04 at 6.41.26 PM.png145.22 KBtushar_sachdeva

Comments

tushar_sachdeva created an issue. See original summary.

aaron.ferris’s picture

aaron.ferris commented

The question would be, what font size would we want to use for sidebar block quotes? Is there a design for this scenario?

I can see that block quotes have various font sizes per screen size, so we'd need a font per breakpoint.

tushar_sachdeva’s picture

tushar_sachdeva commented
StatusFileSize
new Screenshot 2021-05-05 at 5.39.11 PM.png209.45 KB

@aaron.ferris we can have a font-size: 1.5rem; as it looks good with media query @custom-media --lg (min-width: 1000px);.There's a .sidebar-grid CSS class that gets added.We can use this class to create a selector to reset font size for blockquote's content when it is placed into the sidebar in the Olivero theme. I think we need to confirm this change with the maintainer if there any scenario for this or not.
Please refer to the screenshot attached for the font-size: 1.5rem;.

aaron.ferris’s picture

aaron.ferris commented

Line height looks off to my eyes in that screenshot, we may want to tweak that alongside any font size change.

tushar_sachdeva’s picture

tushar_sachdeva commented
StatusFileSize
new Screenshot 2021-05-06 at 10.20.18 AM.png201.2 KB

line-height: 2.5rem; looks good, attaching screenshot for reference, and below 1000px we can have same font-size and line height defined which we are already using for p tag under blockquote element globally.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Issue tags: +Needs design review, +Needs subsystem maintainer review, +Needs design
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Priority: Normal » Minor
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new 3212120-8.patch1.07 KB
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new before--patch.jpg385.09 KB
new after--patch.jpg365.09 KB

The patch looks good
Before patch
before patch
After patch
after patch

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work
StatusFileSize
new blockquote.gif212.58 KB 
+++ b/core/themes/olivero/css/components/text-content.css
@@ -248,3 +248,15 @@
+    line-height: 2.3625rem

This looks so much better. My thought is that we should stick to the 18px vertical rhythm units that our designers defined.

If we're doing weird things like multiplying it by 2.1, it doesn't make sense to use spacing units.

I tested out the regular 36px (2 spacing units) line height, and IMO it looks great. Animated gif below.

My thought is lets switch to var(--sp2).

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Status: Needs work » Needs review
StatusFileSize
new 3212120-11.patch1.06 KB
new interdiff_8-11.txt775 bytes

Thanks @kostyashupenko for the patch. Providing updated patch as per @mherchel comment #10

Kindly review the patch.

Thanks!

chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before Patch 3212120.png560.56 KB
new After Patch 3212120.png618.59 KB

Verified and tested patch #11.
Thanks, @kiran for the patch
Patch applied successfully and looks good to me as per Comment #10

Testing Steps:
# Go to Appearance -> Set Olivero theme.
# Create a custom block into the sidebar region.
# Add content.
# Create Blockquote by clicking on the Quotation Mark symbol

Expected Results:
# Blockquote's content font size and line height should be decreased when it is placed into the sidebar.

Actual Results:
# Currently font size and line-height are too big.

Please refer attached screenshots.
Looks good to me.
can be a move to RTBC.

  • lauriii committed 75394d6 on 9.3.x 
    Issue #3212120 by kiran.kadam911, kostyashupenko, tushar_sachdeva,...

  • lauriii committed 227c63a on 9.2.x 
    Issue #3212120 by kiran.kadam911, kostyashupenko, tushar_sachdeva,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 9.3.x-dev » 9.2.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs design review, -Needs subsystem maintainer review, -Needs design

Subsystem maintainer review was provided in #10.

Committed 75394d6 and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.