Support custom homepage greeting message (#66)

* Support custom greeting message in homepage
Co-authored-by: Emruz Hossain <emruz@appscode.com>

.github/workflows/autoprefixer.yml

@@ -0,0 +1,35 @@
+name: Autoprefixer
+on:
+  push:
+    branches:
+      - master
+jobs:
+  autoprefixer:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout to latest commit
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Run autoprefixer
+        run: |
+          npm install postcss-cli autoprefixer --save-dev
+          npm run autoprefixer
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          branch: autoprefixer
+          branch-suffix: timestamp
+          commit-message: add vendor specific css prefixes
+          title: "Add vendor specific CSS prefixes"
+          body: |
+            This PR adds vendor specific CSS prefixes using [postcss/autoprefixer](https://github.com/postcss/autoprefixer).
+
+            >This PR has been created automatically by Github Action [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request).
+          labels: enhancement
+          reviewers: hossainemruz

.gitignore

@@ -1 +1,2 @@
-.vscode/
+.vscode/
+node_modules/

README.md

@@ -75,9 +75,12 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # copyright
+  # Copyright Notice
   copyright: © 2020 Copyright.
 
+  # Meta description for your site.  This will help the search engines to find your site.
+  description: Portfolio and personal blog of Jane Doe.
+
   # background image of the landing page
   background: "images/background.jpg"
 
@@ -113,6 +116,8 @@ params:
     name: "Jane Doe"
     nickname: "Jane"
     image: "images/avatar.png"
+    # greeting message before your name. it will default to "Hi! I am" if not provided
+    greeting: "Hi, I am"
     # give your some contact information. they will be used in the footer
     contactInfo:
       email: "janedoe@example.com"
@@ -126,6 +131,9 @@ params:
 
 You can just copy the content for `config.yaml` files from `theme/toha/exampleSite/config.yaml`.
 
+If you want to customize the any of the CSS styles on your site, create a
+`static/assets/css/style.css` file and add any custom CSS there.
+
 ## Usage
 
 Run your hugo site with this theme.
@@ -134,11 +142,9 @@ Run your hugo site with this theme.
 hugo server -w
 ```
 
-Don't panic if the generated site does not look like what have you seen in the demo. Now, you have to provide some data in `data` folder of your site.
+When you first run your site, it will start with the default parameters. It should look similar to the [example site](https://toha.netlify.app) except it will not have any sections in the homepage. Those sections are added via some data files.
 
-Follow the posts giving step by step instructions for configuring your data folder from [here](https://toha.netlify.app/posts/configuration/home-section/).
+You can configure your site by following the step by step guides from [here](https://toha.netlify.app/posts/configuration/).
-
-You can also follow the sample format given in `themes/toha/exampleSite/data` directory.
 
 ## Shortcodes
 

exampleSite/config.yaml

@@ -24,9 +24,12 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # copyright
+  # Copyright Notice
   copyright: © 2020 Copyright.
 
+  # Meta description for your site.  This will help the search engines to find your site.
+  description: Portfolio and personal blog of Jane Doe.
+
   # background image of the landing page
   background: "images/background.jpg"
 
@@ -36,6 +39,7 @@ params:
   logo:
     main: /assets/images/main-logo.png
     inverted: /assets/images/inverted-logo.png
+    favicon: /assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
@@ -62,6 +66,8 @@ params:
     name: "Jane Doe"
     nickname: "Jane"
     image: "images/avatar.png"
+    # greeting message before your name. it will default to "Hi! I am" if not provided
+    greeting: "Hi, I am"
     # give your some contact information. they will be used in the footer
     contactInfo:
       email: "janedoe@example.com"

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "header" }}
-    <link rel="stylesheet" href="/assets/css/list.css">
+    <link rel="stylesheet" href="/assets/css/layouts/list.css">
     <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 

layouts/_default/single.html

@@ -1,9 +1,10 @@
 {{ define "header" }}
+<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
 />
-<link rel="stylesheet" href="/assets/css/single.css" />
+<link rel="stylesheet" href="/assets/css/layouts/single.css" />
 <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
@@ -36,7 +37,7 @@
       <!--Hero Area-->
       <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
       </div>
-  
+
       <!--Content Start-->
       <div class="page-content">
         <div class="author-profile ml-auto align-self-lg-center">
@@ -44,15 +45,15 @@
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
         </div>
-  
+
         <div class="title">
           <h1>{{ .Page.Title }}</h1>
         </div>
-  
+
         <div class="post-content" id="post-content">
           {{ .Page.Content }}
         </div>
-  
+
         <!--- Improve this page button --->
         {{ if .Site.Params.GitRepo }}
           <div class="btn-improve-page">
@@ -62,7 +63,7 @@
               </a>
           </div>
         {{ end }}
-  
+
         <!---Next and Previous Navigator -->
       <hr />
         {{ partial "navigators/next-prev-navigator.html" . }}

layouts/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <title>{{- .Site.Title -}}</title>
+    <meta name="description" content="{{ .Site.Params.description }}" />
     <!-- import common headers -->
     {{- partial "header.html" . -}}
 

layouts/partials/header.html

@@ -4,7 +4,7 @@
 
 <!-- ============ import common css ========== -->
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
-<link rel="stylesheet" href="/assets/css/main.css" />
+<link rel="stylesheet" href="/assets/css/layouts/main.css" />
 <link rel="stylesheet" href="/assets/css/style.css" />
 <link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
 
@@ -13,7 +13,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
-<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
+<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png"}}" />
 
 <!--================= custom style overrides =========================-->
 <link rel="stylesheet" href="/assets/css/style.css" />

layouts/partials/helpers/get-author-name.html

@@ -1,4 +1,4 @@
-{{ $authorName:= "John Doe"}}
+{{ $authorName:= .Site.Params.author.name }}
 {{ if .Site.Data.site.author}}
     {{ $authorName = .Site.Data.site.author.name }}
 {{ end}}

layouts/partials/sections/home.html

@@ -1,3 +1,13 @@
+{{ $greeting:="Hi! I am" }}
+{{ if .Site.Params.author.greeting }}
+  {{ $greeting = .Site.Params.author.greeting }}
+{{ end }}
+{{ $name:="Jane Doe" }}
+{{ if .Site.Params.author.nickname }}
+  {{ $name = .Site.Params.author.nickname }}
+{{ else if .Site.Params.author.name }}
+  {{ $name = .Site.Params.author.name }}
+{{ end }}
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
@@ -7,15 +17,7 @@
     <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
-    <h1 class="greeting">Hi, I am
+    <h1 class="greeting"> {{ $greeting }} {{ $name }}</h1>
-      {{ if .Site.Params.author.nickname }}
-        {{ .Site.Params.author.nickname }}
-      {{ else if .Site.Params.author.name }}
-        {{ .Site.Params.author.name }}
-      {{ else }}
-        Jane Doe
-      {{ end }}
-    </h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>

package-lock.json

@@ -0,0 +1,956 @@
+{
+  "name": "toha",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@nodelib/fs.scandir": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
+      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.3",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+      "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
+      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.3",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
+      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
+      "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001111",
+        "electron-to-chromium": "^1.3.523",
+        "escalade": "^3.0.2",
+        "node-releases": "^1.1.60"
+      }
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001118",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001118.tgz",
+      "integrity": "sha512-RNKPLojZo74a0cP7jFMidQI7nvLER40HgNfgKQEJ2PFm225L0ectUungNQoK3Xk3StQcFbpBPNEvoWD59436Hg==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz",
+      "integrity": "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.4.0"
+      }
+    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
+      "dev": true
+    },
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "dev": true,
+      "requires": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "dependency-graph": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
+      "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.3.550",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.550.tgz",
+      "integrity": "sha512-MWDHoJsSieBaJ6mObvi3V0eKZufR1iMJl56VIGdXCgFHyCUbVDGm2IMXUNjDxgbGbKa3tA5+zJmHuBQqRxGiLA==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escalade": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
+      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+      "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fastq": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "fs-extra": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+      "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^1.0.0"
+      }
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
+      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+      "dev": true
+    },
+    "glob-parent": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "globby": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
+      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
+      "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^1.0.0"
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.0.1"
+      }
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.60",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
+      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "7.0.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      }
+    },
+    "postcss-cli": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.1.tgz",
+      "integrity": "sha512-bYQy5ydAQJKCMSpvaMg0ThPBeGYqhQXumjbFOmWnL4u65CYXQ16RfS6afGQpit0dGv/fNzxbdDtx8dkqOhhIbg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.9.0",
+        "fs-extra": "^9.0.0",
+        "get-stdin": "^7.0.0",
+        "globby": "^11.0.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "postcss-reporter": "^6.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "yargs": "^15.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-reporter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
+      "integrity": "sha512-LpmQjfRWyabc+fRygxZjpRxfhRf9u/fdlKf4VHG4TSPbV2XNsuISzYW1KL+1aQzx53CAppa1bKG4APIB/DOXXw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "lodash": "^4.17.11",
+        "log-symbols": "^2.2.0",
+        "postcss": "^7.0.7"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
+    "readdirp": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+      "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "resolve-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+      "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "universalify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+      "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+      "dev": true
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "y18n": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "toha",
+  "version": "1.0.0",
+  "description": "A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist design and responsiveness.",
+  "main": "index.js",
+  "scripts": {
+    "autoprefixer": "postcss static/assets/css/*/*.css --use autoprefixer -r --no-map"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hossainemruz/toha.git"
+  },
+  "author": "Emruz Hossain",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hossainemruz/toha/issues"
+  },
+  "homepage": "https://github.com/hossainemruz/toha#readme",
+  "devDependencies": {
+    "autoprefixer": "^9.8.6",
+    "postcss-cli": "^7.1.1"
+  }
+}

static/assets/css/layouts/list.css

@@ -67,6 +67,8 @@
 }
 
 .content-cards .paginator {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
   margin: auto;
 }
@@ -89,6 +91,8 @@
   margin-right: auto;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -163,6 +167,7 @@
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     position: relative;
+    transition: all ease-out 0.3s;
   }
 
   .post-card-holder .post-card {
@@ -177,45 +182,6 @@
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
   .post-card-holder .post-card {
     width: 50%;
   }
@@ -228,52 +194,6 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
-  .post-card-holder .post-card {
-    width: 50%;
-  }
-
-  .content-section.hide .post-card-holder .post-card {
-    width: 100%;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -296,35 +216,24 @@
     width: 100%;
     padding-left: 0;
     padding-right: 0;
+    transition: all ease-out 0.3s;
   }
 
   .content-section.hide .content {
     margin-top: 0;
     padding-top: 0;
-  }
+    transition: all ease-out 0.3s;
-
-  #toc-toggler {
-    visibility: hidden;
   }
 
   .content-cards {
     padding-top: 20px;
     padding-left: 0px;
-    transition: all ease-out 0.5s;
+    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
-  .post-card-holder {
+  .content-section.hide .post-card-holder {
-    margin: 0;
+    margin-top: 0.5rem;
-    margin-top: 1.5rem;
+    transition: all ease-out 0.3s;
-    padding-right: 0;
-    padding-left: 0;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .post-card-holder.hide {
-    margin-top: 0;
   }
 
   .post-card-holder .post-card {

static/assets/css/layouts/main.css

@@ -54,7 +54,6 @@ a:hover {
   border-color: #3c4858;
   color: #e5e9f2;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .btn-dark:hover,
@@ -62,7 +61,6 @@ a:hover {
   background-color: #248aaa;
   border-color: #248aaa;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .btn-outline-info {
@@ -116,7 +114,6 @@ img.right {
 .card {
   box-shadow: none;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   overflow: hidden;
 }
 
@@ -135,26 +132,23 @@ img.right {
   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
   border: 1px solid #fff;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .card .card-head {
   height: 172px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   overflow: hidden;
 }
 
 .card-img-top {
   transition: all 0.3s ease-out !important;
-  -webkit-transition: all 0.3s ease-out !important;
 }
 
 .card:hover .card-head .card-img-top,
 .card:focus .card-head .card-img-top {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   transform: scale(1.2);
-  -webkit-transform: scale(1.2);
 }
 
 .card-body {
@@ -181,13 +175,11 @@ img.right {
 .footer a {
   color: #8392a5;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .footer a:hover {
   margin-left: 5px;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .footer ul {
@@ -226,7 +218,6 @@ img.right {
 .footer #hugo:hover {
   margin-right: 5px;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 /* --- FOOTER END ---- */

static/assets/css/layouts/single.css

@@ -34,27 +34,24 @@ body {
   max-width: 20%;
   /* background-color: lightpink; */
   transition: all ease-out 0.5s;
-  -webkit-transition: all ease-out 0.5s;
 }
 
 .toc-holder {
+  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #f9fafc;
   margin-right: 0.5rem;
-  max-height: 100vh;
   /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc {
   position: relative;
   padding-top: 0px;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc nav {
@@ -64,7 +61,6 @@ body {
   flex-direction: column;
   align-items: flex-start;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc ul {
@@ -76,7 +72,6 @@ body {
   padding: 0;
   padding-left: 0.5rem;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
   color: #1c2d41;
 }
 
@@ -88,7 +83,6 @@ body {
   background-color: #248aaa;
   color: #f9f9f9;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .hero-area {
@@ -193,7 +187,11 @@ tbody tr:hover {
 
 figure {
   border: 1px solid #c0ccda;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
   height: fit-content;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
   align-self: center;
   margin: auto;
@@ -246,6 +244,7 @@ a.header-anchor code {
 .content ol > ol,
 .content li > ol,
 .content li > ul {
+  -webkit-padding-start: 1rem;
   padding-inline-start: 1rem;
 }
 
@@ -266,13 +265,11 @@ mark {
 .next-prev-navigator a {
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator a:hover {
   color: #3c4858;
   transition: all 0.3 ease-out;
-  -webkit-transition: all 0.3 ease-out;
 }
 
 .next-prev-navigator .next-article {
@@ -281,12 +278,10 @@ mark {
 
 .next-prev-navigator .next-article a {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .previous-article a {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info {
@@ -294,14 +289,12 @@ mark {
   border-color: #e5e9f2 !important;
   background-color: #248aaa !important;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info:hover {
   color: #3c4858 !important;
   background-color: #e5e9f2 !important;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .disquss {
@@ -359,18 +352,17 @@ mark {
     flex: 0%;
     max-width: 0%;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .toc-section.hide {
     flex: 40%;
     max-width: 40%;
     margin-left: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 
   .toc-holder {
     top: 3rem;
+    max-height: calc(100vh - 3rem);
   }
 
   .navbar-toggler {
@@ -411,72 +403,6 @@ mark {
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    max-width: 100%;
-    order: 2;
-    overflow: hidden;
-  }
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-
-  .toc-section {
-    order: 3;
-    flex: 0%;
-    max-width: 0%;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-  .toc-section.hide {
-    flex: 40%;
-    max-width: 40%;
-    margin-left: 0.5rem;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-
-  .toc-holder {
-    top: 3rem;
-  }
-
-  .navbar-toggler {
-    display: block;
-  }
-
-  .hero-area {
-    height: 300px;
-    margin-top: 1rem;
-  }
-
-  .page-content {
-    padding: 0px;
-  }
-
-  pre {
-    margin: 0px;
-  }
-  code {
-    padding: 0px;
-  }
-
-  .btn-improve-page {
-    margin-right: 1rem;
-  }
-
-  #disqus_thread,
-  .dsq-brlink {
-    padding: 5px;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -498,11 +424,12 @@ mark {
   .toc-section {
     order: 2;
     width: 100%;
-    height: 0;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .toc-section.hide {
@@ -510,6 +437,8 @@ mark {
     position: relative;
     /* height: fit-content; */
     flex: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     max-height: 200vh;
     max-width: 100%;
@@ -517,7 +446,6 @@ mark {
     padding-right: 0;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .toc-holder {
@@ -525,12 +453,10 @@ mark {
     margin-right: 0;
     overflow: hidden;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
   .toc-section.hide .toc-holder {
     max-height: 200vh;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .navbar-toggler {
@@ -542,9 +468,6 @@ mark {
     margin-top: 1rem;
   }
 
-  .hero-area.hide {
-    margin-top: 1rem;
-  }
   .page-content {
     padding: 0px;
   }

static/assets/css/navigators/navbar.css

@@ -6,7 +6,6 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  -webkit-transition: all 0.4s ease-out;
   margin: 0;
   padding-top: 0.1rem;
   text-align: center;
@@ -31,7 +30,6 @@
 .initial-navbar li a:hover {
   color: #f9fafc;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .navbar-collapse {
@@ -52,7 +50,6 @@
   background-color: #f9fafc;
   color: #1c2d41;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .final-navbar .navbar-brand {
@@ -64,7 +61,6 @@
   color: #1c2d41;
   font-weight: 500;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border-bottom: 2px solid#F9FAFC;
 }
 
@@ -72,7 +68,6 @@
 .final-navbar li a:hover {
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border-bottom: 2px solid #2098d1;
   background: rgb(2, 0, 36);
   background: linear-gradient(
@@ -87,7 +82,6 @@
   color: #1c2d41;
   font-weight: 500;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .navbar-collapse.show .navbar-nav .active,
@@ -138,6 +132,14 @@
 
 /* IPad Pro */
 @media (max-width: 1024px) {
+  .top-navbar {
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
+
   .top-navbar .container {
     max-width: 100%;
   }
@@ -146,14 +148,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -165,7 +166,6 @@
   .final-navbar .navbar-collapse.show {
     box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .dropdown-divider {
@@ -186,14 +186,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -205,7 +204,6 @@
   .final-navbar .navbar-collapse.show {
     box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .dropdown-divider {
@@ -226,14 +224,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -245,7 +242,6 @@
   .final-navbar .navbar-collapse.show {
     box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .dropdown-divider {

static/assets/css/navigators/sidebar.css

@@ -4,30 +4,30 @@
   max-width: 20%;
   /* background-color: lightsalmon; */
   transition: all ease-out 0.5s;
-  -webkit-transition: all ease-out 0.5s;
 }
 
 .sidebar-holder {
   top: 2.5rem;
+  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
   overflow: auto;
   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .sidebar {
   background: #f9fafc;
   height: 100vh;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .sidebar-tree {
   padding-left: 1rem;
   position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -42,7 +42,6 @@
   border-radius: 5px;
   background-color: #e5e9f2;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border: 1px solid #c0ccda;
 }
 
@@ -74,7 +73,6 @@ ul {
   text-decoration: none;
   color: #131313;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .tree li a.active {
@@ -86,7 +84,6 @@ ul {
   margin-left: 3px;
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .tree i {
@@ -193,12 +190,13 @@ a.focused {
     max-width: 0%;
     min-height: 100vh;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
+    max-height: calc(100vh - 2.5rem);
   }
 
   .sidebar-section.hide {
@@ -206,7 +204,6 @@ a.focused {
     max-width: 30%;
     margin-right: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 }
 
@@ -223,9 +220,9 @@ a.focused {
     max-width: 0%;
     min-height: 100vh;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -236,7 +233,6 @@ a.focused {
     max-width: 40%;
     margin-right: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 }
 
@@ -249,56 +245,57 @@ a.focused {
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-section.hide {
     margin-top: 2rem;
     position: relative;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     flex: none;
     max-height: 300vh;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-holder {
     max-height: 0;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     overflow: hidden;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-section.hide .sidebar-holder {
     max-height: 200vh;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar {
     position: relative;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
+    max-height: -webkit-fit-content;
+    max-height: -moz-fit-content;
     max-height: fit-content;
     width: 100vw;
     min-height: 0;
     overflow: hidden;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-tree {
     margin-left: 0rem;
     max-height: 0;
     transition: all 0.5s ease-out;
-    -webkit-transition: all 0.5s ease-out;
   }
   .sidebar-section.hide .sidebar-tree {
     max-height: 200vh;
     transition: all 0.5s ease-out;
-    -webkit-transition: all 0.5s ease-out;
   }
 }
 

static/assets/css/sections/about.css

@@ -63,7 +63,6 @@
   border-top-right-radius: 80px;
   border-bottom-right-radius: 80px;
   border-left: 0;
-  -webkit-transform-origin: center left;
   transform-origin: center left;
 }
 
@@ -76,9 +75,9 @@
   border-top-left-radius: 80px;
   border-bottom-left-radius: 80px;
   border-right: 0;
-  -webkit-transform-origin: center right;
   transform-origin: center right;
-  animation: circular-loading-1 1.8s linear forwards;
+  -webkit-animation: circular-loading-1 1.8s linear forwards;
+          animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
@@ -120,221 +119,344 @@
 }
 
 .circular-progress-percentage-50 {
-  animation: circular-loading-50 0s linear forwards 1.8s;
+  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
+          animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  animation: circular-loading-55 0.18s linear forwards 1.8s;
+  -webkit-animation: circular-loading-55 0.18s linear forwards 1.8s;
+          animation: circular-loading-55 0.18s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-60 {
-  animation: circular-loading-60 0.36s linear forwards 1.8s;
+  -webkit-animation: circular-loading-60 0.36s linear forwards 1.8s;
+          animation: circular-loading-60 0.36s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-65 {
-  animation: circular-loading-65 0.54s linear forwards 1.8s;
+  -webkit-animation: circular-loading-65 0.54s linear forwards 1.8s;
+          animation: circular-loading-65 0.54s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-70 {
-  animation: circular-loading-70 0.72s linear forwards 1.8s;
+  -webkit-animation: circular-loading-70 0.72s linear forwards 1.8s;
+          animation: circular-loading-70 0.72s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-75 {
-  animation: circular-loading-75 0.9s linear forwards 1.8s;
+  -webkit-animation: circular-loading-75 0.9s linear forwards 1.8s;
+          animation: circular-loading-75 0.9s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-80 {
-  animation: circular-loading-80 1.08s linear forwards 1.8s;
+  -webkit-animation: circular-loading-80 1.08s linear forwards 1.8s;
+          animation: circular-loading-80 1.08s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-85 {
-  animation: circular-loading-85 1.26s linear forwards 1.8s;
+  -webkit-animation: circular-loading-85 1.26s linear forwards 1.8s;
+          animation: circular-loading-85 1.26s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-90 {
-  animation: circular-loading-90 1.44s linear forwards 1.8s;
+  -webkit-animation: circular-loading-90 1.44s linear forwards 1.8s;
+          animation: circular-loading-90 1.44s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-95 {
-  animation: circular-loading-95 1.62s linear forwards 1.8s;
+  -webkit-animation: circular-loading-95 1.62s linear forwards 1.8s;
+          animation: circular-loading-95 1.62s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-100 {
-  animation: circular-loading-100 1.8s linear forwards 1.8s;
+  -webkit-animation: circular-loading-100 1.8s linear forwards 1.8s;
+          animation: circular-loading-100 1.8s linear forwards 1.8s;
+}
+
+@-webkit-keyframes circular-loading-50 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
 
 @keyframes circular-loading-50 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 }
 
+@-webkit-keyframes circular-loading-55 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(18deg);
+  }
+}
+
 @keyframes circular-loading-55 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(18deg);
     transform: rotate(18deg);
   }
 }
 
+@-webkit-keyframes circular-loading-60 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-60 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-65 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(54deg);
+  }
+}
+
 @keyframes circular-loading-65 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(54deg);
     transform: rotate(54deg);
   }
 }
 
+@-webkit-keyframes circular-loading-70 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(72deg);
+  }
+}
+
 @keyframes circular-loading-70 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(72deg);
     transform: rotate(72deg);
   }
 }
 
+@-webkit-keyframes circular-loading-75 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-75 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-80 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(108deg);
+  }
+}
+
 @keyframes circular-loading-80 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(108deg);
     transform: rotate(108deg);
   }
 }
 
+@-webkit-keyframes circular-loading-85 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-85 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }
 
+@-webkit-keyframes circular-loading-90 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-90 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-95 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(162deg);
+  }
+}
+
 @keyframes circular-loading-95 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(162deg);
     transform: rotate(162deg);
   }
 }
 
+@-webkit-keyframes circular-loading-100 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
 @keyframes circular-loading-100 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+}
+
+@-webkit-keyframes circular-loading-1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
     transform: rotate(180deg);
   }
 }
 
 @keyframes circular-loading-1 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 }
 
+@-webkit-keyframes circular-loading-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-2 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-3 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-4 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-4 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-5 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-5 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }

static/assets/css/sections/achievements.css

@@ -16,7 +16,6 @@
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .achievement-entry:hover {
@@ -24,7 +23,6 @@
   z-index: 1;
   transform: scale(1.1);
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   z-index: 20000;
 }
 
@@ -33,9 +31,7 @@
   z-index: 1;
   opacity: 1 !important;
   transition: none !important;
-  -webkit-transition: none !important;
   transform: none !important;
-  -webkit-transform: none !important;
 }
 
 #gallery .img-type-1 {
@@ -58,7 +54,6 @@
   opacity: 1;
   font-size: 1rem;
   transition: all 0.3s ease-out;
-  --webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .img-type-1 i {
@@ -72,7 +67,6 @@
 .achievement-details.img-type-2 i {
   margin-top: 0px !important;
   transition: none !important;
-  -webkit-transition: none !important;
   float: right;
 }
 
@@ -92,7 +86,6 @@
   opacity: 1;
   bottom: 0px;
   transition: bottom 0.3s ease-out;
-  -webkit-transition: bottom 0.3s ease-out;
 }
 
 #gallery .caption {
@@ -103,7 +96,6 @@
   padding: 15px;
   position: absolute;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .caption h4 {

static/assets/css/sections/home.css

@@ -12,10 +12,10 @@
   padding: 0;
   margin: 0;
   background-attachment: fixed;
+  background-position: center;
   transform: scale(1.1);
-  -webkit-transform: scale(1.1);
-  filter: blur(3px);
   -webkit-filter: blur(3px);
+          filter: blur(3px);
   background-size: cover;
 }
 
@@ -54,7 +54,24 @@
 }
 
 .bounce {
-  animation: bounce 2s infinite;
+  -webkit-animation: bounce 2s infinite;
+          animation: bounce 2s infinite;
+}
+
+@-webkit-keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
 }
 
 @keyframes bounce {

static/assets/css/sections/skills.css

@@ -1,5 +1,7 @@
 .skills-section .card .card-head {
   background-color: #f9fafc;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
   height: fit-content;
   padding: 0.7rem;
   padding-bottom: 0rem;

static/assets/js/main.js

@@ -23,33 +23,45 @@ var isMobile = false, isTablet = false, isLaptop = false;
 
     // ================= Smooth Scroll ===================
     function addSmoothScroll() {
-      // Add smooth scrolling to all links
+      // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
-      $("a").on('click', function (event) {
+      // Select all links with hashes
+      $('a[href*="#"]').click(function (event) {
+        // On-page links
+        if (
+          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+          &&
+          location.hostname == this.hostname
+        ) {
+          // Figure out element to scroll to
+          var target = $(this.hash);
+          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+          // Does a scroll target exist?
+          if (target.length) {
+            // Only prevent default if animation is actually gonna happen
+            event.preventDefault();
 
-        // Make sure this.hash has a value before overriding default behavior
+            let offset = 60;
-        if (this.hash !== "") {
+            if (isMobile) {
-          // Prevent default anchor click behavior
+              offset = 710;
-          event.preventDefault();
+            } else if (isTablet) {
-
+              offset = 60;
-          // Store hash
+            }
-          var hash = this.hash;
+            $('html, body').animate({
-
+              scrollTop: target.offset().top - offset
-          let offset = 60;
+            }, 1000, function () {
-          if (isMobile) {
+              // Callback after animation
-            offset = 760;
+              // Must change focus!
-          } else if (isTablet) {
+              var $target = $(target);
-            offset = 60;
+              $target.focus();
+              if ($target.is(":focus")) { // Checking if the target was focused
+                return false;
+              } else {
+                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
+                $target.focus(); // Set focus again
+              };
+            });
           }
-          // Using jQuery's animate() method to add smooth page scroll
+        }
-          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-          $('html, body').animate({
-            scrollTop: $(hash).offset().top - offset
-          }, 800, function () {
-
-            // Add hash (#) to URL when done scrolling (default click behavior)
-            window.location.hash = hash - offset;
-          });
-        } // End if
       });
     }
     addSmoothScroll();