fix(typeit): typeit code highlight (#284)

assets/css/_partial/_single/_code.scss

@@ -54,135 +54,138 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma {
+.highlight {
-  position: relative;
   line-height: 1.4em;
   margin: .5rem 0;
 
-  .code-header {
+  > .chroma {
-    display: flex;
+    position: relative;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    font-family: $global-font-family;
-    font-weight: bold;
-    color: $code-info-color;
-    background: darken($code-background-color, 8%);
 
-    [theme=dark] & {
+    .code-header {
-      color: $code-info-color-dark;
+      display: flex;
-      background: darken($code-background-color-dark, 6%);
+      justify-content: space-between;
-    }
+      align-items: center;
-
+      box-sizing: border-box;
-    &:hover {
-      cursor: pointer;
-    }
-
-    .code-title {
       width: 100%;
+      font-family: $global-font-family;
+      font-weight: bold;
+      color: $code-info-color;
+      background: darken($code-background-color, 8%);
+
+      [theme=dark] & {
+        color: $code-info-color-dark;
+        background: darken($code-background-color-dark, 6%);
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .code-title {
+        width: 100%;
+        padding: .4rem;
+      }
+
+      .code-title::after {
+        padding-left: .2rem;
+        content: 'Code';
+      }
+
+      @each $type, $text in $code-type-map {
+        &.#{$type} .code-title::after {
+          content: $text;
+        }
+      }
+    }
+
+    .lntd:first-child {
+      min-width: 1.6rem;
+      text-align: right;
+    }
+
+    .lntd:last-child {
+      width: 100%;
+
+      pre {
+        @include max-content(min-width);
+      }
+    }
+
+    .ln {
+      padding-right: .75rem;
+    }
+
+    .hl {
+      display: block;
+      background-color: darken($code-background-color, 10%);
+
+      [theme=dark] & {
+        background-color: darken($code-background-color-dark, 5%);
+      }
+    }
+
+    .ln, .lnt {
+      color: $global-font-secondary-color;
+
+      [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+
+    .arrow {
+      padding: 0 .2rem;
+      @include transition(transform 0.2s ease);
+    }
+
+    .ellipses {
       padding: .4rem;
     }
 
-    .code-title::after {
+    .copy {
-      padding-left: .2rem;
+      display: none;
-      content: 'Code';
+      padding: .4rem;
-    }
 
-    @each $type, $text in $code-type-map {
+      &:hover {
-      &.#{$type} .code-title::after {
+        cursor: pointer;
-        content: $text;
+        color: $global-link-hover-color;
-      }
-    }
-  }
 
-  .lntd:first-child {
+        [theme=dark] & {
-    min-width: 1.6rem;
+          color: $global-link-hover-color-dark;
-    text-align: right;
+        }
-  }
-
-  .lntd:last-child {
-    width: 100%;
-
-    pre {
-      @include max-content(min-width);
-    }
-  }
-
-  .ln {
-    padding-right: .75rem;
-  }
-
-  .hl {
-    display: block;
-    background-color: darken($code-background-color, 10%);
-
-    [theme=dark] & {
-      background-color: darken($code-background-color-dark, 5%);
-    }
-  }
-
-  .ln, .lnt {
-    color: $global-font-secondary-color;
-
-    [theme=dark] & {
-      color: $global-font-secondary-color-dark;
-    }
-  }
-
-  .arrow {
-    padding: 0 .2rem;
-    @include transition(transform 0.2s ease);
-  }
-
-  .ellipses {
-    padding: .4rem;
-  }
-
-  .copy {
-    display: none;
-    padding: .4rem;
-
-    &:hover {
-      cursor: pointer;
-      color: $global-link-hover-color;
-
-      [theme=dark] & {
-        color: $global-link-hover-color-dark;
-      }
-    }
-  }
-
-  .table-wrapper {
-    max-height: 0;
-    overflow-y: hidden;
-    @include details-transition-open;
-  }
-
-  &.open {
-    .code-header {
-      background: darken($code-background-color, 3%);
-
-      [theme=dark] & {
-        background: darken($code-background-color-dark, 3%);
       }
     }
 
     .table-wrapper {
-      max-height: $MAX_LENGTH;
+      max-height: 0;
-      @include details-transition-close;
+      overflow-y: hidden;
+      @include details-transition-open;
     }
 
-    .arrow {
+    &.open {
-      @include transform(rotate(90deg));
+      .code-header {
-    }
+        background: darken($code-background-color, 3%);
 
-    .ellipses {
+        [theme=dark] & {
-      display: none;
+          background: darken($code-background-color-dark, 3%);
-    }
+        }
+      }
 
-    .copy {
+      .table-wrapper {
-      display: inline;
+        max-height: $MAX_LENGTH;
+        @include details-transition-close;
+      }
+
+      .arrow {
+        @include transform(rotate(90deg));
+      }
+
+      .ellipses {
+        display: none;
+      }
+
+      .copy {
+        display: inline;
+      }
     }
   }
 

layouts/_default/baseof.html

@@ -10,7 +10,7 @@
 {{- end -}}
 
 {{- $params := .Params | merge .Site.Params.page -}}
-{{- .Scratch.Set "version" "0.2.0" -}}
+{{- .Scratch.Set "version" "0.2.2" -}}
 
 {{- if eq hugo.Environment "production" -}}
     {{- .Scratch.Set "cdn" .Site.Params.cdn -}}