jekyll-theme-chirpy 3.2.2 → 4.0.1

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
@@ -521,6 +509,10 @@ footer {
 
 /* --- Effects classes --- */
 
+.semi-bold {
+  font-weight: 600 !important;
+}
+
 .loaded {
   display: block !important;
 
@@ -581,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;
@@ -599,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;
 
@@ -892,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;
@@ -1058,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) {
 
@@ -1108,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;
@@ -1226,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;
@@ -1282,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%;
@@ -1292,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 {
@@ -1341,7 +1369,7 @@ $sidebar-display: "sidebar-display";
 
 }
 
-/* Pannel hidden */
+/* panel hidden */
 @media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
@@ -1403,7 +1431,7 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  .post-content p {
+  .post-content {
     font-size: 1.03rem;
   }
 
@@ -1596,7 +1624,7 @@ $sidebar-display: "sidebar-display";
   } // #sidebar
 
   footer > div.d-flex {
-    width: 87%;
+    width: 92%;
     max-width: 1140px;
   }
 

data/_sass/addon/module.scss

@@ -4,6 +4,12 @@
 
 /* ---------- scss placeholder --------- */
 
+%heading {
+  color: var(--heading-color);
+  font-weight: 400;
+  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -33,11 +39,6 @@
   border-bottom: none;
 }
 
-%heading {
-  font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
-}
-
 %section {
   #post-wrapper & {
     line-height: 1.2;

data/_sass/colors/dark-typography.scss

@@ -15,6 +15,7 @@
 
   /* common color */
   --text-color: rgb(175, 176, 177);
+  --heading-color: #cccccc;
   --text-muted-color: rgb(107, 116, 124);
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);

data/_sass/colors/light-syntax.scss

@@ -68,7 +68,7 @@
 
   /* --- custom light colors --- */
   --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #353a3d;
+  --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
   --highlight-lineno-border-color: #e9ecef;
   --inline-code-bg: #f3f3f3;

data/_sass/colors/light-typography.scss

@@ -9,7 +9,8 @@
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
   --btn-border-color: #e9ecef;
-  --text-color: #333333;
+  --text-color: #34343c;
+  --heading-color: black;
   --blockquote-border-color: #eee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;

data/_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v3.2.2 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v4.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

data/_sass/layout/post.scss

@@ -23,6 +23,10 @@
   padding-right: $pr;
 }
 
+.timeago::before {
+  content: attr(prefix);
+}
+
 #post-wrapper .post-meta {
   > div:nth-child(2) {
     > span:not(:first-child)::before {
@@ -151,6 +155,10 @@
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+
+  &.nav-link:not(.active) {
+    color: inherit;
+  }
 }
 
 /* --- Related Posts --- */

data/{feed.xml → assets/feed.xml}

@@ -1,5 +1,6 @@
 ---
 layout: compress
+permalink: /feed.xml
 # Atom Feed, reference: https://validator.w3.org/feed/docs/atom.html
 ---
 
@@ -10,14 +11,14 @@ layout: compress
   <subtitle>{{ site.description }}</subtitle>
   <updated>{{ site.time | date_to_xmlschema }}</updated>
   <author>
-    <name>{{ site.author }}</name>
+    <name>{{ site.social.name }}</name>
     <uri>{{ "/" | absolute_url }}</uri>
   </author>
   <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
   <link rel="alternate" type="text/html" hreflang="{{ site.lang | default: 'en' }}"
     href="{{ '/' | absolute_url }}"/>
   <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
-  <rights> © {{ 'now' | date: '%Y' }} {{ site.author }} </rights>
+  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
   <icon>{{ site.baseurl }}/assets/img/favicons/favicon.ico</icon>
   <logo>{{ site.baseurl }}/assets/img/favicons/favicon-96x96.png</logo>
 
@@ -35,7 +36,7 @@ layout: compress
     <id>{{ post_absolute_url }}</id>
     <content src="{{ post_absolute_url }}" />
     <author>
-      <name>{{ site.author }}</name>
+      <name>{{ post.author | default: site.social.name }}</name>
     </author>
 
   {% if post.categories %}

data/assets/img/favicons/browserconfig.xml

@@ -1,16 +1,13 @@
 ---
 layout: compress
-
-# A part of the Favicons
 ---
+
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
   <msapplication>
     <tile>
-      <square70x70logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-70x70.png" />
-      <square150x150logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-150x150.png" />
-      <square310x310logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-310x310.png" />
-      <TileColor>#ffffff</TileColor>
+      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
+      <TileColor>#da532c</TileColor>
     </tile>
   </msapplication>
 </browserconfig>

data/assets/img/favicons/site.webmanifest

@@ -0,0 +1,26 @@
+---
+layout: compress
+---
+
+{% assign favicon_path = "/assets/img/favicons" | relative_url %}
+
+{
+  "name": "{{ site.title }}",
+  "short_name": "{{ site.title }}",
+  "description": "{{ site.description }}",
+  "icons": [
+    {
+      "src": "{{ favicon_path }}/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "{{ favicon_path }}/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }],
+  "start_url": "{{ '/index.html' | relative_url }}",
+  "theme_color": "#2a1e6b",
+  "background_color": "#ffffff",
+  "display": "fullscreen"
+}