type-on-strap 2.5.0 → 2.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7b245eafb6465e6bd1a012032498fb81901591c09680290587ec232ea579643
-  data.tar.gz: f81e6aaf2e9ef2dc13f6275da54a05143cb305a88dbd4e6b3af6cad085555e2c
+  metadata.gz: f5a9d47621e0b454f1c0658622a29f749519ddd6dd265cdcbf1ead4f210fa9e2
+  data.tar.gz: 065cb8d35e79a304c0530008c4494c8ce1d1e64ed88d9422a5eeec03737145ea
 SHA512:
-  metadata.gz: ca5de0fb72854009a6ede7a395e65c572c2100a80d6f338f90dd6cc0b8f08199aca694f54a1be26f01231681673173662caa4b1bc7c277f736b9d14d4569aeef
-  data.tar.gz: 44fe3825598c76e401b010c7b9630b4b7c1a83309c609ef7cff81efaeded6e78242447664e0c567ca88b0cac361fc9ca02da921d944f64a24f6d301d71680c1c
+  metadata.gz: bf956f01a7160cc092808515301fa639b07a48a000a987f74536ac6d792972f14e494898f4a7ea8527b3ea342f33ceb4575a8ceac252e03429e9a1e6de9dc50b
+  data.tar.gz: b55fd5b2f2b114913c38c1b6b4113647c621c88d5522b09aea4e45f9316cca6f822665e086b146b374579d39e3cd025e08e7ef3dd18de2218e000e95a0b21b93

data/README.md

@@ -3,34 +3,41 @@
 [![Build](https://github.com/sylhare/Type-on-Strap/actions/workflows/docker-build.yml/badge.svg)](https://github.com/sylhare/Type-on-Strap/actions/workflows/docker-build.yml)
 [![Gem Version](https://badge.fury.io/rb/type-on-strap.svg)](https://badge.fury.io/rb/type-on-strap)
 [![Docker Pulls](https://img.shields.io/docker/pulls/sylhare/type-on-strap)](https://hub.docker.com/r/sylhare/type-on-strap)
+[![Gem Downloads](https://img.shields.io/gem/dt/type-on-strap?logo=rubygems)](https://rubygems.org/gems/type-on-strap)
 
-[![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/)
+[![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 feature-rich [Jekyll](https://jekyllrb.com) theme for writers, developers, and creatives — with portfolio, gallery, dark mode, search, KaTeX, and Mermaid out of the box.
 
 * Responsive design on all devices (🖥, 💻, 📱, ...)
-* Portfolio 🗂, Gallery 🖼 pages for your projects
-* Multi comments 💬 options  
-* Tags compatibility 🏷
-* Handle _Bootstrap_'ed pages: [Get Bootstrap](http://getbootstrap.com/)
-* 🔎 Search feature: [Simple-Jekyll-Search](https://github.com/sylhare/Simple-Jekyll-Search)
-* Math Rendering : [KateX](https://github.com/Khan/KaTeX)
-* Diagram Rendering: [Mermaid-js](https://github.com/mermaid-js/mermaid)
-* 🖋 Nice fonts: [Font Awesome](https://fontawesome.com/), [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), [Pacifico](https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico) 
-* Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
-* 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
-* 💡 Light and dark theme supported
-* Find free of rights images on [pexels](https://www.pexels.com/)
-
-> [Demo Site](https://sylhare.github.io/Type-on-Strap/) 
+* Portfolio 🗂 and Gallery 🖼 pages for your projects
+* Auto light and dark theme 💡 with manual toggle
+* Full-text 🔎 search: [Simple-Jekyll-Search](https://github.com/sylhare/Simple-Jekyll-Search)
+* Write equations natively with [KaTeX](https://github.com/Khan/KaTeX)
+* Render diagrams natively with [Mermaid](https://github.com/mermaid-js/mermaid)
+* Multi comments 💬 systems: Disqus, Giscus, Utterances, Cusdis
+* Compatible with [Bootstrap](http://getbootstrap.com/) for responsive, customizable layouts
+* SEO-ready with [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
+* Syntax highlighting with easily customizable [Base16](https://github.com/chriskempson/base16) themes
+* Tags 🏷, categories, archive, and pagination built in
+
+> [Demo Site](https://sylhare.github.io/Type-on-Strap/)
 
 ## Usage
 
+### As a remote theme 🌐
+
+The easiest way to use Type-on-Strap is as a remote theme with GitHub Pages.
+Add this to your [`_config.yml`](_config.yml):
+
+```yml
+remote_theme: sylhare/Type-on-Strap
+```
+
 ### As a GitHub page 📋
 
-1. Fork and clone the [Type on Strap repo](https://github.com/sylhare/Type-On-Strap): `git clone https://github.com/Sylhare/Type-on-Strap.git`
-2. Install [Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll`, check [#1](https://github.com/Sylhare/Type-on-Strap/issues/1) if you have a problem.
+1. Fork and clone the [Type on Strap repo](https://github.com/sylhare/Type-on-Strap): `git clone https://github.com/sylhare/Type-on-Strap.git`
+2. Install [Ruby](https://www.ruby-lang.org/en/documentation/installation/) and [Bundler](https://bundler.io/), check [#1](https://github.com/sylhare/Type-on-Strap/issues/1) if you have a problem.
 3. Install the theme's dependencies: `bundle install`
 4. Customize the theme
 	- GitHub Page: [update `_config.yml`](#site-configuration)
@@ -59,6 +66,8 @@ Here are the main files of the template
 ├── pages
 |   ├── 404.md		       # To be displayed when url is wrong
 |   ├── about.md               # About example page
+|   ├── archive.md             # Archive page for all posts
+|   ├── categories.md          # Categories page for all posts
 |   ├── gallery.md             # Gallery page for your photos
 |   ├── portfolio.md	       # Portfolio page for your projects
 |   ├── search.md	       # Search page
@@ -67,10 +76,12 @@ Here are the main files of the template
 ├── _data
 |  ├── authors.yml             # Update the post authors configurations 
 |  ├── comments.yml            # Comments configuration (Disqus, Cusdis, Utterances, Giscus)
+|  ├── icons.yml               # Footer icons (Twitter, Github, Stackoverflow, ...)
+|  ├── icons_builder.yml       # Icon set builder configuration
 |  ├── language.yml            # Localization configuration
+|  ├── menu.yml                # Navigation menu configuration
 |  ├── biblio.yml              # To create a reference bibliography
 |  ├── social.yml              # Social configurations to share posts (RSS, shares, ...)
-|  └── icons.yml               # Footer icons (Twitter, Github, Stackoverflow, ...)
 └── index.html                 # sample home page (blog page paginated)
 ```
 	
@@ -322,7 +333,7 @@ They will on click redirect you to the logo's platform to share the article.
 Display icons in the footer. 
 All icon variables should be your username enclosed in quotes (e.g. "username") in [`_data/icons.yml`](_data/icons.yml).
 
-You can update the RSS settings in `_data/social` to change the default feed path (generated by [jekyll-feel](https://github.com/jekyll/jekyll-feed)).
+You can update the RSS settings in `_data/social` to change the default feed path (generated by [jekyll-feed](https://github.com/jekyll/jekyll-feed)).
 To enable the share icons at the bottom of each article,
 set to true the one you'd like under `share` in the [`_data/social.yml`](_data/social.yml) file.
 
@@ -354,7 +365,7 @@ 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 npm script to create it.
 
 If you don't use a feature image, but `color`, the transparent background is set comes from [`lineart.png`](assets/img/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. 
@@ -371,7 +382,7 @@ It will respect the page and theme layout, mind the padding on the sides.
 The [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) is the head of the article rendered in 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`:
+in `_config.yml`:
 
 ```yml
 excerpt: true
@@ -423,7 +434,7 @@ of your favourite highlight color scheme on this format.
 
 ## Feature pages and layouts 
 
-All feature pages besides the "home" one are stored in the `page` folder, 
+All feature pages besides the "home" one are stored in the `pages` folder, 
 they will appear in the navigation bar unless you set `Hide: true` in the front matter. 
 
 Here are the documentation for the other feature pages that can be added through [`_config.yml`](_config.yml). 
@@ -478,7 +489,7 @@ layout: page
 title : Portfolio 
 ---
 
-{% include default/portfolio.html %}
+{% include portfolio.html %}
 ```
 
 #### Portfolio posts
@@ -516,8 +527,8 @@ 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 at the optimal position 
-based on available vertical space. 
+You can create a gallery using a column layout which will place 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. 
 
@@ -529,7 +540,7 @@ title: Gallery
 gallery: "assets/img/pexels"
 ---
 
-{% include default/gallery.html gallery_path=page.gallery %}
+{% include gallery.html gallery_path=page.gallery_path %}
 ```
 
 ### Feature: Search 🔍
@@ -586,51 +597,20 @@ Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually repre
 These are useful to render your jekyll files. 
 You can learn more about them on [shopify's doc](https://help.shopify.com/themes/liquid/basics)
 
-### Gulp toolbox
-
-#### Requirements
-
-Before you need to have *node* and `npm` installed:
+### npm scripts toolbox
 
-- Windows: https://nodejs.org/
-- Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`
-- Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`
+If you are not familiar with npm scripts, check the [CONTRIBUTING.md](.github/CONTRIBUTING.md) for setup instructions.
 
-Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
+To create a new post with today's date:
 
 ```bash
-cd assets/
-sudo npm install gulp-cli -g
-npm install
+npm run post 'title of the post'
 ```
 
-#### Minimizing and optimizing: css, js and images
-
-You can run the default task that will compress the js, css and images and create the thumbnails for the supported image
-formats:
-
-```bash
-cd assets/
-gulp default
-gulp thumbnails-all # to create all of the images thumbnails
-gulp thumbnails     # to create thumbnails for the feature-img/ only
-# tip: run a git status to see the changes
-git status
-```
-
-You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js).
-
-#### Create a post
+A file `_posts/YYYY-MM-DD-title-of-the-post.md` will be created with default frontmatter.
+Nothing will happen if the file already exists.
 
-To create a `.md` file in the *_posts/* section with the jekyll format of today's date.
-Use this command with the title you'd like to create the very basic post.
-
-```bash
-gulp post -n 'title of the post'
-```
-
-A file will be created following the format `yyyy-mm-dd-title-of-the-post.md` with default post attributes inside.
-Nothing will happen if the file exists already.
+For build scripts, image optimization, and the full development setup, see [CONTRIBUTING.md](.github/CONTRIBUTING.md).
 
 ### Use as Ruby Gem 💎
 
@@ -660,18 +640,15 @@ Then you can start adding content like:
   - Add the feature page you want. (ex: as it is already in `pages`)
   - Add posts in `_posts` and `_portfolio` to be displayed
 
-### 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).
-For that remove all `theme:` attributes from [`_config.yml`](_config.yml) and add instead:
-
-```yml
-remote_theme: sylhare/Type-on-Strap 
-```
-
 ## 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)
+
+## Credits
+
+Based on Rohan Chandra's [type-theme](https://github.com/rohanchandra/type-theme), extended with many additional features.
+
+[![Contributors](https://contrib.rocks/image?repo=sylhare/Type-on-Strap)](https://github.com/sylhare/Type-on-Strap/graphs/contributors)

data/_includes/blog/post_nav.liquid

@@ -1,7 +1,7 @@
 <div id="post-nav">
     {% if page.next.url %}
     <div id="previous-post">
-        <a alt="{{ page.next.title }}" href="{{ page.next.url | relative_url | default: 'none' }}">
+        <a href="{{ page.next.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
             {{ page.next.title }}
         </a>
@@ -10,7 +10,7 @@
 
     {% if page.previous.url %}
     <div id="next-post">
-        <a alt="{{ page.previous.title }}" href="{{ page.previous.url | relative_url | default: 'none' }}">
+        <a href="{{ page.previous.url | relative_url | default: 'none' }}">
             <p>{{ site.data.language.str_next_post | default: "Next post"}}</p>
             {{ page.previous.title }}
         </a>

data/_includes/default/head.liquid

@@ -15,9 +15,14 @@
         }
     </script>
 
-    <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
+    <!-- Main JS (navbar.js, katex_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
 
+    {% if page.bootstrap %}
+    <!-- Bootstrap 4.6.2 CSS CDN - loaded in a @layer so theme styles always take precedence -->
+    <style>@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css") layer(bootstrap);</style>
+    {% endif %}
+
     <!-- CSS -->
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
@@ -30,28 +35,26 @@
     {% endif %}
 
     {% if page.bootstrap %}
-    <!-- Bootstrap-4.1.3 isolation CSS -->
-    <link rel="stylesheet" type="text/css" href="{{ '/assets/css/vendor/bootstrap-iso.min.css' | relative_url }}">
-    <!-- JQuery 3.3.1 -->
-    <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <!-- Bootstrap 4.1.3 compiled and minified JavaScript -->
-    <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <!-- Popper, a dependency of Bootstrap-->
-    <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>
+    <!-- jQuery 3.5.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <!-- Popper.js 1.16.1 CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <!-- Bootstrap 4.6.2 JS CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbZUBVs2mbGk8cFoTfurqEOk6sD3+6VUuY3" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.16.28 -->
+    <!-- KaTeX 0.17.0 -->
     {% 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/katex.auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
     {% endif %}
 
-    <!-- Mermaid 11.12.2 -->
+    <!-- Mermaid 11.15.0 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}"></script>
     {% endif %}
 
-    <!-- Simple Jekyll Search 2.1.1 -->
+    <!-- Simple-Jekyll-Search 2.1.4 -->
     <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
 
     <!-- Google Analytics / Cookie Consent -->

data/_includes/default/navbar.liquid

@@ -30,7 +30,7 @@
             <li>
                 <a class="clear" aria-label="{{ page.title }}" title="{{ page.title }}" href="{{ page.url | relative_url }}">
                     {% 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>
+                    <span class="navbar-label {% if page.icon %}navbar-label-with-icon{% endif %}">{{ page.title }}</span>
                 </a>
             </li>
         {% endunless %}
@@ -39,7 +39,7 @@
 
         {% if site.color_theme == 'auto' %}
         <li class="separator"> | </li>
-        <li><a id="theme-toggle" title="{{ page.title }} " aria-label="{{ page.title }}" onclick="themeToggle()"></a></li>
+        <li><a id="theme-toggle" title="{{ site.data.language.str_dark | default: 'Toggle theme' }}" aria-label="{{ site.data.language.str_dark | default: 'Toggle theme' }}" onclick="themeToggle()"></a></li>
         {% endif %}
     </ul>
 

data/_includes/gallery.html

@@ -6,17 +6,15 @@ html { overflow-y: scroll; }
 /* article {padding:2%;} */
 </style>
 
-<div id='masonry' class="grid">
-<div class="grid-sizer"></div>
-<div class="gutter-sizer"></div>
+<div id="gallery-grid" class="grid">
+<div class="grid-col grid-col--1"></div>
+<div class="grid-col grid-col--2"></div>
+<div class="grid-col grid-col--3"></div>
 {% for image in site.static_files %}
   {% if image.path contains include.gallery_path %}
     {% unless image.path contains '.md' %}
-        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" style="padding: 0;">
+        <img src="{{ image.path | relative_url }}" alt="" class="grid-item" loading="lazy" style="padding: 0;">
     {% endunless %}
   {% endif %}
 {% endfor %}
 </div>
-
-<script src="{{ '/assets/js/vendor/imagesloaded.pkgd.min.js' | relative_url }}" type="text/javascript"></script>
-<script src="{{ '/assets/js/vendor/masonry.pkgd.min.js' | relative_url }}" type="text/javascript"></script>

data/_includes/portfolio.html

@@ -8,7 +8,7 @@
                     <i class="fas fa-search-plus fa-3x"></i>
                 </div>
             </div>
-            <img alt="" class="" data-testid="portfolio-item-image" src="{{ item.img | relative_url }}">
+            <img alt="{{ item.title }}" class="" data-testid="portfolio-item-image" loading="lazy" src="{{ item.img | relative_url }}">
         </a>
     </div>
     {% endfor %}

data/_includes/social/share_buttons.liquid

@@ -13,7 +13,7 @@
         <li class="meta">Share</li>
         {% if site.data.social.share.facebook or site.theme_settings.share_buttons.facebook %}
         <li>
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank"
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" target="_blank" rel="noopener noreferrer"
                title="{{ site.data.social.language.str_share_on }} Facebook">
                 <i class="fab fa-facebook-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Facebook</span>
@@ -22,7 +22,7 @@
         {% endif %} {% if site.data.social.share.twitter or site.theme_settings.twitter %}
         <li>
             <a href="https://twitter.com/intent/tweet?text={{ page.title | strip_html | url_encode }}%20{{ page.url | absolute_url | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_tweet }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_tweet }}">
                 <i class="fab fa-twitter-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_tweet | default: "Tweet" }}</span>
             </a>
@@ -30,7 +30,7 @@
         {% endif %} {% if site.data.social.share.tumblr or site.theme_settings.tumblr %}
         <li>
             <a href="https://www.tumblr.com/share?v=3&u={{ page.url | absolute_url }}&quote={{ page.title | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Tumblr">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Tumblr">
                 <i class="fab fa-tumblr-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Tumblr</span>
             </a>
@@ -38,7 +38,7 @@
         {% endif %} {% if site.data.social.share.pinterest or site.theme_settings.pinterest %}
         <li>
             <a href="https://pinterest.com/pin/create/button/?url={{ page.url | absolute_url }}&media={{ page.feature-img | absolute_url }}$description={{ page.excerpt | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_pin_it }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_pin_it }}">
                 <i class="fab fa-pinterest-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_pin_it | default: "Pin it" }}</span>
             </a>
@@ -46,7 +46,7 @@
         {% endif %} {% if site.data.social.share.pocket or site.theme_settings.pocket %}
         <li>
             <a href="https://getpocket.com/save?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_add_to }} Pocket">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_add_to }} Pocket">
             <span class="fa-stack fa-1x" style="vertical-align: top">
               <i class="fas fa-square fa-stack-2x" aria-hidden="true"></i>
               <i class="fab fa-get-pocket fa-stack-1x fa-inverse" aria-hidden="true"></i>
@@ -57,7 +57,7 @@
         {% endif %} {% if site.data.social.share.reddit or site.theme_settings.reddit %}
         <li>
             <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} Reddit">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} Reddit">
                 <i class="fab fa-reddit-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} Reddit</span>
             </a>
@@ -65,7 +65,7 @@
         {% endif %} {% if site.data.social.share.linkedin or site.theme_settings.linkedin %}
         <li>
             <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url }}&title={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&summary=&source={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_share_on }} LinkedIn">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} LinkedIn">
                 <i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} LinkedIn</span>
             </a>
@@ -73,7 +73,7 @@
         {% endif %} {% if site.data.social.share.wordpress or site.theme_settings.wordpress %}
         <li>
             <a href="https://wordpress.com/press-this.php?u={{ page.url | absolute_url }}&quote={{ page.title | strip_html | url_encode }}%20%7C%20{{ site.title | strip_html | url_encode }}&s="
-               target="_blank" title="{{ site.data.social.language.str_share_on }} WordPress">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_share_on }} WordPress">
                 <i class="fab fa-wordpress fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_share_on | default: "Share on" }} WordPress</span>
             </a>
@@ -81,7 +81,7 @@
         {% endif %} {% if site.data.social.share.email or site.theme_settings.email %}
         <li>
             <a href="mailto:?subject={{ page.title }}%20%7C%20{{ site.title  }}&body={{ page.url | absolute_url }}"
-               target="_blank" title="{{ site.data.social.language.str_email }}">
+               target="_blank" rel="noopener noreferrer" title="{{ site.data.social.language.str_email }}">
                 <i class="fas fa-envelope-square fa-2x" aria-hidden="true"></i>
                 <span class="sr-only">{{ site.data.social.language.str_email | default: "Email" }}</span></a>
         </li>

data/_layouts/default.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
-    Type on Strap jekyll theme v2.5.0
+    Type on Strap jekyll theme v2.5.2
     Theme free for personal and commercial use under the MIT license
     https://github.com/sylhare/Type-on-Strap/blob/master/LICENSE
 -->

data/_layouts/page.liquid

@@ -15,13 +15,9 @@ layout: default
         </div>
     </header>
     <section class="post-content">
-    {% if page.bootstrap %}
-        <div class="bootstrap-iso">
-            {% endif %}
-            {{ content }}
-            {% if page.bootstrap %}
-        </div>
-        {% endif %}
+        {% if page.bootstrap %}<div class="bootstrap-iso">{% endif %}
+        {{ content }}
+        {% if page.bootstrap %}</div>{% endif %}
     </section>
     <!-- Category and Tag list -->
     <div class="tag-category-container">

data/_layouts/post.liquid

@@ -14,9 +14,9 @@ layout: default
     </header>
 
     <section class="post-content">
-    {% if page.bootstrap %}<div class="bootstrap-iso">{% endif %}
-            {{ content }}
-    {% if page.bootstrap %}</div>{% endif %}
+        {% if page.bootstrap %}<div class="bootstrap-iso">{% endif %}
+        {{ content }}
+        {% if page.bootstrap %}</div>{% endif %}
     </section>
 
     <!-- Social media shares -->

data/_layouts/search.liquid

@@ -20,6 +20,7 @@ layout: page
             strategy: {
                 type: 'hybrid',
             },
+            sortMiddleware: window.RelevanceSort,
             exclude: [],
             templateMiddleware: window.createHighlightTemplateMiddleware({
                 className: 'search-highlight',

data/_sass/base/_global.scss

@@ -8,7 +8,8 @@ figure {
   margin: 0;
 }
 
-html {
+html,
+body {
   background: var(--background);
 }
 
@@ -17,10 +18,6 @@ html {
   background: var(--selection);
 }
 
-::-moz-selection {
-  background: var(--selection);
-}
-
 body {
   color: var(--text);
   font-family: $font-family-main;
@@ -141,7 +138,7 @@ summary {
 }
 
 blockquote {
-  border-left: 2px solid #9fd2e3;
+  border-left: 2px solid var(--blockquote-border);
   margin: 1em 1em;
   padding: 0.75em 1em;
   background-color: var(--blockquote);
@@ -215,7 +212,7 @@ ul {
 hr {
   border: 0;
   border-top: 1px solid var(--border);
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--background);
   margin: 1em 0;
 }
 
@@ -225,11 +222,11 @@ a {
 }
 
 kbd {
-  background-color: #eee;
+  background-color: var(--kbd-background);
   border-radius: 3px;
-  border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
-  color: #333;
+  border: 1px solid var(--kbd-border);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: var(--kbd-color);
   display: inline-block;
   font-size: .85em;
   font-weight: 700;
@@ -259,7 +256,7 @@ details {
   width: 100%;
   background: rgba(2, 2, 2, 0.85);
   color: lightgray;
-  z-index: 1000;
+  z-index: $z-index-cookie;
 
   & a {
     display: inline-block;

data/_sass/base/_utility.scss

@@ -1,35 +1,14 @@
 // Mix-ins
-%padding-nav {
-  padding: $padding-small $padding-x-large;
-  @media (max-width: $xl-break) {
-    padding: $padding-small ($padding-large * 2);
-  }
-  @media (max-width: $l-break) {
-    padding: $padding-small $padding-large;
-  }
-  @media (max-width: $m-break) {
-    padding: $padding-small $padding-medium;
-  }
-  @media (max-width: $sm-break) {
-    padding: $padding-small $padding-x-small;
-  }
+@mixin responsive-padding($v, $sm-h) {
+  padding: $v $padding-x-large;
+  @media (max-width: $xl-break) { padding: $v ($padding-large * 2); }
+  @media (max-width: $l-break)  { padding: $v $padding-large; }
+  @media (max-width: $m-break)  { padding: $v $padding-medium; }
+  @media (max-width: $sm-break) { padding: $v $sm-h; }
 }
 
-%padding-post {
-  padding: $padding-x-small $padding-x-large;
-  @media (max-width: $xl-break) {
-    padding: $padding-x-small ($padding-large * 2);
-  }
-  @media (max-width: $l-break) {
-    padding: $padding-x-small $padding-large;
-  }
-  @media (max-width: $m-break) {
-    padding: $padding-x-small $padding-medium;
-  }
-  @media (max-width: $sm-break) {
-    padding: $padding-x-small $padding-small;
-  }
-}
+%padding-nav  { @include responsive-padding($padding-small, $padding-x-small); }
+%padding-post { @include responsive-padding($padding-x-small, $padding-small); }
 
 %padding-header {
   padding: $padding-medium $padding-large;