feat(code): add support for code block folding (#259)

assets/css/_core/_base.scss

@@ -50,4 +50,5 @@ a {
 @include link(true, true);
 
 @import "../_partial/icon";
+@import "../_partial/details";
 @import "../_partial/fixed-button";

assets/css/_core/_media.scss

@@ -1,12 +1,12 @@
 @media only screen and (max-width: 1440px) {
   .page {
-    max-width: 56%;
+    width: 56%;
   }
 }
 
 @media only screen and (max-width: 1200px) {
   .page {
-    max-width: 52%;
+    width: 52%;
   }
 }
 
@@ -20,7 +20,7 @@
   }
 
   .page {
-    max-width: 80%;
+    width: 80%;
   }
 }
 
@@ -38,7 +38,7 @@
   }
 
   .page {
-    max-width: 100%;
+    width: 100%;
     padding-top: $page-padding-top-mobile;
 
     .categories-card {

assets/css/_page/_index.scss

@@ -1,7 +1,7 @@
 .page {
   position: relative;
-  width: 100%;
-  max-width: 60%;
+  max-width: 800px;
+  width: 60%;
   margin: 0 auto;
   padding-top: $page-padding-top-desktop;
 

assets/css/_page/_single.scss

@@ -4,6 +4,7 @@
   .single-title {
     margin: 1rem 0 .5rem;
     font-size: 1.6rem;
+    font-weight: bold;
     line-height: 140%;
   }
 
@@ -35,7 +36,7 @@
   }
 
   .featured-image {
-    margin: .5rem 0;
+    margin: .5rem 0 1rem 0;
 
     img {
       display: block;
@@ -194,10 +195,10 @@
 
         th, td {
           padding: .3rem 1rem;
-          border: 1px double $global-border-color;
+          border: 1px solid darken($table-thead-color, 2%);
 
           .dark & {
-            border: 1px double $global-border-color-dark;
+            border-color: darken($table-thead-color-dark, 2%);
           }
         }
       }

assets/css/_partial/_details.scss

@@ -0,0 +1,33 @@
+.details {
+  .details-summary {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  i.details-icon {
+    color: $global-font-secondary-color;
+    @include transition(transform 0.2s ease);
+
+    .dark & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  .details-content {
+    max-height: 0;
+    overflow-y: hidden;
+    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  }
+
+  &.open {
+    i.details-icon {
+      @include transform(rotate(180deg));
+    }
+
+    .details-content {
+      max-height: $MAX_LENGTH;
+      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+    }
+  }
+}

assets/css/_partial/_fixed-button.scss

@@ -12,7 +12,6 @@
   padding: .6rem .6rem;
   color: $global-font-secondary-color;
   background: $header-background-color;
-  border: 1px solid darken($global-border-color, 10%);
   @include border-radius(2rem);
 
   @include blur;
@@ -29,7 +28,6 @@
   .dark & {
     color: $global-font-secondary-color-dark;
     background: $header-background-color-dark;
-    border-color: darken($global-border-color-dark, 10%);
 
     &:hover, &:active {
       color: $global-font-color-dark;

assets/css/_partial/_header.scss

@@ -2,7 +2,6 @@ header {
   width: 100%;
   z-index: 150;
   background-color: $header-background-color;
-  @include box-shadow(0px 1px 4px rgba(0, 0, 0, .1));
 
   .dark & {
     background-color: $header-background-color-dark;
@@ -65,7 +64,7 @@ header {
     outline: none;
     background-color: $header-background-color;
     vertical-align: baseline !important;
-    @include transition(width 0.3s ease 0s);
+    @include transition(width 0.3s ease);
 
     .dark & {
       background-color: $header-background-color-dark;
@@ -208,7 +207,7 @@ header {
     .header-wrapper {
       padding: 0 1rem;
       font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease 0s);
+      @include transition(margin-top 0.3s ease);
 
       .header-title {
         font-size: $header-title-font-size;
@@ -218,7 +217,7 @@ header {
       .menu-toggle {
         line-height: 4rem;
         cursor: pointer;
-        @include transition(width 0.3s ease 0s);
+        @include transition(width 0.3s ease);
 
         span {
           display: block;

assets/css/_partial/_single/_admonition.scss

@@ -9,23 +9,32 @@
   .admonition-title {
     margin: 0 -0.75rem;
     padding: .2rem .75rem .2rem 1.8rem;
-    border-bottom: .05rem solid map-get($admonition-background-color-map, 'note');
+    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
     background-color: map-get($admonition-background-color-map, 'note');
   }
 
+  .details-summary.admonition-title:hover {
+    background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
+  }
+
   .admonition-content {
-    margin: .5rem 0;
+    padding: .5rem 0;
   }
 
   i.icon {
     font-size: 0.85rem;
     color: map-get($admonition-color-map, 'note');
-    cursor: auto;
     position: absolute;
     left: .6rem;
     top: .6rem;
   }
 
+  i.details-icon {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+  }
+
   @each $type, $color in $admonition-color-map {
     &.#{$type} {
       border-left-color: $color;
@@ -44,39 +53,14 @@
         border-bottom-color: $color;
         background-color: $color;
       }
-    }
-  }
 
-  &:last-child {
-    margin-bottom: .75rem;
-  }
-}
-
-details.admonition {
-  summary {
-    display: block;
-    outline: none;
-    cursor: pointer;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    i.details {
-      position: absolute;
-      top: .5rem;
-      right: .5rem;
-      color: $global-font-color;
-
-      .dark & {
-        color: $global-font-color-dark;
+      .details-summary.admonition-title:hover {
+        background-color: darken($color, 6%);
       }
     }
   }
-}
 
-details.admonition[open] {
-  i.details {
-    @include transform(rotate(180deg));
+  &:last-child {
+    margin-bottom: .75rem;
   }
 }