Update code formatv2.2.1

11 files changed, 522 insertions, 514 deletions

diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss
index 429d869..fe2a8eb 100644
--- a/assets/scss/_fuji-style/_components.scss
+++ b/assets/scss/_fuji-style/_components.scss
@@ -1,35 +1,35 @@
 .btn {
-    position: fixed;
-    right: 1.5rem;
-    bottom: 1.5rem;
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: 2.5rem;
+  height: 5rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  div {
+    flex: 0 1 auto;
     width: 2.5rem;
-    height: 5rem;
+    height: 2.5rem;
     display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-
-    div {
-        flex: 0 1 auto;
-        width: 2.5rem;
-        height: 2.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 
-        &:first-child {
-            border-radius: 0.25rem 0.25rem 0 0;
-            font-size: 1.25rem;
-        }
+    &:first-child {
+      border-radius: 0.25rem 0.25rem 0 0;
+      font-size: 1.25rem;
+    }
 
-        &:last-child {
-            border-radius: 0 0 0.25rem 0.25rem;
-            font-size: 1.3rem;
-        }
+    &:last-child {
+      border-radius: 0 0 0.25rem 0.25rem;
+      font-size: 1.3rem;
     }
+  }
 }
 
 #post-aplayer {
-    margin: 0 0.125rem 1.25rem 0.125rem;
-    font-family: inherit;
+  margin: 0 0.125rem 1.25rem 0.125rem;
+  font-family: inherit;
 }
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index 1c10be2..4c06c45 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -1,214 +1,215 @@
 .content {
-    padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar
+  padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar
 }
 
 .post {
-    // paddings between posts
-    &:not(:first-child) {
-        padding: 1.5rem 0;
-    }
+  // paddings between posts
+  &:not(:first-child) {
+    padding: 1.5rem 0;
+  }
 
-    &:first-child {
-        padding: 0 0 1.5rem 0;
-    }
+  &:first-child {
+    padding: 0 0 1.5rem 0;
+  }
 }
 
 .post-title {
-    font-size: $font-size-1;
+  font-size: $font-size-1;
 }
 
 .post-meta {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
+  flex-wrap: wrap;
+
+  span {
     display: flex;
     align-items: center;
-    margin: 0.5rem 0.1rem 1rem 0.1rem; // little space
-    flex-wrap: wrap;
+  }
 
-    span {
-        display: flex;
-        align-items: center;
-    }
-
-    span:not(:last-child) {
-        padding-right: 1.5rem;
-    }
+  span:not(:last-child) {
+    padding-right: 1.5rem;
+  }
 }
 
 .post-summary {
-    margin: 0 0.1rem; // little space
+  margin: 0 0.1rem; // little space
 
-    p:last-child {
-        margin-bottom: 0; // remove margin-bottom of last para in summary
-    }
+  p:last-child {
+    margin-bottom: 0; // remove margin-bottom of last para in summary
+  }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        display: none; // hide h1-h6 in post summary
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    display: none; // hide h1-h6 in post summary
+  }
 }
 
 .post-meta-archive {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0.1rem 0 0.1rem; // little space
+  flex-wrap: wrap;
+
+  span {
     display: flex;
     align-items: center;
-    margin: 0.5rem 0.1rem 0 0.1rem; // little space
-    flex-wrap: wrap;
-
-    span {
-        display: flex;
-        align-items: center;
-    }
+  }
 
-    span:not(:last-child) {
-        padding-right: 1.5rem;
-    }
+  span:not(:last-child) {
+    padding-right: 1.5rem;
+  }
 }
 
 .pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  padding: 1.25rem 0;
+
+  div {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.25rem;
-    line-height: 1.25rem;
-    padding: 1.25rem 0;
-
-    div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 2rem;
-        height: 2rem;
-
-        a {
-            display: flex;
-            align-items: center;
-        }
+    width: 2rem;
+    height: 2rem;
+
+    a {
+      display: flex;
+      align-items: center;
     }
+  }
 }
 
 .page-info {
-    padding: 0 0.1rem 1.5rem 0.1rem;
+  padding: 0 0.1rem 1.5rem 0.1rem;
 }
 
 // single page part
 article {
-    padding-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
 
-    .post-content {
-        margin: 1.25rem 0.1rem 0 0.1rem;
-    }
+  .post-content {
+    margin: 1.25rem 0.1rem 0 0.1rem;
+  }
 }
 
 .license {
-    margin-bottom: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .post-loading {
-    margin: 0 0 1.5rem 0;
-    padding-top: 1.5rem;
-    text-align: center;
+  margin: 0 0 1.5rem 0;
+  padding-top: 1.5rem;
+  text-align: center;
 
-    i {
-        font-size: 1.25rem;
-    }
+  i {
+    font-size: 1.25rem;
+  }
 
-    p {
-        margin: 0.5rem 0 0 0;
-    }
+  p {
+    margin: 0.5rem 0 0 0;
+  }
 }
 
 .markdown-body {
-    h1 {
-        font-size: $font-size-1;
-        margin-top: 1.5rem;
-    }
+  h1 {
+    font-size: $font-size-1;
+    margin-top: 1.5rem;
+  }
 
-    h2 {
-        font-size: $font-size-2;
-        margin-top: 1.375rem;
-    }
+  h2 {
+    font-size: $font-size-2;
+    margin-top: 1.375rem;
+  }
 
-    h3 {
-        font-size: $font-size-3;
-        margin-top: 1.25rem;
-    }
+  h3 {
+    font-size: $font-size-3;
+    margin-top: 1.25rem;
+  }
 
-    h4 {
-        margin-top: 1.25rem;
-    }
+  h4 {
+    margin-top: 1.25rem;
+  }
 
-    ul {
-        list-style-type: circle;
-    }
+  ul {
+    list-style-type: circle;
+  }
 
-    img {
-        max-width: 98%;
-        margin: 0 0.25rem 0.5rem 0.25rem;
-    }
+  img {
+    max-width: 98%;
+    margin: 0 0.25rem 0.5rem 0.25rem;
+  }
 
-    .table-dense {
-        font-size: 0.875rem;
+  .table-dense {
+    font-size: 0.875rem;
 
-        td, th {
-            padding: 4px 8px !important; 
-        }
+    td,
+    th {
+      padding: 4px 8px !important;
     }
+  }
 }
 
 .post-comment {
-    span.post-comment-notloaded {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+  span.post-comment-notloaded {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 #disqus_thread {
-    padding: 1.25rem 0;
+  padding: 1.25rem 0;
 }
 
 // search page part
 
 #search-result .post:first-child {
-    padding: 1.5rem 0;
+  padding: 1.5rem 0;
 }
 
 .search-result-info {
-    padding: 1rem 0.1rem;
+  padding: 1rem 0.1rem;
 }
 
 .search-input {
-    display: flex;
-    height: 2.5rem;
-    align-items: center;
-    padding-left: 0.5rem;
+  display: flex;
+  height: 2.5rem;
+  align-items: center;
+  padding-left: 0.5rem;
+  width: 100%;
+
+  input {
     width: 100%;
+    min-width: 0;
+    flex: 1 1 auto;
+    height: 2rem;
+  }
+
+  button {
+    flex: 0 1 auto;
+    padding: 0 0.5rem;
+    word-break: keep-all;
+    height: 2.5rem;
 
-    input {
-        width: 100%;
-        min-width: 0;
-        flex: 1 1 auto;
-        height: 2rem;
+    &:hover {
+      i {
+        color: var(--color-primary);
+      }
     }
 
-    button {
-        flex: 0 1 auto;
-        padding: 0 0.5rem;
-        word-break: keep-all;
-        height: 2.5rem;
-        
-        &:hover {
-            i {
-                color: var(--color-primary);
-            }
-        }
-
-        i {
-            color: var(--color-mute);
-            height: 100%;
-            font-size: 1.6rem;
-        }
+    i {
+      color: var(--color-mute);
+      height: 100%;
+      font-size: 1.6rem;
     }
+  }
 }
diff --git a/assets/scss/_fuji-style/_footer.scss b/assets/scss/_fuji-style/_footer.scss
index ab1bde1..5065541 100644
--- a/assets/scss/_fuji-style/_footer.scss
+++ b/assets/scss/_fuji-style/_footer.scss
@@ -1,10 +1,10 @@
 footer {
-    .footer {
-        padding: 2rem 1.5rem;
-        text-align: center;
+  .footer {
+    padding: 2rem 1.5rem;
+    text-align: center;
 
-        i {
-            font-size: 0.875rem;
-        }
+    i {
+      font-size: 0.875rem;
     }
+  }
 }
diff --git a/assets/scss/_fuji-style/_header.scss b/assets/scss/_fuji-style/_header.scss
index c99828b..af70929 100644
--- a/assets/scss/_fuji-style/_header.scss
+++ b/assets/scss/_fuji-style/_header.scss
@@ -1,25 +1,25 @@
 header {
-    .header {
-        padding: 1.75rem 1.5rem 2rem 1.5rem;
-    }
-
-    .title-main {
-        font-size: 2.5rem;
-        font-family: $title-font;
-        font-weight: 700;
-        white-space: nowrap;
-    }
+  .header {
+    padding: 1.75rem 1.5rem 2rem 1.5rem;
+  }
 
-    .title-sub {
-        margin: 0 0.1rem;
-        display: block;
-        white-space: nowrap;
+  .title-main {
+    font-size: 2.5rem;
+    font-family: $title-font;
+    font-weight: 700;
+    white-space: nowrap;
+  }
 
-        &::-webkit-scrollbar {
-            display: none; // WebKit
-        }
+  .title-sub {
+    margin: 0 0.1rem;
+    display: block;
+    white-space: nowrap;
 
-        scrollbar-width: none; // Firefox
-        -ms-overflow-style: none; // Microsoft
+    &::-webkit-scrollbar {
+      display: none; // WebKit
     }
+
+    scrollbar-width: none; // Firefox
+    -ms-overflow-style: none; // Microsoft
+  }
 }
diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss
index ab96b1a..6eb255e 100644
--- a/assets/scss/_fuji-style/_sidebar.scss
+++ b/assets/scss/_fuji-style/_sidebar.scss
@@ -1,72 +1,72 @@
 .sidebar {
-    padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen
+  padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen
 }
 
 .sidebar-item {
-    &:not(:last-child) {
-        margin-bottom: 1rem; // space between sidebar items
-    }
+  &:not(:last-child) {
+    margin-bottom: 1rem; // space between sidebar items
+  }
 
-    h3 {
-        margin-bottom: 0.25rem; // space between head3 & lists
-    }
+  h3 {
+    margin-bottom: 0.25rem; // space between head3 & lists
+  }
 
-    ul {
-        list-style-type: none;
-        margin: 0 0.1rem; // little space
-    }
+  ul {
+    list-style-type: none;
+    margin: 0 0.1rem; // little space
+  }
 
-    & > div,
-    & > nav {
-        margin: 0 0.1rem; // little space
-    }
+  & > div,
+  & > nav {
+    margin: 0 0.1rem; // little space
+  }
 
-    & > img {
-        margin: 0.5rem 0.25rem 0 0.25rem;
-        width: 100%;
-        border-radius: 2px;
-    }
+  & > img {
+    margin: 0.5rem 0.25rem 0 0.25rem;
+    width: 100%;
+    border-radius: 2px;
+  }
 }
 
 @media screen and (max-width: $width-md) {
-    .sidebar {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-around;
-    }
+  .sidebar {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
 
-    .sidebar-item {
-        width: 40%; // max 2 modules per line
+  .sidebar-item {
+    width: 40%; // max 2 modules per line
 
-        // space only at first 2 modules
-        .sidebar-pages,
-        .sidebar-tags {
-            margin-bottom: 1rem;
-        }
+    // space only at first 2 modules
+    .sidebar-pages,
+    .sidebar-tags {
+      margin-bottom: 1rem;
+    }
 
-        .sidebar-links,
-        .sidebar-bgm {
-            margin-bottom: 0;
-        }
+    .sidebar-links,
+    .sidebar-bgm {
+      margin-bottom: 0;
+    }
 
-        & > img {
-            margin: 0.5rem 0.25rem 0 0.25rem;
-            width: 75%;
-            border-radius: 0.25rem;
-        }
+    & > img {
+      margin: 0.5rem 0.25rem 0 0.25rem;
+      width: 75%;
+      border-radius: 0.25rem;
     }
+  }
 }
 
 // single page part
 .sidebar-toc {
-    ul ul {
-        font-size: 0.875rem;
-        padding-left: 0.5rem;
-        margin-bottom: 0.25rem;
-    }
+  ul ul {
+    font-size: 0.875rem;
+    padding-left: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
 
-    position: sticky;
-    top: 1rem;
+  position: sticky;
+  top: 1rem;
 }
diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss
index d9a6f7e..95c7709 100644
--- a/assets/scss/_fuji-theme/_base.scss
+++ b/assets/scss/_fuji-theme/_base.scss
@@ -1,63 +1,63 @@
 @mixin light {
-    --color-mode: 'light';
-    --color-primary: #{$light-color-primary};
-    --color-secondary: #{$light-color-secondary};
-    --color-focus: #{$light-color-focus};
-    --color-mute: #{$light-color-mute};
-    --color-font: #{$light-color-font};
-    --color-divider: #{$light-color-divider};
-    --color-bg: #{$light-color-bg};
-    --color-codebg: #{$light-color-codebg};
+  --color-mode: 'light';
+  --color-primary: #{$light-color-primary};
+  --color-secondary: #{$light-color-secondary};
+  --color-focus: #{$light-color-focus};
+  --color-mute: #{$light-color-mute};
+  --color-font: #{$light-color-font};
+  --color-divider: #{$light-color-divider};
+  --color-bg: #{$light-color-bg};
+  --color-codebg: #{$light-color-codebg};
 }
 
 @mixin dark {
-    --color-mode: 'dark';
-    --color-primary: #{$dark-color-primary};
-    --color-secondary: #{$dark-color-secondary};
-    --color-focus: #{$dark-color-focus};
-    --color-mute: #{$dark-color-mute};
-    --color-font: #{$dark-color-font};
-    --color-divider: #{$dark-color-divider};
-    --color-bg: #{$dark-color-bg};
-    --color-codebg: #{$dark-color-codebg};
+  --color-mode: 'dark';
+  --color-primary: #{$dark-color-primary};
+  --color-secondary: #{$dark-color-secondary};
+  --color-focus: #{$dark-color-focus};
+  --color-mute: #{$dark-color-mute};
+  --color-font: #{$dark-color-font};
+  --color-divider: #{$dark-color-divider};
+  --color-bg: #{$dark-color-bg};
+  --color-codebg: #{$dark-color-codebg};
 }
 
 body[data-theme='auto'] {
-    @include light();
+  @include light();
 
-    @media (prefers-color-scheme: dark) {
-        @include dark();
-        @import '_dark-diff'; // things different from light
-    }
+  @media (prefers-color-scheme: dark) {
+    @include dark();
+    @import '_dark-diff'; // things different from light
+  }
 }
 
 body[data-theme='light'] {
-    @include light();
+  @include light();
 }
 
 body[data-theme='dark'] {
-    @include dark();
-    @import '_dark-diff'; // things different from light
+  @include dark();
+  @import '_dark-diff'; // things different from light
 }
 
 @mixin link-1 {
-    a {
-        color: var(--color-primary);
-    }
+  a {
+    color: var(--color-primary);
+  }
 
-    a:hover {
-        color: var(--color-secondary);
-    }
+  a:hover {
+    color: var(--color-secondary);
+  }
 }
 
 @mixin link-2 {
-    a {
-        color: var(--color-secondary);
-    }
+  a {
+    color: var(--color-secondary);
+  }
 
-    a:hover {
-        color: var(--color-focus);
-    }
+  a:hover {
+    color: var(--color-focus);
+  }
 }
 
 $divider: 2px solid var(--color-divider);
diff --git a/assets/scss/_fuji-theme/_dark-diff.scss b/assets/scss/_fuji-theme/_dark-diff.scss
index 1af08fb..3e8c10f 100644
--- a/assets/scss/_fuji-theme/_dark-diff.scss
+++ b/assets/scss/_fuji-theme/_dark-diff.scss
@@ -1,52 +1,52 @@
 table {
-    th,
-    td {
-        border-color: var(--color-font);
-    }
+  th,
+  td {
+    border-color: var(--color-font);
+  }
 
-    tr {
-        background-color: var(--color-bg);
-        border-color: var(--color-font);
+  tr {
+    background-color: var(--color-bg);
+    border-color: var(--color-font);
 
-        &:nth-child(2n) {
-            background-color: var(--color-divider);
-        }
+    &:nth-child(2n) {
+      background-color: var(--color-divider);
     }
+  }
 }
 
 #post-aplayer {
-    background-color: var(--color-divider);
+  background-color: var(--color-divider);
 }
 
 .aplayer .aplayer-info .aplayer-music .aplayer-author {
-    color: var(--color-font) !important;
+  color: var(--color-font) !important;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
-    fill: var(--color-font) !important;
+  fill: var(--color-font) !important;
 }
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
-    fill: var(--color-focus) !important;
+  fill: var(--color-focus) !important;
 }
 
 .aplayer .aplayer-list ol li {
-    border-top: 1px solid var(--color-bg) !important;
+  border-top: 1px solid var(--color-bg) !important;
 }
 
 .aplayer.aplayer-withlist .aplayer-info {
-    border-bottom: 1px solid var(--color-bg) !important;
+  border-bottom: 1px solid var(--color-bg) !important;
 }
 
 .aplayer .aplayer-list ol li.aplayer-list-light {
-    background-color: var(--color-codebg) !important;
+  background-color: var(--color-codebg) !important;
 }
 
 .aplayer .aplayer-list ol li:hover {
-    background-color: var(--color-codebg) !important;
+  background-color: var(--color-codebg) !important;
 }
 
 .aplayer .aplayer-list ol li .aplayer-list-author,
 .aplayer .aplayer-list ol li .aplayer-list-index {
-    color: var(--color-font) !important;
+  color: var(--color-font) !important;
 }
diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss
index f731fa2..dc4ef44 100644
--- a/assets/scss/_fuji-theme/_style.scss
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -1,156 +1,156 @@
 ::selection,
 ::-moz-selection {
-    color: var(--color-bg);
-    background-color: var(--color-primary);
+  color: var(--color-bg);
+  background-color: var(--color-primary);
 }
 
 body {
-    background-color: var(--color-bg);
-    color: var(--color-font);
+  background-color: var(--color-bg);
+  color: var(--color-font);
 
-    @include link-1();
+  @include link-1();
 }
 
 .post-summary,
 .post-meta {
-    @include link-2();
+  @include link-2();
 }
 
 .pag-current a,
 .pag-current a:hover {
-    color: var(--color-focus);
+  color: var(--color-focus);
 }
 
 .title-sub,
 .post-meta {
-    color: var(--color-mute);
+  color: var(--color-mute);
 }
 
 header,
 .page-info {
-    border-bottom: $divider;
+  border-bottom: $divider;
 }
 
 .post + .post,
 .pagination,
 footer {
-    border-top: $divider;
+  border-top: $divider;
 }
 
 .post-meta-archive {
-    @include link-2();
+  @include link-2();
 
-    color: var(--color-mute);
+  color: var(--color-mute);
 }
 
 @media screen and (max-width: $width-md) {
-    .sidebar {
-        border-top: $divider;
-    }
+  .sidebar {
+    border-top: $divider;
+  }
 }
 
 // single page part
 .post-content {
-    @include link-2();
+  @include link-2();
 }
 
 .markdown-body {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        color: var(--color-primary);
-    }
-
-    strong,
-    em {
-        color: var(--color-secondary);
-    }
-
-    h1,
-    h2 {
-        border-bottom: $divider;
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--color-primary);
+  }
+
+  strong,
+  em {
+    color: var(--color-secondary);
+  }
+
+  h1,
+  h2 {
+    border-bottom: $divider;
+  }
 
-    blockquote {
-        color: var(--color-mute);
-    }
+  blockquote {
+    color: var(--color-mute);
+  }
 
-    img {
-        border-radius: 2px;
-        background-color: inherit; // fix white pixels under border-radius
-    }
+  img {
+    border-radius: 2px;
+    background-color: inherit; // fix white pixels under border-radius
+  }
 
-    hr {
-        height: 2px;
-    }
+  hr {
+    height: 2px;
+  }
 
-    pre,
-    code {
-        background-color: var(--color-codebg);
-    }
+  pre,
+  code {
+    background-color: var(--color-codebg);
+  }
 }
 
 .post-loading {
-    border-top: $divider;
+  border-top: $divider;
 }
 
 .post-comment {
-    border-top: $divider;
+  border-top: $divider;
 
-    span.post-comment-notloaded {
-        padding: 1.5rem 0;
-        color: var(--color-secondary);
-        cursor: pointer;
+  span.post-comment-notloaded {
+    padding: 1.5rem 0;
+    color: var(--color-secondary);
+    cursor: pointer;
 
-        &:hover {
-            color: var(--color-focus);
-        }
+    &:hover {
+      color: var(--color-focus);
     }
+  }
 }
 
 // components
 .btn {
-    div {
-        background-color: var(--color-divider);
+  div {
+    background-color: var(--color-divider);
 
-        color: var(--color-primary);
-    }
+    color: var(--color-primary);
+  }
 
-    div:hover {
-        background-color: var(--color-primary);
-        color: var(--color-divider);
-    }
+  div:hover {
+    background-color: var(--color-primary);
+    color: var(--color-divider);
+  }
 
-    div + div {
-        border-top: 2px solid var(--color-bg);
-    }
+  div + div {
+    border-top: 2px solid var(--color-bg);
+  }
 }
 
 // prism.js theme [solarized-light]
 
 code[class*='language-'],
 pre[class*='language-'] {
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #93a1a1; /* base1 */
+  color: #93a1a1; /* base1 */
 }
 
 .token.punctuation {
-    color: #586e75; /* base01 */
+  color: #586e75; /* base01 */
 }
 
 .token.namespace {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -160,7 +160,7 @@ pre[class*='language-'] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-    color: #268bd2; /* blue */
+  color: #268bd2; /* blue */
 }
 
 .token.selector,
@@ -170,188 +170,188 @@ pre[class*='language-'] {
 .token.builtin,
 .token.url,
 .token.inserted {
-    color: #2aa198; /* cyan */
+  color: #2aa198; /* cyan */
 }
 
 .token.entity {
-    color: #657b83; /* base00 */
-    background: #eee8d5; /* base2 */
+  color: #657b83; /* base00 */
+  background: #eee8d5; /* base2 */
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-    color: #859900; /* green */
+  color: #859900; /* green */
 }
 
 .token.function,
 .token.class-name {
-    color: #b58900; /* yellow */
+  color: #b58900; /* yellow */
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-    color: #cb4b16; /* orange */
+  color: #cb4b16; /* orange */
 }
 
 .token.important,
 .token.bold {
-    font-weight: 600;
+  font-weight: 600;
 }
 .token.italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 // fix conflicts of primer css & prism.js style
 pre,
 code {
-    .rule {
-        margin: 0;
-        border-bottom: none;
-        overflow: inherit;
-
-        &::before,
-        &::after {
-            display: inherit;
-            clear: inherit;
-        }
+  .rule {
+    margin: 0;
+    border-bottom: none;
+    overflow: inherit;
+
+    &::before,
+    &::after {
+      display: inherit;
+      clear: inherit;
     }
+  }
 }
 
 // disqus js styles
 
 #dsqjs {
-    a {
-        text-decoration: none !important;
-        color: var(--color-secondary) !important;
-    }
+  a {
+    text-decoration: none !important;
+    color: var(--color-secondary) !important;
+  }
 
-    a:hover {
-        color: var(--color-focus) !important;
-    }
+  a:hover {
+    color: var(--color-focus) !important;
+  }
 
-    .dsqjs-bullet::after {
-        color: var(--color-mute) !important;
-        font-weight: 600 !important;
-    }
+  .dsqjs-bullet::after {
+    color: var(--color-mute) !important;
+    font-weight: 600 !important;
+  }
 
-    .dsqjs-no-comment {
-        color: var(--color-font) !important;
-    }
+  .dsqjs-no-comment {
+    color: var(--color-font) !important;
+  }
 
-    .dsqjs-nav-tab {
-        color: var(--color-mute) !important;
-    }
+  .dsqjs-nav-tab {
+    color: var(--color-mute) !important;
+  }
 
-    .dsqjs-tab-active {
-        color: var(--color-font) !important;
+  .dsqjs-tab-active {
+    color: var(--color-font) !important;
 
-        & > span:after {
-            background-color: var(--color-secondary) !important;
-        }
+    & > span:after {
+      background-color: var(--color-secondary) !important;
     }
+  }
 
-    .dsqjs-post-list {
-        .dsqjs-post-avatar {
-            background: var(--color-bg) !important;
-        }
-
-        .dsqjs-post-header {
-            .dsqjs-post-author {
-                color: var(--color-mute) !important;
-                font-weight: 600;
-            }
-
-            .dsqjs-admin-badge {
-                color: var(--color-font) !important;
-                background: var(--color-codebg) !important;
-            }
-
-            .dsqjs-meta {
-                color: var(--color-mute) !important;
-            }
-        }
+  .dsqjs-post-list {
+    .dsqjs-post-avatar {
+      background: var(--color-bg) !important;
     }
 
-    .dsqjs-post-body {
-        color: var(--color-font) !important;
-
-        code,
-        pre {
-            background: var(--color-codebg) !important;
-        }
-
-        blockquote {
-            color: var(--color-codebg) !important;
-            border-left: 0.25em solid var(--color-divider) !important;
-        }
-    }
+    .dsqjs-post-header {
+      .dsqjs-post-author {
+        color: var(--color-mute) !important;
+        font-weight: 600;
+      }
 
-    .dsqjs-load-more {
-        background: var(--color-mute) !important;
-        color: var(--color-bg) !important;
-    }
+      .dsqjs-admin-badge {
+        color: var(--color-font) !important;
+        background: var(--color-codebg) !important;
+      }
 
-    footer {
-        border-top: 2px solid var(--color-divider) !important;
-        font-weight: 600 !important;
+      .dsqjs-meta {
         color: var(--color-mute) !important;
+      }
     }
+  }
 
-    .dsqjs-order-radio:checked + .dsqjs-order-label {
-        color: var(--color-font) !important;
-        background-color: var(--color-divider) !important;
-    }
+  .dsqjs-post-body {
+    color: var(--color-font) !important;
 
-    .dsqjs-order-label {
-        background-color: var(--color-bg) !important;
+    code,
+    pre {
+      background: var(--color-codebg) !important;
     }
 
-    p.dsqjs-has-more a.dsqjs-has-more-btn {
-        color: var(--color-mute) !important;
+    blockquote {
+      color: var(--color-codebg) !important;
+      border-left: 0.25em solid var(--color-divider) !important;
     }
+  }
+
+  .dsqjs-load-more {
+    background: var(--color-mute) !important;
+    color: var(--color-bg) !important;
+  }
+
+  footer {
+    border-top: 2px solid var(--color-divider) !important;
+    font-weight: 600 !important;
+    color: var(--color-mute) !important;
+  }
+
+  .dsqjs-order-radio:checked + .dsqjs-order-label {
+    color: var(--color-font) !important;
+    background-color: var(--color-divider) !important;
+  }
+
+  .dsqjs-order-label {
+    background-color: var(--color-bg) !important;
+  }
+
+  p.dsqjs-has-more a.dsqjs-has-more-btn {
+    color: var(--color-mute) !important;
+  }
 }
 
 .search-result-info {
-    border-bottom: $divider;
+  border-bottom: $divider;
 }
 
 .search-input {
+  border-top: 2px solid;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  border-right: none;
+  border-radius: 0.25rem;
+  border-color: var(--color-divider);
+  background-color: var(--color-bg);
+
+  &:hover,
+  &:focus-within {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  input {
+    outline: none;
+    border: none;
+    color: inherit;
+    background-color: inherit;
+  }
+
+  button {
+    outline: none;
     border-top: 2px solid;
-    border-left: 2px solid;
+    border-left: none;
+    border-right: 2px solid;
     border-bottom: 2px solid;
-    border-right: none;
-    border-radius: 0.25rem;
-    border-color: var(--color-divider);
-    background-color: var(--color-bg);
-
-    &:hover,
-    &:focus-within {
-        color: var(--color-primary);
-        border-color: var(--color-primary);
-    }
-
-    input {
-        outline: none;
-        border: none;
-        color: inherit;
-        background-color: inherit;
-    }
+    border-radius: 0 0.25rem 0.25rem 0;
+    border-color: inherit;
+    color: inherit;
+    background-color: inherit;
 
-    button {
-        outline: none;
-        border-top: 2px solid;
-        border-left: none;
-        border-right: 2px solid;
-        border-bottom: 2px solid;
-        border-radius: 0 0.25rem 0.25rem 0;
-        border-color: inherit;
-        color: inherit;
-        background-color: inherit;
-
-        &:hover {
-            color: var(--color-secondary);
-        }
+    &:hover {
+      color: var(--color-secondary);
     }
+  }
 }
diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
index 6fd62bd..484ed16 100644
--- a/assets/scss/_global.scss
+++ b/assets/scss/_global.scss
@@ -1,34 +1,34 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 // sticky footer
 html {
-    height: 100%;
-    scroll-behavior: smooth;
+  height: 100%;
+  scroll-behavior: smooth;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  scroll-behavior: smooth;
 }
 
 main {
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 .container-lg {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    @media screen and (max-width: $width-md) {
-        flex-direction: column;
-    }
+  @media screen and (max-width: $width-md) {
+    flex-direction: column;
+  }
 }
 
 // remove text decoration
 a:hover {
-    text-decoration: none !important;
+  text-decoration: none !important;
 }
diff --git a/assets/scss/_var.scss b/assets/scss/_var.scss
index 3eedf9a..3554a89 100644
--- a/assets/scss/_var.scss
+++ b/assets/scss/_var.scss
@@ -11,7 +11,7 @@ $font-weight-semibold: 600;
 $font-weight-normal: 400;
 $font-weight-light: 400;
 $body-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC',
-    'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !default;
+  'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !default;
 $mono-font: 'Cascadia Code', 'SF Mono', 'Fira Code', 'Consolas', $body-font !default;
 $title-font: 'Product Sans', $body-font !default;
 $body-font-size: 16px !default;
@@ -37,21 +37,21 @@ $dark-color-bg: #2f3136 !default; // Discord
 $dark-color-codebg: #414449 !default; // kai GitHub
 
 @font-face {
-    font-family: 'Product Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local('Product Sans Bold'), local('ProductSans-Bold'),
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.6/product-sans/product-sans-bold.woff2')
-            format('woff2');
-    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  font-family: 'Product Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Product Sans Bold'), local('ProductSans-Bold'),
+    url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.6/product-sans/product-sans-bold.woff2')
+      format('woff2');
+  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-    font-family: 'Cascadia Code';
-    font-style: normal;
-    font-display: swap;
-    src: local('Cascadia Code Regular'),
-        url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.6/cascadia-code/cascadia.woff2') format('woff2');
+  font-family: 'Cascadia Code';
+  font-style: normal;
+  font-display: swap;
+  src: local('Cascadia Code Regular'),
+    url('https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.6/cascadia-code/cascadia.woff2') format('woff2');
 }
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..0bd2846
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 120,
+};