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() {
-        const SPACING = 20;
+        if ($('.post-toc').length) {
-        const $toc = $('.post-toc');
+            const SPACING = 20;
-        const $footer = $('.post-footer');
+            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,46 +88,47 @@ jQuery(function($) {
                 } else {
                     $toc.css(tocState.process);
                 }
-            });
-        }
-
-        const HEADERFIX = 60;
-        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) {
-                return $(link).offset().top;
-            });
-            const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
-                return offset - HEADERFIX;
-            });
-            const searchActiveTocIndex = function(array, target) {
-                for (let i = 0; i < array.length - 1; i++) {
-                    if (target > array[i] && target <= array[i + 1]) return i;
-                }
-                if (target > array[array.length - 1]) return array.length - 1;
-                return 0;
             };
+            changeTocState();
+            $(window).scroll(changeTocState);
 
-            const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
+            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) {
+                    return $(link).offset().top;
+                });
+                const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
+                    return offset - HEADERFIX;
+                });
+                const searchActiveTocIndex = function(array, target) {
+                    for (let i = 0; i < array.length - 1; i++) {
+                        if (target > array[i] && target <= array[i + 1]) return i;
+                    }
+                    if (target > array[array.length - 1]) return array.length - 1;
+                    return 0;
+                };
 
-            $($toclink).removeClass('active');
+                const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
-            $($tocLinkLis).removeClass('has-active');
 
-            if (activeTocIndex !== -1) {
+                $($toclink).removeClass('active');
-                $($toclink[activeTocIndex]).addClass('active');
+                $($tocLinkLis).removeClass('has-active');
-                let ancestor = $toclink[activeTocIndex].parentNode;
+
-                while (ancestor.tagName !== 'NAV') {
+                if (activeTocIndex !== -1) {
-                    $(ancestor).addClass('has-active');
+                    $($toclink[activeTocIndex]).addClass('active');
-                    ancestor = ancestor.parentNode.parentNode;
+                    let ancestor = $toclink[activeTocIndex].parentNode;
+                    while (ancestor.tagName !== 'NAV') {
+                        $(ancestor).addClass('has-active');
+                        ancestor = ancestor.parentNode.parentNode;
+                    }
                 }
-            }
+            };
-        };
+            activeIndex();
-        activeIndex();
+            $(window).scroll(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">