Initial commit

.gitattributes

@@ -0,0 +1,4 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text

.github/.travis.yml

@@ -0,0 +1,44 @@
+language: ruby
+rvm:
+#  - 2.4.0
+#  - 2.5.5
+  - 2.6.3
+
+env:
+  global:
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true
+
+notifications:
+  email: false
+
+before_install:
+#  - gem update --system
+  - gem install bundler
+
+script:
+  - bundle install
+  - bundle exec jekyll build
+
+after_script:
+  - gem install type-on-strap
+  - gem install jekyll-theme-type-on-strap
+  - docker pull sylhare/type-on-strap
+
+branches:
+  only:
+    - master
+    - /^v.*$/
+
+jobs:
+  include:
+    - stage: gem release
+      rvm: 2.6.3
+      script: echo "Deploying to rubygems.org ..."
+      deploy:
+        provider: rubygems
+        gem: type-on-strap
+        api_key:
+          secure: DNJmBojaNJU0VFS2RE3Gy5CBnll1GXm7wtvxVMDfAqFNbCQdq2LR/v3LDNNm/ZEPMQfgdvlom8s5Pm26nnxbWFAAFcLTBD/cyJffvudgiCo3ONLkpm/PsVJiTyNbzZyb/XPE879S+LVtdKGlhLFSBaqUKfrhyRHT1W9LWrrjZMTQngUZCPlJmw6AsLvqT2x1CcBvVD2Q6tN8bOwq2blsDUtI6449ey1qWfgaERvM8KvF76aB32YQ7t8986NMkfHRDXPlgxm64pCc4kduBqAk9UHP5JAJzO4c3zEhX5Mb6Hc1CoxdgF3WSpmiN6HVVMaSC1byL4evocR+Enh5Gjc0VxEmIjCESpyheQG7YkkaadC7Lrvb18/qoSj0iDeB386k11XMiRN1dxu1CehPOkyQh5V5UEbZrm/9W9U/eQGgG1YoqicShcfxLDGeWRK4moLW8a8pvvBs+dduZyCWUgaC08S1u+HwvO8TpWcslr9/J05sRV4PAjk+u66+FVdILn0YWsbOKTezY/APTDfHnn/NQGZWXI4W5PMtf+KfPjL9kU0ouhqGpElGxrg2Hlw8kaPY3QrYLviVC7/DvWNWPGt9hmvcneuEg16zJTMoeNzckK5AUimyzvvjpVPVBh30T1YpZtcg+gFgesTHjyo/piFxEFX4ttYKoxvLMABONbniXcE=
+        on:
+          tags: true
+          repo: sylhare/Type-on-Strap

.github/Docs.md

@@ -0,0 +1,13 @@
+# GitHub folder
+
+> You don't need that folder for your GitHub page
+
+You can delete this folder or add your own workflows in it.
+
+## Structure
+
+- [hooks](./hooks): custom git hooks for gulp task
+- [workflows](./workflows): Workflows of this repository for the GitHub actions  
+- [config.yml](./config.yml): Config file for "request-info" bot
+- [release-drafter.yml](./release-drafter.yml): Config file for "release-drafter" bot
+- [stale.yml](./stale.yml): Config file for "stale" bot

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: 'sylhare'
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,10 @@
+---
+name: Question
+about: Anything you'd like to ask for
+title: ''
+labels: question
+assignees: ''
+
+---
+
+<!-- If applicable, add screenshots to your question -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+<!-- Thanks for your PR! -->
+<!-- If the change is not compatible with GitHub page (https://github.com/github/pages-gem) it won't be merged 😢 -->
+
+### Description
+<!-- A brief explanation of what the PR is about -->
+
+### Screenshot
+<!-- Don't forget to provide screenshot if you change the layout of the theme -->

.github/config.yml

@@ -0,0 +1,27 @@
+# Configuration for request-info
+# https://github.com/behaviorbot/request-info
+
+# *OPTIONAL* Comment to reply with
+requestInfoReplyComment: >
+  We would appreciate it if you could provide us with more info about this issue/pr!
+
+# *OPTIONAL* default titles to check against for lack of descriptiveness (MUST BE ALL LOWERCASE)
+requestInfoDefaultTitles:
+  - update readme.md
+  - updates
+
+# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
+requestInfoLabelToAdd: need-more-info
+
+# *OPTIONAL* Require Pull Requests to contain more information than what is provided in the PR template (Will fail if the pull request's body is equal to the provided template)
+checkPullRequestTemplate: true
+
+# *OPTIONAL* Only warn about insufficient information on these events type (Keys must be lowercase. Valid values are 'issue' and 'pullRequest')
+requestInfoOn:
+  pullRequest: true
+  issue: true
+
+# *OPTIONAL* Add a list of people whose Issues/PRs will not be commented on (keys must be GitHub usernames)
+requestInfoUserstoExclude:
+  - sylhare
+  - # the other users you wanna add here

.github/hooks/README.md

@@ -0,0 +1,11 @@
+# Git hooks
+
+Git hooks are provided in `hooks/`. The pre-commit hook, when enabled, will check for non-staged assets before commit and abort if found any.
+
+## Setup
+
+`ln lib/hooks/pre-commit .git/hooks/pre-commit`
+
+## Bypass
+
+`git commit -n`

.github/hooks/pre-commit

@@ -0,0 +1,28 @@
+#!/bin/sh
+#
+# Called by "git commit" with no arguments.
+# The hook should run gulp to optimize assets.
+# Will exit with non-zero status if it wants to stop the commit.
+
+: << 'END' # Ancillary code to ensure environment before running gulp
+# If it's on the right directory, proceed. Else, try to fix it. If fail, abort commit.
+if [ ${PWD##*/} != "lib" ] ; then
+    cd lib || exit 1
+fi 
+
+# If gulp is intalled and gulpfile.js is present, then proceed. Else, abort commit.
+if ! [ -f "gulpfile.js" ] || ! command -v gulp; then  
+    printf "gulpfile.js not found or gulp-cli not installed!\n"
+    exit 1
+fi
+END
+
+# If there are non-staged assets, abort commit.
+if git status --porcelain | grep -E '^(\?\?|AM|\nM).*assets/.*$' >/dev/null; then
+    printf "There are non-staged assets, be sure to run gulp before commiting changes!\n"
+    exit 1
+fi
+
+# Proceed with the commit.
+exit 0
+

.github/labeler.yml

@@ -0,0 +1,8 @@
+question:
+  - '(?)'
+
+bug:
+  - '(bug|issue|problem)'
+
+enhancement:
+  - '(enhancement|feature)'

.github/release-drafter.yml

@@ -0,0 +1,19 @@
+name-template: 'v$NEXT_PATCH_VERSION'
+tag-template: 'v$NEXT_PATCH_VERSION'
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'feature'
+      - 'enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'fix'
+      - 'bug'
+  - title: '🧰 Maintenance'
+    labels:
+      - 'devops'
+      - 'custom'
+template: |
+  ## What’s new:
+
+  $CHANGES

.github/stale.yml

@@ -0,0 +1,22 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 15
+
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/gem-build.yml

@@ -0,0 +1,42 @@
+name: Build Ruby Gem
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        ruby-version: [ '2.7', '3.0', '3.1' ]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Ruby
+        # To automatically get bug fixes and new Ruby versions for ruby/setup-ruby,
+        # change this to (see https://github.com/ruby/setup-ruby#versioning):
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: ${{ matrix.ruby-version }}
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+      - name: Install
+        run: bundle install
+      - name: Build jekyll site
+        run: bundle exec jekyll build
+      - name: Build the gem
+        continue-on-error: true
+        run: |
+          gem build *.gemspec
+          echo `find . -name "*.gem" | tail -1 | awk -F"[/]" '{print $2}'`
+      - name: Gems
+        continue-on-error: true
+        run: |
+          gem update --system
+          gem install type-on-strap
+          gem install jekyll-theme-type-on-strap
+      - name: GPR
+        continue-on-error: true
+        run: |
+          gem install type-on-strap --version "2.4.4" --source "https://rubygems.pkg.github.com/sylhare"

.github/workflows/jekyll-build.yml

@@ -0,0 +1,27 @@
+name: Jekyll Build
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the site in the jekyll/builder container
+      run: |
+        docker run \
+        -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \
+        jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && jekyll build --future"
+
+    - name: Install packages
+      continue-on-error: true
+      run: |
+        docker pull sylhare/type-on-strap
+        docker pull sylhare/jekyll
+

.github/workflows/labeler.yml

@@ -0,0 +1,13 @@
+name: "Issue Labeler"
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: github/issue-labeler@3.2
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        configuration-path: .github/labeler.yml

.github/workflows/publish-build.yml

@@ -0,0 +1,54 @@
+name: Publish build
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Ruby 3.1
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.1.0
+      - name: Install
+        run: bundle install
+      - name: Build jekyll site
+        run: bundle exec jekyll build
+      - name: Build the gem
+        continue-on-error: true
+        run: |
+          gem build *.gemspec
+          echo `find . -name "*.gem" | tail -1 | awk -F"[/]" '{print $2}'`
+      - name: Publish to GPR
+        continue-on-error: true
+        run: |
+          echo ${{ github.repository_owner }}
+          mkdir -p $HOME/.gem
+          touch $HOME/.gem/credentials
+          chmod 0600 $HOME/.gem/credentials
+          printf -- "---\n:github: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
+          gem push --KEY github --host https://rubygems.pkg.github.com/${OWNER} *.gem
+        env:
+          GEM_HOST_API_KEY: "Bearer ${{secrets.GITHUB_TOKEN}}"
+          OWNER: ${{ github.repository_owner }}
+
+      - name: Publish to RubyGems
+        run: |
+          mkdir -p $HOME/.gem
+          touch $HOME/.gem/credentials
+          chmod 0600 $HOME/.gem/credentials
+          printf -- "---\n:rubygems_api_key: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
+          wc -l $HOME/.gem/credentials
+          gem push *.gem
+        env:
+          GEM_HOST_API_KEY: "${{secrets.RUBYGEMS_AUTH_TOKEN}}"

.github/workflows/workflow-test.yml

@@ -0,0 +1,18 @@
+name: Workflow Test
+
+on:
+  workflow_run:
+    workflows: ["Jekyll build"]
+    branches: ["master"]
+    types:
+      - completed
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Hello world
+        run: echo "Hello world"

.gitignore

@@ -0,0 +1,36 @@
+# Idea
+.idea/*
+
+# Mac OS
+.DS_Store
+
+# Byte-compiled / optimized / DLL files
+*.manifest
+*.spec
+
+# Jekyll dev or build
+_site/*
+_development_tool/*
+.sass-cache/*
+*.css.map
+*.scssc
+.bundle/*
+/vendor/
+.jekyll-cache/*
+*/.jekyll-cache/*
+
+# Theme Gem
+Gemfile.lock
+*.gem
+.gems
+jekyll-theme-type-on-strap.gemspec
+
+# Node.js
+**/node_modules/*
+**/package-lock.json
+
+# Misc
+*-test.md
+*copy.md
+test/*
+/type-on-strap*/*

.gitpod.yml

@@ -0,0 +1,42 @@
+# Documentation: https://www.gitpod.io/docs/references/gitpod-yml
+image: gitpod/workspace-full
+
+# Task(s)
+tasks:
+  - before: |
+      gem install bundle
+      bundle config set --local path 'vendor/bundle'
+    init: |
+      bundle update
+      bundle install
+  - name: Run type on strap
+    init: bundle install
+    command: bundle exec jekyll serve
+
+# In case the user is trying to make a pull request, he needs GitLens, which by default is not installed. This code will help us install it.
+vscode:
+  extensions:
+    - eamodio.gitlens
+
+# Ports configuration, since Gitpod needs to open Type on Strap on a new tab when the server loads up.
+ports:
+  - port: 4000
+    onOpen: open-browser
+
+# For opening workspaces faster than ever, prebuilds are suggested
+github:
+  prebuilds:
+    # enable for the master/default branch (defaults to true)
+    master: true
+    # enable for all branches in this repo (defaults to false)
+    branches: false
+    # enable for pull requests coming from this repo (defaults to true)
+    pullRequests: true
+    # enable for pull requests coming from forks (defaults to false)
+    pullRequestsFromForks: true
+    # add a "Review in Gitpod" button as a comment to pull requests (defaults to true)
+    addComment: false
+    # add a "Review in Gitpod" button to pull requests (defaults to false)
+    addBadge: true
+    # add a label once the prebuild is ready to pull requests (defaults to false)
+    addLabel: prebuilt

Gemfile

@@ -0,0 +1,2 @@
+source "https://rubygems.org"
+gemspec

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-2023 Sylhare
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,633 @@
+# Type on Strap 🎨
+
+[![Build](https://github.com/sylhare/Type-on-Strap/actions/workflows/jekyll-build.yml/badge.svg)](https://github.com/sylhare/Type-on-Strap/actions/workflows/jekyll-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)
+
+[![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:
+
+* 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/christian-fei/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/) 
+
+## Usage
+
+### As a ruby gem 💎
+
+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`
+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.
+3. Install the theme's dependencies: `bundle install`
+4. Customize the theme
+	- GitHub Page: [update `_config.yml`](#site-configuration)
+5. Run the Jekyll server: `bundle exec jekyll serve`
+
+## Structure
+
+Here are the main files of the template
+
+```shell
+Type-on-Strap
+├── _includes	               # Theme includes
+├── _layouts                   # Theme layouts (see below for details)
+├── _portfolio	               # Collection of articles for the portfolio page
+├── _posts                     # Blog posts
+├── _sass                      # Sass partials (compiled into css at runtime)
+├── assets
+|  ├── 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
+|   ├── 404.md		       # To be displayed when url is wrong
+|   ├── about.md               # About example page
+|   ├── gallery.md             # Gallery page for your photos
+|   ├── portfolio.md	       # Portfolio page for your projects
+|   ├── 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)
+```
+	
+## Configure Type on Strap 🛠
+
+Open `_config.yml` in a text editor to change most of the blog's settings.
+
+If a variable in this document is marked as "optional", disable the feature by removing all text from the variable. 
+
+### 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** with your username as the repository name):
+
+```yml
+baseurl: ""
+url: "https://username.github.io"
+```
+
+Jekyll website *with* "baseurl" (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):
+
+```yml
+baseurl: "/sub-directory"
+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]
+```
+
+To configure the blog part and default plugins. Those plugins are validated by GitHub page.
+
+#### 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.
+
+Change these variables in `_config.yml`:
+
+```yml
+title: My Jekyll Blog                 # Name of website
+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
+```
+
+You can also customize the seo tags default option following the jekyll-seo-tag plugin [documentation](http://jekyll.github.io/jekyll-seo-tag/advanced-usage/).
+The color theme can be set to dark or light (customize it in _variables.scss_). 
+Using _auto_ you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.
+
+### Theme customization 🎨
+
+#### Footer and Header's text
+
+Customize your site header/footer with these variables in `_config.yml`:
+
+```yml
+header_text: Welcome to my Jekyll blog
+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*, ...
+You can find all the properties in `_data/language.yml`.
+
+By default, it is in english, but you can easily add your own language.
+
+### Google Analytics
+
+To enable Google Analytics (GA4), add your [Measurement ID](https://support.google.com/analytics/answer/12270356?hl=en&sjid=1593376271608310401-NA) 
+to `_config.yml` like so:
+
+```yml
+google_analytics: G-XXXXXXXXXX
+```
+
+It will use the [Google Tag Manager](https://support.google.com/analytics/answer/10220869?hl=en&ref_topic=9355633&sjid=1593376271608310401-NA)
+
+### Comments 💬
+
+#### Disqus
+
+If you have a [Disqus](https://disqus.com/) account, you can show a comments section below each post.
+
+To enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) 
+to your project's `_config.yml` file:
+
+```yml
+comments:
+  disqus_shortname: my_disqus_shortname
+```
+
+#### Cusdis
+
+[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`:
+
+```yaml
+comments:
+  cusdis_app_id: my_data-app-id                                     
+```
+
+#### Utterances
+
+[Utterances](https://utteranc.es) is another open source alternative linked to one's GitHub account.
+It stores the comments as GitHub issues on a repository for each page.
+
+Install the utterance [app](https://github.com/apps/utterances) to your repo.
+After installing, add your info in the `_config.yml`:
+
+```yaml
+comments:
+  utterances:              # Enable by filling below information. For more info, go to https://utteranc.es
+    repo:                  # your public comments repository (e.g. owner/repo)
+    issue-term:            # Issue term (e.g. "comment" consider issues with this word in the title as comments)
+    theme:                 # OPTIONAL: Take the `color_theme` by default, or set a custom one like github-dark-orange
+    label:                 # OPTIONAL: Adds an issue label in the issue
+```
+
+### Math typesetting with KateX
+
+When KateX is set in `_config.yml`:
+
+```yml
+katex: true # to enable it
+```
+
+You can then wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable 
+in `_config.yml` to `true` for math typesetting.
+
+For inline math typesetting, type your math expression on the *same line* as your content. For example:
+
+```latex
+Type math within a sentence $$2x^2 + x + c$$ to display inline
+```
+
+For display math typesetting, type your math expression on a *new line*. For example:
+
+```latex
+$$
+  \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
+$$
+```
+
+You can find a cheat sheet of the compatible LaTex symbols [online](https://artofproblemsolving.com/wiki/index.php/LaTeX:Symbols).
+
+### Diagrams with Mermaid
+
+Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the `_config.yml`.
+This will load and init the [mermaid.min.js](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html#4-calling-mermaid-from-a-relative-link).
+
+```yml
+mermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral
+```
+
+Find all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).
+You can create with ease diagrams. Add your mermaid script inside two mermaid divs (default Kramdown does not yet support mermaid).
+With the `class="mermaid"` inside the `<div>`:
+
+```html
+<div class="mermaid">
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+</div>
+```
+
+### Social icons
+
+In `_data/social.yml` you can customize the social icons that will be displayed in the post to share your post.
+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!
+
+### Cookie consent
+
+You can add a cookie consent with a disclaimer if you use Google Analytics while respecting the [GDPR](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation).
+Set to true, there will be a banner at the bottom of the page with the disclaimer, and an _approve_ button.
+Once the user clicks on "Approve" the cookies will be created for Google Analytics.
+
+#### 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.
+
+#### Footer
+
+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 📝
+
+When writing a post, be sure in jekyll to:
+ - Put it in the `_posts` folder
+ - Name it with the date first like `2019-08-21-This-is-my-blog-post.md`
+
+Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). 
+
+#### Layout: Post
+
+These are the basic features you can use with the `post` layout.
+
+```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]
+---
+```
+
+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.
+
+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. 
+
+The **bootstrap** is not mandatory and is only useful if you want to add bootstrapped content in your page. 
+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 length of the excerpt has a default of around `250` characters or can be manually set in the post using:
+
+in `conflig.yml`:
+
+```yml
+excerpt: true
+```
+
+Then in your post, add the `excerpt separator`:
+
+```yml
+
+---
+layout: post
+title: Sample Page
+excerpt_separator: <!--more-->
+---
+
+some text in the excerpt
+<!--more-->
+... rest of the text not shown in the excerpt ...
+```
+
+The html is stripped out of the excerpt, so it only displays text.
+
+#### Image aligner
+
+To easily add align images side by side in your article using the `aligner.html` include:
+
+```ruby
+{% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}
+```
+
+Use it in any markdown file. There are two fields in the _include_ you need to look into:
+  - _images_: Takes a string separated with `,` of all the images' path. 
+    - It by default look into `assets/img/` so give the path from there.
+  - _column_: (OPTIONAL) Set the number of column you want your imaged displayed in.
+    - default is 2 columns
+    - `column=3` set 3 columns
+    - `column="auto"` makes as many columns as images
+
+#### Code highlight
+
+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.
+
+## Feature pages and layouts 
+
+All feature pages besides the "home" one are stored in the `page` 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`. 
+
+Non-standard features are documented below.
+
+### Layout: Default
+
+This layout includes the head, navigation bar and footer around your content. 
+Unless you are making a custom layout you won't need it.
+
+### Layout: Home 🏡
+
+This page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.
+You can use this layout in another page (adding a title to it will make it appear in the navigation bar).
+
+The recommended width and height for the home picture is width:`2484px;` and height:`1280px` 
+which are the dimensions of the actual picture for it to be rolling down as you scroll the page.
+
+If your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.
+
+### Layout: Page 📄
+
+The page layout have a bit more features explained here.
+
+```yml
+
+---
+layout: page
+title: "About" 
+subtitle: "This is a subtitle"   
+feature-img: "assets/img/sample.png" 
+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]
+---
+```
+
+The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. 
+
+### Feature: Portfolio 🗂
+
+Portfolio is a feature page that will take all the markdown/html files in the `_portfolio` folder to create a 3-columns image portfolio matrix.
+
+To use the portfolio, simply create a `portfolio.md` with this information inside:
+
+```yml
+
+--- 
+layout: page
+title : Portfolio 
+---
+
+{% include default/portfolio.html %}
+```
+
+#### 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.
+
+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:
+
+```yml
+
+---
+layout: post
+title: Circus				       # Title of the portfolio post
+feature-img: "assets/img/portfolio/cake.png"   # Will display the image in the post
+img: "assets/img/portfolio/cake.png"           # Will display the image in the portfolio page
+date: 2019-07-25		 	       # Not mandatory, however needs to be in date format to display the date
+---
+```
+
+#### Portfolio in gem
+
+Make sure your `_config.yml` contains the following if you are using the theme as a gem:
+
+```yml
+# PORTFOLIO
+collections:
+  portfolio:
+    output: true
+    permalink: /:collection/:name
+```    
+
+This creates the collection for Jekyll, so it can find and display your portfolio posts.
+
+### Feature: Gallery 🖼
+
+You can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures in 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. 
+
+```yml
+
+---
+layout: page
+title: Gallery
+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.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 in the "search page".
+
+The search page can be hidden with the `hide` option. You can remove the icon by removing `icon`:
+
+```yml
+
+---
+layout: search
+title: Search
+icon: "search"
+---
+```
+
+### Feature: Tags 🏷
+
+Tags should be placed between `[]` in your post metadata. Separate each tag with a comma. 
+Tags are recommended for posts and portfolio items.
+
+For example:
+
+```yml
+
+---
+layout: post
+title: Markdown and HTML
+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.
+The Tag page can be hidden with the `hide` option. You can remove the icon by removing `icon` (like for the search page).
+
+## Advanced
+
+### Liquid tags
+
+Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually represented by:
+
+```
+{{ liquid.tag | filter }}
+```
+
+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:
+
+- 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`
+
+Then you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:
+
+```bash
+cd assets/
+sudo npm install gulp-cli -g
+npm install
+```
+
+#### 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
+
+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.
+
+### Use as Ruby Gem 💎
+
+You can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap). 
+
+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
+gem "type-on-strap"
+```
+
+Add this line to your Jekyll site's `_config.yml` file:
+
+```yml
+theme: type-on-strap
+```
+
+Then run Bundler to install the theme gem and dependencies:
+
+```bash
+bundle install
+```
+
+Then you can start adding content like:
+  - Add a `index.html` file
+  - 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` and add instead:
+
+```yml
+remote_theme: sylhare/Type-on-Strap 
+```
+
+## License
+
+This theme is licensed under the [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)

_config.yml

@@ -0,0 +1,57 @@
+# SITE CONFIGURATION
+baseurl: "/Type-on-Strap"
+url: "https://sylhare.github.io"
+
+# THEME-SPECIFIC CONFIGURATION
+title: Type on Strap                                    # site's title
+description: "A website with blog posts and pages"      # used by search engines
+avatar: assets/img/triangle.png                         # Empty for no avatar in navbar
+favicon: assets/favicon.ico                             # Icon displayed in the tab
+
+# Header and footer text
+header_text: Change <code>header_text</code> in <code>_config.yml</code>  # Change Blog header text
+header_feature_image: assets/img/header/triangular.jpeg
+header_feature_image_responsive: true
+footer_text: >
+  Powered by <a href="https://jekyllrb.com/">Jekyll</a> with <a href="https://github.com/sylhare/Type-on-Strap">Type on Strap</a>
+
+# Blog
+excerpt: true                                           # Or "truncate" (first 250 characters), "false" to disable
+post_navigation: true
+color_image: /assets/img/lineart.png                    # A bit transparent for color posts.
+
+# Features
+# More in the _data folder for share buttons, author and language
+# For layout customization, go to the "_sass > base" folder, and check "_variables.scss"
+katex: true                                             # Enable if using math markup
+mermaid: default                                        # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral
+google_analytics:                                       # Tracking ID, e.g. "UA-000000-01"
+cookie_consent: false                                   # To respect the usage of cookies
+color_theme: auto                                       # auto, dark or light
+
+# Comments
+comments:
+  disqus_shortname:                                     # Your discus shortname for comments
+  cusdis_app_id:                                        # Your cusdis data-app-id
+  utterances:                                           # Enable by filling below information. For more info, go to https://utteranc.es
+    repo:                                               # your public comments repository (e.g. owner/repo)
+    issue-term:                                         # Issue term (e.g. "comment" consider issues with this word in the title as comments)
+
+# PAGINATION
+paginate: 5
+paginate_path: "/blog/page:num"
+
+# PORTFOLIO
+collections:
+  portfolio:
+    output: true
+    permalink: /:collection/:name
+
+# BUILD SETTINGS
+sass:
+  style: compressed
+plugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]
+exclude: [".jekyll-cache", ".jekyll-metadata", ".idea", "vendor/*", "assets/node_modules/*"]
+
+# theme: type-on-strap                                  # if using the theme as a jekyll theme gem
+remote_theme: sylhare/Type-on-Strap                     # If using as a remote_theme in github

_data/authors.yml

@@ -0,0 +1,20 @@
+rohanchandra: # author-id
+  name: "Rohan Chandra"
+  avatar: "https://avatars2.githubusercontent.com/u/816965?s=460&v=4"
+  url: "https://github.com/rohanchandra"
+sylhare:
+  name: Sylhare
+  avatar: "https://avatars3.githubusercontent.com/u/20642750?s=460&v=4"
+  url: "https://github.com/sylhare"
+mmistakes:
+  name: "Michael Rose"
+  avatar: "https://avatars3.githubusercontent.com/u/1376749?s=460&v=4"
+  url: "https://github.com/mmistakes"
+mhagnumdw:
+  name: Mhagnumdw
+  avatar: "https://avatars2.githubusercontent.com/u/17688846?s=460&v=4"
+  url:
+unknown:
+  name: Unknown
+  avatar:
+  url:

_data/biblio.yaml

@@ -0,0 +1,7 @@
+- authors: John Smith
+  title: A Title About Citations
+  key: ref1
+
+- authors: Michael's Rose
+  title: "[Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/markup-syntax-highlighting)"
+  key: highlight

_data/icons.yml

@@ -0,0 +1,37 @@
+# For the Icons on the footer of the website
+# For the Share buttons at the end of the articles, use the "social.yml"
+behance:
+bitbucket:
+calendly:
+dribbble:
+facebook:
+flickr:
+github: sylhare
+gitlab:
+google-scholar:   # e.g. "WXAAOb0AAAAJ"
+instagram:
+hacker-news:
+keybase:
+linkedin:
+mail:             # e.g. "sam@mail.com"
+map:              # e.g. "34.0886/-118.3191"
+mastodon:         # e.g. "fostodon.org/@sam"
+matrix:           # e.g. "@sam:matrix.org"
+medium:
+patreon:
+phone:            # e.g. "+11111111111"
+pinterest:
+reddit:
+soundcloud:
+sms:              # e.g. "+11111111111"
+stack-exchange:   # e.g. "123456789"
+stack-overflow:   # e.g. "123456789"
+steam:
+telegram:
+tumblr:
+twitch:
+twitter:
+vimeo:
+vk:
+wordpress:
+youtube:          # e.g. "UCqECaJ8Gagnn7YCbPEzWH6g"

_data/icons_builder.yml

@@ -0,0 +1,82 @@
+# Default data to build the footer icons
+# DO NOT MODIFY, use the "icons.yml" instead.
+behance:
+  pre: "https://www.behance.net/"
+bitbucket:
+  pre: "https://bitbucket.org/"
+calendly:
+  pre: "https://calendly.com/"
+  icon: "far fa-calendar-plus"
+dribbble:
+  pre: "https://www.dribbble.com/"
+facebook:
+  pre: "https://www.facebook.com/"
+flickr:
+  pre: "https://flickr.com/photos/"
+github:
+  pre: "https://github.com/"
+gitlab:
+  pre: "https://gitlab.com/"
+google-scholar:
+  pre: "https://scholar.google.com/citations?hl=en&user="
+  icon: "fas fa-user-graduate"
+instagram:
+  pre: "https://instagram.com/"
+hacker-news:
+  pre: "https://news.ycombinator.com/user?id="
+keybase:
+  pre: "https://keybase.io/"
+linkedin:
+  pre: "https://www.linkedin.com/in/"
+mail:
+  pre: "mailto:"
+  icon: "fas fa-envelope"
+map:
+  pre: "https://www.openstreetmap.org/#map=15/"
+  icon: "fas fa-map-marked"
+mastodon:
+  pre: "https://"
+matrix:
+  pre: "https://matrix.to/#/"
+  icon: "fab fa-connectdevelop"
+medium:
+  pre: "https://medium.com/@"
+patreon:
+  pre: "https://www.patreon.com/"
+phone:
+  pre: "tel:"
+  icon: "fas fa-phone"
+pinterest:
+  pre: "https://www.pinterest.com/"
+reddit:
+  pre: "https://www.reddit.com/user/"
+soundcloud:
+  pre: "https://soundcloud.com/"
+sms:
+  pre: "sms:"
+  pos: "?body=Hi"
+  icon: "fas fa-sms"
+stack-exchange:
+  pre: "https://stackexchange.com/users/"
+stack-overflow:
+  pre: "https://stackoverflow.com/users/"
+steam:
+  pre: "https://steamcommunity.com/id/"
+telegram:
+  pre: "https://t.me/"
+tumblr:
+  pre: "https://"
+  pos: ".tumblr.com/"
+twitch:
+  pre: "https://twitch.tv/"
+twitter:
+  pre: "https://twitter.com/"
+vimeo:
+  pre: "https://vimeo.com/"
+vk:
+  pre: "https://vk.com/"
+wordpress:
+  pre: "https://"
+  pos: ".wordpress.com/"
+youtube:
+  pre: "https://www.youtube.com/channel/"

_data/language.yml

@@ -0,0 +1,20 @@
+# Localization strings
+str_follow_on: "Follow on"
+str_rss_follow: "Follow RSS feed"
+str_share_on: "Share on"
+str_add_to: "Add to"
+str_email: "Email"
+str_tweet: "Tweet"
+str_pin_it: "Pin it"
+str_next_post: "Next post"
+str_previous_post: "Previous post"
+str_next_page: "Next"
+str_previous_page: "Prev"
+str_javascript_required_disqus: "Please enable JavaScript to view comments."
+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]
+
+# Localization settings 
+cusdis_lang: # zh-cn, es, tr, pt-BR

_data/social.yml

@@ -0,0 +1,16 @@
+# RSS specific
+rss: true         # Icons on the footer
+feed:
+  path: feed.xml  # RSS feed path
+
+# For the share button options at the bottom of the articles
+share:
+  email: true
+  facebook: true
+  linkedin: true
+  pinterest: true
+  pocket:
+  reddit: true
+  tumblr: true
+  twitter: true
+  wordpress:

_includes/aligner.html

@@ -0,0 +1,19 @@
+{% assign images = include.images | split: ',' %}
+
+{% if include.column == "auto" %}
+{% assign column = 100.0 | divided_by: images.size %}
+{% elsif include.column > 0 %}
+{% assign column = 100.0 | divided_by: include.column %}
+{% endif %}
+
+<div class="row">
+    {% for image in images %}
+    <div {% if column %} style="flex: {{ column }}%" {% else %} class="column" {% endif %}  >
+        <img {% if images.size == 1 %}class="single"{% endif %}
+             src="{{ image | prepend: 'assets/img/' | relative_url }}"
+             alt="{{ image | prepend: '/' | split: '/' | last }}">
+    </div>
+    {% endfor %}
+</div>
+
+{% assign column = false %}

_includes/blog/blog.liquid

@@ -0,0 +1,37 @@
+<div class="posts">
+    {% unless paginator.posts %}
+    <article><section class="post-content"><p>There are no blog posts</p></section></article>
+    {% endunless %}
+    {% for post in paginator.posts %}
+    <div class="post-teaser">
+        {% if post.thumbnail %}
+        <div class="post-img">
+            <a aria-label="{{ post.title }}" href="{{ post.url | relative_url }}">
+                <img alt="{{ post.title }}" src="{{ post.thumbnail | relative_url }}">
+            </a>
+        </div>
+        {% endif %}
+        <span>
+          <header>
+            <h1>
+              <a aria-label="{{ post.title }}" class="post-link" href="{{ post.url | relative_url }}">
+                {{ post.title }}
+              </a>
+            </h1>
+            {% include blog/post_info.liquid author=post.author date=post.date %}
+          </header>
+          {% if site.excerpt or site.theme_settings.excerpt %}
+              <div class="excerpt">
+                  {% if site.excerpt == "truncate" %}
+                     {{ post.content | strip_html | truncate: '250' | escape }}
+                  {% else %}
+                     {{ post.excerpt | strip_html | escape }}
+                  {% endif %}
+              </div>
+          {% endif %}
+      </span>
+    </div>
+    {% endfor %}
+</div>
+
+{% include blog/blog_nav.liquid %}

_includes/blog/blog_nav.liquid

@@ -0,0 +1,43 @@
+{% if paginator.total_pages > 1 %}
+<div class="pagination">
+    <div class="previous">
+        
+        {% if paginator.previous_page and paginator.previous_page != 1%}
+        <!-- << -->
+        <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ '/' | relative_url }}" class="button">
+            <span><i class="fas fa-angle-double-left"></i></span>
+        </a>
+        {% endif %}
+        
+        <!-- < previous -->
+        <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ paginator.previous_page_path | relative_url }}"
+           {% unless paginator.previous_page %}style="visibility:hidden"{% endunless %} class="button">
+            <span><i class="fas fa-chevron-left"></i></span>
+            {{ site.data.language.str_previous_page | default: "Prev" }}
+        </a>
+    </div>
+
+    <div class="page_number">
+        {{ paginator.page }} / {{ paginator.total_pages }}
+    </div>
+
+    <div class="next">
+        
+        <!-- next > -->
+        <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}" href="{{ paginator.next_page_path | relative_url }}"
+           {% unless paginator.next_page %}style="visibility:hidden"{% endunless %} class="button">
+            {{ site.data.language.str_next_page | default: "Next" }}
+            <span><i class="fas fa-chevron-right"></i></span>
+        </a>
+
+        {% if paginator.next_page and paginator.next_page != paginator.total_pages %}
+        <!-- >> -->
+        <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}"
+        href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" class="button">
+            <span><i class="fas fa-angle-double-right"></i></span>
+        </a>
+        {% endif %}
+        
+    </div>
+</div>
+{% endif %}

_includes/blog/post_info.liquid

@@ -0,0 +1,15 @@
+{% assign author = site.data.authors[include.author] %}
+{% 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" rel="noopener">{%- endif -%}
+    {% if author.avatar  %}
+      <img alt="Author's avatar" src="{{ author.avatar | relative_url }}" loading="lazy">
+    {% endif %}
+    <p class="meta">
+      {% if author.name %}{{ author.name }} - {% endif %}
+      {% assign x = date | date: "%m" | minus: 1 %}
+      {{ site.data.language.str_months[x] | default: date | date: "%B" }} {{ date | date: "%d, %Y" }}
+    </p>
+  {%- if author.url -%}</a>{%- endif -%}
+</div>

_includes/blog/post_nav.liquid

@@ -0,0 +1,19 @@
+<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' }}">
+            <p>{{ site.data.language.str_previous_post | default: "Previous post" }}</p>
+            {{ page.next.title }}
+        </a>
+    </div>
+    {% endif %}
+
+    {% if page.previous.url %}
+    <div id="next-post">
+        <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>
+    </div>
+    {% endif %}
+</div>

_includes/citation.html

@@ -0,0 +1,2 @@
+{%- assign citation = site.data.biblio | where:"key", include.key | first -%}
+<span class="cit-authors">{{citation.authors}}</span>, <span class="cit-title">{{citation.title}}</span>

_includes/default/footer.liquid

@@ -0,0 +1,12 @@
+<footer class="site-footer">
+    <p class="text">
+        {{ site.footer_text | default: "Powered by <a href='https://jekyllrb.com/'>Jekyll</a> with <a href='https://github.com/sylhare/Type-on-Strap'>Type on Strap</a>" }}</p>
+            <div class="footer-icons">
+                <ul>
+                <!-- Social icons from Font Awesome, if enabled -->
+                {% include social/icons.liquid %}
+                </ul>
+            </div>
+</footer>
+
+

_includes/default/head.liquid

@@ -0,0 +1,94 @@
+<head>
+    <meta charset="utf-8">
+    <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'))
+    </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>
+
+    <!-- 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">
+
+    {% 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>
+    {% endif %}
+
+    <!-- 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 9.1.1 -->
+    {% if site.mermaid %}
+    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({
+      startOnLoad:true,
+      theme: '{{ site.mermaid }}',
+    });"></script>
+    {% endif %}
+
+    <!-- Simple Jekyll Search 1.10.0 -->
+    <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
+
+    <!-- Google Analytics / Cookie Consent -->
+    <script>
+      const cookieName = 'cookie-notice-dismissed-{{ site.url }}';
+      const isCookieConsent = '{{ site.cookie_consent }}';
+      const analyticsName = '{{ site.google_analytics }}';
+      const analyticsNameGA4 = '{{ site.google_analytics_ga4 }}';
+    </script>
+
+    {% if site.cookie_consent %}
+        <span id="cookie-notice"><span>{{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }}
+          </span><a id="cookie-notice-accept" class="button">{{ site.data.language.str_cookie_approve | default: "Approve" }}</a>
+        </span>
+    {% endif %}
+    {% if site.google_analytics %}
+        <!-- Global site tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+    {% endif %}
+
+    <!-- seo tags -->
+    <meta property="og:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    {% unless page.layout == post %}
+    <meta property="og:type" content="website" />
+    {% endunless %}
+    {% seo %}
+
+    <!-- RSS -->
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
+    {% feed_meta %}
+
+    <!-- Twitter Cards -->
+    <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+    <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 }}">
+    {% endif %}
+    <meta name="twitter:card" content="{% unless page.thumbnail %}summary{% else %}summary_large_image{% endunless %}">
+    <meta name="twitter:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    <meta name="twitter:image:alt" content="{{ page.title | default: site.title }}">
+</head>

_includes/default/navbar.liquid

@@ -0,0 +1,45 @@
+<header class="site-header">
+
+    <!-- Logo and title -->
+	<div class="branding">
+        {% if site.avatar %}
+		<a href="{{ '/' | relative_url }}">
+			<img alt="logo img" class="avatar" src="{{ site.avatar | relative_url }}" loading="lazy"/>
+		</a>
+        {% endif %}
+        <a class="site-title" aria-label="{{ site.title }}" href="{{ '/' | relative_url }}">
+        {{ site.title }}
+		</a>
+	</div>
+
+    <!-- Toggle menu -->
+    <nav class="clear">
+    <a aria-label="pull" id="pull" class="toggle" href="#">
+    <i class="fas fa-bars fa-lg"></i>
+    </a>
+
+    <!-- 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 %}
+            <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%}
+                </a>
+            </li>
+            {% endunless %}
+            {% assign name_page = page.title | append: name_page %}
+        {% endfor %}
+
+        {% 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>
+        {% endif %}
+    </ul>
+
+	</nav>
+</header>

_includes/default/tags_list.liquid

@@ -0,0 +1,21 @@
+{% assign tags = include.tags | split:'|' | sort | uniq %}
+
+{% if tags.size > 0 %}
+  <div class="tag-list">
+    <ul>
+      {% if tags.size == 1 %}
+        <li class="meta">Tag</li>
+      {% else %}
+        <li class="meta">Tags</li>
+      {% endif %}
+
+      {% for tag in tags %}
+        <li><a class="button" href="{% unless 'Tags' == page.title %}{{ site.baseurl }}/tags{% endunless %}#{{ tag | cgi_escape }}">
+          <p><i class="fas fa-tag fa-fw fa-sm"></i> {{ tag }}</p>
+        </a></li>
+      {% endfor %}
+    </ul>
+  </div>
+{% else %}
+  <div class="tag-list"></div>
+{% endif %}

_includes/gallery.html

@@ -0,0 +1,22 @@
+<style>
+/* force scrollbar */
+html { overflow-y: scroll; }
+
+/* To overwrite page's padding, to get bigger images */
+/* article {padding:2%;} */
+</style>
+
+<div id='masonry' class="grid">
+<div class="grid-sizer"></div>
+<div class="gutter-sizer"></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;">
+    {% 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>

_includes/portfolio.html

@@ -0,0 +1,15 @@
+<!-- Portfolio Grid Section -->
+<div class="portfolio-grid">
+    {% for item in site.portfolio %}
+    <div class="portfolio-cell">
+        <a class="portfolio-link" data-keyboard="true" href="{{ item.url | relative_url }}">
+            <div class="caption" title="{{ item.title }}">
+                <div class="caption-content">
+                    <i class="fas fa-search-plus fa-3x"></i>
+                </div>
+            </div>
+            <img alt="" class="" src="{{ item.img | relative_url }}">
+        </a>
+    </div>
+    {% endfor %}
+</div>

_includes/social/cusdis.liquid

@@ -0,0 +1,13 @@
+<div class="comments" id="cusdis_thread"
+  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-title="{{ page.title }}"
+  data-theme="{{ site.color_theme }}"
+></div>
+
+{% if site.data.language.cusdis_lang %}
+<script defer src="https://cusdis.com/js/widget/lang/{{ site.data.language.cusdis_lang }}.js"></script>
+{% endif %}
+<script defer src="https://cusdis.com/js/cusdis.es.js"></script>

_includes/social/disqus.liquid

@@ -0,0 +1,12 @@
+<div class="comments">
+    <div id="disqus_thread"></div>
+    <script type="text/javascript">
+      var disqus_shortname = '{{ site.comments.disqus_shortname }}' || '{{ site.disqus_shortname }}';
+      (function() {
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+      })();
+    </script>
+    <noscript>{{ site.data.language.str_javascript_required_disqus | default: Please enable JavaScript to view comments." }}</noscript>
+</div>

_includes/social/icons.liquid

@@ -0,0 +1,36 @@
+{% 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' }}"
+       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>
+        </span>
+    </a>
+</li>
+{% endif %}
+
+{% for footer in site.data.icons %}
+    {% unless footer[1] == nil %}
+        {% assign brand = footer[0] %}
+        {% assign id = footer[1] %}
+        {% assign data = site.data.icons_builder[brand] %}
+        {% if data.icon == nil %}
+            {% assign icon = "fab fa-" | append: brand %}
+        {% else %}
+            {% assign icon = data.icon %}
+        {% endif %}
+        <li>
+            <a href="{{ data.pre | append: id | append: data.pos }}"
+               title="{{ site.data.language.str_follow_on }} {{ brand | remove: '-' | capitalize }}"
+               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>
+            </span>
+            </a>
+        </li>
+    {% endunless %}
+{% endfor %}

_includes/social/share_buttons.liquid

@@ -0,0 +1,92 @@
+{% if site.data.social.share.facebook or site.theme_settings.share_buttons.facebook
+   or site.data.social.share.twitter or site.theme_settings.twitter
+   or site.data.social.share.tumblr or site.theme_settings.tumblr
+   or site.data.social.share.pinterest or site.theme_settings.pinterest
+   or site.data.social.share.pocket or site.theme_settings.pocket
+   or site.data.social.share.reddit or site.theme_settings.reddit
+   or site.data.social.share.linkedin or site.theme_settings.linkedin
+   or site.data.social.share.wordpress or site.theme_settings.wordpress
+   or site.data.social.share.email or site.theme_settings.email %}
+
+<div class="share-buttons">
+    <ul class="share-buttons">
+        <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"
+               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>
+            </a>
+        </li>
+        {% 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 }}">
+                <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>
+        </li>
+        {% 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">
+                <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>
+        </li>
+        {% 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 }}">
+                <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>
+        </li>
+        {% 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">
+            <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>
+            </span>
+                <span class="sr-only">{{ site.data.social.language.str_add_to | default: "Add to" }} Pocket</span>
+            </a>
+        </li>
+        {% 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">
+                <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>
+        </li>
+        {% 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">
+                <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>
+        </li>
+        {% 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">
+                <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>
+        </li>
+        {% 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 }}">
+                <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>
+        {% endif %}
+    </ul>
+</div>
+
+{% endif %}

_includes/social/utterances.liquid

@@ -0,0 +1,8 @@
+<script src="https://utteranc.es/client.js"
+        repo='{{ site.comments.utterances.repo }}'
+        issue-term="{{ site.comments.utterances.issue-term}}"
+        theme="{% if site.comments.utterances.theme %}{{ site.comments.utterances.theme }}{% elsif site.color_theme == 'dark' %}github-dark{% else %}github-light{% endif %}"
+		{% if site.comments.utterances.label %}label="{{ site.comments.utterances.label }}"{% endif %}
+        crossorigin="anonymous"
+        async>
+</script>

_layouts/categories.liquid

@@ -0,0 +1,38 @@
+---
+layout: page
+---
+
+<div class="home">
+    <div id="categories">
+        <section class="bg"></section>
+        <ul class="category-clouds">
+            {% for category in site.categories %}
+                <a href="#{{ category | first | cgi_escape }}" class="category-anchor">
+                    <li>
+                        {{ category | first }}
+                        <!-- {{ category | last | size | times: 100 | divided_by: site.tags.size | plus: 50 | divided_by: 100.0 }} -->
+                        <!-- <span class="category-number">{{ category | last | size }}</span> -->
+                    </li>
+                </a>
+            {% endfor %}
+        </ul>
+        <div class="category-groups">
+            {% for category in site.categories %}
+                <div class="category-group">
+                    {% capture group %}{{ category | first }}{% endcapture %}
+                    <h4 id="{{ group }}" class="title">{{ group }}</h4>
+                    <div class="items">
+                        {% for post in site.categories[group] %}
+                            <a href="{{ post.url | relative_url }}" class="category-post-link">
+                                <div class="item">
+                                    <p class="meta">{{ post.date | date: "%B %-d, %Y" }}</p>
+                                    <p class="title">{{ post.title }}</p>
+                                </div>
+                            </a>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>

_layouts/custom.liquid

@@ -0,0 +1,37 @@
+---
+layout: default
+---
+
+<article {% if page.feature-img %}class="feature-image" {% endif %} style="padding:0;">
+    <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
+        {% unless page.hide_title %}
+        <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
+        {% endunless %}
+        {% if page.is_post %}
+        {% include blog/post_info.liquid author=page.author date=page.date %}
+        {% endif %}
+    </header>
+    <section class="post-content">{{ content }}</section>
+
+    <div style="display: inline-block;">
+        <!-- Social media shares -->
+        {% if include.is_post %} {% include social/share_buttons.html %} {% endif %}
+
+        <!-- Tag list -->
+        {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
+        {% include default/tags_list.liquid tags=tag_list %}
+    </div>
+
+</article>
+
+<!-- Post navigation -->
+{% if site.post_navigation %}
+{% include blog/post_nav.liquid %}
+{% endif %}
+
+<!-- Cusdis -->
+{% if site.cusdis_app_id %}{% include social/cusdis.liquid %}{% endif %}
+
+<!-- Disqus -->
+{% if site.disqus_shortname or site.theme_settings.disqus_shortname %}
+{% include social/disqus.liquid %}{% endif %}

_layouts/default.html

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

_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>

_layouts/page.liquid

@@ -0,0 +1,35 @@
+---
+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>
+        {% 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 %}
+
+</article>

_layouts/post.liquid

@@ -0,0 +1,81 @@
+---
+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 %}
+
+</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>

_layouts/search.liquid

@@ -0,0 +1,24 @@
+---
+layout: page
+---
+
+<!-- Html Elements for Search -->
+<input type="text" id="search-input" placeholder="Enter keywords..." class="search-bar" autofocus>
+<br>
+<br>
+<ul id="results-container"></ul>
+
+<section>
+    <script type="text/javascript">
+        SimpleJekyllSearch({
+            searchInput: document.getElementById('search-input'),
+            resultsContainer: document.getElementById('results-container'),
+            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,
+            fuzzy: false,
+            exclude: []
+        })
+    </script>
+</section>

_layouts/tags.liquid

@@ -0,0 +1,91 @@
+---
+layout: page
+---
+
+<div class="home">
+
+    <!-- cycles through posts to get tags -->
+    {% assign rawtags = "" %}
+    {% for post in site.posts %}
+    {% if post.tags.size > 0 %}
+    {% assign post_tags = post.tags | join:'|' | append:'|' %}
+    {% assign rawtags = rawtags | append:post_tags %}
+    {% endif %}
+    {% endfor %}
+
+    <!-- cycles through portfolio collection to get tags -->
+    {% assign portfolio = site.portfolio | map: 'tags' | join: ',' | split: ',' | uniq %}
+    {% for tag in portfolio %}
+    {% assign portfolio_tags = tag | join: '|' | append: '|' %}
+    {% assign rawtags = rawtags | append: portfolio_tags %}
+    {% endfor %}
+
+    <!-- cycles through pages to get tags -->
+    {% for page in site.pages %}
+    {% if page.tags.size > 0 %}
+    {% assign page_tags = page.tags | join:'|' | append:'|' %}
+    {% assign rawtags = rawtags | append:page_tags %}
+    {% endif %}
+    {% endfor %}
+
+    <!-- Displays the list of tags-->
+    {% include default/tags_list.liquid tags=rawtags %}
+
+    <!-- Displays the posts and pages that contains the tag-->
+    <div class="posts">
+        {% for tag in tags %}
+        <h3 id="{{ tag | cgi_escape }}" class="tag-anchor">
+            <a href="#{{ tag | cgi_escape }}"><i class="fas fa-tag fa-fw fa-sm"></i> {{ tag }}</a>
+            <a href="#{{ page.title }}" style="float: right"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"> </i> </a>
+
+        </h3>
+
+        <!-- Posts and collection for each tags -->
+        <div class="tag-posts">
+
+            <!-- Pages -->
+            {% for page in site.pages %}
+            {% if page.tags contains tag %}
+            <h5 class="tag-title">
+                <a href="{{ page.url | relative_url }}">
+                    <i class="far fa-file-image" aria-hidden="true"></i>
+                    {{ page.title }}
+                </a>
+                {% include blog/post_info.liquid date=page.date %}
+            </h5>
+            {% endif %}
+            {% endfor %}
+
+            <!-- Posts -->
+            {% for post in site.posts %}
+            {% if post.tags contains tag %}
+            <h5 class="tag-title">
+                <a href="{{ post.url | relative_url }}">
+                    <i class="far fa-file-alt" aria-hidden="true"></i>
+                    {{ post.title }}
+                </a>
+
+                {% include blog/post_info.liquid date=post.date %}
+            </h5>
+            {% endif %}
+            {% endfor %}
+
+            <!-- Portfolio -->
+            {% for note in site.portfolio %}
+            {% if note.tags contains tag %}
+            <h5 class="tag-title">
+                <a href="{{ note.url | relative_url }}">
+                    <i class="far fa-file" aria-hidden="true"></i>
+                    {{ note.title }}
+                </a>
+
+                {% include blog/post_info.liquid date=note.date %}
+            </h5>
+            {% endif %}
+            {% endfor %}
+
+        </div>
+        {% endfor %}
+
+    </div>
+</div>

_portfolio/cake.md

@@ -0,0 +1,21 @@
+---
+layout: post
+title: Cake
+feature-img: "assets/img/portfolio/cake.png"
+img: "assets/img/portfolio/cake.png"
+date: 27 September 2015
+tags: [Lorem, Ipsum]
+---
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
+sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+Use this area of the page to describe your project. 
+The icon above is part of a free icon set by Flat Icons. 

_portfolio/circus.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: Circus
+img: "assets/img/portfolio/circus.png"
+date: September 2014
+tags: [Ipsum]
+---
+
+![image]({{ page.img | relative_url }})
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+adipisci velit, sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+

_portfolio/gitlecture.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: Github
+img: "assets/img/portfolio/github.png"
+date: 20-10-2017
+tags: [Lorem]
+---
+
+![image]({{ page.img | relative_url }})
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+adipisci velit, sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+

_portfolio/hanoi.md

@@ -0,0 +1,19 @@
+---
+layout: post
+title: Tower of Hanoi
+img: "assets/img/portfolio/toh.png"
+date: September 2014
+---
+
+![image]({{ page.img | relative_url }})
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+adipisci velit, sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+

_portfolio/jekyllblog.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title: Jekyll
+feature-img: "assets/img/portfolio/cabin.png"
+img: "assets/img/portfolio/cabin.png"
+date: 2017-05-26
+---
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+adipisci velit, sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+

_portfolio/ninja.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: Ninja
+img: "assets/img/portfolio/ninja.png"
+date: April, 08 2014
+tags: [Lorem]
+---
+
+![image]({{ page.img | relative_url }})
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+adipisci velit, sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+

_portfolio/safe.md

@@ -0,0 +1,22 @@
+---
+layout: post
+title: Creative
+feature-img: "assets/img/portfolio/safe.png"
+img: "assets/img/portfolio/safe.png"
+date: August, 16 2014
+tags: [Ipsum]
+---
+
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
+sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+Use this area of the page to describe your project. 
+The icon above is part of a free icon set by Flat Icons. 

_portfolio/submarine.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: Lorem Ipsum
+feature-img: "assets/img/portfolio/submarine.png"
+img: "assets/img/portfolio/submarine.png"
+date: 2017-09-03
+---
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
+sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+Use this area of the page to describe your project. 
+The icon above is part of a free icon set by Flat Icons. 

_portfolio/tictactoe.md

@@ -0,0 +1,21 @@
+---
+layout: post
+title: Tic tac toe
+feature-img: "assets/img/portfolio/ttt.png"
+img: "assets/img/portfolio/ttt.png"
+date: September 2014
+---
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
+Nemo enim ipsam voluptatem <a>quia voluptas sit aspernatur</a> aut odit aut fugit, 
+sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
+sed quia non numquam eius <a>modi tempora incidunt</a> ut labore et dolore magnam aliquam quaerat voluptatem. 
+Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
+Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
+vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+Use this area of the page to describe your project. 
+The icon above is part of a free icon set by Flat Icons. 
+

_posts/2013-10-18-blogging-with-title.md

@@ -0,0 +1,12 @@
+---
+layout: post
+title: >
+    Blogging with title 
+tags: [Test, Image]
+---
+
+# I am a BIG title
+
+This is a very tiny tiny post with less than 250 letters.
+
+

_posts/2014-08-08-Markup-Syntax-Highlighting.md

@@ -0,0 +1,100 @@
+---
+layout: post
+title: "Markup: Syntax Highlighting"
+author: mmistakes
+tags: [Highlight, Markdown]
+categories: Syntax
+---
+
+Syntax highlighting[^1] is a feature that displays source code. 
+This feature facilitates writing in a structured language such as a programming language or a markup language as it makes import things visually distinct.
+
+
+### GFM Code Blocks
+
+GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`.
+
+```css
+#container {
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
+}
+```
+
+{% highlight scss linenos %}
+.highlight {
+  margin: 0;
+  padding: 1em;
+  font-family: $monospace;
+  font-size: $type-size-7;
+  line-height: 1.8;
+}
+{% endhighlight %}
+
+```html
+{% raw %}<nav class="pagination" role="navigation">
+  {% if page.previous %}
+    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+  {% endif %}
+  {% if page.next %}
+    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+  {% endif %}
+</nav><!-- /.pagination -->{% endraw %}
+```
+
+```ruby
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+```
+
+### Code Blocks in Lists
+
+Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
+
+1. Do step 1.
+2. Now do this:
+
+   ```ruby
+   def print_hi(name)
+     puts "Hi, #{name}"
+   end
+   print_hi('Tom')
+   #=> prints 'Hi, Tom' to STDOUT.
+   ```
+        
+3. Now you can do this.
+
+### GitHub Gist Embed
+
+An example of a Gist embed below:
+
+<script defer src="https://gist.github.com/sylhare/dad7ed1ef3d13614c77c4ebadf8a11c3.js"></script>
+
+Here is how it looks like:
+
+{% highlight html %}
+{% raw %}
+   <script src="https://gist.github.com/sylhare/dad7ed1ef3d13614c77c4ebadf8a11c3.js">
+   </script>
+{% endraw %}
+{% endhighlight %}
+
+<br>
+
+[^1]: {% include citation.html key="highlight" %}

_posts/2014-11-26-lorem-ipsum.md

@@ -0,0 +1,41 @@
+---
+layout: post
+title: The Real Lorem Ipsum
+tags: [Image, Color]
+color: turquoise
+excerpt_separator: <!--more-->
+categories: Demo
+---
+
+## Lorem Ipsum
+
+from _"de Finibus Bonorum et Malorum"_ written by Cicero in 45 BC.
+ <!--more-->
+Find out more on [lipsum.com](https://www.lipsum.com/). And if you like colors, check out the [http color trends](https://www.w3schools.com/colors/colors_trends.asp) from w3schools.
+
+### The standard Lorem Ipsum passage (since 1500s)
+
+"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+### Section 1.10.32 
+
+#### Latin
+"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
+
+
+#### Translation by H. Rackham (1914)
+"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
+
+### Section 1.10.33
+
+#### Latin
+
+"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
+
+
+#### Translation by H. Rackham (1914)
+
+"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
+
+
+

_posts/2014-11-27-whats-your-title.md

@@ -0,0 +1,31 @@
+---
+layout: post
+title: What's your title
+hide_title: true
+feature-img: assets/img/feature-img/story.jpeg
+author: mhagnumdw
+tags: [Test, Image]
+---
+
+This is an example of a post which includes a feature image that has a
+text, where you don't want to redisplay the title.
+Mind your image size in order for the text to be displayed where you want it to.
+The only limit is your imagination.
+
+Here is how the yaml looks inside the post:
+
+```yml
+title: What's your title
+hide_title: true
+feature-img: assets/img/feature-img/story.jpeg
+author: mhagnumdw
+tags: [Test, Lorem]
+```
+
+You may wonder, why is there a title when you are not actually displaying it. <br>
+Well that's due to some jekyll limitation:
+
+> You **can't** set the **title** to the **empty string**
+
+The title is used elsewhere than inside the post, for example in the blog page that list this post.
+An empty title would break those pages and possibly prevents jekyll to render your blog. 

_posts/2014-11-28-markdown-and-html.md

@@ -0,0 +1,104 @@
+---
+layout: post
+title: Markdown and HTML
+tags: [Katex, Markdown]
+author: rohanchandra
+categories: Syntax
+---
+
+Jekyll supports the use of [Markdown](http://daringfireball.net/projects/markdown/syntax) with inline HTML tags which makes it easier to quickly write posts with Jekyll, without having to worry too much about text formatting. A sample of the formatting follows.
+
+## Table of content
+
+<!-- To be placed at the beginning of the post, it is where the table of content will be generated -->
+* TOC
+  {:toc}
+* 
+You need to put this at the beginning of the page where you want the table of content to be displayed
+
+```html
+* TOC
+{:toc}
+```
+
+It will then render the markdown and html titles (lines that begins with `#` or using the `<h1></h1>` tages)
+
+
+## Title
+
+### Subtitle
+
+Tables have also been extended from Markdown:
+
+| First Header | Second Header |
+|--------------|---------------|
+| Content Cell | Content Cell  |
+| Content Cell | Content Cell  |
+
+Here's an example of an image, which is included using Markdown:
+
+![Image of a glass on a book]({{ "/assets/img/pexels/book-glass.jpeg" | relative_url }})
+
+This is another example of list:
+ 
+ - list of things
+   1. Sub list
+   2. of Other things
+   3. with numbers
+ - And many more
+   - Sub sub list
+     - can go on ...
+       - and on ...
+         - and on !
+   - That's it.
+   
+### Other subtitle
+
+Highlighting for code in Jekyll is done using Base16 or Rouge. This theme makes use of Rouge by default.
+
+{% highlight js %}
+// count to ten
+for (var i = 1; i <= 10; i++) {
+    console.log(i);
+}
+
+// count to twenty
+var j = 0;
+while (j < 20) {
+    j++;
+    console.log(j);
+}
+{% endhighlight %}
+
+### Math
+
+Type on Strap uses KaTeX to display maths. Equations such as $$S_n = a \times \frac{1-r^n}{1-r}$$ can be displayed inline.
+
+Alternatively, they can be shown on a new line:
+
+$$ f(x) = \int \frac{2x^2+4x+6}{x-2} $$
+
+And in your markdown file:
+
+```markdown
+$$ f(x) = \int \frac{2x^2+4x+6}{x-2} $$
+```
+
+
+### Expandable content
+
+Click on the expandable content to display it:
+
+<details>
+    <summary>Click here!</summary>
+    Now you see me
+</details>
+
+And in your markdown file:
+
+```html
+<details>
+    <summary>Click here!</summary>
+    Now you see me
+</details>
+```

_posts/2017-09-17-Use-Bootstrap.md

@@ -0,0 +1,116 @@
+---
+layout: post
+title: "Bootstrap"
+bootstrap: true
+tags: [Test]
+categories: Demo
+---
+
+This theme is compatible with Bootstrap if you choose to use it in your pages or posts.
+Here is a little demo with a code snippet, look at the source to see how the HTML and markdown get tangled.
+
+## Use bootstrap
+
+Add some custom Bootstrap in the custom layout!
+
+<img src="https://startbootstrap.com/assets/img/sb-logo.svg" alt="startbootstrap" width="500">
+
+### Snippet example
+
+If you are new to Bootstrap you can  always check the [documentation](https://getbootstrap.com/docs/4.1/getting-started/introduction/).<br>
+Here is an example from [startbootstrap.com](https://startbootstrap.com/snippets/portfolio-two-column).
+
+<!-- Page Content -->
+<div class="container">
+
+  <div class="row">
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project One</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Two</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Three</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Four</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Five</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Six</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /.row -->
+
+</div>
+<!-- /.container -->
+
+### Mix it with Markdown
+
+All the above was custom HTML with Bootstrap.
+You can also mix it up with some markdown.
+
+You can use the bootstrap's build in javascript API to control your event.
+Here is a code snippet for the [documentation](https://getbootstrap.com/docs/4.0/getting-started/javascript/):
+
+```js
+$('#myModal').on('show.bs.modal', function (e) {
+    if (!data) return e.preventDefault() // stops modal from being shown
+})
+```
+
+That's just for demo though, you would need to properly integrate your javascript in your page.
+Usually you would put any custom javascript script in the _assets_ folder under js and reference it in your page from there.
+
+So try it out using the `bootstrap: true` flag! 😉

_posts/2018-10-29-feature-images.md

@@ -0,0 +1,60 @@
+---
+layout: post
+title: Feature images
+feature-img: "assets/img/feature-img/desk-messy.jpeg"
+thumbnail: "assets/img/thumbnails/feature-img/desk-messy.jpeg"
+tags: [Test, Image]
+categories: Example
+---
+
+Hopefully you will find enough information about how to set images in your blog here.
+This is an example of a post which includes a feature image specified in the front matter of the post. 
+The feature image spans the full-width of the page, and is shown with the title on permalink pages:
+
+```yaml
+feature-img: "assets/img/feature-img/desk-messy.jpeg"
+thumbnail: "assets/img/thumbnails/feature-img/desk-messy.jpeg" 
+```
+
+You can also use a thumbnail, a smaller version of the same image to improve loading of the page.
+The thumbnail will also be used when you share your article on other platform (linkedin, whatsapp, facebook, ...).
+
+>  - And now it is working
+
+You can also add images aligned in your post using the `aligner` include.
+Make sure to separate all of the image path from in a string separated with `,`.
+It by default look into `assets/img/` so give the path from there, example:
+
+{% highlight ruby %}
+{% raw %}
+{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" %}
+{% endraw %}
+{% endhighlight %}
+
+{% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" %}
+
+
+Here you have two images side by side, but you can set more and set the amount per columns 
+(by specifying the number of columns or let it be automatic using `"auto"`):
+
+{% highlight ruby %}
+{% raw %}
+{% include aligner.html images="portfolio/cabin.png,portfolio/cake.png,portfolio/circus.png" column=3 %}
+{% endraw %}
+{% endhighlight %}
+
+{% include aligner.html images="portfolio/cabin.png,portfolio/cake.png,portfolio/circus.png" column=3 %}
+
+it also works with only one images, it is made to display it smaller than normally.
+However you can just use the Markdown way of doing it to get the image normal sized and centered.
+
+{% highlight ruby %}
+{% raw %}
+# Markdown way (bigger)
+![Travel]({{ "/assets/img/pexels/computer.jpeg" | relative_url}})
+# Aligner with only One (50% of width)
+{% include aligner.html images="pexels/computer.jpeg" %}
+{% endraw %}
+{% endhighlight %}
+
+{% include aligner.html images="pexels/computer.jpeg" %}

_posts/2019-05-18-color-post.md

@@ -0,0 +1,45 @@
+---
+layout: post
+title: Color Post
+tags: [Test, Color]
+color: brown
+author: sylhare
+categories: Example
+excerpt_separator: <!--more-->
+---
+
+# What a colorful post!
+
+This is an idea that came from [xukimseven/HardCandy-Jekyll](https://github.com/xukimseven/HardCandy-Jekyll) 
+looking at this cheerful and colorful theme, I wanted to enable something similar for Type-on-Strap.
+
+You can go fork and star _HardCandy-Jekyll_ too! 😉
+
+<!--more-->
+
+## How does it work?
+
+Basically you need to add just one thing, the color:
+
+```yml
+---
+layout: post
+title: Color Post
+color: brown
+---
+```
+
+It can either be a html color like `brown` (which look like red to me). Or with the rgb:
+
+```yml
+---
+layout: post
+title: Color Post
+color: rgb(165,42,42)
+---
+```
+
+The background used is `lineart.png` from [xukimseven](https://github.com/xukimseven) you can edit it in the config file. 
+If you want another one, put it in `/assets/img` as well. 
+
+> ⚠️ It's a bit hacking the css in the `post.html`

_posts/2019-06-30-sample-post.md

@@ -0,0 +1,34 @@
+---
+layout: post
+title: Sample post
+tags: [A Tag, Katex]
+excerpt_separator: <!--more-->
+---
+
+Consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. 
+Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. 
+<!--more-->
+Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.
+
+* Consectetur adipiscing elit
+* Donec a diam lectus
+* Sed sit amet ipsum mauris
+
+Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
+
+Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula *semper consectetur sagittis*, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum.
+
+{% include aligner.html images="pexels/travel.jpeg" column=1 %}
+
+Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.
+
+> Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque
+
+Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt.
+
+$$ \Theta \ne \Gamma $$
+
+Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci[^1]. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.
+
+[^1]: 
+    {% include citation.html key="ref1" %}

_posts/2019-11-02-Tech-stuff-example.md

@@ -0,0 +1,215 @@
+---
+layout: post
+title: Tech Stuff example
+color: rgb(250, 50, 50)
+feature-img: "assets/img/feature-img/circuit.jpeg"
+thumbnail: "assets/img/thumbnails/feature-img/circuit.jpeg"
+tags: [Mermaid, Highlight, Markdown]
+---
+
+Let's demo some code snippet, with some mermaid diagrams.
+Because if you put some code in your blog, you would at least make it:
+1. Searchable
+2. Good-looking
+
+## Search on code
+
+Search should be working even for complicated escape symbols.
+
+```bash
+sed -i 's/\"hostname\"\:.*$/\"hostname\"\: \"'$IPADDR'\"\,/g' open-falcon/agent/config/cfg.json
+```
+
+Or try searching for partial of a command, like this article should be returned when looking for "find grep"
+
+```bash
+find /etc -type f -exec cat '{}' \; | tr -c '.[:digit:]' '\n' | grep '^[^.][^.]*\.[^.][^.]*\.[^.][^.]*\.[^.][^.]*$'
+```
+
+## Code highlighting examples
+
+Because you might put code in your blog post, and you want to make sure it will look good in here. Plus that the search
+function will still be working!
+
+### XML
+
+Example from [W3C]
+```xml
+<part number="1976">
+  <name>Windscreen Wiper</name>
+  <description>The Windscreen wiper
+    automatically removes rain
+    from your windscreen, if it
+    should happen to splash there.
+    It has a rubber <ref part="1977">blade</ref>
+    which can be ordered separately
+    if you need to replace it.
+  </description>
+</part>
+```
+
+### Java
+
+java example
+
+```java
+import java.util.*;
+
+@Example
+public class Demo {
+  private static final String CONSTANT = "String";
+  private Object o;
+  /**
+   * Creates a new demo.
+   * @param o The object to demonstrate.
+   */
+  public Demo(Object o) {
+    this.o = o !== null ? o : new Object();
+    String s = CONSTANT + "Other example of text";
+    int i = 123 - 33 % 11;
+  }
+  public static void main(String[] args) {
+    Demo demo = new Demo();
+    System.out.println(demo.o.toString())
+  }
+}
+```
+
+### Javascript
+
+```javascript
+/**
+ * Does a thing
+ */
+function helloWorld(param1, param2) {
+    const example = `hello ${param1}`
+    var something = {
+        key: "value",
+        number: 1
+    };
+
+    // Do something
+    if (2.0 % 2 == something) {
+        console.log('Hello, world!');
+    } else {
+        return null;
+    }
+
+    // TODO comment
+}
+```
+
+### JSON
+
+```json
+{
+  "animals": {
+    "tiger": {
+      "name": "tiger",
+      "images": ["🐯", "🐅", "⻁"]
+    },
+    "turtle": {
+      "age": 126,
+      "image": "🐢"
+    },
+    "unicorn": {
+      "doesExist": true,
+      "image": "🦄"
+    }
+  }
+}
+```
+
+### Python
+
+```python
+import os
+
+
+def some_function(param_one="", param_two=0):
+    r'''A docstring'''
+    if param_one > param_two:  # interesting
+        print("Greater")
+    return (param_two - param_one + 1 + 0b10) or None
+
+
+class SomeClass:
+    """ dunno what I am doing """
+
+    def __init__(self):
+        pass
+```
+
+### YAML
+
+You can also render some yaml, like this `_config.yml`:
+
+```yml
+
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# This file, "_config.yml" is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+
+# SITE CONFIGURATION
+baseurl: "/Type-on-Strap"
+url: "https://sylhare.github.io"
+
+# THEME-SPECIFIC CONFIGURATION
+title: Type on Strap                                    # site's title
+description: "A website with blog posts and pages"      # used by search engines
+avatar: assets/img/triangle.png                         # Empty for no avatar in navbar
+favicon: assets/favicon.ico                             # Icon displayed in the tab
+
+remote_theme: sylhare/Type-on-Strap                     # If using as a remote_theme in github
+```
+
+### Mermaid
+
+Diagrams with mermaid, make sure it is enabled in the `_config.yml`.
+Here is a simple example:
+
+```html
+<!-- To generate a diagram -->
+<div class="mermaid">
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+</div>
+```
+
+That will be rendered into this:
+
+{% include aligner.html images="mermaid-example.png" column=1 %}
+
+You can also go with more complex features and diagrams from the [documentation](https://mermaid-js.github.io/mermaid/):
+
+<details>
+<summary>More complex diagram</summary>
+<div class="mermaid">
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+</div>
+</details>
+
+[W3C]: https://www.w3.org/standards/xml/core

_posts/2021-04-27-dark-mode.md

@@ -0,0 +1,98 @@
+---
+layout: post
+title: Dark Mode
+tags: [Katex, Mermaid, Markdown]
+categories: Demo
+---
+
+More colors with less light. Click the **half-moon** most top-right button to turn the lights ON/OFF.
+Here is a bit of everything, so you can check how the theme look, have fun! 👌
+
+
+# Headers
+## Level 2
+### Level 3
+#### Level 4
+##### Level 5
+###### Level 6
+ 
+# [Headers with links](http://localhost)
+## [Level 2](http://localhost)
+### [Level 3](http://localhost)
+#### [Level 4](http://localhost)
+##### [Level 5](http://localhost) 
+###### [Level 6](http://localhost)
+
+## Code highlight
+Mode specific code highlighting themes. [Kramdown](https://kramdown.gettalong.org/) which is responsible for the color highlighting may be more limited than your IDE.
+
+```python
+#!/usr/bin/env python
+"""
+Test file for syntax
+"""
+# TODO: Use dark mode
+from sys import os
+
+def foo(bar): 
+    try:
+        print(bar)
+    except NameError:
+        print("Variable bar is not defined")
+
+
+class Bar(object): 
+    def __init__(self):
+        foo(1)
+        self.octal = '\04'
+        self.text = """Example \t\n"""
+    
+    def __exit__(self, *args):
+        print('exit\u1111\xFF')
+        pass
+    
+    @staticmethod
+    def example():
+        assert (1.0 and 2L) or True
+        return { "example": [(1,), (r'raw', u'unicode')]}
+```
+
+## Tables
+
+| hex | dec | oct |
+| -   | -   | -   |
+| 0   | 0   | 0   |
+| 5   | 5   | 5   |
+| A   | 10  | 12  |
+| F   | 16  | 20  |
+| F5  | 21  | 25  |
+
+## KaTeX
+
+Some KaTeX diagrams to check in dark mode:
+
+$$
+\begin{CD}
+A @>a>> B \\
+@VbVV @AAcA \\
+C @= D
+\end{CD}
+$$
+
+$$\utilde{AB}$$
+
+## Mermaid
+
+<div class="mermaid">
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+</div>

_sass/base/_global.scss

@@ -0,0 +1,285 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+figure {
+  margin: 0;
+}
+
+html {
+  background: var(--background);
+}
+
+// Typography
+::selection {
+  background: var(--selection);
+}
+
+::-moz-selection {
+  background: var(--selection);
+}
+
+body {
+  color: var(--text);
+  font-family: $font-family-main;
+  font-size: $font-size;
+  word-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-family-headings;
+  line-height: 1.3;
+  margin: 0.67em 0;
+
+  a {
+    color: var(--text);
+  }
+
+}
+
+h1 {
+  font-size: 2.3em;
+}
+
+h2 {
+  font-size: 1.75em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.15em;
+}
+
+iframe,
+img,
+embed,
+object,
+video {
+  max-width: 100%;
+  padding: 0 9%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img[align=left] {
+  margin-right: 3%;
+}
+
+img[align=right] {
+  margin-left: 3%;
+}
+
+summary {
+  cursor: pointer;
+}
+
+/* ---- Responsive ---- */
+
+@media screen and (max-width: $break) {
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  h3 {
+    font-size: 1em;
+  }
+  h4, tr, th, .meta {
+    font-size: 0.9em;
+  }
+  p, li, td {
+    font-size: 0.8em;
+  }
+
+  iframe,
+  img,
+  embed,
+  object,
+  video {
+    max-width: 100%;
+    padding: 0 1%;
+  }
+}
+
+@media screen and (max-width: $sm-break) {
+  h1 {
+    font-size: 1.5em;
+  }
+  h2 {
+    font-size: 1em;
+  }
+  h3 {
+    font-size: 0.9em;
+  }
+  h4, th, tr, .meta {
+    font-size: 0.85em;
+  }
+  p, li, td {
+    font-size: 0.8em;
+  }
+  li li {
+    font-size: 0.95em;
+  }
+  li li * {
+    font-size: 1em;
+  }
+
+  table {
+    overflow-x: scroll;
+  }
+}
+
+blockquote {
+  border-left: 2px solid #9fd2e3;
+  margin: 1em 1em;
+  padding: 0.75em 1em;
+  background-color: var(--blockquote);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+blockquote *:last-child,
+footer *:last-child {
+  margin-bottom: 0;
+}
+
+table {
+  word-wrap: break-word;
+  table-layout: fixed;
+  width: 100%;
+  display: inline-block;
+}
+
+td,
+th {
+  padding: 0.5em 1em;
+  border: 1px solid var(--border);
+  text-align: left;
+}
+
+table,
+dl,
+kbd,
+samp {
+  margin: 1em 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 2em;
+}
+
+p,
+ol,
+ul,
+dl,
+details,
+.math-display {
+  line-height: 1.5;
+  margin-bottom: 1em;
+}
+
+// Lists within lists
+li {
+  p {
+    font-size: inherit;
+    display: inline;
+  }
+
+  & > ul,
+  & > ol {
+    margin-bottom: 0;
+    margin-left: 1em;
+  }
+}
+
+ol,
+ul {
+  list-style-position: outside;
+  margin-left: 1em;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid #fff;
+  margin: 1em 0;
+}
+
+a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+kbd {
+  background-color: #eee;
+  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;
+  display: inline-block;
+  font-size: .85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+details {
+  & > summary {
+    cursor: pointer;
+    display: list-item;
+  }
+
+  &[open] > summary {
+    color: var(--link);
+  }
+}
+
+// Cookie consent
+#cookie-notice {
+  padding: 0.5rem 1rem;
+  display: none;
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: rgba(2, 2, 2, 0.85);
+  color: lightgray;
+  z-index: 1000;
+
+  & a {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 0.6rem;
+  }
+}
+
+// Mermaid
+.mermaid {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 2%;
+
+  & > svg {
+    margin: auto;
+    display: block;
+    height: auto;
+    padding-bottom: 2em;
+    padding-top: 2em;
+    max-width: 100%;
+  }
+}
+

_sass/base/_highlight.scss

@@ -0,0 +1,304 @@
+// ==========================================================================
+//   Syntax highlighting
+// ==========================================================================
+
+div.highlighter-rouge,
+figure.highlight,
+.highlight code {
+  position: relative;
+  background: var(--base00);
+  color: var(--base07);
+  font-family: $monospace;
+  font-size: $font-size-code;
+  line-height: $font-height-code;
+  border-radius: $border-radius;
+
+
+  > pre,
+  pre.highlight {
+    margin: 0;
+    padding: 1em;
+  }
+}
+
+li .highlight * {
+  font-size: 14px;
+}
+
+pre .rouge-table,
+.highlight pre,
+.code pre {
+  margin: 0;
+  overflow: auto;
+}
+
+.rouge-table * {
+  font-size: 1em;
+}
+
+li div.highlighter-rouge {
+  margin-top: 0.5em;
+}
+
+div.highlighter-rouge,
+figure.highlight {
+  margin-bottom: 1em;
+}
+
+code.highlighter-rouge {
+  padding: 0.2em 0.4em;
+  font-size: $font-size-code;
+  background-color: var(--code-background);
+  color: var(--code-inline);
+  border-radius: 2px;
+  font-family: $monospace;
+  //filter: invert(100%) contrast(200%);
+}
+
+table.rouge-table {
+  margin-bottom: 0;
+  font-size: 1em;
+  width: 100%;
+  border: 0;
+
+  td {
+    padding: 0;
+    width: calc(100% - 1em);
+    border: 0;
+    /* line numbers*/
+    &.gutter,
+    &.rouge-gutter {
+      padding-right: 1em;
+      width: 2em;
+      color: var(--base04);
+      border-right: 1px solid var(--base04);
+      text-align: right
+    }
+
+    /* code */
+    &.code,
+    &.rouge-code {
+      padding-left: 1em
+    }
+  }
+
+  pre {
+    margin: 0
+  }
+}
+
+.highlight pre {
+  width: 100%;
+
+  ::selection {
+    background-color: var(--base02)
+  }
+}
+
+.highlight .hll {
+  background-color: var(--base06)
+}
+
+.highlight {
+  .bp{ /* Name.Builtin.Pseudo */
+    color: var(--base0c)  }
+  .c { /* Comment */
+    color: var(--base03) }
+  .cm{ /* Comment.Multiline */
+    color: var(--base03)  }
+  .cp{ /* Comment.Preproc */
+    color: var(--base03)  }
+  .c1{ /* Comment.Single */
+    color: var(--base03)  }
+  .cs{ /* Comment.Special */
+    color: var(--base03)  }
+  .dl{ /* String.Quotes 8 */
+    color: var(--base0a)  }
+  .err { /* Error */
+    color: var(--base0c) }
+  .gd{ /* Generic.Deleted */
+    color: var(--base0c)  }
+  .ge{ /* Generic.Emph */
+    font-style: italic  }
+  .gh{ /* Generic.Heading */
+    color: var(--base07);font-weight: bold  }
+  .gi{ /* Generic.Inserted */
+    color: var(--base0a)  }
+  .gp{ /* Generic.Prompt */
+    color: var(--base04);font-weight: bold  }
+  .gs{ /* Generic.Strong */
+    font-weight: bold  }
+  .gu{ /* Generic.Subheading */
+    color: var(--base08);font-weight: bold  }
+  .il{ /* Literal.Number.Integer.Long */
+    color: var(--base0e)  }
+  .k { /* Keyword */
+    color: var(--base0d) }
+  .kc{ /* Keyword.Constant */
+    color: var(--base0f)  }
+  .kd{ /* Keyword.Declaration */
+    color: var(--base0d)  }
+  .kn{ /* Keyword.Namespace */
+    color: var(--base0d)  }
+  .kp{ /* Keyword.Pseudo */
+    color: var(--base0d)  }
+  .kr{ /* Keyword.Reserved */
+    color: var(--base0d)  }
+  .kt{ /* Keyword.Type */
+    color: var(--base09)  }
+  .l{ /* Literal */
+    color: var(--base0e)  }
+  .ld{ /* Literal.Date */
+    color: var(--base0a)  }
+  .m{ /* Literal.Number */
+    color: var(--base0e)  }
+  .mb{ /* Literal.Bytes */
+    color: var(--base0e)  }
+  .mf{ /* Literal.Number.Float */
+    color: var(--base0e)  }
+  .mh{ /* Literal.Number.Hex */
+    color: var(--base0e)  }
+  .mi{ /* Literal.Number.Integer */
+    color: var(--base0e)  }
+  .mo{ /* Literal.Number.Oct */
+    color: var(--base0e)  }
+  .n{ /* Name */
+    color: var(--base07)  }
+  .na{ /* Name.Attribute */
+    color: var(--base0c)  }
+  .nb{ /* Name.Builtin */
+    color: var(--base0c)  }
+  .nc{ /* Name.Class */
+    color: var(--base07)  }
+  .no{ /* Name.Constant */
+    color: var(--base07)  }
+  .nd{ /* Name.Decorator */
+    color: var(--base0f)  }
+  .ni{ /* Name.Entity */
+    color: var(--base07)  }
+  .ne{ /* Name.Exception */
+    color: var(--base0c)  }
+  .nf{ /* Name.Function */
+    color: var(--base0b)  }
+  .nl{ /* Name.Label */
+    color: var(--base0c)  }
+  .nn{ /* Name.Namespace */
+    color: var(--base07)  }
+  .nt{ /* Name.Tag */
+    color: var(--base08)  }
+  .nv{ /* Name.Variable */
+    color: var(--base0c)  }
+  .nx{ /* Name.Other */
+    color: var(--base07)  }
+  .o{ /* Operator */
+    color: var(--base08)  }
+  .ow{ /* Operator.Word */
+    color: var(--base0d)  }
+  .p{ /* Punctuation */
+    color: var(--base05)  }
+  .pi{ /* Name.Property */
+    color: var(--base07)  }
+  .py{ /* Name.Property */
+    color: var(--base0d)  }
+  .s{ /* Literal.String */
+    color: var(--base0a)  }
+  .sa{ /* Literal.String.raw */
+    color: var(--base0a)  }
+  .sb{ /* Literal.String.Backtick */
+    color: var(--base0a)  }
+  .sc{ /* Literal.String.Char */
+    color: var(--base07)  }
+  .sd{ /* Literal.String.Doc */
+    color: var(--base04)  }
+  .s2{ /* Literal.String.Double */
+    color: var(--base0a)  }
+  .se{ /* Literal.String.Escape */
+    color: var(--base0e)  }
+  .sh{ /* Literal.String.Heredoc */
+    color: var(--base0a)  }
+  .si{ /* Literal.String.Interpol */
+    color: var(--base0e)  }
+  .sx{ /* Literal.String.Other */
+    color: var(--base0a)  }
+  .sr{ /* Literal.String.Regex */
+    color: var(--base0a)  }
+  .s1{ /* Literal.String.Single */
+    color: var(--base0a)  }
+  .ss{ /* Literal.String.Symbol */
+    color: var(--base0a)  }
+  .vc{ /* Name.Variable.Class */
+    color: var(--base0c)  }
+  .vg{ /* Name.Variable.Global */
+    color: var(--base0c)  }
+  .vi{ /* Name.Variable.Instance */
+    color: var(--base0c)  }
+  .w{ /* Text.Whitespace */
+    color: var(--base07)  }
+}
+
+// Fix Github syntax display
+.gist .blob-num {
+  width: 3.5% !important;
+}
+
+.gist {
+  th, td {
+    border-bottom: 0;
+  }
+}
+
+// For correct line number width in Github Gists
+.gist table tbody tr td {
+  box-sizing: content-box;
+}
+
+// Fix nbconvert dataframe
+.dataframe tbody {
+  font-size: 0.8em;
+  border-color: white;
+
+  tr {
+    :nth-child(even) {
+      background-color: #f8f8f8;
+    }
+
+    th {
+      border-top: 0;
+      border-left: 0;
+      border-bottom: 0;
+    }
+
+
+    td {
+      padding: 0;
+      border: 0;
+      text-align: center;
+    }
+  }
+
+
+}
+
+.dataframe thead tr {
+  :nth-child(n+2) {
+    color: black;
+    //width: 100px;
+
+    font-size: 0.75em;
+    text-align: center !important;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  :first-child {
+    border-top: 0;
+    border-left: 0;
+  }
+
+}
+
+table.dataframe {
+  border: 0 solid var(--border);
+  border-collapse: collapse;
+}

_sass/base/_utility.scss

@@ -0,0 +1,101 @@
+// 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;
+  }
+}
+
+%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-header {
+  padding: $padding-medium $padding-large;
+  @media (min-width: $xl-break) {
+    padding: $padding-large $padding-large;
+  }
+  @media (max-width: $sm-break) {
+    padding: $padding-large;
+  }
+}
+
+.txt-shadow {
+  text-shadow: 0.07em 0.10em 0.15em var(--text-shadow);
+}
+
+.subtle-txt-shadow {
+  text-shadow: 1px 1px 2px var(--text-shadow);
+}
+
+// Buttons
+.button {
+  border-radius: 0.3em;
+  border: 1px solid;
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.5em 0.75em;
+}
+
+a.button {
+  @extend .button-link;
+}
+
+.button-link {
+  &:hover {
+    background: var(--link);
+    border: 1px solid var(--link);
+    color: var(--background);
+    text-decoration: none;
+    filter: none;
+  }
+}
+
+.body-link {
+  &:hover {
+    text-decoration: underline;
+    filter: brightness(0.85);
+  }
+}
+
+.post-link {
+  &:hover {
+    text-decoration: none;
+    color: var(--link);
+  }
+}
+
+// States
+.disabled {
+  opacity: 0.7;
+}
+
+// Custom
+.text-center {
+  text-align: center;
+}
+
+.right {
+  float: right;
+}

_sass/base/_variables.scss

@@ -0,0 +1,136 @@
+/* TYPOGRAPHY */
+$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+$font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+$font-size: 1.25em;
+
+$monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif !default;
+$font-size-code: 0.85em !default;
+$font-height-code: 1.3em !default;
+$border-radius: 4px !default;
+
+/* PADDING */
+$padding-x-large: 23%;
+$padding-large: 9%;
+$padding-medium: 6%;
+$padding-small: 4%;
+$padding-x-small: 3%;
+$title-padding: 1%;
+$feature-image-padding: 10%;
+
+/* MOBILE */
+$xl-break: 2000px;
+$l-break: 1400px;
+$m-break: 1000px;
+$break: 768px;
+$sm-break: 576px;
+$x-sm-break: 320px;
+
+
+/* THEME COLOR SCHEMES */
+html, html[data-theme="light"] {
+  --background: #ffffff;
+  --blockquote: #eef7fa;
+  --selection: #d4d4d4;
+  --meta: #595959;
+  --link: #0072B5;
+  --header-background: #24292e;
+  --header-text: #ffffff;
+  --header-link: #383838;
+  --code-background: #E0E0E0;
+  --code-inline: #24292e;
+  --text-shadow: #3f3f3f;
+  --text: #262626;
+  --h1: #262626;
+  --h2: #262626;
+  --h3: #262626;
+  --h4: #262626;
+  --h5: #262626;
+  --h6: #262626;
+  --border: rgba(0, 0, 0, 0.2);
+}
+
+html[data-theme="dark"] {
+  --background: #22272e; // brand, background
+  --blockquote: #373e47; // blockquote
+  --selection: #545d68; // selection
+  --meta: #909dab; // meta
+  --link: #00a8e0; // theme, link, link shadow header bg
+  --header-background: #2A3444; // Color before header image load
+  --header-text: #e7f3f4; // header text, feature img text
+  --header-link: #adbac7; // header link, search color
+  --code-background: #2A3444;
+  --code-inline: #d9b600;
+  --text-shadow: #2d333b; // text shadow
+  --text: #cdd9e5; // text
+  --h1: #d40059; // headers
+  --h2: #b37eff;
+  --h3: #ff66c2;
+  --h4: #00af9e;
+  --h5: #6bac00;
+  --h6: #ff5c00;
+  --border: rgba(255, 255, 255, 0.5); // border
+  --cusdis--color-text-default: var(--text);
+  --cusdis--color-comment-username-text: var(--link);
+}
+
+/* BASE16 CODE HIGHLIGHT */
+// Material Theme
+html, html[data-theme="light"] {
+  --base00: #302f2d; // Default Background
+  --base01: #2e3c43; // Lighter Background (Used for status bars) - NOT USED
+  --base02: #314549; // Selection Background
+  --base03: #546e7a; // Comments, Invisible, Line Highlighting
+  --base04: #b2ccd6; // Dark Foreground (Used for status bars)
+  --base05: #eeffff; // Punctuation
+  --base06: #eeffff; // Highlight, Light Background
+  --base07: #ffffff; // Default Foreground, Default text color
+  --base08: #f07178; // Operators (and Parenthesis, Caret, Delimiters)
+  --base09: #f78c6c; // Classes, Markup Bold, Search Text Background
+  --base0a: #ffcb6b; // Strings, Inherited Class, Markup Code, Diff Inserted
+  --base0b: #98c379; // Functions, Methods, Attribute IDs, Headings
+  --base0c: #89ddff; // Support, Regular Expressions, Escape Characters, Markup Quotes
+  --base0d: #82aaff; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+  --base0e: #c792ea; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+  --base0f: #ff5370; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+}
+
+// Supernova Theme
+html[data-theme="dark"] {
+  --base00: #373e47; // Default Background
+  --base01: #444c56; // Lighter Background (Used for status bars, line number and folding marks)
+  --base02: #545d68; // Selection Background
+  --base03: #909dab; // Comments, Invisible, Line Highlighting
+  --base04: #adbac7; // Dark Foreground (Used for status bars)
+  --base05: #cdd9e5; // Default Foreground, Caret, Delimiters, Operators
+  --base06: #e7f3f4; // Light Foreground (Not often used)
+  --base07: #ffffff; // Light Background (Not often used)
+  --base08: #d40059; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+  --base09: #ff5c00; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+  --base0a: #d9b600; // Classes, Markup Bold, Search Text Background
+  --base0b: #6bac00; // Strings, Inherited Class, Markup Code, Diff Inserted
+  --base0c: #00a8e0; // Support, Regular Expressions, Escape Characters, Markup Quotes
+  --base0d: #b37eff; // Functions, Methods, Attribute IDs, Headings
+  --base0e: #00af9e; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+  --base0f: #ff66c2; // Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
+}
+
+// Monokai Theme
+//html[data-theme="dark"] {
+//  --base00: #272822; // Default Background
+//  --base01: #383830; // Lighter Background (Used for status bars)
+//  --base02: #49483e; // Selection Background
+//  --base03: #75715e; // Comments, Invisible, Line Highlighting
+//  --base04: #a59f85; // Dark Foreground (Used for status bars)
+//  --base05: #f8f8f2; // Light Foreground (Not often used)
+//  --base06: #f5f4f1; // Light Background (Not often used)
+//  --base07: #f9f8f5; // Default text color
+//  --base08: #f92672; // Parenthesis, Caret, Delimiters, Operators
+//  --base09: #fd971f; // Classes, Markup Bold, Search Text Background
+//  --base0a: #e6db74; // Strings, Inherited Class, Markup Code, Diff Inserted
+//  --base0b: #a6e22e; // Functions, Methods, Attribute IDs, Headings
+//  --base0c: #a1efe4; // Support, Regular Expressions, Escape Characters, Markup Quotes
+//  --base0d: #66d9ef; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+//  --base0e: #ae81ff; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+//  --base0f: #cc6633; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+//}

_sass/external/_font-awesome.scss

@@ -0,0 +1,20 @@
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+$fa-inverse: var(--background);
+@import 'font-awesome/variables';
+@import 'font-awesome/mixins';
+@import 'font-awesome/core';
+@import 'font-awesome/larger';
+@import 'font-awesome/fixed-width';
+@import 'font-awesome/list';
+@import 'font-awesome/bordered-pulled';
+@import 'font-awesome/animated';
+@import 'font-awesome/rotated-flipped';
+@import 'font-awesome/stacked';
+@import 'font-awesome/icons';
+@import 'font-awesome/screen-reader';
+@import 'font-awesome/solid';
+@import 'font-awesome/regular';
+@import 'font-awesome/brands';

_sass/external/_pacifico.scss

@@ -0,0 +1,17 @@
+/*!
+ * Font: SIL OFL 1.1, CSS: MIT License
+ */
+
+$pacifico-font-path: "../../assets/fonts/Pacifico" !default;
+
+@font-face {
+    font-family: 'Pacifico';
+    src: url('#{$pacifico-font-path}/Pacifico.eot'); /* IE9 Compat Modes */
+    src: url('#{$pacifico-font-path}/Pacifico.eot?#iefix') format('embedded-opentype'),
+         url('#{$pacifico-font-path}/Pacifico.woff2') format('woff2'),
+         url('#{$pacifico-font-path}/Pacifico.woff') format('woff'),/* Modern Browsers */
+         url('#{$pacifico-font-path}/Pacifico.ttf') format('truetype'),/* Safari, Android, iOS */
+         url('#{$pacifico-font-path}/Pacifico.svg#Pacifico') format('svg');/* Legacy iOS */
+    font-weight: normal;
+    font-style: normal;
+}

_sass/external/_reset.scss

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

_sass/external/_source-sans-pro.scss

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/)
+ * (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+$ssp-font-path: "../../assets/fonts/source-sans-pro" !default;
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-display: auto;
+  font-weight: 400;
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), url('#{$ssp-font-path}/source-sans-pro-italic.woff2') format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-display: auto;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold Italic"), local("SourceSansPro-BoldItalic"), url('#{$ssp-font-path}/source-sans-pro-bold-italic.woff2') format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-display: auto;
+  font-weight: 400;
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url('#{$ssp-font-path}/source-sans-pro-regular.woff2') format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-display: auto;
+  font-weight: 700;
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url('#{$ssp-font-path}/source-sans-pro-bold.woff2') format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

_sass/external/font-awesome/_animated.scss

@@ -0,0 +1,20 @@
+// Animated Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

_sass/external/font-awesome/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+  padding: .2em .25em .15em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fab {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}

_sass/external/font-awesome/_brands.scss

@@ -0,0 +1,23 @@
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.eot');
+  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
+}
+
+.fab {
+  font-family: 'Font Awesome 5 Brands';
+  font-weight: 400;
+}

_sass/external/font-awesome/_core.scss

@@ -0,0 +1,21 @@
+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fad,
+.fab {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+%fa-icon {
+  @include fa-icon;
+}

_sass/external/font-awesome/_fixed-width.scss

@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}

_sass/external/font-awesome/_larger.scss

@@ -0,0 +1,23 @@
+// Icon Sizes
+// -------------------------
+
+// makes the font 33% larger relative to the icon container
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -.0667em;
+}
+
+.#{$fa-css-prefix}-xs {
+  font-size: .75em;
+}
+
+.#{$fa-css-prefix}-sm {
+  font-size: .875em;
+}
+
+@for $i from 1 through 10 {
+  .#{$fa-css-prefix}-#{$i}x {
+    font-size: $i * 1em;
+  }
+}

_sass/external/font-awesome/_list.scss

@@ -0,0 +1,18 @@
+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  list-style-type: none;
+  margin-left: $fa-li-width * 5/4;
+  padding-left: 0;
+
+  > li { position: relative; }
+}
+
+.#{$fa-css-prefix}-li {
+  left: -$fa-li-width;
+  position: absolute;
+  text-align: center;
+  width: $fa-li-width;
+  line-height: inherit;
+}

_sass/external/font-awesome/_mixins.scss

@@ -0,0 +1,56 @@
+// Mixins
+// --------------------------
+
+@mixin fa-icon {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
+}

_sass/external/font-awesome/_regular.scss

@@ -0,0 +1,23 @@
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.eot');
+  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
+  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 400;
+}

_sass/external/font-awesome/_rotated-flipped.scss

@@ -0,0 +1,24 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root {
+  .#{$fa-css-prefix}-rotate-90,
+  .#{$fa-css-prefix}-rotate-180,
+  .#{$fa-css-prefix}-rotate-270,
+  .#{$fa-css-prefix}-flip-horizontal,
+  .#{$fa-css-prefix}-flip-vertical,
+  .#{$fa-css-prefix}-flip-both {
+    filter: none;
+  }
+}

_sass/external/font-awesome/_screen-reader.scss

@@ -0,0 +1,5 @@
+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only; }
+.sr-only-focusable { @include sr-only-focusable; }

_sass/external/font-awesome/_solid.scss

@@ -0,0 +1,24 @@
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@import 'variables';
+
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.eot');
+  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
+  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
+  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}

_sass/external/font-awesome/_stacked.scss

@@ -0,0 +1,31 @@
+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  display: inline-block;
+  height: 2em;
+  line-height: 2em;
+  position: relative;
+  vertical-align: middle;
+  width: ($fa-fw-width*2);
+}
+
+.#{$fa-css-prefix}-stack-1x,
+.#{$fa-css-prefix}-stack-2x {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.#{$fa-css-prefix}-stack-1x {
+  line-height: inherit;
+}
+
+.#{$fa-css-prefix}-stack-2x {
+  font-size: 2em;
+}
+
+.#{$fa-css-prefix}-inverse {
+  color: $fa-inverse;
+}