style: Stylize blockqoutes

Update sample doc post
manid2 · Apr 24, 2021 · 9dc56f7 · 9dc56f7
1 parent 85d1215
commit 9dc56f7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/_posts/2019-02-17-welcome-to-jekyll.md b/_posts/2019-02-17-welcome-to-jekyll.md
@@ -32,9 +32,23 @@ print_hi('Tom')
 #=> prints 'Hi, Tom' to STDOUT.
 {% endhighlight %}
 
-#### More Code?
+## Blockquote
 
-I think no.
+### Simple blockquote
+
+>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
+> a ante.
+
+*Someone famous in Source Title*
+
+### Blockquote with citation
+
+NOTE: Markdown has no support for citation, hence use html.
+
+<blockquote class="blockquote">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
 
 ## What else?
 

diff --git a/_sass/lone-wolf-theme/_extend-bs4.scss b/_sass/lone-wolf-theme/_extend-bs4.scss
@@ -16,6 +16,27 @@ a h2, .card h2 {
     @extend .border-0;
 }
 
+// stylize blockquote
+blockquote {
+  @extend .blockquote;
+  @extend .p-2;
+  background-color: $gray-100;
+  border-left: 0.25rem solid $primary;
+
+  p {
+    @extend .mb-0;
+    @extend .font-italic;
+  }
+
+  footer {
+    @extend .blockquote-footer;
+  }
+
+  cite {
+    @extend .font-italic;
+  }
+}
+
 /*
  home page jumbotron background
 =============================*/