jekyll-theme-chirpy 3.3.2 → 4.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4888248fd8e1c10a3febf1ba4bc3baa6764e3c04e9005be0a9ff294a1c50dddb
-  data.tar.gz: ee4e903c0fbdcafab43c981afa928475dcb64df073184c250a37d1bb7bb43c46
+  metadata.gz: d184bb7ea0d85aab6518e6206da789d7ed52d8d69fa6b99d49143c5e64579791
+  data.tar.gz: b26a14744e2ffdd408da2ad694e9963de3fe2fded5993a8edba5769a65972236
 SHA512:
-  metadata.gz: d1cbee98a3a2754508c3d4ef1545ddf9de5769fc23f7499dd4c9ce9becf544f14d532b48fb24563d93624e06be204f6f9013504d277637c45823d5ac017f913d
-  data.tar.gz: e3906e145f72bb7a3e605f4e398b9d9f5ed9a30af3dcc3495ba12db2317e8fc59d530a19894c37951e1f058541710037c65a58e8f48502807b265ceeadb10021
+  metadata.gz: 83c977ab26d362130f78e03ba9d6ff2c80388a9d361e54f503a2036561ed93bfaf091f5bad787a467467d9fe298df675bcfbd8f50be87fae71ab6ba8c6b896c0
+  data.tar.gz: 2a82eaad1b0e2bf1eb168cdcb0b81a6f520f6ee4d953008ab82f1b3d40db1380ecc6bb2a5a067981780c2973bd562e6efe30a7eaed809ef66b9ea73c044c767d

data/README.md

@@ -69,7 +69,7 @@ Finally, copy the required files from the theme's gem (for detailed files, see [
 > $ bundle info --path jekyll-theme-chirpy
 > ```
 
-Or you can [**use the starter template**][use-starter] to create a Jekyll site to save time copying files from theme's gem. We have prepared everything for you there!
+Or you can [**use the starter template**][use-starter] to create a Jekyll site to save time copying files from the theme's gem. We have prepared everything for you there!
 
 ### Fork on GitHub
 
@@ -96,7 +96,7 @@ What it does is:
     - files under `_posts`
     - folder `docs`
 
-2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
 3. Automatically create a commit to save the changes.
 
@@ -132,7 +132,7 @@ Open a browser and visit to _<http://localhost:4000>_.
 
 ### Deployment
 
-Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash, e.g, `/project-name`.
 
 Now you can choose ONE of the following methods to deploy your Jekyll site.
 
@@ -145,13 +145,13 @@ Quickly check the files needed for GitHub Actions build:
 - Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
 - Ensure your Jekyll site has file `tools/test.sh` and `tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site.
 
-And then rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
+And then rename your repository to `<GH-USERNAME>.github.io` on GitHub.
 
 Now publish your Jekyll site by:
 
 1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
 
-2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
+2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) through _Settings_ → _Options_ → _GitHub Pages_:
 
     ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
 
@@ -181,7 +181,7 @@ Unless you specified the output path, the generated site files will be placed in
 
 ## Documentation
 
-For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+For more details and a better reading experience, please check out the [tutorials on the demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
 
 ## Contributing
 
@@ -189,11 +189,11 @@ The old saying, "Two heads are better than one." Consequently, welcome to report
 
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files). The avatar and favicon design comes from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
-:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
 
-Also, thank [JetBrains][jb] for providing the open source license.
+Last but not least, thank [JetBrains][jb] for providing the open source license.
 
 ## Sponsoring
 

data/_config.yml

@@ -50,15 +50,11 @@ google_site_verification: google_meta_tag_verification # change to your verifica
 # --------------------------
 
 google_analytics:
-  id: ''          # Fill with your Google Analytics ID
+  id: ''              # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 
 # Prefer color scheme setting.
 #
@@ -105,10 +101,6 @@ kramdown:
       line_numbers: true
       start_line: 1
 
-# DO NOT change this unless you're a Pro user on Jekyll and Web development,
-# Or you think you're smart enough to change other relevant URLs within this template.
-permalink: /posts/:title/
-
 collections:
   tabs:
     output: true
@@ -124,6 +116,9 @@ defaults:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
+      # DO NOT modify the following parameter unless you are confident enough
+      # to update the code of all other post links in this project.
+      permalink: /posts/:title/
   -
     scope:
       path: _drafts
@@ -151,9 +146,6 @@ compress_html:
     envs: [development]
 
 exclude:
-  - vendor
-  - Gemfile
-  - Gemfile.lock
   - '*.gem'
   - '*.gemspec'
   - tools
@@ -162,8 +154,7 @@ exclude:
   - LICENSE
   - gulpfile.js
   - node_modules
-  - package.json
-  - package-lock.json
+  - '*.json'
 
 jekyll-archives:
   enabled: [categories, tags]

data/_includes/css-selector.html

@@ -8,3 +8,8 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
 {% endif %}
+
+{% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Manific Popup -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
+{% endif %}

data/_includes/favicons.html

@@ -1,32 +1,17 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
-  Generated by: https://www.favicon-generator.org/
+  Generated by: https://realfavicongenerator.net/
 -->
 
-{% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}
+{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
-<link rel="shortcut icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-<link rel="icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon.png">
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon-precomposed.png">
-<link rel="apple-touch-icon" sizes="57x57" href="{{ icon_url }}/apple-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ icon_url }}/apple-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ icon_url }}/apple-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ icon_url }}/apple-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ icon_url }}/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ icon_url }}/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ icon_url }}/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ icon_url }}/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ icon_url }}/apple-icon-180x180.png">
-
-<link rel="icon" type="image/png" sizes="192x192"  href="{{ icon_url }}/android-icon-192x192.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ icon_url }}/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="96x96" href="{{ icon_url }}/favicon-96x96.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ icon_url }}/favicon-16x16.png">
-
-<link rel="manifest" href="{{ icon_url }}/manifest.json">
-<meta name='msapplication-config' content='{{ icon_url }}/browserconfig.xml'>
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-TileImage" content="{{ icon_url }}/ms-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
+<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
+<meta name="application-name" content="{{ site.title }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">

data/_includes/head.html

@@ -8,17 +8,12 @@
 
   {% if page.layout == 'home' or page.layout == 'post' %}
 
-    {% if site.google_analytics.pv.enabled %}
-
-      {% if site.google_analytics.pv.proxy_endpoint != ''
-            and site.google_analytics.pv.proxy_endpoint %}
-        <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
-      {% endif %}
-
-      {% if site.google_analytics.pv.cache %}
-        <meta name="pv-cache-path" content="{{ '/assets/js/data/pageviews.json' | relative_url }}">
-      {% endif %}
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
+    {% endif %}
 
+    {% if site.google_analytics.pv.cache_path %}
+      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
     {% endif %}
 
   {% endif %}
@@ -46,26 +41,24 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled %}
-      <link rel="preconnect" href="{{ site.google_analytics.pv.proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.pv.proxy_url }}">
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
+        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+
+      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 
   <!-- jsDelivr CDN -->
-  <link rel="preconnect" href="cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="cdn.jsdelivr.net">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
-    integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
-    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
-    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css">
 
   {% include css-selector.html %}
 

data/_includes/js-selector.html

@@ -3,19 +3,26 @@
 -->
 
 {% if page.layout == 'home' or page.layout == 'post' %}
-  {% if site.google_analytics.pv.enabled %}
+  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
     <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
     <script async src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
 {% endif %}
 
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup -->
+  <script async
+    src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
+{% endif %}
+
 {% if page.layout == 'home'
+    or page.layout == 'categories'
     or page.layout == 'post'
-    or page.layout == 'categories' %}
+    or page.layout == 'page' %}
   {% assign type = page.layout %}
 {% else %}
-  {% assign type = "page" %}
+  {% assign type = "commons" %}
 {% endif %}
 
 {% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}

data/_includes/refactor-content.html

@@ -46,7 +46,6 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign lozad = true %}
   {% assign img_placehodler
     = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
 
@@ -60,7 +59,3 @@
 
 <!-- return -->
 {{ _content }}
-
-{% if lozad %}
-  {% include lozad.html %}
-{% endif %}

data/_includes/topbar.html

@@ -60,7 +60,7 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" placeholder="{{ site.data.label.search_hint | default: 'Search' }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.label.search_hint | default: 'Search' }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >Cancel</span>

data/_layouts/home.html

@@ -68,7 +68,7 @@ layout: page
         {% include read-time.html content=post.content %}
 
         <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
+        {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
         <i class="far fa-eye fa-fw"></i>
         <span id="pv_{{-post.title-}}" class="pageviews">
           <i class="fas fa-spinner fa-spin fa-fw"></i>

data/_layouts/post.html

@@ -33,7 +33,7 @@ layout: default
           {% include read-time.html content=content %}
 
           <!-- page views -->
-          {% if site.google_analytics.pv.enabled %}
+          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
           {% endif %}
 

data/_sass/addon/commons.scss

@@ -229,7 +229,7 @@ footer {
 
     @extend %no-bottom-border;
 
-    color: #6c757d;
+    color: inherit;
   }
 
 }
@@ -357,6 +357,7 @@ footer {
 }
 
 .post-content {
+  font-size: 1.08rem;
   line-height: 1.8;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -364,37 +365,21 @@ footer {
 
   img[data-src] {
     margin: 0.5rem 0;
-  }
 
-  @mixin img-caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
+    &.left {
+      float: left;
+      margin: 0.75rem 1rem 1rem 0;
     }
-  }
-
-  @mixin img($caption: false) {
 
-    > img[data-src] {
-      @if $caption {
-        @include img-caption;
-      }
-
-      &.left {
-        float: left;
-        margin: 0.75rem 1rem 1rem 0;
-      }
-
-      &.right {
-        float: right;
-        margin: 0.75rem 0 1rem 1rem;
-      }
+    &.right {
+      float: right;
+      margin: 0.75rem 0 1rem 1rem;
+    }
 
+    &.shadow {
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     }
+
   }
 
   a {
@@ -402,7 +387,7 @@ footer {
       color: var(--link-color);
     }
 
-    &:not(.img-hyperlink) {
+    &:not(.img-link) {
       @extend %link-color;
       @extend %link-underline;
       &:hover {
@@ -410,23 +395,26 @@ footer {
       }
     }
 
-    &.img-hyperlink {
-      @include img;
-      @include img-caption;
-    }
-  }
+    &.popup { // created by `_includes/img-extra.html`
+      cursor: zoom-in;
 
-  > p {
-    > img[data-src]:not(.normal):not(.left):not(.right) {
-      @include align-center;
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
     }
-  }
 
-  p {
-    @include img(true);
+    &.img-link {
+      + em {
+        display: block;
+        text-align: center;
+        font-style: normal;
+        font-size: 80%;
+        padding: 0;
+        color: #6d6c6c;
+      }
+    }
 
-    font-size: 1.08rem;
-  }
+  } // a
 
   ul {
     // attribute 'hide-bullet' was added by liquid
@@ -585,6 +573,20 @@ footer {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+/* --- Overriding --- */
+
+// magnific-popup
+figure .mfp-title {
+  text-align: center;
+  padding-right: 0;
+  margin-top: 0.5rem;
+}
+
+// mermaid
+.mermaid {
+  text-align: center;
+}
+
 /* --- sidebar layout --- */
 
 $tab-count: 5 !default;
@@ -603,6 +605,15 @@ $sidebar-display: "sidebar-display";
   z-index: 99;
   background: var(--sidebar-bg);
 
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
   a {
     @include sidebar-links;
 
@@ -896,7 +907,6 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
-  font-size: 95%;
 
   &:focus {
     box-shadow: none;
@@ -1062,7 +1072,14 @@ $sidebar-display: "sidebar-display";
   -webkit-transform: translate3d(0, -5px, 0);
 }
 
-/* --- Responsive Design --- */
+/*
+  Responsive Design:
+
+ {sidebar, content, panel} >= 1120px screen width
+ {sidebar, content} >= 850px screen width
+ {content} <= 849px screen width
+
+*/
 
 @media all and (max-width: 576px) {
 
@@ -1112,8 +1129,8 @@ $sidebar-display: "sidebar-display";
 
 }
 
-/* Hide Sidebar and TOC */
-@media all and (max-width: 830px) {
+/* hide sidebar and panel */
+@media all and (max-width: 849px) {
   %slide {
     -webkit-transition: transform 0.4s ease;
     transition: transform 0.4s ease;
@@ -1230,16 +1247,17 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-}
+} // max-width: 849px
 
+/* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
   footer > .d-flex > div {
     width: 312px;
   }
 }
 
-/* Sidebar visible */
-@media all and (min-width: 831px) {
+/* Sidebar is visible */
+@media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
@@ -1286,9 +1304,9 @@ $sidebar-display: "sidebar-display";
 
 }
 
-/* iPad 9.7" horizontal */
-@media all and (min-width: 992px) and (max-width: 1024px) {
-  #main-wrapper .col-lg-11 {
+/* Pad horizontal */
+@media all and (min-width: 992px) and (max-width: 1199px) {
+  #main .col-lg-11 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 96%;
     flex: 0 0 96%;
@@ -1296,11 +1314,17 @@ $sidebar-display: "sidebar-display";
   }
 }
 
-/* Compact icons in sidebar & TOC hidden */
-@media all and (min-width: 832px) and (max-width: 1199px) {
+/* Compact icons in sidebar & panel hidden */
+@media all and (min-width: 850px) and (max-width: 1199px) {
 
   #sidebar {
     width: $sidebar-width-small;
+
+    .site-subtitle {
+      margin-left: 1rem;
+      margin-right: 1rem;
+    }
+
     .sidebar-bottom {
       a,
       span {
@@ -1345,7 +1369,7 @@ $sidebar-display: "sidebar-display";
 
 }
 
-/* Pannel hidden */
+/* panel hidden */
 @media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
@@ -1407,7 +1431,7 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  .post-content p {
+  .post-content {
     font-size: 1.03rem;
   }
 
@@ -1600,7 +1624,7 @@ $sidebar-display: "sidebar-display";
   } // #sidebar
 
   footer > div.d-flex {
-    width: 87%;
+    width: 92%;
     max-width: 1140px;
   }