Merge pull request #2057 from tf/centered-quote

Fix hanging quote position in center-ragged layout
codevise · Jan 17, 2024 · 8c136c4 · 8c136c4
2 parents 15a6750 + ec42752
commit 8c136c4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
@@ -80,6 +80,12 @@
   right: calc(100% + var(--theme-quote-hanging-mark-spacing, 0.05em));
 }
 
+.centerRagged.design-hanging .text p:first-child::before {
+  position: static;
+  padding-right: var(--theme-quote-hanging-mark-spacing, 0.05em);
+  margin-left: calc(-1ch - var(--theme-quote-hanging-mark-spacing, 0.05em));
+}
+
 .design-largeCentered .text p:first-child::before,
 .design-largeHanging .text p:first-child::before {
   font-size: var(--quote-large-mark-font-size);

diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -65,6 +65,23 @@ storiesOfContentElement(module, {
         quoteDesign: 'hanging'
       }
     },
+    {
+      name: 'Hanging Centered Ragged',
+      configuration: {
+        text: [
+          {
+            type: 'paragraph',
+            children: [{text: 'Be the change\n that you wish to see in the world'}]
+          }
+        ]
+      },
+      themeOptions: {
+        quoteDesign: 'hanging'
+      },
+      sectionConfiguration: {
+        layout: 'centerRagged'
+      }
+    },
     {
       name: 'Hanging with custom spacing',
       themeOptions: {