fix: mobile nav backgroud and new style

assets/css/_core/_media.scss

@@ -19,6 +19,7 @@
       margin: 0;
       height: 4.5em;
       line-height: 4.5em;
+      background: $global-background-color;
 
       .navbar-header {
         display: flex;
@@ -89,6 +90,7 @@
 
       .menu {
         text-align: center;
+        background: $global-background-color;
         border-top: 2px solid $global-font-color;
         display: none;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
@@ -103,9 +105,14 @@
         }
 
         .dark-theme & {
+          background: $global-background-color-dark;
           border-top: 2px solid $global-font-color-dark;
         }
       }
+
+      .dark-theme & {
+        background: $global-background-color-dark !important;
+      }
     }
   }
 

assets/css/_page/_post.scss

@@ -42,8 +42,8 @@
 
 .post-toc {
   position: absolute;
-  width: 200px;
+  width: 240px;
-  max-width: 240px;
+  max-width: 300px;
   margin-left: 800px;
   padding: 10px;
   border-left: 1px solid $global-border-color;
@@ -244,6 +244,7 @@
         color: $post-link-color-dark;
       }
     }
+
     &:after {
       content: "#blockquote" attr(cite);
       display: block;

assets/css/_page/_posts.scss

@@ -62,7 +62,7 @@
     padding-top: .2em;
     font-size: 0.9em;
     width: 100%;
-    max-height: 100px;
+    max-height: 108px;
     overflow: hidden;
 
     h2,

assets/js/main.js

@@ -43,7 +43,7 @@ jQuery(function($) {
     };
 
     _Blog.responsiveTable = function() {
-        const tables = document.querySelectorAll('.post-content > table');
+        const tables = document.querySelectorAll('.post-content table');
         for (let i = 0; i < tables.length; i++) {
             const table = tables[i];
             const wrapper = document.createElement('div');
@@ -54,16 +54,14 @@ jQuery(function($) {
     };
 
     _Blog._initToc = function() {
+        if ($('.post-toc').length) {
             const SPACING = 20;
             const $toc = $('.post-toc');
             const $footer = $('.post-footer');
-
-        if ($toc.length) {
             const minTop = $toc.position().top;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
-
+            const changeTocState = function() {
-            $(window).scroll(function() {
                 const scrollTop = $(window).scrollTop();
                 const maxTop = $footer.position().top - $toc.height();
                 const maxScrollTop = maxTop + mainTop - SPACING;
@@ -90,14 +88,14 @@ jQuery(function($) {
                 } else {
                     $toc.css(tocState.process);
                 }
-            });
+            };
-        }
+            changeTocState();
+            $(window).scroll(changeTocState);
 
-        const HEADERFIX = 60;
+            const HEADERFIX = 100;
             const $toclink = $('.toc-link');
             const $headerlink = $('.headerlink');
             const $tocLinkLis = $('.post-toc-content li');
-
             const activeIndex = function() {
                 const scrollTop = $(window).scrollTop();
                 const headerlinkTop = $.map($headerlink, function(link) {
@@ -130,6 +128,7 @@ jQuery(function($) {
             };
             activeIndex();
             $(window).scroll(activeIndex);
+        }
     };
 
     _Blog.toc = function() {

layouts/_default/summary.html

@@ -37,7 +37,14 @@
         {{ if .Params.show_description }}
             <p>{{ . }}</p>
         {{ else }}
-            {{ .Summary }}
+            {{ $summary := .Summary }}
+            {{ $REin := `:\(([\w- ]+?)\):` }}
+            {{ $REout := `<i class="inline-icon $1"></i>` }}
+            {{ $summary  = replaceRE $REin $REout $summary  }}
+            {{ $REin = `\[(.+?)\]\^\((.+?)\)` }}
+            {{ $REout = `<strong><ruby>$1<rt>$2</rt></ruby></strong>` }}
+            {{ $summary  = replaceRE $REin $REout $summary  }}
+            {{ $summary  | safeHTML }}
         {{ end }}
     </div>
     <div class="post-footer">