feat: add bilibili diagram echarts and improve style

2019-08-17 23:16:09 +08:00
parent 00b6b7f6ce
commit 6981f1e285
26 changed files with 1182 additions and 133 deletions
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -1,15 +1,7 @@
-/** Font **/
-/* Lato */
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

-/* Montserrat */
-@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
-
-/* Roboto */
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
-
 html {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
+  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;

  /* scrollbar, only support webkit */
  &::-webkit-scrollbar {
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -3,6 +3,10 @@
    display: none;
  }

+  .post-toc {
+    display: none;
+  }
+
  .navbar-mobile {
    display: block !important;
    position: fixed;
@@ -141,7 +145,15 @@

 /* iPads (portrait and landscape) ----------- */

-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .post-warp {
+    max-width: 560px !important;
+  }
+
+  .post-toc {
+    margin-left: 580px !important;
+  }
+}

 /* Desktops and laptops ----------- */

--- a/assets/css/_mermaid/class.scss
+++ b/assets/css/_mermaid/class.scss
@@ -0,0 +1,78 @@
+g.classGroup text {
+  fill: $nodeBorder;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 10px;
+}
+
+g.classGroup rect {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+}
+
+g.classGroup line {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $nodeBkg;
+  opacity: 0.5;
+}
+
+.classLabel .label {
+  fill: $nodeBorder;
+  font-size: 10px;
+}
+
+.relation {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+  fill: none;
+}
+
+@mixin composition {
+  fill: $nodeBorder;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#compositionStart {
+  @include composition;
+}
+
+#compositionEnd {
+  @include composition;
+}
+
+@mixin aggregation {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#aggregationStart {
+  @include aggregation;
+}
+
+#aggregationEnd {
+  @include aggregation;
+}
+
+#dependencyStart {
+  @include composition;
+}
+
+#dependencyEnd {
+  @include composition;
+}
+
+#extensionStart {
+  @include composition;
+}
+
+#extensionEnd {
+  @include composition;
+}
--- a/assets/css/_mermaid/dark/index.scss
+++ b/assets/css/_mermaid/dark/index.scss
@@ -0,0 +1,59 @@
+$mainBkg: #BDD5EA;
+$secondBkg: #6D6D65;
+$mainContrastColor: lightgrey;
+$darkTextColor: #323D47;
+$lineColor: $mainContrastColor;
+$border1: #81B1DB;
+$border2: rgba(255, 255, 255, 0.25);
+$arrowheadColor: $mainContrastColor;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: purple;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #F9FFFE;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: $mainContrastColor;
+$signalColor: $mainContrastColor;
+$signalTextColor: $mainContrastColor;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $darkTextColor;
+$loopTextColor: $mainContrastColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: rgba(255, 255, 255, 0.3);
+$altSectionBkgColor: white;
+$sectionBkgColor2: #EAE8B9;
+$taskBorderColor: rgba(255, 255, 255, 0.5);
+$taskBkgColor: $mainBkg;
+$taskTextColor: $darkTextColor;
+$taskTextLightColor: $mainContrastColor;
+$taskTextOutsideColor: $taskTextLightColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
+$activeTaskBkgColor: #81B1DB;
+$gridColor: $mainContrastColor;
+$doneTaskBkgColor: $mainContrastColor;
+$doneTaskBorderColor: grey;
+$critBorderColor: #E83737;
+$critBkgColor: #E83737;
+$taskTextDarkColor: $darkTextColor;
+$todayLineColor: #DB5757;
+
+@import '../mermaid';
--- a/assets/css/_mermaid/default/index.scss
+++ b/assets/css/_mermaid/default/index.scss
@@ -0,0 +1,57 @@
+$mainBkg: #ECECFF;
+$secondBkg: #ffffde;
+$lineColor: #333333;
+$border1: #CCCCFF;
+$border2: #aaaa33;
+$arrowheadColor: #333333;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: #9370DB;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #333;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: grey;
+$signalColor: #333;
+$signalTextColor: #333;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $actorTextColor;
+$loopTextColor: $actorTextColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: rgba(102, 102, 255, 0.49);
+$altSectionBkgColor: white;
+$sectionBkgColor2: #fff400;
+$taskBorderColor: #534fbc;
+$taskBkgColor: #8a90dd;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: black;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: #534fbc;
+$activeTaskBkgColor: #bfc7ff;
+$gridColor: lightgrey;
+$doneTaskBkgColor: lightgrey;
+$doneTaskBorderColor: grey;
+$critBorderColor: #ff8888;
+$critBkgColor: red;
+$todayLineColor: red;
+
+@import '../mermaid';
--- a/assets/css/_mermaid/flowchart.scss
+++ b/assets/css/_mermaid/flowchart.scss
@@ -0,0 +1,58 @@
+.label {
+  font-family: 'trebuchet ms', verdana, arial;
+  color: #333;
+}
+
+.label text {
+  fill: #333;
+}
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: $mainBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1px;
+}
+
+.node.clickable {
+  cursor: pointer;
+}
+
+.arrowheadPath {
+  fill: $arrowheadColor;
+}
+
+.edgePath .path {
+  stroke: $lineColor;
+  stroke-width: 1.5px;
+}
+
+.edgeLabel {
+  background-color: $edgeLabelBackground;
+}
+
+.cluster rect {
+  fill: $secondBkg;
+  stroke: $clusterBorder;
+  stroke-width: 1px;
+}
+
+.cluster text {
+  fill: $titleColor;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: $secondBkg;
+  border: 1px solid $border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100;
+}
--- a/assets/css/_mermaid/forest/index.scss
+++ b/assets/css/_mermaid/forest/index.scss
@@ -0,0 +1,58 @@
+$mainBkg: #cde498;
+$secondBkg: #cdffb2;
+$lineColor: #1a3318;
+$lineColor: green;
+$border1: #13540c;
+$border2: #6eaa49;
+$arrowheadColor: green;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: $border1;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: #333;
+$edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: black;
+$actorLineColor: grey;
+$signalColor: #333;
+$signalTextColor: #333;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: #326932;
+$labelTextColor: $actorTextColor;
+$loopTextColor: $actorTextColor;
+$noteBorderColor: $border2;
+$noteBkgColor: #fff5ad;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: #6eaa49;
+$altSectionBkgColor: white;
+$sectionBkgColor2: #6eaa49;
+$taskBorderColor: $border1;
+$taskBkgColor: #487e3a;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: black;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: $taskBorderColor;
+$activeTaskBkgColor: $mainBkg;
+$gridColor: lightgrey;
+$doneTaskBkgColor: lightgrey;
+$doneTaskBorderColor: grey;
+$critBorderColor: #ff8888;
+$critBkgColor: red;
+$todayLineColor: red;
+
+@import '../mermaid';
--- a/assets/css/_mermaid/gantt.scss
+++ b/assets/css/_mermaid/gantt.scss
@@ -0,0 +1,236 @@
+/** Section styling */
+
+.section {
+  stroke: none;
+  opacity: 0.2;
+}
+
+.section0 {
+  fill: $sectionBkgColor;
+}
+
+.section2 {
+  fill: $sectionBkgColor2;
+}
+
+.section1,
+.section3 {
+  fill: $altSectionBkgColor;
+  opacity: 0.2;
+}
+
+.sectionTitle0 {
+  fill: $titleColor;
+}
+
+.sectionTitle1 {
+  fill: $titleColor;
+}
+
+.sectionTitle2 {
+  fill: $titleColor;
+}
+
+.sectionTitle3 {
+  fill: $titleColor;
+}
+
+.sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+
+
+/* Grid and axis */
+
+.grid .tick {
+  stroke: $gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+
+.grid path {
+  stroke-width: 0;
+}
+
+
+/* Today line */
+
+.today {
+  fill: none;
+  stroke: $todayLineColor;
+  stroke-width: 2px;
+}
+
+
+/* Task styling */
+
+/* Default task */
+
+.task {
+  stroke-width: 2;
+}
+
+.taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+
+.taskTextOutsideRight {
+  fill: $taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
+}
+
+.taskTextOutsideLeft {
+  fill: $taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
+}
+
+/* Special case clickable */
+.task.clickable {
+  cursor: pointer;
+}
+.taskText.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: $taskTextColor;
+}
+
+.task0,
+.task1,
+.task2,
+.task3 {
+  fill: $taskBkgColor;
+  stroke: $taskBorderColor;
+}
+
+.taskTextOutside0,
+.taskTextOutside2
+{
+  fill: $taskTextOutsideColor;
+}
+
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: $taskTextOutsideColor;
+}
+
+
+/* Active task */
+
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: $activeTaskBkgColor;
+  stroke: $activeTaskBorderColor;
+}
+
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+
+/* Completed task */
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  stroke: $doneTaskBorderColor;
+  fill: $doneTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+
+/* Tasks on the critical line */
+
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: $critBorderColor;
+  fill: $critBkgColor;
+  stroke-width: 2;
+}
+
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  stroke: $critBorderColor;
+  fill: $activeTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  stroke: $critBorderColor;
+  fill: $doneTaskBkgColor;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+
+.milestone {
+  transform: rotate(45deg) scale(0.8,0.8);
+}
+
+.milestoneText {
+  font-style: italic;
+}
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: $taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: $taskTextDarkColor;
+}
--- a/assets/css/_mermaid/git.scss
+++ b/assets/css/_mermaid/git.scss
@@ -0,0 +1,6 @@
+.commit-id,
+.commit-msg,
+.branch-label {
+  fill: lightgrey;
+  color: lightgrey;
+}
--- a/assets/css/_mermaid/mermaid.scss
+++ b/assets/css/_mermaid/mermaid.scss
@@ -0,0 +1,5 @@
+@import 'flowchart';
+@import 'sequence';
+@import 'gantt';
+@import 'class';
+@import 'git';
--- a/assets/css/_mermaid/neutral/index.scss
+++ b/assets/css/_mermaid/neutral/index.scss
@@ -0,0 +1,62 @@
+$mainBkg: #eee;
+$contrast: #26a;
+$secondBkg: lighten($contrast, 55%);
+$lineColor: #666;
+$border1: #999;
+$border2: $contrast;
+$note: #ffa;
+$text: #333;
+$critical: #d42;
+$done: #bbb;
+$arrowheadColor: #333333;
+
+/* Flowchart variables */
+
+$nodeBkg: $mainBkg;
+$nodeBorder: $border1;
+$clusterBkg: $secondBkg;
+$clusterBorder: $border2;
+$defaultLinkColor: $lineColor;
+$titleColor: $text;
+$edgeLabelBackground: white;
+
+/* Sequence Diagram variables */
+
+$actorBorder: $border1;
+$actorBkg: $mainBkg;
+$actorTextColor: $text;
+$actorLineColor: $lineColor;
+$signalColor: $text;
+$signalTextColor: $text;
+$labelBoxBkgColor: $actorBkg;
+$labelBoxBorderColor: $actorBorder;
+$labelTextColor: $text;
+$loopTextColor: $text;
+$noteBorderColor: darken($note, 60%);
+$noteBkgColor: $note;
+$activationBorderColor: #666;
+$activationBkgColor: #f4f4f4;
+$sequenceNumberColor: white;
+
+/* Gantt chart variables */
+
+$sectionBkgColor: lighten($contrast, 30%);
+$altSectionBkgColor: white;
+$sectionBkgColor2: lighten($contrast, 30%);
+$taskBorderColor: darken($contrast, 10%);
+$taskBkgColor: $contrast;
+$taskTextLightColor: white;
+$taskTextColor: $taskTextLightColor;
+$taskTextDarkColor: $text;
+$taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
+$activeTaskBorderColor: $taskBorderColor;
+$activeTaskBkgColor: $mainBkg;
+$gridColor: lighten($border1, 30%);
+$doneTaskBkgColor: $done;
+$doneTaskBorderColor: $lineColor;
+$critBkgColor: $critical;
+$critBorderColor: darken($critBkgColor, 10%);
+$todayLineColor: $critBkgColor;
+
+@import '../mermaid';
--- a/assets/css/_mermaid/sequence.scss
+++ b/assets/css/_mermaid/sequence.scss
@@ -0,0 +1,96 @@
+.actor {
+  stroke: $actorBorder;
+  fill: $actorBkg;
+}
+
+text.actor {
+  fill: $actorTextColor;
+  stroke: none;
+}
+
+.actor-line {
+  stroke: $actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $signalColor;
+}
+
+#arrowhead {
+  fill: $signalColor;
+}
+
+.sequenceNumber {
+  fill: $sequenceNumberColor;
+}
+
+#sequencenumber {
+  fill: $signalColor;
+}
+
+#crosshead path {
+  fill: $signalColor !important;
+  stroke: $signalColor !important;
+}
+
+.messageText {
+  fill: $signalTextColor;
+  stroke: none;
+}
+
+.labelBox {
+  stroke: $labelBoxBorderColor;
+  fill: $labelBoxBkgColor;
+}
+
+.labelText {
+  fill: $labelTextColor;
+  stroke: none;
+}
+
+.loopText {
+  fill: $loopTextColor;
+  stroke: none;
+}
+
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: $labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: $noteBorderColor;
+  fill: $noteBkgColor;
+}
+
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+
+.activation0 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation1 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
+
+.activation2 {
+  fill: $activationBkgColor;
+  stroke: $activationBorderColor;
+}
--- a/assets/css/_page/_post.scss
+++ b/assets/css/_page/_post.scss
@@ -44,6 +44,51 @@
    }
  }

+  .post-toc {
+    position: absolute;
+    width: 200px;
+    max-width: 240px;
+    margin-left: 800px;
+    padding: 10px;
+    border-left: 1px solid $global-border-color;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    top: 120px;
+
+    .post-toc-title {
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+
+    .post-toc-content {
+      &.always-active ul {
+        display: block;
+      }
+
+      >nav>ul {
+        margin: 10px 0;
+      }
+
+      ul {
+        padding-left: 10px;
+        list-style: none;
+
+        ul {
+          padding-left: 20px;
+          display: none;
+        }
+
+        .has-active > ul {
+          display: block;
+        }
+      }
+
+      .toc-link.active {
+        color: $global-link-hover-color;
+      }
+    }
+  }
+
  .post-content {
    h2,
    h3,
@@ -95,25 +140,42 @@
      padding-left: 2em;
    }

-    table {
-      max-width: 100%;
-      margin: 10px 0;
-      border-spacing: 0;
-      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
+    .table-wrapper {
+      overflow-x: auto;

-      th,
-      td {
-        padding: 5px 15px;
-        border: 1px double #ebe9f5;
+      > table {
+        width: 100%;
+        max-width: 100%;
+        margin: 10px 0;
+        border-spacing: 0;
+        box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+        background: $table-background-color;
+
+        .dark-theme & {
+          background: $table-background-color-dark;
+        }
+
+        thead {
+          background: $table-thead-color;
+
+          .dark-theme & {
+            background-color: $table-thead-color-dark;
+          }
+        }
+
+        th, td {
+          padding: 5px 15px;
+          border: 1px double $global-border-color;
+
+          .dark-theme & {
+            border: 1px double $global-border-color-dark;
+          }
+        }
      }
    }

    figure {
      text-align: center;
-
-      img:hover {
-        cursor: zoom-in;
-      }
    }

    .image-caption:not(:empty) {
@@ -136,10 +198,6 @@
      overflow: hidden;
    }

-    img[data-action="zoom"] {
-      cursor: zoom-in;
-    }
-
    .featured_image {
      width: 100% !important;
      max-width: 100% !important;
@@ -193,6 +251,70 @@
    @import "../_partial/_post/code";
    @import "../_partial/_post/admonition";

+    .mermaid {
+      @import "../_mermaid/neutral/index";
+
+      .dark-theme & {
+        @import "../_mermaid/dark/index";
+      }
+    }
+
+    .echarts {
+      margin: 3% auto;
+      text-align: center;
+    }
+
+    .bilibili {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 75%;
+      margin: 3% auto;
+
+      iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+    }
+
+    hr {
+      margin: 1rem 0;
+      position: relative;
+      border-top: 1px dashed $global-border-color;
+      border-bottom: none;
+
+      .dark-theme & {
+        border-top: 1px dashed $global-border-color-dark;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: .25em;
+      background-color: $global-background-color;
+      border: 1px solid $global-border-color;
+      border-bottom-color: $global-border-color;
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 -1px 0 $global-border-color;
+      box-shadow: inset 0 -1px 0 $global-border-color;
+      font-size: .8em;
+      line-height: 1.25;
+      font-family: $code-font-family;
+      color: $code-color;
+
+      .dark-theme & {
+        background-color: $global-background-color-dark;
+        border: 1px solid $global-border-color-dark;
+        border-bottom-color: $global-border-color-dark;
+        -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        color: $code-color-dark;
+      }
+    }
+
    .typeit {
      .code {
        padding: 6px;
@@ -246,13 +368,11 @@
  }

  .post-info {
-    margin-top: 5rem;
-    border-top: 1px solid $global-border-color;
+    margin-top: 3rem;
    border-bottom: 1px solid $global-border-color;
-
-    .post-info-item {
-      margin: 5px 0;
-    }
+    padding: 1rem 0 0.3rem;
+    display: flex;
+    justify-content: space-between;

    .dark-theme & {
      border-top: 1px solid $global-border-color-dark;
@@ -261,7 +381,7 @@
  }

  .post-tags {
-    padding: 1rem 0 1rem;
+    padding: 0.3rem 0 1rem;
    display: flex;
    justify-content: space-between;
  }
--- a/assets/css/_partial/_post/_code.scss
+++ b/assets/css/_partial/_post/_code.scss
@@ -3,10 +3,10 @@ pre {
  padding: 7px;
  font-size: $code-font-size;
  font-family: $code-font-family;
-  background: $l-code-background;
+  background: $code-background;

  .dark-theme & {
-    background: $d-code-background;
+    background: $code-background-dark;
  }
 }

@@ -14,20 +14,20 @@ code {
  padding: 3px 5px;
  border-radius: 4px;
  color: $code-color;
-  background: $l-code-background;
+  background: $code-background;

  .dark-theme & {
    color: $code-color-dark;
-    background: $d-code-background;
+    background: $code-background-dark;
  }
 }

 p > code {
-  background: darken($l-code-background, 3%);
+  background: darken($code-background, 3%);

  .dark-theme & {
    color: $code-color-dark;
-    background: darken($d-code-background, 3%);
+    background: darken($code-background-dark, 3%);
  }
 }

@@ -38,7 +38,7 @@ p > code {
  overflow-x: auto;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
  position: relative;
-  background: $l-code-background;
+  background: $code-background;

  code {
    padding: 0;
@@ -56,11 +56,11 @@ p > code {
      font-size: $code-font-size;
      font-weight: bold;
      color: darken($code-info-color, 10%);
-      background: darken($l-code-background, 3%);
+      background: darken($code-background, 3%);
      content: 'Code';

      .dark-theme & {
-        background: darken($d-code-background, 3%);
+        background: darken($code-background-dark, 3%);
      }
    }
  }
@@ -81,7 +81,7 @@ p > code {

      pre {
        margin: 0;
-        padding: 40px 7px 10px;
+        padding: 38px 7px 8px;
      }
    }

@@ -90,7 +90,7 @@ p > code {

      pre {
        margin: 0;
-        padding: 40px 10px 10px;
+        padding: 38px 10px 8px;
      }
    }
  }
@@ -100,10 +100,10 @@ p > code {
    padding: 0;
    width: 100%;
    border-collapse: collapse;
-    border-color: $l-code-background;
+    border-color: $code-background;

    .dark-theme & {
-      border-color: $d-code-background;
+      border-color: $code-background-dark;
    }
  }

@@ -183,7 +183,7 @@ p > code {
  /* GenericTraceback */  .gt { color: #d33682 }

  .dark-theme & {
-    background: $d-code-background;
+    background: $code-background-dark;

    /* Keyword */ .chroma .k { color: #D371E3 }
    /* KeywordConstant */ .chroma .kc { color: #D371E3 }
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -35,15 +35,27 @@ $pagination-link-color-dark: #a9a9b3 !default;
 $pagination-link-active-color: #000 !default;
 $pagination-link-active-color-dark: #fff !default;

+// Color of the table background.
+$table-background-color: white !default;
+$table-background-color-dark: #272C34 !default;
+
+// Color of the table thead.
+$table-thead-color: #EDEDED !default;
+$table-thead-color-dark: #20252B !default;
+
 // ========== Code ========== //
 // Color of the code.
 $code-color: #E74C3C !default;
 $code-color-dark: #E5BF78 !default;

+// Color of the code background.
+$code-background: whitesmoke !default;
+$code-background-dark: #272C34 !default;
+
 $code-info-color: #cacaca !default;

 // Font size of code.
-$code-font-size: 14px !default;
+$code-font-size: 13px !default;

 // Font family of the code.
 $code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !default;
@@ -94,7 +106,3 @@ $code-type-list: (
  language-toml: "TOML",
  language-diff: "Diff"
 ) !default;
-
-// Color of the code background.
-$l-code-background: #F8F5EC !default;
-$d-code-background: #272C34 !default;
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -11,14 +11,14 @@ jQuery(function($) {
        });
    };

-    _Blog.toggleTheme = function() {
-        const currentTheme = window.localStorage && window.localStorage.getItem('theme');
-        const isDark = currentTheme === 'dark';
+    _Blog.toggleTheme = function(isDark) {
        $('body').toggleClass('dark-theme', isDark);
        $('.theme-switch').on('click', () => {
            $('body').toggleClass('dark-theme');
-            window.localStorage &&
-                window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
+            window.localStorage && window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
+            const currentTheme = window.localStorage && window.localStorage.getItem('theme');
+            const isDark = currentTheme === 'dark';
+            this.echarts(isDark);
        });
    };

@@ -42,6 +42,143 @@ jQuery(function($) {
        }
    };

+    _Blog.responsiveTable = function() {
+        const tables = document.querySelectorAll('.post-content > table');
+        for (let i = 0; i < tables.length; i++) {
+            const table = tables[i];
+            const wrapper = document.createElement('div');
+            wrapper.className = 'table-wrapper';
+            table.parentElement.replaceChild(wrapper, table);
+            wrapper.appendChild(table);
+        }
+    };
+
+    _Blog._initToc = function() {
+        const SPACING = 20;
+        const $toc = $('.post-toc');
+
+        if ($toc.length) {
+            const startTop = $toc.css("top");
+            const minScrollTop = $toc.offset().top - SPACING;
+
+            const tocState = {
+                start: {
+                    'position': 'absolute',
+                    'top': startTop,
+                },
+                process: {
+                    'position': 'fixed',
+                    'top': SPACING,
+                },
+            };
+
+            $(window).scroll(function() {
+            const scrollTop = $(window).scrollTop();
+
+            if (scrollTop < minScrollTop) {
+                $toc.css(tocState.start);
+            } else {
+                $toc.css(tocState.process);
+            }
+            });
+        }
+
+        const HEADERFIX = 30;
+        const $toclink = $('.toc-link');
+        const $headerlink = $('.headerlink');
+        const $tocLinkLis = $('.post-toc-content li');
+
+        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;
+        };
+
+        const activeIndex = function() {
+            const scrollTop = $(window).scrollTop();
+            const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
+
+            $($toclink).removeClass('active');
+            $($tocLinkLis).removeClass('has-active');
+
+            if (activeTocIndex !== -1) {
+                $($toclink[activeTocIndex]).addClass('active');
+                let ancestor = $toclink[activeTocIndex].parentNode;
+                while (ancestor.tagName !== 'NAV') {
+                    $(ancestor).addClass('has-active');
+                    ancestor = ancestor.parentNode.parentNode;
+                }
+            }
+        };
+        activeIndex();
+        $(window).scroll(activeIndex);
+    };
+
+    _Blog.toc = function() {
+        const tocContainer = document.getElementById('post-toc');
+        if (tocContainer !== null) {
+            const toc = document.getElementById('TableOfContents');
+            if (toc === null) {
+            // toc = true, but there are no headings
+            tocContainer.parentNode.removeChild(tocContainer);
+            } else {
+            this._refactorToc(toc);
+            this._linkToc();
+            this._initToc();
+            }
+        }
+    };
+
+    _Blog._refactorToc = function(toc) {
+        // when headings do not start with `h1`
+        const oldTocList = toc.children[0];
+        let newTocList = oldTocList;
+        let temp;
+        while (newTocList.children.length === 1
+            && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
+            newTocList = temp;
+        }
+
+        if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
+    };
+
+    _Blog._linkToc = function() {
+        const links = document.querySelectorAll('#TableOfContents a:first-child');
+        for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
+
+        for (let num = 1; num <= 6; num++) {
+            const headers = document.querySelectorAll('.post-content>h' + num);
+            for (let i = 0; i < headers.length; i++) {
+                const header = headers[i];
+                header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
+            }
+        }
+    };
+
+    _Blog.echarts = function(isDark) {
+        if (window.echartsMap) {
+            for (let i = 0; i < echartsArr.length; i++) {
+                echartsArr[i].dispose();
+            }
+            echartsArr = [];
+            Object.keys(echartsMap).forEach(function(id) {
+                let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
+                myChart.setOption(echartsMap[id]);
+                echartsArr.push(myChart);
+            });
+        }
+    }
+
    _Blog.countdown = function() {
        if (window.countdownMap) {
            Object.keys(countdownMap).forEach(function(id) {
@@ -81,10 +218,16 @@ jQuery(function($) {
    };

    $(document).ready(function() {
+        const currentTheme = window.localStorage && window.localStorage.getItem('theme');
+        const isDark = currentTheme === 'dark';
+
        _Blog.toggleMobileMenu();
-        _Blog.toggleTheme();
+        _Blog.toggleTheme(isDark);
        _Blog.changeTitle();
        _Blog.chroma();
+        _Blog.responsiveTable();
+        _Blog.toc();
+        _Blog.echarts(isDark);
        _Blog.countdown();
        _Blog.typeit();
    });