ui change

assets/sass/base/_helpers.scss

@@ -14,4 +14,8 @@
 
 .grow {
   @include flex-grow(1);
+}
+
+.flexbox {
+  @include flexbox();
 }

assets/sass/base/_reset.scss

@@ -121,8 +121,7 @@ dfn {
 figcaption {  
   font-style: italic;
   font-size: 0.9rem;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
+  margin: 0.5rem 1rem 1rem;
   @include themify($themes) {
     color: themed("figcaption-color");
     strong {

assets/sass/components/_breadcrumb.scss

@@ -7,6 +7,7 @@
   ol {
     @include flexbox();
     @include align-items(center);
+    @include flex-wrap(wrap);
   }
 
   li {

assets/sass/components/_button.scss

@@ -37,4 +37,27 @@
       }
     }
   }
+}
+
+.editBtn {
+  border: none;
+  outline: none;
+  padding: 0.75rem;
+  margin: 0 0.95rem;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: $title-font;
+  background-color: transparent;
+
+  @include themify($themes) {
+    color: themed('landing-button-default');
+    @include on-event {
+      color: themed('body-color');
+      background-color: themed('dropdown-hover-background-color');
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    display: none;
+  }
 }

assets/sass/components/_expand.scss

@@ -1,20 +1,14 @@
 .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;
@@ -45,23 +39,21 @@
   &__button {
     cursor: pointer;
     width: 100%;
-    margin: auto 0;
+    padding: 0.5rem;
     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');
+      border-top: 1px solid themed('border-line-color');
+      background-color: themed('expand-background-color');
       @include on-event {
-        background-color: themed('toc-header-background-color-hover');
+        background-color: themed('expand-background-color-hover');
       }
     }
   }

assets/sass/components/_search.scss

@@ -329,6 +329,10 @@
       @include themify($themes) {
         color: themed('body-color');
       }
+
+      &::before {
+        content: "📋 ";
+      }
     }
 
     &--desc {

assets/sass/layout/_navbar.scss

@@ -4,6 +4,7 @@
 .navbar {
   padding: 0 0.75rem;
   height: 100%;
+  position: relative;
 
   @include flexbox();
   @include align-items(center);
@@ -66,6 +67,7 @@
 
     &--mobile-item {
       width: 100%;
+
       @include flexbox();
       @include align-items(center);
       @include justify-content(flex-start);
@@ -78,6 +80,7 @@
       & > a {
         width: 100%;
         font-size: 18px;
+        padding: 0.5rem;
         
         @include themify($themes) {
           color: themed('body-color');
@@ -199,6 +202,7 @@
       @include themify($themes) {
         color: themed('landing-button-default');
         @include on-event {
+          color: themed('body-color');
           background-color: themed('dropdown-hover-background-color');
         }
 
@@ -238,6 +242,7 @@
       outline: none;
       margin-left: 1rem;
       height: $grid-nav-height;
+      cursor: pointer;
 
       @include flexbox();
       @include align-items(center);
@@ -247,4 +252,25 @@
       }
     }
   }
+
+  &__collapse {
+    width: 100%;
+    position: absolute;
+    top: $grid-nav-height;
+    left: 0;
+    max-height: 0;
+    overflow: hidden;
+
+    @include transition(all, 0.15s, ease-out);
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+      
+      &[data-open="true"] {
+        border-bottom: 2px solid themed('border-line-color');
+      }
+      &[data-open="false"] {
+        border-bottom: none;
+      }
+    }
+  }
 }

assets/sass/pages/_single.scss

@@ -146,6 +146,10 @@
     pre:not(.chroma) {
       position: relative;
       margin: 1rem 0;
+
+      @include themify($codeblock) {
+        border-left: 4px solid themed('content-pre-border-background-color');
+      }
     }
 
     div.chroma {
@@ -169,13 +173,14 @@
       margin: 0 1.75rem 1.75rem 1.5rem;
       padding: 0 0 0 1.42188rem;
       font-size: 1.05rem;
+      font-style: italic;
       line-height: 1.75;
       color: inherit;
       opacity: 0.8;
       position: relative;
       
       @include themify($themes) {
-          border-left: 0.32813rem solid themed("single-blockquote-border-color");
+          border-left: 5px solid themed("single-blockquote-border-color");
       }
 
       code:not([class^=language]) {
@@ -209,10 +214,15 @@
     ul {
       margin-right: 0;
       margin-top: 0;
+      margin-bottom: 1rem;
       padding: 0;
       list-style: disc outside none;
     }
 
+    ol {
+      margin-bottom: 1rem;
+    }
+
     li {
       margin-left: 2rem;
 
@@ -416,7 +426,7 @@ pre:not(.chroma) {
 
     &::after {
       position: absolute;
-      top: 0;
+      top: 2px;
       right: 0;
       z-index: z('clipboard');
       padding: 0.125rem 0.25rem;
@@ -428,13 +438,15 @@ pre:not(.chroma) {
       display: inline-block;
       text-transform: capitalize;
       border-top-left-radius: 0.2rem;
-      border-top-right-radius: 0.2rem;
       content: attr(data-lang);
 
       @include themify($themes) {
-        border: 1px solid themed('hr-color');
-        border-bottom: none;  
-        background-color: themed('body-background-color');
+        border-top: 1px solid themed('hr-color');
+        border-left: 1px solid themed('hr-color');
+      }
+
+      @include themify($codeblock) {
+        background: themed('content-pre-header-background-color');
       }
     }
   }
@@ -468,10 +480,17 @@ pre:not(.chroma) {
 
   table.lntable {
     overflow-x: auto;
+
     @include themify($themes) {
       @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
       @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
     }
+
+    @include themify($codeblock) {
+      td:first-child {
+        border-left: 4px solid themed('content-pre-border-background-color');
+      }
+    }
   }
 }
 

assets/sass/themes/_dark.scss

@@ -39,4 +39,6 @@ $dark: (
   single-contents-title-color: #ccc,
   single-header-title-background-color: #212121,
   single-contents-subtitle-color: #FCFCFA,
+  expand-background-color: darken(#2D2A2E, 2%),
+  expand-background-color-hover: #212121,
 );

assets/sass/themes/_darkcode.scss

@@ -2,8 +2,8 @@ $darkcode: (
   content-code-color: #fcfcfa,
   content-pre-color: #eee,
   content-pre-number-color: #666,
-  content-pre-background-color: #171f2e,
-  content-pre-header-background-color: darken(#011627, 1.5%),
-  content-pre-border-background-color: #3a3a3a,
+  content-pre-background-color: #2A2C37,
+  content-pre-header-background-color: #1D1E26,
+  content-pre-border-background-color: #595B5C,
   content-pre-header-color: #FCFCFA,
 );

assets/sass/themes/_light.scss

@@ -39,4 +39,6 @@ $light: (
   single-header-title-color: #424242,
   single-header-title-background-color: #eee,
   single-contents-title-color: #607d8b,
+  expand-background-color: #f7f8f9,
+  expand-background-color-hover: darken(#f7f8f9, 3%),
 );

assets/sass/themes/_lightcode.scss

@@ -1,10 +1,9 @@
 $lightcode: (
   content-code-color: #607d8b,
-  content-pre-main-color: #607d8b,
   content-pre-color: #344952,
   content-pre-number-color: #aaa,
   content-pre-background-color: #f7f8f9,
-  content-pre-border-background-color: darken(#f7f8f9, 7%),
-  content-pre-header-background-color: darken(#f7f8f9, 3.5%),
+  content-pre-border-background-color: #eaeaea,
+  content-pre-header-background-color: #eaeaea,
   content-pre-header-color: #344952,
 );

i18n/en.toml

@@ -17,4 +17,7 @@ other = "Jan 2, 2006"
 other = "min read"
 
 [single-writtenBy]
-other = "WRITTEN BY"
+other = "WRITTEN BY"
+
+[edit-this-page]
+other = "EDIT THIS PAGE"

i18n/ko.toml

@@ -17,4 +17,7 @@ other = "2006년 01월 02일"
 other = "min read"
 
 [single-writtenBy]
-other = "글쓴이"
+other = "글쓴이"
+
+[edit-this-page]
+other = "이 페이지 수정하기"

layouts/partials/head/scripts.html

@@ -13,6 +13,26 @@
   "use strict";
 
   window.onload = function() {
+    // ===================== navbar collapse ======================
+    var navCollapseBtn = document.getElementById('navCollapseBtn');
+    navCollapseBtn ? navCollapseBtn.addEventListener('click', function(e) {
+      var navCollapse = document.querySelector('.navbar__collapse');
+      
+      if (navCollapse) {
+        var dataOpen = navCollapse.getAttribute('data-open');
+
+        if (dataOpen === 'true') {
+          navCollapse.setAttribute('data-open', 'false');
+          navCollapse.style.maxHeight = 0;
+        } else {
+          navCollapse.setAttribute('data-open', 'true');
+          navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
+        }
+      }
+    }) : null;
+    // ============================================================
+
+
     // ========================== expand ==========================
     var expandBtn = document.querySelectorAll('.expand__button');
 

layouts/partials/main/component/edit-this-page.html

@@ -0,0 +1,7 @@
+{{ if $.Param "enableEditBtn" }}
+  <a href="{{ $.Param "editBaseURL" }}{{ strings.TrimSuffix "/" (.Permalink | relLangURL) }}.md" target="_blank" rel="noreferrer">
+    <button class="editBtn" aria-label="Edit This Page Button">
+      {{ i18n "edit-this-page" | default "EDIT THIS PAGE" }}
+    </button>
+  </a>
+{{ end }}

layouts/partials/main/header.html

@@ -9,10 +9,12 @@
 
   <div class="header__wrapper bgcolor__breadcrumb">
     <div class="divider">
-      <div class="lmr">
+      <div class="lmr flexbox">
         {{ if $.Param "enableBreadcrumb" }}
           {{ partial "main/component/breadcrumb.html" . }}
         {{ end }}
+        <div class="grow"></div>
+        {{ partial "main/component/edit-this-page.html" . }}
       </div>
     </div>
   </div>

layouts/partials/navbar/menu/navbar-menu-collapse.html

@@ -0,0 +1,5 @@
+<div class="navbar__collapse" data-open="false">
+  <ul>
+    {{ partial "drawer/drawer-section.html" . }}
+  </ul>
+</div>

layouts/partials/navbar/menu/navbar-menu-mobile.html

@@ -1,15 +1,11 @@
 <span id="navMenuMobile" class="hide">
-  <div class="dropdown">
-    <button class="drawer__dropdown navbar__dropdown--title" aria-label="Section Menu">
-      {{ if .IsHome }}
-        {{ .Site.Title }}
-      {{ else }}
-        {{ .Type }}
-      {{ end }}
-      {{ partial "svgs/arrow-down.svg" (dict "width" 20 "height" 20) }}
-    </button>
-    <ul class="dropdown-content navbar__dropdown--content">
-      {{ partial "drawer/drawer-section.html" . }}
-    </ul>
-  </div>
+  <button id="navCollapseBtn" class="navbar__dropdown--title" aria-label="Section Menu">
+    {{ if .IsHome }}
+      {{ .Site.Title }}
+    {{ else }}
+      {{ .Type }}
+    {{ end }}
+    {{ partial "svgs/arrow-down.svg" (dict "width" 20 "height" 20) }}
+  </button>
+  {{ partial "navbar/menu/navbar-menu-collapse.html" . }}
 </span>