From 8b08a1366ef128736d8a109b3afaa49020e982bd Mon Sep 17 00:00:00 2001 From: amitmerchant1990 Date: Wed, 11 Dec 2019 00:30:24 +0530 Subject: [PATCH] Implemented pullquotes. --- Gemfile | 2 -- README.md | 1 + _includes/pullquote.html | 1 + _posts/2019-12-11-pullquotes.md | 14 ++++++++++++++ assets/style.scss | 20 ++++++++++++++++++++ 5 files changed, 36 insertions(+), 2 deletions(-) delete mode 100644 Gemfile create mode 100644 _includes/pullquote.html create mode 100644 _posts/2019-12-11-pullquotes.md diff --git a/Gemfile b/Gemfile deleted file mode 100644 index bce2436..0000000 --- a/Gemfile +++ /dev/null @@ -1,2 +0,0 @@ -source "https://rubygems.org" -gem 'github-pages' \ No newline at end of file diff --git a/README.md b/README.md index 211dd19..d455bbb 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/_includes/pullquote.html b/_includes/pullquote.html new file mode 100644 index 0000000..d7ca4aa --- /dev/null +++ b/_includes/pullquote.html @@ -0,0 +1 @@ +{{ include.quote }} \ No newline at end of file diff --git a/_posts/2019-12-11-pullquotes.md b/_posts/2019-12-11-pullquotes.md new file mode 100644 index 0000000..647f4ed --- /dev/null +++ b/_posts/2019-12-11-pullquotes.md @@ -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. \ No newline at end of file diff --git a/assets/style.scss b/assets/style.scss index b6c0ba1..f54b5b4 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -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;