default content font changed, some ui bug fixed

assets/sass/abstracts/_variables.scss

@@ -1,8 +1,25 @@
 @import "../themes/theme";
 
-$text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$text-font-stack: 'Muli',
-$code-font-stack: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "Lucida Console", "Lucida Sans Typewriter", "Liberation Mono", "Nimbus Mono L", Monaco, Courier, monospace !default;
+              avenir,
-$contents-font-stack: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif !default;
+              'helvetica neue', helvetica,
+              ubuntu,
+              roboto, noto,
+              'segoe ui', arial,
+              sans-serif !default;
+$code-font-stack: Consolas, 
+              Monaco,
+              Menlo,
+              "DejaVu Sans Mono", 
+              "Bitstream Vera Sans Mono", 
+              "Courier New", 
+              "Lucida Console", 
+              "Lucida Sans Typewriter", 
+              "Liberation Mono", 
+              "Nimbus Mono L", 
+              Monaco, 
+              Courier, 
+              monospace !default;
 
 $z-indexes: ("modal", "navbar", "dropdown", "header", "gtt", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask", "card-outter", "card-inner");
 

assets/sass/base/_fonts.scss

@@ -105,3 +105,172 @@
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
+
+/* muli-200normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light '),
+    local('Muli-Extra Light'),
+    url('../fonts/muli-latin-200.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-200italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light italic'),
+    local('Muli-Extra Lightitalic'),
+    url('../fonts/muli-latin-200italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light '),
+    local('Muli-Light'),
+    url('../fonts/muli-latin-300.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light italic'),
+    local('Muli-Lightitalic'),
+    url('../fonts/muli-latin-300italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular '),
+    local('Muli-Regular'),
+    url('../fonts/muli-latin-400.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular italic'),
+    local('Muli-Regularitalic'),
+    url('../fonts/muli-latin-400italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold '),
+    local('Muli-SemiBold'),
+    url('../fonts/muli-latin-600.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold italic'),
+    local('Muli-SemiBolditalic'),
+    url('../fonts/muli-latin-600italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold '),
+    local('Muli-Bold'),
+    url('../fonts/muli-latin-700.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold italic'),
+    local('Muli-Bolditalic'),
+    url('../fonts/muli-latin-700italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold '),
+    local('Muli-ExtraBold'),
+    url('../fonts/muli-latin-800.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold italic'),
+    local('Muli-ExtraBolditalic'),
+    url('../fonts/muli-latin-800italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black '),
+    local('Muli-Black'),
+    url('../fonts/muli-latin-900.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black italic'),
+    local('Muli-Blackitalic'),
+    url('../fonts/muli-latin-900italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900italic.woff') format('woff'); /* Modern Browsers */
+}

assets/sass/base/_reset.scss

@@ -131,6 +131,13 @@ figcaption {
   }
 }
 
+pre {
+  white-space: pre;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+}
+
 ::-moz-selection {
   /* Code for Firefox */
   @include themify($themes) {

assets/sass/base/_typography.scss

@@ -3,10 +3,13 @@
  */
 
 html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 
 body {
+  // font: normal 125% / 1.4 $text-font-stack;
   font: normal 125% / 1.4 $text-font-stack;
 }
 

assets/sass/components/_notice.scss

@@ -27,7 +27,6 @@
         border-top: 30px solid #f1b37e;
         background: #fefaf5;
         color: rgba(150, 90, 38, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Info';
@@ -39,7 +38,6 @@
         border-top: 30px solid #d58181;
         background: #fbeded;
         color: rgba(132, 56, 56, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Warning';
@@ -51,7 +49,6 @@
         border-top: 30px solid #6bb1e0;
         background: #e6f3fb;
         color: rgba(47, 103, 141, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Note';
@@ -63,7 +60,6 @@
         border-top: 30px solid #84c578;
         background: #e8f7e6;
         color: rgba(72, 125, 63, 0.995) !important;
-        font-family: $contents-font-stack;
 
         &:first-child::after {
             content: 'Tip';

assets/sass/components/_summary.scss

@@ -31,7 +31,6 @@
   &__text {
     margin-top: 1rem;
     line-height: 1.7rem;
-    font-family: $contents-font-stack;
   }
 
   &__image {
@@ -128,7 +127,6 @@
   &__text {
     margin-top: 1rem;
     line-height: 1.7rem;
-    font-family: $content_font;
   }
 
   &__image {

assets/sass/pages/_contact.scss

@@ -68,7 +68,6 @@
 
   &__desc {
     width: 65%; 
-    font-family: $contents-font-stack;
 
     @media only screen and (max-width: 769px) {
       width: 100%;

assets/sass/pages/_gallery.scss

@@ -65,7 +65,6 @@
   &__contents {
       padding: 1rem;
       width: 65%;
-      font-family: $contents-font-stack;
       font-size: 1rem;
       text-align: center;
   }

assets/sass/pages/_list.scss

@@ -27,7 +27,6 @@
     }
 
     &--desc {
-      font-family: $contents-font-stack;
       font-weight: italic;
       padding: 1rem;
       line-height: 1.7rem;

assets/sass/pages/_showcase.scss

@@ -125,7 +125,6 @@
     }
 
     &--desc {
-      font-family: $contents-font-stack;
       font-size: 0.9rem;
       margin: 0.25rem 0;
       height: 70px;

assets/sass/pages/_single.scss

@@ -59,8 +59,7 @@
       text-decoration: underline;
     }
 
-    font-size: 17.2px;
+    font-size: 16.4px;
-    font-family: $contents-font-stack;
     margin: 1rem 0;
     line-height: 1.7;
     width: inheirt;
@@ -133,6 +132,10 @@
       border-radius: 0.34rem;
       line-height: 1.5;
       font-size: 13.8px;
+      @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'));
+      }
     }
 
     pre:not(.chroma) {
@@ -247,7 +250,7 @@
       }
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -266,7 +269,7 @@
       padding: 0;      
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -285,9 +288,11 @@
       margin-left: 2rem;
       margin-bottom: calc(1rem / 2);
 
+      & > code {
+        padding: 2px 7px;
+      }
+
       code:not([class^=language]) {
-        padding: 3px 0;
-        // margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
         }
@@ -359,7 +364,7 @@
       }
 
       code:not([class^=language]) {
-        padding: 3px 5px;
+        padding: 3px 7px;
         margin: 0 0.25rem;
         @include themify($codeblock) {
           color: themed('content-code-color');
@@ -535,9 +540,9 @@ pre:not(.chroma) {
 
 li .highlight > .chroma {
   .lnt:first-child {
-    padding: 0;
+    padding: 0 0.3rem;
   }
   .lnt:not(:first-child) {
-    padding-left: 0.5rem;
+    padding: 0 0.3rem;
   }
 }

assets/sass/themes/_dark.scss

@@ -100,7 +100,7 @@ $dark: (
     contact-input-color: #FCFCFA,
     contact-input-background-color: lighten(#403E41, 5%),
     contact-button-background-color: lighten(#403E41, 5%),
-    custom-scrollbar-foreground-color: #9e9e9e,
+    custom-scrollbar-foreground-color: #888,
     custom-scrollbar-background-color: #eee,
     share-color: #dbdbdb,
     share-shadow-color: #888,

assets/sass/themes/_hackercode.scss

@@ -58,7 +58,7 @@ $hackercode: '';
 } @else {
   $hackercode: (
     content-code-color: #E3CD26,
-    content-pre-main-color: #1FFF2A,
+    content-pre-main-color: #E08C48,//#1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
     content-pre-background-color: #282a36,