chore: update docs and style (#269)

assets/css/_core/_base.scss

@@ -24,7 +24,7 @@ html {
 ::selection {
   background-color: $selection-color;
 
-  .dark & {
+  [theme=dark] & {
     background-color: $selection-color-dark;
   }
 }
@@ -35,7 +35,7 @@ body {
   overflow-wrap: break-word;
   scrollbar-color: auto;
 
-  &.dark {
+  &[theme=dark] {
     color: $global-font-color-dark;
     background-color: $global-background-color-dark;
   }

assets/css/_core/_media.scss

@@ -2,14 +2,6 @@
   .page {
     width: 56%;
   }
-
-  #header-desktop .header-wrapper {
-    padding: 0 8vw;
-  }
-
-  .search-dropdown.desktop {
-    right: 8vw;
-  }
 }
 
 @media only screen and (max-width: 1200px) {
@@ -18,11 +10,11 @@
   }
 
   #header-desktop .header-wrapper {
-    padding: 0 4vw;
+    padding-right: 1rem;
   }
 
   .search-dropdown.desktop {
-    right: 4vw;
+    right: 1rem;
   }
 }
 
@@ -38,6 +30,10 @@
   .page {
     width: 80%;
   }
+
+  #header-desktop .header-wrapper {
+    padding-left: 1rem;
+  }
 }
 
 @media only screen and (max-width: 680px) {

assets/css/_mixin/_details.scss

@@ -0,0 +1,7 @@
+@mixin details-transition-open {
+  @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+}
+
+@mixin details-transition-close {
+  @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+}

assets/css/_mixin/_index.scss

@@ -2,3 +2,4 @@
 @import "_link";
 @import "_blur";
 @import "_summary";
+@import "_details";

assets/css/_mixin/_link.scss

@@ -2,7 +2,7 @@
   a {
     color: if($light, $global-link-color, $single-link-color);
 
-    .dark & {
+    [theme=dark] & {
       color: if($dark, $global-link-color-dark, $single-link-color-dark);
     }
 
@@ -10,7 +10,7 @@
     &:hover {
       color: if($light, $global-link-hover-color, $single-link-hover-color);
 
-      .dark & {
+      [theme=dark] & {
         color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
       }
     }

assets/css/_mixin/_summary.scss

@@ -5,7 +5,7 @@
     color: $global-font-color;
     border-bottom: 1px dashed $global-border-color;
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-color-dark;
       border-bottom: 1px dashed $global-border-color-dark;
     }
@@ -47,7 +47,7 @@
       overflow-wrap: break-word;
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -78,7 +78,7 @@
           margin-right: .3125rem;
           color: $global-link-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-link-color-dark;
           }
         }
@@ -95,7 +95,7 @@
       @include link(true, true);
 
       b, strong {
-        .dark & {
+        [theme=dark] & {
           color: $global-font-secondary-color-dark;
         }
       }

assets/css/_page/_home.scss

@@ -56,7 +56,7 @@
           padding: .4rem;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }

assets/css/_page/_single.scss

@@ -24,7 +24,7 @@
       display: inline-block;
     }
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-secondary-color-dark;
     }
 
@@ -88,7 +88,7 @@
       font-weight: bold;
       margin: 1.2rem 0;
 
-      .dark & {
+      [theme=dark] & {
         font-weight: bolder;
       }
     }
@@ -103,7 +103,7 @@
         margin-right: .3125rem;
         color: $single-link-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $single-link-color-dark;
         }
       }
@@ -120,7 +120,7 @@
     b, strong {
       font-weight: bold;
 
-      .dark & {
+      [theme=dark] & {
         color: #ddd;
       }
     }
@@ -131,18 +131,21 @@
       word-break: break-all;
       word-break: break-word;
 
-      .dark & b, .dark & strong {
+      [theme=dark] & b, [theme=dark] & strong {
         color: $single-link-color-dark;
       }
     }
 
-    .dark a:hover b, .dark a:hover strong {
+    [theme=dark] a:hover b, [theme=dark] a:hover strong {
       color: $single-link-hover-color-dark;
     }
 
-    ul {
+    ul, ol {
       margin: .5rem 0;
-      padding-left: 2rem;
+      padding-left: 2.5rem;
+    }
+
+    ul {
       list-style-type: disc;
     }
 
@@ -153,7 +156,7 @@
         color: $global-font-secondary-color;
       }
 
-      .dark & {
+      [theme=dark] & {
         background: $code-background-color-dark;
 
         rt {
@@ -168,7 +171,7 @@
       &::-webkit-scrollbar {
         background-color: $table-background-color;
 
-        .dark & {
+        [theme=dark] & {
           background-color: $table-background-color-dark;
         }
       }
@@ -181,14 +184,14 @@
         background: $table-background-color;
         border-collapse: collapse;
 
-        .dark & {
+        [theme=dark] & {
           background: $table-background-color-dark;
         }
 
         thead {
           background: $table-thead-color;
 
-          .dark & {
+          [theme=dark] & {
             background-color: $table-thead-color-dark;
           }
         }
@@ -197,7 +200,7 @@
           padding: .3rem 1rem;
           border: 1px solid darken($table-thead-color, 2%);
 
-          .dark & {
+          [theme=dark] & {
             border-color: darken($table-thead-color-dark, 2%);
           }
         }
@@ -241,7 +244,7 @@
       padding: .25rem .75rem;
       margin: 1rem 0;
 
-      .dark & {
+      [theme=dark] & {
         border-left-color: $blockquote-color-dark;
         background-color: rgba($blockquote-color-dark, .2);
       }
@@ -250,7 +253,7 @@
     .footnotes {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
 
@@ -273,7 +276,7 @@
       border-top: 1px dashed $global-border-color;
       border-bottom: none;
 
-      .dark & {
+      [theme=dark] & {
         border-top: 1px dashed $global-border-color-dark;
       }
     }
@@ -290,7 +293,7 @@
       font-family: $code-font-family;
       color: $code-color;
 
-      .dark & {
+      [theme=dark] & {
         background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
         border-bottom-color: $global-border-color-dark;
@@ -311,6 +314,7 @@
 
     .version {
       height: 1.25em;
+      vertical-align: text-bottom;
     }
   }
 

assets/css/_partial/_archive/_tags.scss

@@ -19,7 +19,7 @@
     sup {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
     }

assets/css/_partial/_archive/_terms.scss

@@ -58,7 +58,7 @@
     background-color: transparent;
   }
 
-  .dark & {
+  [theme=dark] & {
     color: $global-link-color-dark;
 
     &:hover {
@@ -72,7 +72,7 @@
   text-align: right;
   color: $global-font-secondary-color;
 
-  .dark & {
+  [theme=dark] & {
     color: $global-font-secondary-color-dark;
   }
 }

assets/css/_partial/_details.scss

@@ -9,7 +9,7 @@
     color: $global-font-secondary-color;
     @include transition(transform 0.2s ease);
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-secondary-color-dark;
     }
   }
@@ -17,17 +17,17 @@
   .details-content {
     max-height: 0;
     overflow-y: hidden;
-    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+    @include details-transition-open;
   }
 
   &.open {
     i.details-icon {
-      @include transform(rotate(180deg));
+      @include transform(rotate(90deg));
     }
 
     .details-content {
       max-height: $MAX_LENGTH;
-      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+      @include details-transition-close;
     }
   }
 }

assets/css/_partial/_fixed-button.scss

@@ -25,7 +25,7 @@
     outline: none;
   }
 
-  .dark & {
+  [theme=dark] & {
     color: $global-font-secondary-color-dark;
     background: $header-background-color-dark;
 

assets/css/_partial/_header.scss

@@ -3,7 +3,7 @@ header {
   z-index: 150;
   background-color: $header-background-color;
 
-  .dark & {
+  [theme=dark] & {
     background-color: $header-background-color-dark;
   }
 
@@ -66,7 +66,7 @@ header {
     vertical-align: baseline !important;
     @include transition(width 0.3s ease);
 
-    .dark & {
+    [theme=dark] & {
       background-color: $header-background-color-dark;
     }
   }
@@ -100,7 +100,7 @@ header {
       padding: 0 2rem 0 2rem;
     }
 
-    .dark & {
+    [theme=dark] & {
       input {
         color: $global-font-color-dark;
         background-color: $search-background-color-dark;
@@ -114,7 +114,7 @@ header {
     .search-button {
       color: $global-font-secondary-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-font-secondary-color-dark;
       }
     }
@@ -140,7 +140,7 @@ header {
   line-height: $header-height;
 
   .header-wrapper {
-    padding: 0 10vw;
+    padding: 0 2rem 0 10vh;
 
     .header-title {
       font-size: $header-title-font-size;
@@ -160,7 +160,7 @@ header {
         &.delimiter {
           border-left: 1.5px solid $global-font-color;
 
-          .dark & {
+          [theme=dark] & {
             border-left-color: $global-border-color-dark;
           }
         }
@@ -178,7 +178,7 @@ header {
         font-weight: 900;
         color: $header-hover-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $header-hover-color-dark;
         }
       }
@@ -227,7 +227,7 @@ header {
           @include border-radius(3px);
           @include transition(all 0.3s ease-in-out);
 
-          .dark & {
+          [theme=dark] & {
             background: $global-font-color-dark;
           }
         }
@@ -295,7 +295,7 @@ header {
         display: block;
       }
 
-      .dark & {
+      [theme=dark] & {
         background: $header-background-color-dark;
         border-top-color: $global-border-color-dark;
       }
@@ -329,7 +329,7 @@ header {
   @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
 
   &.desktop {
-    right: 10vw;
+    right: 2rem;
     width: 30rem;
   }
 
@@ -342,7 +342,7 @@ header {
     right: 0 !important;
     background-color: $global-background-color;
 
-    .dark & {
+    [theme=dark] & {
       background-color: $global-background-color-dark;
     }
 
@@ -369,7 +369,7 @@ header {
           text-align: right;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }
@@ -383,7 +383,7 @@ header {
           overflow-wrap: break-word;
           color: $global-font-secondary-color;
 
-          .dark & {
+          [theme=dark] & {
             color: $global-font-secondary-color-dark;
           }
         }
@@ -392,7 +392,7 @@ header {
           font-style: normal;
           background-color: $selection-color;
 
-          .dark & {
+          [theme=dark] & {
             background-color: $selection-color-dark;
           }
         }
@@ -400,7 +400,7 @@ header {
         &.cursor {
           background: darken($code-background-color, 5%);
 
-          .dark & {
+          [theme=dark] & {
             background: lighten($code-background-color-dark, 5%);
           }
         }
@@ -418,7 +418,7 @@ header {
       .search-query {
         font-weight: bold;
 
-        .dark & {
+        [theme=dark] & {
           color: #ddd;
         }
       }
@@ -430,7 +430,7 @@ header {
       font-size: .8rem;
       color: $global-font-secondary-color;
 
-      .dark {
+      [theme=dark] {
         color: $global-font-secondary-color-dark;
       }
 

assets/css/_partial/_pagination.scss

@@ -32,7 +32,7 @@
       color: $pagination-link-hover-color;
     }
 
-    .dark &:hover a {
+    [theme=dark] &:hover a {
       color: $pagination-link-hover-color-dark;
     }
 
@@ -47,8 +47,8 @@
       bottom: 0px;
     }
 
-    .dark &:before,
-    .dark &:after {
+    [theme=dark] &:before,
+    [theme=dark] &:after {
       background: $pagination-link-hover-color-dark;
     }
 
@@ -78,7 +78,7 @@
         color: $pagination-link-hover-color;
       }
 
-      .dark & a {
+      [theme=dark] & a {
         color: $pagination-link-hover-color-dark;
       }
 

assets/css/_partial/_single/_admonition.scss

@@ -1,20 +1,21 @@
 .admonition {
   position: relative;
-  margin: .9765em 0;
+  margin: 1rem 0;
   padding: 0 .75rem;
   background-color: map-get($admonition-background-color-map, 'note');
   border-left: .25rem solid map-get($admonition-color-map, 'note');
   overflow: auto;
 
   .admonition-title {
+    font-weight: bold;
     margin: 0 -0.75rem;
-    padding: .2rem .75rem .2rem 1.8rem;
+    padding: .25rem 1.8rem;
     border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
-    background-color: map-get($admonition-background-color-map, 'note');
+    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
   }
 
-  .details-summary.admonition-title:hover {
-    background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
+  &.open .admonition-title {
+    background-color: map-get($admonition-background-color-map, 'note');
   }
 
   .admonition-content {
@@ -25,14 +26,14 @@
     font-size: 0.85rem;
     color: map-get($admonition-color-map, 'note');
     position: absolute;
-    left: .6rem;
     top: .6rem;
+    left: .4rem;
   }
 
   i.details-icon {
     position: absolute;
-    top: .5rem;
-    right: .5rem;
+    top: .6rem;
+    right: .3rem;
   }
 
   @each $type, $color in $admonition-color-map {
@@ -51,11 +52,11 @@
 
       .admonition-title {
         border-bottom-color: $color;
-        background-color: $color;
+        background-color: opacify($color, 0.15);
       }
 
-      .details-summary.admonition-title:hover {
-        background-color: darken($color, 6%);
+      &.open .admonition-title {
+        background-color: $color;
       }
     }
   }

assets/css/_partial/_single/_code.scss

@@ -5,7 +5,7 @@ code {
   color: $code-color;
   padding: 0 .4rem;
 
-  .dark & {
+  [theme=dark] & {
     color: $code-color-dark;
   }
 }
@@ -20,7 +20,7 @@ pre {
   }
 
   img {
-    min-height: 1.25em;
+    min-height: 1em;
     max-height: 1.25em;
     vertical-align: text-bottom;
   }
@@ -29,7 +29,7 @@ pre {
 code, pre, .highlight table, .highlight tr, .highlight td {
   background: $code-background-color;
 
-  .dark & {
+  [theme=dark] & {
     background: $code-background-color-dark;
   }
 }
@@ -67,7 +67,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     color: $code-info-color;
     background: darken($code-background-color, 8%);
 
-    .dark & {
+    [theme=dark] & {
       color: $code-info-color-dark;
       background: darken($code-background-color-dark, 6%);
     }
@@ -93,11 +93,15 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     }
   }
 
+  .lntd:first-child {
+    min-width: 1.6rem;
+    text-align: right;
+  }
+
   .lntd:last-child {
     width: 100%;
 
     pre {
-      padding-left: .75rem;
       @include max-content(min-width);
     }
   }
@@ -110,7 +114,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     display: block;
     background-color: darken($code-background-color, 10%);
 
-    .dark & {
+    [theme=dark] & {
       background-color: darken($code-background-color-dark, 5%);
     }
   }
@@ -118,12 +122,13 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   .ln, .lnt {
     color: $global-font-secondary-color;
 
-    .dark & {
+    [theme=dark] & {
       color: $global-font-secondary-color-dark;
     }
   }
 
   .arrow {
+    padding: 0 .2rem;
     @include transition(transform 0.2s ease);
   }
 
@@ -139,7 +144,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
       cursor: pointer;
       color: $global-link-hover-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $global-link-hover-color-dark;
       }
     }
@@ -148,21 +153,21 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   .table-wrapper {
     max-height: 0;
     overflow-y: hidden;
-    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+    @include details-transition-open;
   }
 
   &.open {
     .code-header {
       background: darken($code-background-color, 3%);
 
-      .dark & {
+      [theme=dark] & {
         background: darken($code-background-color-dark, 3%);
       }
     }
 
     .table-wrapper {
       max-height: $MAX_LENGTH;
-      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+      @include details-transition-close;
     }
 
     .arrow {
@@ -191,7 +196,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     .#{$class} { color: $color; }
   }
 
-  .dark & {
+  [theme=dark] & {
     @each $class, $color in $code-highlight-color-map-dark {
       .#{$class} { color: $color; }
     }
@@ -209,12 +214,12 @@ code, pre, .highlight table, .highlight tr, .highlight td {
 
     @include link(false, false);
 
-    .dark & {
+    [theme=dark] & {
       background-color: darken($code-background-color-dark, 5%);
     }
   }
 
-  .dark & {
+  [theme=dark] & {
     // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
     .highlight {
       background: #141414;

assets/css/_partial/_single/_footer.scss

@@ -5,7 +5,7 @@
     border-bottom: 1px solid $global-border-color;
     padding: 1rem 0 0.3rem;
 
-    .dark & {
+    [theme=dark] & {
       border-bottom: 1px solid $global-border-color-dark;
     }
 
@@ -17,7 +17,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $global-font-secondary-color-dark;
         }
 
@@ -28,7 +28,7 @@
         font-size: 0.8em;
         color: $global-font-secondary-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $global-font-secondary-color-dark;
         }
       }

assets/css/_partial/_single/_instagram.scss

@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  .dark & {
+  [theme=dark] & {
     border: none !important;
   }
 }

assets/css/_partial/_single/_toc.scss

@@ -19,7 +19,7 @@
         margin-right: .5rem;
         color: $single-link-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $single-link-color-dark;
         }
       }
@@ -37,7 +37,7 @@
       color: $global-font-secondary-color;
     }
 
-    .dark & {
+    [theme=dark] & {
       background: $code-background-color-dark;
 
       rt {
@@ -60,8 +60,8 @@
 
   @include blur;
 
-  .dark & {
-    border-left: 1px solid $global-border-color-dark;
+  [theme=dark] & {
+    border-left-color: $global-border-color-dark;
   }
 
   .toc-title {
@@ -91,14 +91,14 @@
       font-weight: bold;
       color: $single-link-color;
 
-      .dark & {
+      [theme=dark] & {
         color: $single-link-color-dark;
       }
 
       &::before {
         color: $single-link-hover-color;
 
-        .dark & {
+        [theme=dark] & {
           color: $single-link-hover-color-dark;
         }
       }
@@ -115,18 +115,10 @@
     justify-content: space-between;
     line-height: 2em;
     padding: 0 .75rem;
-    background: darken($code-background-color, 3%);
+    background: darken($code-background-color, 6%);
 
-    .dark & {
-      background: darken($code-background-color-dark, 3%);
-    }
-
-    &:hover {
-      background: darken($code-background-color, 6%);
-
-      .dark & {
-        background: darken($code-background-color-dark, 5%);
-      }
+    [theme=dark] & {
+      background: darken($code-background-color-dark, 6%);
     }
   }
 
@@ -138,8 +130,18 @@
       padding: .4rem 1rem .4rem 1.8rem;
     }
 
-    .dark & {
+    [theme=dark] & {
       background-color: $code-background-color-dark;
     }
   }
+
+  &.open {
+    .toc-title {
+      background: darken($code-background-color, 3%);
+
+      [theme=dark] & {
+        background: darken($code-background-color-dark, 3%);
+      }
+    }
+  }
 }

assets/css/_variables.scss

@@ -31,7 +31,7 @@ $global-link-hover-color-dark: #fff !default;
 
 // Color of the border
 $global-border-color: #f0f0f0 !default;
-$global-border-color-dark: #4a4b50 !default;
+$global-border-color-dark: #363636 !default;
 // ========== Global ========== //
 
 // ========== Scrollbar ========== //
@@ -122,7 +122,7 @@ $code-color-dark: #E5BF78 !default;
 $code-background-color: #f5f5f5 !default;
 $code-background-color-dark: #272C34 !default;
 
-$code-info-color: #acabab !default;
+$code-info-color: #9c9c9c !default;
 $code-info-color-dark: #b1b0b0 !default;
 
 // Font size of the code
@@ -356,18 +356,18 @@ $admonition-color-map: (
 
 // Color map of the admonition background
 $admonition-background-color-map: (
-  'note': rgba(68,138,255,.1),
-  'abstract': rgba(0,176,255,.1),
-  'info': rgba(0,184,212,.1),
-  'tip': rgba(0,191,165,.1),
-  'success': rgba(0,200,83,.1),
-  'question': rgba(100,221,23,.1),
-  'warning': rgba(255,145,0,.1),
-  'failure': rgba(255,82,82,.1),
-  'danger': rgba(255,23,68,.1),
-  'bug': rgba(245,0,87,.1),
-  'example': rgba(101,31,255,.1),
-  'quote': hsla(0,0%,62%,.1),
+  'note': rgba(68, 138, 255, 0.1),
+  'abstract': rgba(0, 176, 255, 0.1),
+  'info': rgba(0, 184, 212, 0.1),
+  'tip': rgba(0, 191, 165, 0.1),
+  'success': rgba(0, 200, 83, 0.1),
+  'question': rgba(100, 221, 23, 0.1),
+  'warning': rgba(255, 145, 0, 0.1),
+  'failure': rgba(255, 82, 82, 0.1),
+  'danger': rgba(255, 23, 68, 0.1),
+  'bug': rgba(245, 0, 87, 0.1),
+  'example': rgba(101, 31, 255, 0.1),
+  'quote': rgba(159, 159, 159, 0.1),
 ) !default;
 // ========== Admonition ========== //