jekyll-theme-chirpy 4.1.1 → 4.2.0

data/_includes/related-posts.html

@@ -81,7 +81,7 @@
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
     <h3 class="pt-2 mt-1 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[site.lang].post.relate_posts | default: 'Further Reading' }}</h3>
+      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

data/_includes/search-loader.html

@@ -14,9 +14,9 @@
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
 
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
 
 <script>
 SimpleJekyllSearch({

data/_includes/search-results.html

@@ -4,7 +4,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.locales[site.lang].panel.trending_tags | default: 'Trending Tags' }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
 
       {% include trending-tags.html %}
 

data/_includes/sidebar.html

@@ -32,7 +32,7 @@
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[site.lang].tabs.home | default: "home" | upcase }}</span>
+        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
@@ -42,7 +42,7 @@
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-        <span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}

data/_includes/timeago.html

@@ -3,9 +3,9 @@
   See: /assets/js/_utils/timeage.js
 -->
 
-{% assign tooltip_df = site.data.locales[site.lang].date_format.tooltip | default: '%a, %b %e, %Y, %l:%M %p %z' %}
-{% assign post_long_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
-{% assign post_short_df = site.data.locales[site.lang].date_format.post.short | default: '%b %e' %}
+{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
+{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
+{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
 
 {% if include.preposition %}
   {{ include.preposition }}

data/_includes/topbar.html

@@ -10,7 +10,7 @@
 
     {% if paths.size == 0 or page.layout == 'home' %}
       <!-- index page -->
-      <span>{{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}</span>
+      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
 
     {% else %}
 
@@ -19,14 +19,14 @@
         {% if forloop.first %}
           <span>
             <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}
+              {{ site.data.locales[lang].tabs.home | capitalize }}
             </a>
           </span>
 
         {% elsif forloop.last %}
 
           {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
+            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
           {% else %}
             <span>{{ page.title }}</span>
           {% endif %}
@@ -34,7 +34,7 @@
         {% elsif page.layout == 'category' or page.layout == 'tag' %}
           <span>
             <a href="{{ item | relative_url }}">
-              {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
+              {{ site.data.locales[lang].tabs[item] | default: page.title }}
             </a>
           </span>
         {% endif %}
@@ -49,12 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[site.lang].title | default: site.title -}}
+        {{- site.data.locales[lang].title | default: site.title -}}
       {% elsif page.collection == 'tabs' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -62,10 +62,10 @@
     <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" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | default: 'Search' | capitalize }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel | default: 'Cancel' }}</span>
+    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
   </div>
 
 </div>

data/_layouts/archives.html

@@ -3,6 +3,8 @@ layout: page
 # The Archives of posts.
 ---
 
+{% include lang.html %}
+
 <div id="archives" class="pl-xl-2">
 
 {% for post in site.posts %}
@@ -17,7 +19,7 @@ layout: page
     <li>
       <div>
         {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture _mth_df %}{{ site.data.locales[site.lang].date_format.post.archive_month | default: "%b" }}{% endcapture %}
+        {% capture _mth_df %}{{ site.data.locales[lang].date_format.post.archive_month }}{% endcapture %}
         {% capture this_month %}{{ post.date | date: _mth_df }}{% endcapture %}
         <span class="date day">{{ this_day }}</span>
         <span class="date month small text-muted">{% include no-zero-date.html date_str=this_month %}</span>

data/_layouts/categories.html

@@ -3,6 +3,8 @@ layout: page
 # All the Categories of posts
 ---
 
+{% include lang.html %}
+
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -45,10 +47,10 @@ layout: page
         <span class="text-muted small font-weight-light">
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
-            {{ site.data.locales[site.lang].categories.category_measure | default: 'categories' }},
+            {{ site.data.locales[lang].categories.category_measure }},
           {% endif %}
             {{ top_posts_size }}
-            {{ site.data.locales[site.lang].categories.post_measure | default: 'posts' }}
+            {{ site.data.locales[lang].categories.post_measure }}
         </span>
       </span>
 
@@ -81,7 +83,7 @@ layout: page
           {% assign posts_size = site.categories[sub_category] | size %}
           <span class="text-muted small font-weight-light">
             {{ posts_size }}
-            {{ site.data.locales[site.lang].categories.post_measure | default: 'posts' }}
+            {{ site.data.locales[lang].categories.post_measure }}
           </span>
         </li>
         {% endfor %}

data/_layouts/category.html

@@ -3,6 +3,8 @@ layout: page
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -11,7 +13,7 @@ layout: page
   </h1>
 
   <ul class="post-content pl-0">
-    {% assign post_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">

data/_layouts/default.html

@@ -5,13 +5,15 @@ layout: compress
 
 <!DOCTYPE html>
 
+{% include lang.html %}
+
 {% capture prefer_mode %}
   {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang | default: 'en' }}" {{ prefer_mode }}>
+<html lang="{{ site.lang }}" {{ prefer_mode }}>
 
   {% include head.html %}
 

data/_layouts/home.html

@@ -3,6 +3,8 @@ layout: page
 # The Home page layout
 ---
 
+{% include lang.html %}
+
 {% assign pinned = site.posts | where: "pin", "true" %}
 {% assign default = site.posts | where_exp: "item", "item.pin != true" %}
 
@@ -78,7 +80,7 @@ layout: page
       {% if post.pin %}
       <div class="pin">
         <i class="fas fa-thumbtack fa-fw"></i>
-        <span>{{ site.data.locales[site.lang].post.pin_prompt | default: 'Pinned' }}</span>
+        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
       </div>
       {% endif %}
 

data/_layouts/page.html

@@ -10,7 +10,7 @@ layout: default
       <h1 class="dynamic-title">
         {% if page.collection == 'tabs' %}
           {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-          {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
+          {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
         {% else %}
           {{- page.title -}}
         {% endif %}

data/_layouts/post.html

@@ -3,6 +3,8 @@ layout: default
 # The posts' layout
 ---
 
+{% include lang.html %}
+
 <div class="row">
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
@@ -17,7 +19,7 @@ layout: default
           <span class="semi-bold">
             {{ page.author | default: site.social.name }}
           </span>
-          {% capture _preposition %}{{ site.data.locales[site.lang].post.published | default: 'on' }}{% endcapture %}
+          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
           {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
         </div>
 
@@ -25,7 +27,7 @@ layout: default
           <!-- lastmod -->
           {% if page.last_modified_at %}
           <span>
-            {{ site.data.locales[site.lang].post.updated | default: 'Updated' }}
+            {{ site.data.locales[lang].post.updated }}
             {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
           </span>
           {% endif %}
@@ -38,7 +40,7 @@ layout: default
           <span id="pv" class="pageviews">
             <i class="fas fa-spinner fa-spin fa-fw"></i>
           </span>
-          {{ site.data.locales[site.lang].post.pageview_measure | default: "views" }}
+          {{ site.data.locales[lang].post.pageview_measure }}
           {% endif %}
 
         </div>
@@ -89,13 +91,13 @@ layout: default
         <div class="post-tail-bottom
           d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
           <div class="license-wrapper">
-          {% if site.data.locales[site.lang].copyright.license.template %}
+          {% if site.data.locales[lang].copyright.license.template %}
             {% capture _replacement %}
-            <a href="{{ site.data.locales[site.lang].copyright.license.link }}">
-              {{ site.data.locales[site.lang].copyright.license.name }}
+            <a href="{{ site.data.locales[lang].copyright.license.link }}">
+              {{ site.data.locales[lang].copyright.license.name }}
             </a>
             {% endcapture %}
-            {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
           {% endif %}
           </div>
 

data/_layouts/tag.html

@@ -3,6 +3,8 @@ layout: page
 # The layout for Tag page
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -10,7 +12,7 @@ layout: page
     <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% assign post_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">

data/_sass/addon/commons.scss

@@ -53,6 +53,26 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
 /* --- Typography --- */
 
 h1 {
@@ -460,10 +480,6 @@ footer {
     padding-left: 2rem;
 
     li {
-      + li {
-        margin-top: 0.3rem;
-      }
-
       ol,
       ul { // sub list
         padding-left: 2rem;

data/_sass/addon/syntax.scss

@@ -27,16 +27,18 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
 div > pre {
@@ -86,12 +88,10 @@ div > pre {
   }
 
   .lineno {
-    margin-left: 0.2rem;
     padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -135,7 +135,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -152,7 +152,8 @@ div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -162,25 +163,76 @@ div {
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 2rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
-}
+.code-header {
+  background: var(--code-header-bg);
+  border-top-left-radius: $code-radius;
+  border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
+
+  // text data
+  &::before {
+    content: attr(text-data);
+    color: var(--lang-badge-color);
+    padding-left: 1em;
+
+    // language
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    // file name
+    @at-root [file] #{&} {
+      font-size: 0.85rem;
+      text-transform: none;
+    }
+  }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+    color: var(--highlight-lineno-color);
+
+    &[locked=true] {
+      color: var(--clipboard-checked-color);
+      border-color: var(--clipboard-checked-color);
+    }
+
+    &:not([locked]):hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 0.9rem;
+    }
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
   }
+
 }
 
-@media (min-width: 1650px) {
-  div[class^='language-']::before {
-    right: 3.5rem;
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
   }
 }