ui change

12 files changed, 97 insertions, 26 deletions

diff --git a/assets/sass/base/_helpers.scss b/assets/sass/base/_helpers.scss
index 222e803..808f377 100644
--- a/assets/sass/base/_helpers.scss
+++ b/assets/sass/base/_helpers.scss
@@ -14,4 +14,8 @@
 
 .grow {
   @include flex-grow(1);
+}
+
+.flexbox {
+  @include flexbox();
 }
\ No newline at end of file
diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss
index c577a90..2e28045 100644
--- a/assets/sass/base/_reset.scss
+++ b/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 {
diff --git a/assets/sass/components/_breadcrumb.scss b/assets/sass/components/_breadcrumb.scss
index f359962..7beb750 100644
--- a/assets/sass/components/_breadcrumb.scss
+++ b/assets/sass/components/_breadcrumb.scss
@@ -7,6 +7,7 @@
   ol {
     @include flexbox();
     @include align-items(center);
+    @include flex-wrap(wrap);
   }
 
   li {
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index ba79540..ede495d 100644
--- a/assets/sass/components/_button.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/assets/sass/components/_expand.scss b/assets/sass/components/_expand.scss
index b875a8e..7f7887f 100644
--- a/assets/sass/components/_expand.scss
+++ b/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');
       }
     }
   }
diff --git a/assets/sass/components/_search.scss b/assets/sass/components/_search.scss
index 0be9b32..e2a5e08 100644
--- a/assets/sass/components/_search.scss
+++ b/assets/sass/components/_search.scss
@@ -329,6 +329,10 @@
       @include themify($themes) {
         color: themed('body-color');
       }
+
+      &::before {
+        content: "📋 ";
+      }
     }
 
     &--desc {
diff --git a/assets/sass/layout/_navbar.scss b/assets/sass/layout/_navbar.scss
index ae2f167..25c6843 100644
--- a/assets/sass/layout/_navbar.scss
+++ b/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;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index e953234..3540a42 100644
--- a/assets/sass/pages/_single.scss
+++ b/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');
+      }
+    }
   }
 }
 
diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss
index bdafd28..3ed5917 100644
--- a/assets/sass/themes/_dark.scss
+++ b/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,
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_darkcode.scss b/assets/sass/themes/_darkcode.scss
index 1af0091..2dc05f2 100644
--- a/assets/sass/themes/_darkcode.scss
+++ b/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,
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss
index 36dd682..e8032de 100644
--- a/assets/sass/themes/_light.scss
+++ b/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%),
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_lightcode.scss b/assets/sass/themes/_lightcode.scss
index 5374c99..c0ec95b 100644
--- a/assets/sass/themes/_lightcode.scss
+++ b/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,
 );
\ No newline at end of file