chore: update docs and style (#269)

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%);
+      }
+    }
+  }
 }