From be0cabc41520a6992bd4b425c0ee8a6abb19f828 Mon Sep 17 00:00:00 2001
From: Fabien Basmaison <contact@arkhi.org>
Date: Wed, 7 Apr 2021 18:07:32 +0200
Subject: [PATCH] [css] Improve quotes.

---
 bookwyrm/static/css/bookwyrm.css              | 28 +++++++++++++++----
 .../snippets/status/status_content.html       |  2 +-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index ae4d53d6..8c4acc86 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -194,27 +194,43 @@ html {
     min-height: 96px;
 }
 
-/** Quotes
+/** Statuses: Quotes
+ *
+ * \e906: icon-quote-open
+ * \e905: icon-quote-close
+ *
+ * The `content` class on the blockquote allows to apply styles to markdown
+ * generated HTML in the quote: https://bulma.io/documentation/elements/content/
+ *
+ * ```html
+ * <div class="quote block">
+ *     <blockquote dir="auto" class="content mb-2">
+ *         User generated quote in markdown…
+ *     </blockquote>
+ *
+ *     <p> — <a…>Book Title</a> by <a…class="author">Author</a></p>
+ * </div>
+ * ```
  ******************************************************************************/
 
-.quote blockquote {
+.quote > blockquote {
     position: relative;
     padding-left: 2em;
 }
 
-.quote blockquote::before,
-.quote blockquote::after {
+.quote > blockquote::before,
+.quote > blockquote::after {
     font-family: 'icomoon';
     position: absolute;
 }
 
-.quote blockquote::before {
+.quote > blockquote::before {
     content: "\e906";
     top: 0;
     left: 0;
 }
 
-.quote blockquote::after {
+.quote > blockquote::after {
     content: "\e905";
     right: 0;
 }
diff --git a/bookwyrm/templates/snippets/status/status_content.html b/bookwyrm/templates/snippets/status/status_content.html
index df562c48..94c420cb 100644
--- a/bookwyrm/templates/snippets/status/status_content.html
+++ b/bookwyrm/templates/snippets/status/status_content.html
@@ -28,7 +28,7 @@
 
         {% if status.quote %}
         <div class="quote block">
-            <blockquote dir="auto" class="mb-2">{{ status.quote | safe }}</blockquote>
+            <blockquote dir="auto" class="content mb-2">{{ status.quote | safe }}</blockquote>
 
             <p> &mdash; {% include 'snippets/book_titleby.html' with book=status.book %}</p>
         </div>