[css] Improve quotes.

This commit is contained in:
Fabien Basmaison 2021-04-07 18:07:32 +02:00
parent 2a0924027b
commit be0cabc415
2 changed files with 23 additions and 7 deletions

View file

@ -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 <aclass="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;
}

View file

@ -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>