feat: fontawesome, admonition and faster

assets/css/_core/_base.scss

@@ -0,0 +1,83 @@
+/** Font **/
+/* Lato */
+@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
+
+/* Montserrat */
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
+
+/* Roboto */
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
+
+html {
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
+
+  /* scrollbar, only support webkit */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 40px;
+    background-color: #eee;
+    border-radius: 16px;
+
+    &:hover {
+      background-color: #C2C2C2;
+    }
+  }
+}
+
+::selection {
+  background: rgba(0, 149, 255, 0.1);
+}
+
+body {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  background-color: $global-background-color;
+  color: $global-font-color;
+
+  &:before {
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.05;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+
+  &.dark-theme {
+    color: $global-font-color-dark;
+    background-color: $global-background-color-dark;
+  }
+}
+
+a {
+  color: $global-link-color;
+  text-decoration: none;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+
+  &:hover {
+    color: $global-link-hover-color;
+  }
+
+  .dark-theme & {
+    color: $global-link-color-dark;
+
+    &:hover {
+      color: $global-link-hover-color-dark;
+    }
+  }
+}

assets/css/_core/layout.scss → assets/css/_core/_layout.scss

@@ -3,7 +3,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 98vh;
   width: 100%;
 }
 
@@ -24,17 +24,18 @@
 .main {
   flex: 1 0 auto;
 }
-.container{
+
+.container {
   padding-left: 1em;
   padding-right: 1em;
 }
 
 .footer {
-  height: 4rem;
+  height: 2rem;
   width: 100%;
   text-align: center;
-  line-height: 4rem;
-  padding-top: 2em;
+  line-height: 1.2rem;
+  padding-top: 1.6em;
 }
 
 .notfound {

assets/css/_core/media.scss → assets/css/_core/_media.scss

@@ -8,27 +8,28 @@
     position: fixed;
     width: 100%;
     z-index: 100;
-    transition: all 0.6s ease 0s;
+    transition: all 0.3s ease 0s;
 
     .container {
       padding: 0;
       margin: 0;
-      height: 5em;
-      line-height: 5.5em;
-      background: $light-background-color;
+      height: 4.5em;
+      line-height: 4.5em;
+      background: $global-background-color;
 
       .navbar-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
+        font-size: 18px;
         padding-right: 1em;
         padding-left: 1em;
         box-sizing: border-box;
 
         .menu-toggle {
           cursor: pointer;
-          line-height: 5.5em;
+          line-height: 4.5em;
 
           span {
             display: block;
@@ -38,12 +39,12 @@
             -webkit-border-radius: 3px;
             -moz-border-radius: 3px;
             border-radius: 3px;
-            -webkit-transition: .25s margin .25s, .25s transform;
-            -moz-transition: .25s margin .25s, .25s transform;
-            transition: .25s margin .25s, .25s transform;
+            -webkit-transition: .2s margin .2s, .2s transform;
+            -moz-transition: .2s margin .2s, .2s transform;
+            transition: .2s margin .2s, .2s transform;
 
             .dark-theme & {
-              background: $dark-font-color;
+              background: $global-font-color-dark;
             }
           }
 
@@ -57,9 +58,9 @@
 
           &.active {
             span {
-              -webkit-transition: .25s margin, .25s transform .25s;
-              -moz-transition: .25s margin, .25s transform .25s;
-              transition: .25s margin, .25s transform .25s;
+              -webkit-transition: .2s margin, .2s transform .2s;
+              -moz-transition: .2s margin, .2s transform .2s;
+              transition: .2s margin, .2s transform .2s;
             }
 
             span:nth-child(1) {
@@ -85,10 +86,8 @@
 
       .menu {
         text-align: center;
-        background: #ffffff;
-        border-top: 2px solid #000000;
-        padding-top: 1em;
-        padding-bottom: 1em;
+        background: $global-background-color;
+        border-top: 2px solid $global-font-color;
         display: none;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
 
@@ -102,13 +101,13 @@
         }
 
         .dark-theme & {
-          background: $dark-background-color;
-          border-top: 2px solid $dark-font-secondary-color;
+          background: $global-background-color-dark;
+          border-top: 2px solid $global-font-color-dark;
         }
       }
 
       .dark-theme & {
-        background: $dark-background-color !important;
+        background: $global-background-color-dark !important;
       }
     }
   }