type-on-strap 2.3.8 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d37aa295ef0bba39ece59de4e39bcfc5235c9edf80bff478a9054b3e8fdcbf6
-  data.tar.gz: 34d45f1b419ded21adfa161155963682d9c6d6dbee747c7a4ce874f6b96a24fc
+  metadata.gz: 8389a7d6ea215d30a665c55a1395631f0fc555772ed192956637b81390cd36d6
+  data.tar.gz: 7bb8bef255c863b833801b5c6005c49c33a7c0d9d438f1733b3072685fa3f202
 SHA512:
-  metadata.gz: 200fb555e6f2a4f6a0c10e7cf6d1e713de1162c08bcf063bb536a3631e815bb337ebf37e65a62161d2ff5683683df0d7174da4099d8c5fb5d65c7ec539d6977f
-  data.tar.gz: 9238840c1df0c434254416a15b6a311df9eca82ae8be75be1c0375da51ccf54092a4acbb078c52289092ba5727dd35a25eebc628bc8c05ffb7f4646482492c3b
+  metadata.gz: 3f4da0e9cc2b2447859de17a193b26bede24f02a8f78be88556c44ab4f8cdceac7a57fc101959ebccf5707fb7e3b5a6734548641e4ee359f9be4a0f3bb119e92
+  data.tar.gz: 12acd5e8c2b5e807489bbffb5a9472c4488fbacf5af2be3daf396b65231f627d17f82b40df03f0b875e13e6417f3af9fee0f1d631c0d1585ea0e3e9f996744ff

data/README.md

@@ -22,7 +22,7 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 * 💡 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/)
+> [Demo Site](https://sylhare.github.io/Type-on-Strap/) 
 
 ## Usage
 
@@ -30,6 +30,8 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 
 Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#/https://github.com/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`
@@ -43,16 +45,16 @@ Check out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)
 
 Here are the main files of the template
 
-```bash
+```shell
 Type-on-Strap
-├── _includes	               # theme includes
-├── _layouts                   # theme layouts (see below for details)
-├── _portfolio	               # collection of article to be populated in the portfolio page
+├── _includes	               # Theme includes
+├── _layouts                   # Theme layouts (see below for details)
+├── _portfolio	               # Collection of articles for the portfolio page
 ├── _posts                     # Blog posts
-├── _sass                      # Sass partials 
+├── _sass                      # Sass partials (compiled into css at runtime)
 ├── assets
-|  ├── js	               # theme javascript, Katex, jquery, bootstrap, jekyll search, 
-|  ├── css                     # isolated Bootstrap, font-awesome, katex and main css
+|  ├── js	               # JS compiled for distribution + raw sources
+|  ├── css                     # CSS compiled for distribution
 |  ├── fonts		       # Font-Awesome, and other fonts
 |  └── img		       # Images used for the template
 ├── pages
@@ -60,12 +62,13 @@ Type-on-Strap
 |   ├── about.md               # About example page
 |   ├── gallery.md             # Gallery page for your photos
 |   ├── portfolio.md	       # Portfolio page for your projects
-|   ├── search.html	       # Search page
+|   ├── search.md	       # Search page
 |   └── tags.md                # The tag page
 ├── _config.yml                # sample configuration
 ├── _data.yml
 |  ├── authors.yml             # Update the post authors configurations 
 |  ├── language.yml            # Localization 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)
@@ -79,9 +82,11 @@ If a variable in this document is marked as "optional", disable the feature by r
 
 ### Site configuration
 
+#### Base url
+
 Configure Jekyll as your own blog or with a "baseurl" in `_config.yml`:
 
-Jekyll website *without* a "baseurl" (such as a GitHub Pages website for a given username):
+Jekyll website *without* a "baseurl" (such as a **GitHub Pages website** with your username as the repository name):
 
 ```yml
 baseurl: ""
@@ -92,21 +97,33 @@ Jekyll website *with* "baseurl" (like the Type on Strap [demo](https://sylhare.g
 
 ```yml
 baseurl: "/sub-directory"
-url: "https://username.github.io/"
+url: "https://username.github.io"
+```
+
+#### Jekyll blog configuration 
+
+And here is the basic information you will need in your `_config.yml` for it to work properly:
+
+```yaml
+# BLOG CONFIGURATION
+post_navigation: true
+paginate: 10
+paginate_path: "blog/page:num"
+plugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]
 ```
 
-Please configure this  before using the theme.
+To configure the blog part and default plugins. Those plugins are validated by GitHub page.
 
-### Meta and Branding
+#### Meta and Branding
 
 Meta variables hold basic information about your Jekyll site which will be used throughout the site 
-and as meta properties for search engines, browsers, and the site's RSS feed.
+and as meta properties that are used for search engines, browsers, and the site's RSS feed.
 
 Change these variables in `_config.yml`:
 
 ```yml
 title: My Jekyll Blog                 # Name of website
-avatar: assets/img/triangle.png       # Path of avatar image, to be displayed in the theme's header
+avatar: assets/img/avatar.png         # Path of avatar image, to be displayed in the theme's header
 description: My blog posts            # Short description, primarily used by search engines
 favicon: assets/favicon.ico           # Icon displayed in the tab
 color_theme: auto                     # color theme auto, dark or light
@@ -124,12 +141,24 @@ Customize your site header/footer with these variables in `_config.yml`:
 
 ```yml
 header_text: Welcome to my Jekyll blog
-header_feature_image: assets/img/sample3.png
 footer_text: Copyright 2017
 ```
 
 If you don't want anything, replace the value by `" "`.
 
+#### Header's image
+
+The header's image (tested with 2480x1280) can be set as one image with `header_feature_image`
+but can also be responsive:
+
+```yml
+header_feature_image: assets/img/header/my-header-image.png
+header_feature_image_responsive: true
+```
+
+By setting `header_feature_image_responsive` to true, it will look for images 
+with suffix `-small` (620x320) and `-medium` (1240x640) to display on smaller screen.
+
 #### Localisation string
 
 Localization string is a way to quickly change the template language for text like *Next Post* or *Follow on*, ...
@@ -259,20 +288,11 @@ to share the article on those platform.
 
 #### Footer
 
-Display in the footer. 
-All icon variables should be your username enclosed in quotes (e.g. "username") in `_data/social.yml`, 
-except for the following variables:
-
-```yml
-rss: true                                                   
-email_address: type@example.com
-linkedin: https://www.linkedin.com/in/FirstLast
-stack_exchange: https://stackexchangecom/users/0000/first-last
-stack_overflow: https://stackoverflow.com/users/0000/first-last
-youtube: UCqECaJ8Gagnn7YCbPEzWH6g  # Youtube token of your channel in the url 
-```
+Display icons in the footer. 
+All icon variables should be your username enclosed in quotes (e.g. "username") in `_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)).
+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` file.
 
 ### Personalize your Blog Posts 📝
 
@@ -355,7 +375,7 @@ Use it in any markdown file. There are two fields in the _include_ you need to l
 
 #### Code highlight
 
-Like all CSS variables in the theme, you can edit the color of the code highlight in *_sass > base > _variables.scss*.
+Like all CSS variables in the theme, you can edit the color of the code highlight in `_sass > base > _variables.scss`.
 The code highlighting works with [base16](https://github.com/chriskempson/base16-html-previews/tree/master/css) you can find existing example 
 of your favourite highlight color scheme on this format.
 
@@ -371,7 +391,7 @@ Non-standard features are documented below.
 ### Layout: Default
 
 This layout includes the head, navigation bar and footer around your content. 
-Unless you're making a custom layout you won't need it.
+Unless you are making a custom layout you won't need it.
 
 ### Layout: Home 🏡
 
@@ -394,7 +414,7 @@ layout: page
 title: "About" 
 subtitle: "This is a subtitle"   
 feature-img: "assets/img/sample.png" 
-permalink: /about.html               # Set a permalink your your page
+permalink: /about/                   # Set a permalink your your page
 hide: true                           # Prevent the page title to appear in the navbar
 icon: "fa-search"                    # Will Display only the fontawesome icon (here: fa-search) and not the title
 tags: [sample, markdown, html]
@@ -468,13 +488,12 @@ gallery: "assets/img/pexels"
 {% include default/gallery.html gallery_path=page.gallery %}
 ```
 
-
 ### Feature: Search 🔍
 
 The search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search) 
-there is a `search.json` file that will create a list of all the site posts, pages and portfolios. 
+there is a `search.liquid` file that will create a list of all the site posts, pages and portfolios. 
 
-Then there's a `search.js` displaying the formatted results entered in the `search.html` 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`:
 
@@ -505,7 +524,7 @@ tags: [sample, markdown, html]
 
 > Tags are case-sensitive `Tag_nAme` ≠ `tag_name`
 
-All the tags will be listed in `tags.html` with a link toward the pages or posts.
+All the tags will be listed 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
@@ -571,7 +590,7 @@ Nothing will happen if the file exists already.
 
 You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap). 
 
-Ruby Gem Method
+Using the [Ruby Gem Method](https://sylhare.github.io/2021/03/25/Run-type-on-strap-jekyll-theme-locally.html).
 Add this line to your Jekyll site's Gemfile (or create one):
 
 ```ruby

data/_data/icons_builder.yml

@@ -29,7 +29,7 @@ keybase:
 linkedin:
   pre: "https://www.linkedin.com/in/"
 mail:
-  pre: "mailto://"
+  pre: "mailto:"
   icon: "fas fa-envelope"
 map:
   pre: "https://www.openstreetmap.org/#map=15/"

data/_includes/blog/{blog.html → blog.liquid}

@@ -18,7 +18,7 @@
                 {{ post.title }}
               </a>
             </h1>
-            {% include blog/post_info.html author=post.author date=post.date %}
+            {% include blog/post_info.liquid author=post.author date=post.date %}
           </header>
           {% if site.excerpt or site.theme_settings.excerpt %}
               <div class="excerpt">
@@ -34,4 +34,4 @@
     {% endfor %}
 </div>
 
-{% include blog/blog_nav.html %}
+{% include blog/blog_nav.liquid %}

data/_includes/blog/{post_info.html → post_info.liquid}

@@ -2,7 +2,7 @@
 {% assign date = include.date | default: "today" | date: "%B %-d, %Y" %}
 
 <div class="post-info">
-  {%- if author.url -%}<a href="{{ author.url | relative_url }}" target="_blank">{%- endif -%}
+  {%- if author.url -%}<a href="{{ author.url | relative_url }}" target="_blank" rel="noopener">{%- endif -%}
     {% if author.avatar  %}
       <img alt="Author's avatar" src="{{ author.avatar | relative_url }}">
     {% endif %}

data/_includes/blog/{post_nav.html → 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 }}">
+        <a alt="{{ page.next.title }}" 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 }}">
+        <a alt="{{ page.previous.title }}" 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/{footer.html → footer.liquid}

@@ -4,7 +4,7 @@
             <div class="footer-icons">
                 <ul>
                 <!-- Social icons from Font Awesome, if enabled -->
-                {% include social/icons.html %}
+                {% include social/icons.liquid %}
                 </ul>
             </div>
 </footer>

data/_includes/default/{head.html → head.liquid}

@@ -17,16 +17,13 @@
 
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
-    
+
     <!-- CSS -->
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
     <!--Favicon-->
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
-    <!-- RSS -->
-    <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
-
     {% 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 }}">
@@ -38,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.13.9 -->
+    <!-- KaTeX 0.15.2 -->
     {% 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>
     {% endif %}
 
-    <!-- Mermaid 8.9.2 -->
+    <!-- Mermaid 8.13.10 -->
     {% if site.mermaid %}
     <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({startOnLoad:true});"></script>
     {% endif %}
@@ -79,6 +76,7 @@
     {% seo %}
 
     <!-- RSS -->
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
     {% feed_meta %}
 
     <!-- Twitter Cards -->

data/_includes/default/{tags_list.html → tags_list.liquid}

@@ -10,7 +10,7 @@
       {% endif %}
 
       {% for tag in tags %}
-        <li><a class="button" href="{{ '/tags' | relative_url }}#{{ tag | cgi_escape }}">
+        <li><a class="button" href="#{{ tag | cgi_escape }}">
           <p><i class="fas fa-tag fa-fw fa-sm"></i> {{ tag }}</p>
         </a></li>
       {% endfor %}

data/_includes/social/{icons.html → icons.liquid}

@@ -1,7 +1,8 @@
 {% if site.data.social.rss or site.theme_settings.rss %}
 <li>
     <a feed.xml href="{{ site.data.social.feed.path | default: 'feed.xml' | relative_url }}"
-       title="{{ site.data.language.str_rss_follow | default: 'Follow RSS feed' }}">
+       title="{{ site.data.language.str_rss_follow | default: 'Follow RSS feed' }}"
+       target="_blank">
         <span class="fa-stack fa-lg">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
@@ -23,7 +24,8 @@
         <li>
             <a href="{{ data.pre | append: id | append: data.pos }}"
                title="{{ site.data.language.str_follow_on }} {{ brand | remove: '-' | capitalize }}"
-               rel="me">
+               target="_blank"
+               rel="noopener">
             <span class="fa-stack fa-lg">
               <i class="fas fa-circle fa-stack-2x"></i>
               <i class="{{ icon }} fa-stack-1x fa-inverse"></i>

data/_layouts/{custom.md → custom.liquid}

@@ -8,7 +8,7 @@ layout: default
         <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
         {% endunless %}
         {% if page.is_post %}
-        {% include blog/post_info.html author=page.author date=page.date %}
+        {% include blog/post_info.liquid author=page.author date=page.date %}
         {% endif %}
     </header>
     <section class="post-content">{{ content }}</section>
@@ -19,19 +19,19 @@ layout: default
 
         <!-- Tag list -->
         {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
-        {% include default/tags_list.html tags=tag_list %}
+        {% include default/tags_list.liquid tags=tag_list %}
     </div>
 
 </article>
 
 <!-- Post navigation -->
 {% if site.post_navigation %}
-{% include blog/post_nav.html %}
+{% include blog/post_nav.liquid %}
 {% endif %}
 
 <!-- Cusdis -->
-{% if site.cusdis_app_id %}{% include social/cusdis.html %}{% endif %}
+{% if site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %}
 
 <!-- Disqus -->
 {% if site.disqus_shortname or site.theme_settings.disqus_shortname %}
-{% include social/disqus.html %}{% endif %}
+{% include social/disqus.liquid %}{% endif %}

data/_layouts/default.html

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <!--
-    Type on Strap jekyll theme v2.3.8
+    Type on Strap jekyll theme v2.4.0
     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.html %}
+  {% include default/head.liquid %}
   <body>
-    {% include default/navbar.html %}
+    {% include default/navbar.liquid %}
     <div class="content">
       {{ content }}
     </div>
-    {% include default/footer.html %}
+    {% include default/footer.liquid %}
   </body>
 </html>

data/_layouts/home.liquid

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<div class="home">
+    <style scoped>
+        {% assign image = site.header_feature_image | relative_url | split: '.' %}
+        .call-out_img {
+            background-image: url('{{ image | join: '.' }}');
+        }
+        {% if site.header_feature_image_responsive %}
+        @media screen and (max-width: 768px) {
+            .call-out_img {
+                background-image: url('{{ image[0] | append: '-medium.' | append: image[1] | default: image}}');
+            }
+        }
+        @media screen and (max-width: 576px) {
+            .call-out_img {
+                background-image: url('{{ image[0] | append: '-small.' | append: image[1] }}');
+            }
+        }
+        {% endif %}
+    </style>
+    <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 %}
+
+</div>

data/_layouts/{page.html → page.liquid}

@@ -30,6 +30,6 @@ layout: default
 
   <!-- Tag list for portfolio -->
   {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
-  {% include default/tags_list.html tags=tag_list %}
+  {% include default/tags_list.liquid tags=tag_list %}
 
 </article>

data/_layouts/{post.html → post.liquid}

@@ -8,7 +8,7 @@ layout: default
       <div class="feature-image-padding"></div>
       {% else %}
       <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
-      {% include blog/post_info.html author=page.author date=page.date %}
+      {% include blog/post_info.liquid author=page.author date=page.date %}
       {% endif %}
     </div>
   </header>
@@ -24,28 +24,28 @@ layout: default
   </section>
 
   <!-- Social media shares -->
-  {% include social/share_buttons.html %}
+  {% include social/share_buttons.liquid %}
 
    <!-- Tag list -->
   {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
-  {% include default/tags_list.html tags=tag_list %}
+  {% 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.html %}
+{% include blog/post_nav.liquid %}
 {% endif %}
 
 <!--Utterances-->
-{% if site.comments.utterances.repo and site.comments.utterances.issue-term %} {% include social/utterances.html %} {% endif %}
+{% 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.html %}{% endif %}
+{% 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.html %}{% endif %}
+{% include social/disqus.liquid %}{% endif %}
 
 <!-- To change color of links in the page -->
 <style>
@@ -54,18 +54,18 @@ layout: default
       background-repeat: no-repeat;
       background-position: center;
   }
-  
+
   {% if page.color %}
   .feature-image a { 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; }
-  header#main { 
+  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 %}

data/_layouts/{search.html → search.liquid}

@@ -13,7 +13,7 @@ layout: page
         SimpleJekyllSearch({
             searchInput: document.getElementById('search-input'),
             resultsContainer: document.getElementById('results-container'),
-            json: '{{ "/assets/data/search.json" | relative_url }}',
+            json: '{{ "/assets/data/search.liquid" | relative_url }}',
             searchResultTemplate: '<div class="search-title"><a href="{url}"><h3> {title}</h3></a><div class="meta">{date} <div class="right"><i class="fas fa-tag"></i> {tags}</div></div><p>{excerpt}</p></div><hr> ',
             noResultsText: '{{ site.data.language.str_no_result_found | default: "No result found" }}',
             limit: 10,

data/_layouts/{tags.html → tags.liquid}

@@ -29,7 +29,7 @@ layout: page
     {% endfor %}
 
     <!-- Displays the list of tags-->
-    {% include default/tags_list.html tags=rawtags %}
+    {% include default/tags_list.liquid tags=rawtags %}
 
     <!-- Displays the posts and pages that contains the tag-->
     <div class="posts">
@@ -51,7 +51,7 @@ layout: page
                     <i class="far fa-file-image" aria-hidden="true"></i>
                     {{ page.title }}
                 </a>
-                {% include blog/post_info.html date=page.date %}
+                {% include blog/post_info.liquid date=page.date %}
             </h5>
             {% endif %}
             {% endfor %}
@@ -65,7 +65,7 @@ layout: page
                     {{ post.title }}
                 </a>
 
-                {% include blog/post_info.html date=post.date %}
+                {% include blog/post_info.liquid date=post.date %}
             </h5>
             {% endif %}
             {% endfor %}
@@ -79,7 +79,7 @@ layout: page
                     {{ note.title }}
                 </a>
 
-                {% include blog/post_info.html date=note.date %}
+                {% include blog/post_info.liquid date=note.date %}
             </h5>
             {% endif %}
             {% endfor %}

data/_sass/base/_global.scss

@@ -79,6 +79,10 @@ img[align=right] {
   margin-left: 3%;
 }
 
+summary {
+  cursor: pointer;
+}
+
 /* ---- Responsive ---- */
 
 @media screen and (max-width: $break) {
@@ -244,37 +248,25 @@ kbd {
   background: rgba(2, 2, 2, 0.85);
   color: lightgray;
   z-index: 1000;
-}
-
-#cookie-notice a {
-  display: inline-block;
-  cursor: pointer;
-  margin-left: 0.6rem;
-}
-
-/* Vendor tweaks */
-// For correct line number width in Github Gists
-.gist table tbody tr td {
-  box-sizing: content-box;
-}
 
-// KaTeX math display
-.math-display {
-  display: inline-block;
-  width: 100%;
+  & a {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 0.6rem;
+  }
 }
 
 // Mermaid
 .mermaid {
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 2%;
-}
 
-.mermaid > svg {
-  margin: auto;
-  display: block;
-  height: auto;
-  padding-bottom: 2em;
-  padding-top: 2em;
-  max-width: 100%;
+  & > svg {
+    margin: auto;
+    display: block;
+    height: auto;
+    padding-bottom: 2em;
+    padding-top: 2em;
+    max-width: 100%;
+  }
 }