Implemented pullquotes.

Author: amitmerchant1990

Gemfile

@@ -29,6 +29,7 @@ This is a plug-and-play Jekyll theme best suited to use on [GitHub Pages](https:
 - Free hosting on your GitHub Pages user site
 - All the SEO goodies comes in-built
 - Markdown blogging
+- Supports [Pullquotes](https://en.wikipedia.org/wiki/Pull_quote)
 - Syntax highlighting using Pygments
     - [Dracula syntax theme](https://draculatheme.com/) included
 - Disqus commenting

README.md

@@ -0,0 +1 @@
+{{ include.quote }}<span data-pullquote="{{ include.quote }}"></span>

_includes/pullquote.html

@@ -0,0 +1,14 @@
+---
+layout: post
+title:  Pullquotes
+categories: [HTML,Code]
+excerpt: In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic.
+---
+
+In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic. {% include pullquote.html quote="It is typically placed in a larger or distinctive typeface and on the same page." %} Pull quotes are often used in magazine and newspaper articles, annual reports, and brochures, as well as on the web. They can add visual interest to text-heavy pages with few images or illustrations.
+
+Placement of a pull quote on a page may be defined in a publication's or website's style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown. Because the pull quote invites the reader to read about the highlighted material, the pull quote should appear before the text it cites and, generally, fairly close to it.
+
+Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication's house style, pull quotes may be abbreviated for space or paraphrased for clarity, with or without indication.
+
+A disadvantage of pull quotes as a design element is that they can disrupt the reading process of readers invested in reading the text sequentially by drawing attention to ghost fragments out of context. At the other extreme, when pull quotes are used to break up what would otherwise be a formless wall of text, pull quote can serve as visual landmarks to help the reader maintain a sense of sequence and place.

_posts/2019-12-11-pullquotes.md

@@ -156,6 +156,26 @@ table tr td :last-child {
   color: #222;
 }
 
+span[data-pullquote] {
+  display: block;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+span[data-pullquote]:before {
+  content: attr(data-pullquote);
+  float: right;
+  width: 200px;
+  margin: 0 0 0.5em 30px;
+  padding: 0 -5% 0 0;
+  font-size: 1.3em;
+  font-style: italic;
+  color: green;
+  text-align: center;
+}
+
 a {
   color: $blue;
   text-decoration: none;