type-on-strap 2.4.6 → 2.4.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ace9770fb50b11260a1db0d08ebe8ed2c4449d2fcb2d395366182842f84171f
-  data.tar.gz: 108a885ba09192f3fbdb8211ba66430503bd1b552764ee90ab1654381891d002
+  metadata.gz: dba3ab6a8c633aac793ffc8297817c5e43c8d3178d60379b2fd93158a61e063f
+  data.tar.gz: 3a63ffd7c2a16ca9d784b14703c60405f68a4bdf19a2a8589b58a60864015954
 SHA512:
-  metadata.gz: 0c3017dd0c517f2089252307095e838b557be3418941cb92908f439693bd1b7668fa6b8dd9fc3e587d5c63bc63d1ed45a379ad0fdf9c513b194cdbdac187c58c
-  data.tar.gz: 14f34def7f989e3d753ba045e939c9824037d39b8a08e93cb337c3b5318ba6ccb774c4350e5ad1ad7a3e2a64971073c2a98575a9ebb16dd3c24a9a7bfe4346fb
+  metadata.gz: 159db5d9f28dcc7ce897b4a7cf4e36116f7a6d61e772096f7fd86fc5296b25757991c076106c2076cae10bf0684e753ac4508a420d23c0cd5c980f9c6b5c63ad
+  data.tar.gz: 077ebef49c8f68ed554d23075ff34ab66002fe6aa9fc28982805dde020feab142e922b6fbc05018395c4c49418b27099c968f92b85fd8fc44c3113f395b546f7

data/README.md

@@ -6,7 +6,8 @@
 
 [![Default Type on Strap blog](https://github.com/Sylhare/Type-on-Strap/blob/master/assets/img/screenshot.png?raw=true)](https://sylhare.github.io/Type-on-Strap/)
 
-A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) packed with extra features and easily customizable:
+A free and open-source [Jekyll](https://jekyllrb.com) theme. 
+Based on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) packed with extra features and easily customizable:
 
 * Responsive design on all devices (🖥, 💻, 📱, ...)
 * Portfolio 🗂, Gallery 🖼 pages for your projects
@@ -46,7 +47,7 @@ Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 Here are the main files of the template
 
 ```shell
-Type-on-Strap
+./Type-on-Strap
 ├── _includes	               # Theme includes
 ├── _layouts                   # Theme layouts (see below for details)
 ├── _portfolio	               # Collection of articles for the portfolio page
@@ -116,8 +117,8 @@ To configure the blog part and default plugins. Those plugins are validated by G
 
 #### Meta and Branding
 
-Meta variables hold basic information about your Jekyll site which will be used throughout the site 
-and as meta properties that are used for search engines, browsers, and the site's RSS feed.
+_Meta variables_ hold basic information about your Jekyll site, which will be used throughout the site 
+and as _meta properties_ that are used for search engines, browsers, and the site's RSS feed.
 
 Change these variables in `_config.yml`:
 
@@ -135,7 +136,7 @@ Using _auto_ you'll have a tiny icon in the navbar allowing the use to manually
 
 ### Theme customization 🎨
 
-#### Footer and Header's text
+#### Footer and Header text
 
 Customize your site header/footer with these variables in `_config.yml`:
 
@@ -164,7 +165,7 @@ with suffix `-small` (620x320) and `-medium` (1240x640) to display on smaller sc
 Localization string is a way to quickly change the template language for text like *Next Post* or *Follow on*, ...
 You can find all the properties in `_data/language.yml`.
 
-By default, it is in english, but you can easily add your own language.
+By default, it is in English, but you can easily add your own language.
 
 ### Google Analytics
 
@@ -193,10 +194,10 @@ comments:
 
 #### Cusdis
 
-[Cusdis](https://cusdis.com/) is an open source alternative to Disqus.
+[Cusdis](https://cusdis.com/) is an open-source alternative to Disqus.
 You can read more about it in the [documentation](https://cusdis.com/doc#/)
 
-To enable it, set your cusdis name in `_config.yml`:
+To enable it, set your Cusdis name in `_config.yml`:
 
 ```yaml
 comments:
@@ -275,7 +276,7 @@ You can also enable RSS.
 The site icons come from [Font Awesome](https://fontawesome.com/).
 
 In `_data/icons.yml` you can set the footer icon that will appear at the bottom of the page.
-They will redirect the user on your profile on the other platform like Twitter, GitHub and so many more!
+They will redirect the user on your profile on to other platforms like Twitter, GitHub and so many more!
 
 ### Cookie consent
 
@@ -285,8 +286,8 @@ Once the user clicks on "Approve" the cookies will be created for Google Analyti
 
 #### Share in article
 
-The share icons are the one at the bottom of the blog page if enabled, 
-to share the article on those platform.
+The share icons are the one at the bottom of the blog page if enabled.
+They will on click redirect you to the logo's platform to share the article.
 
 #### Footer
 
@@ -306,34 +307,39 @@ Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/po
 
 #### Layout: Post
 
-These are the basic features you can use with the `post` layout.
+These are the basic features you can use with the `post` layout, in the comment the `Opt` means that
+it is optional.
 
 ```yml
 
 ---
 layout: post
 title: Hello World                                # Title of the page
-hide_title: true                                  # Hide the title when displaying the post, but shown in lists of posts
-feature-img: "assets/img/sample.png"              # Add a feature-image to the post
-thumbnail: "assets/img/thumbnails/sample-th.png"  # Add a thumbnail image on blog view
-color: rgb(80,140,22)                             # Add the specified color as feature image, and change link colors in post
-bootstrap: true                                   # Add bootstrap to the page
-tags: [sample, markdown, html]
+hide_title: true                                  # [Opt] Hide the title when displaying the post, but shown in lists of posts
+feature-img: "assets/img/sample.png"              # [Opt] Add a feature-image to the post
+thumbnail: "assets/img/thumbnails/sample-th.png"  # [Opt] Add a thumbnail image on blog view
+color: rgb(80,140,22)                             # [Opt] Add the specified colour as feature image, and change link colors in post
+position: 1                                       # [Opt] Set position on the menu navigation bar
+tags: [sample, markdown, html]                    # [Opt] Add tags to the page
 ---
 ```
 
 With `thumbnail`, you can add a smaller image than the `feature-img`. 
-If you don't have a thumbnail you can still use the same image as the feature one. Or use the gulp task to create it.
+If you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.
+
+If you don't use a feature image, but `color`, the transparent background is set comes from `lineart.png`. 
+You can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
 
-The background used when `color` is set comes from `lineart.png` from [xukimseven](https://github.com/xukimseven) 
-you can edit it in the config file (`_config.yml > color_image`). If you want another one, put it in `/assets/img` as well. 
+For position, if not set on all pages, it will be by alphabetical order without `position` then by `position` order.
+If two pages have the same position number, the order is decided by alphabetical order on the page title.
 
-The **bootstrap** is not mandatory and is only useful if you want to add bootstrapped content in your page. 
+There's also `bootstrap: true` which is not mandatory and only useful if you want to add HTML content in your page that
+requires [bootstrap](http://getbootstrap.com/).
 It will respect the page and theme layout, mind the padding on the sides.
 
 #### Post excerpt
 
-The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is display on the blog page. 
+The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) are the first lines of an article that is displayed on the blog page. 
 The length of the excerpt has a default of around `250` characters or can be manually set in the post using:
 
 in `conflig.yml`:
@@ -407,7 +413,7 @@ If your posts are not displaying ensure that you have added the line `paginate:
 
 ### Layout: Page 📄
 
-The page layout have a bit more features explained here.
+The page layout has a bit more features explained here.
 
 ```yml
 
@@ -423,7 +429,7 @@ tags: [sample, markdown, html]
 ---
 ```
 
-The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. 
+The hide only hides your page from the navigation bar, it is, however, still generated and can be accessed through its link. 
 
 ### Feature: Portfolio 🗂
 
@@ -443,9 +449,11 @@ title : Portfolio
 
 #### Portfolio posts
 
-You can format the portfolio posts in the `_portfolio` folder using the `post layout`. Here are little explaination on some of the possible feature you can use and what they will do.
+You can format the portfolio posts in the `_portfolio` folder using the `post layout`. 
+Here is a little explanation on some of the possible features you can use.
 
-If you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. You can see more format example on the demo posts that are available for the theme:
+If you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. 
+You can see more format examples in the demo posts that are available for the theme:
 
 ```yml
 
@@ -474,7 +482,7 @@ This creates the collection for Jekyll, so it can find and display your portfoli
 
 ### Feature: Gallery 🖼
 
-You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in optimal position 
+You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures at the optimal position 
 based on available vertical space. 
 You need to specify the `gallery_path` which will be used to find the pictures to render. 
 It will take all the pictures under that directory. Then use the `include` to add it in your page. 
@@ -494,10 +502,12 @@ gallery: "assets/img/pexels"
 
 The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search) 
 there is a `search.liquid` file that will create a list of all the site posts, pages and portfolios. 
+Then there's a script displaying the formatted results in the _search page_.
 
-Then there's a `search.js` displaying the formatted results in the "search page".
-
-The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
+To exclude contents from the search add the `exclude: true` option in the markdown header. 
+By default, all posts, pages, and collections are available in the search.
+Hide the search page from the navigation bar with the `hide: true` option. 
+You can remove the icon by removing `icon`:
 
 ```yml
 
@@ -526,7 +536,7 @@ tags: [sample, markdown, html]
 
 > Tags are case-sensitive `Tag_nAme` ≠ `tag_name`
 
-All the tags will be listed the tags page with a link toward the pages or posts.
+All the tags will be listed on the "tags" page with a link toward the pages or posts.
 The Tag page can be hidden with the `hide` option. You can remove the icon by removing `icon` (like for the search page).
 
 ## Advanced
@@ -618,7 +628,7 @@ Then you can start adding content like:
 
 ### Remote Theme
 
-Now you can use any theme gem with GitHub pages with [29/11/2017 Github Pages Broadcast](https://github.com/blog/2464-use-any-theme-with-github-pages).
+Now you can use any theme gem with GitHub pages with [29/11/2017 GitHub Pages Broadcast](https://github.com/blog/2464-use-any-theme-with-github-pages).
 For that remove all `theme:` attributes from `_config.yml` and add instead:
 
 ```yml
@@ -627,7 +637,7 @@ remote_theme: sylhare/Type-on-Strap
 
 ## License
 
-This theme is licensed under the [The MIT License (MIT)](/LICENSE)
+This theme is licensed under the [MIT License (MIT)](/LICENSE)
 
 - Pictures from [Pexels](https://www.pexels.com/) are under Creative Commons Zero (CC0) license
 - Fonts are licensed under the [SIL Open Font License (OFL)](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)

data/_data/language.yml

@@ -15,6 +15,8 @@ str_no_result_found: "No result found"
 str_cookie_approve: "Approve"
 str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website."
 str_months: [January, February, March, April, May, June, July, August, September, October, November, December]
+str_dark: 'Dark'
+str_light: 'Light'
 
-# Localization settings 
+# Localization settings
 cusdis_lang: # zh-cn, es, tr, pt-BR

data/_includes/blog/post_footer.liquid

@@ -0,0 +1,57 @@
+{% assign color = include.color %}
+{% assign img = include.img %}
+{% capture _post_footer %}
+    <!-- To change color of links in the page -->
+    <style>
+        header#main {
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        {% if color != nil %}
+        .post-content a { color: {{ color }} !important; }
+        .share-buttons a { color: {{ color }} !important; }
+        .tag-list a:not(:hover) { color: {{ color }} !important; }
+        div#post-nav a { color: {{ color }} !important; }
+        footer a { color: {{ color }} !important; }
+        .site-header nav a:hover {  color: {{ color }} !important; }
+        a.button:hover {
+            background: {{ color }} !important;
+            border: 1px solid {{ color }} !important;
+            color: white;
+            text-decoration: none;
+            filter: none;
+        }
+        header#main {
+            background-color: {{ color }} !important;
+            background-image: url('{{ site.color_image | relative_url }}');
+        }
+        {% endif %}
+
+        {% if img != nil %}
+        header#main { background-image: url('{{ img | relative_url }}'); }
+        {% endif %}
+    </style>
+
+    <!-- Post navigation -->
+    {% if site.post_navigation or site.theme_settings.post_navigation %}
+        {% include blog/post_nav.liquid %}
+    {% endif %}
+
+    <!--Utterances-->
+    {% if site.comments.utterances.repo and site.comments.utterances.issue-term %}
+        {% include social/utterances.liquid %}
+    {% endif %}
+
+    <!-- Cusdis -->
+    {% if site.comments.cusdis_app_id or site.cusdis_app_id %}
+        {% include social/cusdis.liquid %}
+    {% endif %}
+
+    <!-- Disqus -->
+    {% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %}
+        {% include social/disqus.liquid %}
+    {% endif %}
+{% endcapture %}
+{{ _post_footer | split: " " | join: " " }}

data/_includes/default/head.liquid

@@ -3,17 +3,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
 
     <!-- Theme Mode-->
-    {% if site.color_theme == 'auto' %}
     <script>
-        const isAutoTheme = true;
-        document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme'))
+        const darkBtn = "{{ site.data.language.str_dark | default: "Dark" }}";
+        const lightBtn = "{{ site.data.language.str_light | default: "Light" }}";
+        const isAutoTheme = {% if site.color_theme == 'auto' %}true{% else %}false{% endif %};
+        const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (isAutoTheme) {
+            document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme') ?? preferredTheme);
+        } else {
+            document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}");
+        }
     </script>
-    {% else %}
-    <script>
-        const isAutoTheme = false;
-        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
-    </script>
-    {% endif %}
 
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
@@ -35,13 +35,13 @@
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.15.2 -->
+    <!-- KaTeX 0.16.9 -->
     {% if site.katex or site.theme_settings.katex %}
     <script defer src="{{ '/assets/js/vendor/katex.min.js' | relative_url }}"></script>
-    <script defer src="{{ '/assets/js/vendor/auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
+    <script defer src="{{ '/assets/js/vendor/katex.auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 9.1.1 -->
+    <!-- Mermaid 10.6.1 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({
       startOnLoad:true,
@@ -83,7 +83,7 @@
 
     <!-- Twitter Cards -->
     <meta name="twitter:title" content="{{ page.title | default: site.title }}">
-    <meta name="twitter:description" content="{{ page.content | strip_html | strip_newlines | truncate: 160 | default: site.header_text}}">
+    <meta name="twitter:description" content="{{ page.content | default: site.header_text | strip_html | strip_newlines | truncate: 160 }}">
     {% if site.data.social.twitter %}
     <meta name="twitter:creator" content="@{{ site.data.social.twitter }}">
     <meta name="twitter:site" content="@{{ site.data.social.twitter }}">

data/_includes/default/navbar.liquid

@@ -21,18 +21,20 @@
     <!-- Menu -->
     <ul class="hide">
         {% assign name_page = "" %}
-
-        {% for page in site.pages %}
-            {% unless page.title == null or page.hide or name_page contains page.title %}
+        {% assign emptyArray = '' | split: '' %}
+        {% assign menus = site.data.menu | default: emptyArray %}
+        {% assign pages = site.pages | concat: menus | sort: 'position' %}
+        {% for page in pages %}
+        {% unless page.title == null or page.hide or name_page contains page.title %}
             <li class="separator"> | </li>
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
-                    {% if page.icon %} <i class="fas {{ page.icon }}" aria-hidden="true"></i>
-                    {% else %} {{ page.title }} {% endif%}
+                    {% if page.icon %} <i class="navbar-icon fas {{ page.icon }}" aria-hidden="true"></i>{% endif %}
+                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif%}">{{ page.title }}</span>
                 </a>
             </li>
-            {% endunless %}
-            {% assign name_page = page.title | append: name_page %}
+        {% endunless %}
+        {% assign name_page = page.title | append: name_page %}
         {% endfor %}
 
         {% if site.color_theme == 'auto' %}

data/_includes/default/search_input.liquid

@@ -0,0 +1,50 @@
+[
+{% for post in site.posts %}
+    {
+    {% unless post.excluded %}
+        "title"    : "{{ post.title | strip_newlines | escape }}",
+        "category" : "{{ post.category }}",
+        "tags"     : "{{ post.tags | join: ', ' | prepend: " " }}",
+        "url"      : "{{ post.url | relative_url }}",
+        "date"     : "{{ post.date | date: "%B %-d, %Y" }}",
+        "excerpt"  : {{ post.content | strip_html | strip_newlines | strip | escape | truncate: '250' | escape | jsonify }},
+        "content"  : {{ post.content | strip_html | strip_newlines | strip | escape | jsonify }}
+    {% endunless %}
+    }{% unless forloop.last %},{% endunless %}
+{% endfor %}
+{% if site.pages.size > 0 %},{% endif %}
+{% for page in site.pages %}
+    {
+    {% unless page.excluded or page.title == nil %}
+        "title"    : "{{ page.title | strip_newlines | escape }}",
+        "category" : "{{ page.category }}",
+        "tags"     : "{{ page.tags | join: ', ' | prepend: " " }}",
+        "url"      : "{{ page.url | relative_url }}",
+        "date"     : "{{ page.date | date: "%B %-d, %Y" | default: "N/A" }}",
+        "excerpt"  : {{ page.content | strip_html | strip_newlines | strip | escape | truncate: '250' | escape | jsonify }},
+        "content"  : {{ page.content | strip_html | strip_newlines | strip | escape | jsonify }}
+    {% endunless %}
+    }{% unless forloop.last %},{% endunless %}
+{% endfor %}
+{% if site.collections.size > 1 %},{% endif %}
+{% for collection in site.collections %}
+    {% unless collection.label == 'posts' or site[collection.label].size == 0 %}
+        {% for page in site[collection.label] %}
+            {
+            {% if page.excluded or page.title != nil %}
+                "title"    : "{{ page.title | strip_newlines | escape }}",
+                "category" : "{{ page.category }}",
+                "tags"     : "{{ page.tags | join: ', ' | prepend: " " }}",
+                "url"      : "{{ page.url | relative_url }}",
+                "date"     : "{{ page.date | date: "%B %-d, %Y" | default: "N/A" }}",
+                "excerpt"  : {{ page.content | strip_html | strip_newlines | strip | escape | truncate: '250' | jsonify }},
+                "content"  : {{ page.content | strip_html | strip_newlines | strip | escape | jsonify }}
+            {% endif %}
+            }{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+    {% else %}
+        {}
+    {% endunless %}
+    {% unless forloop.last %},{% endunless %}
+{% endfor %}
+]

data/_includes/social/cusdis.liquid

@@ -2,7 +2,7 @@
   data-host="https://cusdis.com"
   data-app-id="{% if site.comments.cusdis_app_id %}{{ site.comments.cusdis_app_id }}{% else %}{{ site.cusdis_app_id }}{% endif %}"
   data-page-id="{{ page.relative_path }}"
-  data-page-url="{{ page.url }}"
+  data-page-url="{{ page.url | absolute_url }}"
   data-page-title="{{ page.title }}"
   data-theme="{{ site.color_theme }}"
 ></div>

data/_layouts/default.html

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <!--
-    Type on Strap jekyll theme v2.4.6
+    Type on Strap jekyll theme v2.4.8
     Theme free for personal and commercial use under the MIT license
     https://github.com/sylhare/Type-on-Strap/blob/master/LICENSE
 -->
 <html lang="en">
-  {% include default/head.liquid %}
+  {% capture _head %}{% include default/head.liquid %}{% endcapture %}
+  {{ _head | split: " " | join: " "}}
   <body>
-    {% include default/navbar.liquid %}
+    {% capture _navbar %}{% include default/navbar.liquid %}{% endcapture %}
+    {{ _navbar | split: " " | join: " "}}
     <div class="content">
       {{ content }}
     </div>
-    {% include default/footer.liquid %}
+    {% capture _footer %}{% include default/footer.liquid %}{% endcapture %}
+    {{ _footer | split: " " | join: " "}}
   </body>
 </html>

data/_layouts/home.liquid

@@ -1,7 +1,6 @@
 ---
 layout: default
 ---
-
 <div class="home">
     <style scoped>
         {% assign image = site.header_feature_image | relative_url | split: '.' %}
@@ -24,7 +23,6 @@ layout: default
     <div id="main" class="call-out call-out_img">
         <h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
     </div>
-
-    {% include blog/blog.liquid %}
-
+    {% capture _blog %}{% include blog/blog.liquid %}{% endcapture %}
+    {{ _blog | split: " " | join: " "}}
 </div>

data/_layouts/page.liquid

@@ -1,35 +1,30 @@
 ---
 layout: default
 ---
-
 <article {% if page.feature-img %}class="feature-image"{% endif %}>
-
-  <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
-    <div class="title-padder">
-      {% if page.hide_title %}
-        <div class="feature-image-padding"></div>
-      {% else %}
-        <h1 id="{{ page.title | default: "" | cgi_escape }}" class="title"> {{ page.title }}</h1>
-        {% if page.subtitle %}
-        <h2 class="subtitle">{{ page.subtitle }}</h2>
+    <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
+        <div class="title-padder">
+            {% if page.hide_title %}
+                <div class="feature-image-padding"></div>
+            {% else %}
+                <h1 id="{{ page.title | default: "" | cgi_escape }}" class="title"> {{ page.title }}</h1>
+                {% if page.subtitle %}
+                    <h2 class="subtitle">{{ page.subtitle }}</h2>
+                {% endif %}
+            {% endif %}
+        </div>
+    </header>
+    <section class="post-content">
+    {% if page.bootstrap %}
+        <div class="bootstrap-iso">
+            {% endif %}
+            {{ content }}
+            {% if page.bootstrap %}
+        </div>
         {% endif %}
-      {% endif %}
-    </div>
-  </header>
-
-  <section class="post-content">
-  {% if page.bootstrap %}
-  <div class="bootstrap-iso">
-  {% endif %}
-	{{ content }}
-  {% if page.bootstrap %}
-  </div>
-  {% endif %}
-  </section>
-
-
-  <!-- Tag list for portfolio -->
-  {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
-  {% include default/tags_list.liquid tags=tag_list %}
-
+    </section>
+    <!-- Tag list for portfolio -->
+    {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
+    {% capture _tags %}{% include default/tags_list.liquid tags=tag_list %}{% endcapture %}
+    {{ _tags | split: " " | join: " " }}
 </article>

data/_layouts/post.liquid

@@ -2,80 +2,30 @@
 layout: default
 ---
 <article {% if page.feature-img or page.color %}class="feature-image" {% endif %}>
-  <header id="main" style="">
-    <div class="title-padder">
-      {% if page.hide_title %}
-      <div class="feature-image-padding"></div>
-      {% else %}
-      <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
-      {% include blog/post_info.liquid author=page.author date=page.date %}
-      {% endif %}
-    </div>
-  </header>
-
-  <section class="post-content">
-  {% if page.bootstrap %}
-    <div class="bootstrap-iso">
-    {% endif %}
-      {{ content }}
-    {% if page.bootstrap %}
-    </div>
-  {% endif %}
-  </section>
-
-  <!-- Social media shares -->
-  {% include social/share_buttons.liquid %}
-
-   <!-- Tag list -->
-  {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
-  {% include default/tags_list.liquid tags=tag_list %}
+    <header id="main" style="">
+        <div class="title-padder">
+            {% if page.hide_title %}
+                <div class="feature-image-padding"></div>
+            {% else %}
+                <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
+                {% include blog/post_info.liquid author=page.author date=page.date %}
+            {% endif %}
+        </div>
+    </header>
+
+    <section class="post-content">
+    {% if page.bootstrap %}<div class="bootstrap-iso">{% endif %}
+            {{ content }}
+    {% if page.bootstrap %}</div>{% endif %}
+    </section>
+
+    <!-- Social media shares -->
+    {% include social/share_buttons.liquid %}
+
+    <!-- Tag list -->
+    {% capture tag_list %}{{ page.tags | join: "|" }}{% endcapture %}
+    {% include default/tags_list.liquid tags=tag_list %}
 
 </article>
 
-<!-- Post navigation -->
-{% if site.post_navigation  or site.theme_settings.post_navigation %}
-{% include blog/post_nav.liquid %}
-{% endif %}
-
-<!--Utterances-->
-{% if site.comments.utterances.repo and site.comments.utterances.issue-term %} {% include social/utterances.liquid %} {% endif %}
-
-<!-- Cusdis -->
-{% if site.comments.cusdis_app_id or site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %}
-
-<!-- Disqus -->
-{% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname or site.disqus_shortname %}
-{% include social/disqus.liquid %}{% endif %}
-
-<!-- To change color of links in the page -->
-<style>
-  header#main {
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-  }
-
-  {% if page.color %}
-  .post-content a { color: {{ page.color }} !important; }
-  .share-buttons a { color: {{ page.color }} !important; }
-  .tag-list a:not(:hover) { color: {{ page.color }} !important; }
-  div#post-nav a { color: {{ page.color }} !important; }
-  footer a { color: {{ page.color }} !important; }
-  .site-header nav a:hover {  color: {{ page.color }} !important; }
-  a.button:hover {
-    background: {{ page.color }} !important;
-    border: 1px solid {{ page.color }} !important;
-    color: white;
-    text-decoration: none;
-    filter: none;
-  }
-  header#main {
-      background-color: {{ page.color }} !important;
-      background-image: url('{{ site.color_image | relative_url }}');
-  }
-  {% endif %}
-
-  {% if page.feature-img %}
-  header#main { background-image: url('{{ page.feature-img | relative_url }}'); }
-  {% endif %}
-</style>
+{% include blog/post_footer.liquid color=page.color img=page.feature-img %}