some style bug fix

archetypes/default.md

@@ -2,4 +2,5 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: false
+weight: 0
 ---

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

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';

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: '';

layouts/partials/head/scripts.html

@@ -13,6 +13,25 @@
   "use strict";
 
   window.onload = function() {
+    // ========================== expand ==========================
+    var expandBtn = document.querySelectorAll('.expand__button');
+
+    for (let i = 0; i < expandBtn.length; i++) {
+      expandBtn[i].addEventListener("click", function () {
+        var content = this.nextElementSibling;
+        if (content.style.maxHeight) {
+          content.style.maxHeight = null;
+          this.querySelector('svg').classList.add('expand-icon__right');
+          this.querySelector('svg').classList.remove('expand-icon__down');
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+          this.querySelector('svg').classList.remove('expand-icon__right');
+          this.querySelector('svg').classList.add('expand-icon__down');
+        }
+      });
+    }
+    // ============================================================
+    
     // ======================= toggle theme =======================
     var root = document.getElementById('root');
     var toggleToLightBtn = document.getElementById('toggleToLight');
@@ -44,7 +63,6 @@
       elem.addEventListener('click', function (e) {
         var content = this.nextElementSibling;
         var menuTitleIcon = this.querySelector('.menu__title--icon');
-        console.log(menuTitleIcon);
         if (!content) {
           return null;
         }

layouts/partials/main/component/pagination-single.html

@@ -2,10 +2,10 @@
 <div class="grow"></div>
 <nav class="pagination-single">
   {{ if .NextInSection }}
-    <div class="pagination-single__icon">
-      {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
-    </div>
-    <a href="{{ .NextInSection.Permalink }}" title="{{ .NextInSection.Title }}" class="pagination-single__right">      
+    <a href="{{ .NextInSection.Permalink }}" title="{{ .NextInSection.Title }}" class="pagination-single__right">
+      <div class="pagination-single__icon">
+        {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
+      </div>
       <div class="pagination-single__right-title">{{ .NextInSection.Title }}</div>
     </a>
   {{ end }}

layouts/partials/main/sections/single-menu.html

@@ -28,8 +28,8 @@
         </ul>
       {{ else }}
         {{ $lastUrlElement := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
-        <li class="{{ if in $currentURL $lastUrlElement }}active{{ end }}">
-          <a href="{{ .Permalink }}" class="menu__title {{ if in $currentURL $lastUrlElement }}active{{ end }}">{{ .Title }}</a>
+        <li class="{{ if and (in $currentURL $lastUrlElement) (eq $sectionName1 $sectionName2) }}active{{ end }}">
+          <a href="{{ .Permalink }}" class="menu__title {{ if and (in $currentURL $lastUrlElement) (eq $sectionName1 $sectionName2) }}active{{ end }}">{{ .Title }}</a>
         </li>
       {{ end }}
     {{ end }}

layouts/shortcodes/expand.html

@@ -1,11 +1,11 @@
 <div class="expand">
   <button type="button" class="expand__button" aria-label="Expand Button">
     <span class="expand-icon expand-icon__right">
-        {{ partial "svgs/arrow/keyboard-arrow-right.svg" (dict "width" 24 "height" 24) }}
+        {{ partial "svgs/arrow-right.svg" (dict "width" 24 "height" 24) }}
     </span>
     {{.Get 0}}
   </button>
   <div class="expand__content">
-    {{.Inner | safeHTML}}
+    {{.Inner | markdownify}}
   </div>
 </div>