some style bug fix

3 files changed, 94 insertions, 3 deletions

diff --git a/assets/sass/components/_expand.scss b/assets/sass/components/_expand.scss
new file mode 100644
index 0000000..b875a8e
--- /dev/null
+++ b/assets/sass/components/_expand.scss
@@ -0,0 +1,89 @@
+.expand {
+  position: relative;
+  margin: 1.5rem 0;
+  border-radius: 0.25rem;
+
+  &__content {
+    padding: 0 1.125rem;
+    overflow: hidden;
+    max-height: 0;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+
+    @include transition(all, 0.2s, ease);
+    @include themify($themes) {
+      border-top: 1px solid themed('content-box-border-color');
+      background-color: themed('toc-body-background-color');
+    }
+
+    li {
+      font-size: 15.2px;
+      margin: 0 0 0.525rem 2rem !important;
+
+      &:first-child {
+        margin-top: 0.25rem !important;
+      }
+
+      li {
+        font-size: 14.4px;
+        margin: 0 0 0.25rem 1.25rem !important;
+      }
+    }
+
+    &--toc {
+      font-family: $title-font;
+      font-size: 15.2px;
+      li {
+        list-style-type: '📂 ';
+        li {
+          list-style-type: '📄 ';
+        }
+      }
+    }
+  }
+
+  &__button {
+    cursor: pointer;
+    width: 100%;
+    margin: auto 0;
+    text-align: left;
+    outline: none;
+    border: none;
+    padding: 0.125rem;
+    font-size: 1rem;
+    font-family: $title-font;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: inherit;
+      background-color: themed('toc-header-background-color');
+      @include on-event {
+        background-color: themed('toc-header-background-color-hover');
+      }
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  &-icon {
+    padding-top: 0.125rem;
+    padding-right: 0.5rem;
+    
+    &__down {
+      @include rotate(90);
+      @include transition(all, 0.15s, ease);
+    }
+
+    &__right {
+      @include rotate(0);
+      @include transition(all, 0.15s, ease);
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 149afa5..8bf4e8b 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -34,6 +34,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/pagination';
 @import 'components/button';
 @import 'components/summary';
+@import 'components/expand';
 
 @import 'layout/grid';
 @import 'layout/footer';
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index a5af449..5388395 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -124,7 +124,7 @@
     }
 
     pre {
-      margin-top: 25px;
+      margin-top: 1.6rem;
       overflow: auto;
       line-height: 1.5;
 
@@ -139,6 +139,7 @@
 
     pre:not(.chroma) {
       position: relative;
+      margin: 1rem 0;
     }
 
     div.chroma {
@@ -371,7 +372,7 @@ code, pre {
 }
 
 pre.chroma {
-  padding: 0.25rem 0;
+  padding: 0.65rem 0;
 }
 
 *:not(.chroma) {
@@ -418,7 +419,7 @@ pre:not(.chroma) {
     padding: 2px 7px;
     width: 100%;
     height: 20px;
-    z-index: z('toc');
+    z-index: z('toc'); 
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
     content: '';