feat(exampleSite): add some posts to exampleSite

assets/css/_core/_base.scss

@@ -1,35 +1,37 @@
 html {
   font-family: $global-font-family;
+}
 
-  /* scrollbar, only support webkit */
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
+/* scrollbar, only support webkit */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 
-  &::-webkit-scrollbar-thumb {
-    height: 40px;
-    background-color: #87878D;
-    border-radius: 16px;
+::-webkit-scrollbar-thumb {
+  background-color: $scrollbar-color;
 
-    &:hover {
-      background-color: #A9A9B3;
-    }
+  &:hover {
+    background-color: $scrollbar-hover-color;
   }
 }
 
 ::selection {
-  background: rgba(0, 149, 255, 0.1);
+  background: $selection-color;
+
+  .dark-theme & {
+    background: $selection-color-dark;
+  }
 }
 
 body {
   font-size: 16px;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 1.5rem;
   background-color: $global-background-color;
   color: $global-font-color;
 
-  &:before {
+  &::before {
     content: "";
     background-repeat: no-repeat;
     background-position: center;

assets/css/_core/_layout.scss

@@ -2,17 +2,17 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 98vh;
+  min-height: 97.5vh;
   width: 100%;
-}
 
-.main {
-  flex: 1 0 auto;
-}
+  main {
+    flex: 1 0 auto;
 
-.container {
-  padding-left: 1rem;
-  padding-right: 1rem;
+    .container {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
 }
 
 .footer {
@@ -27,4 +27,4 @@
   font-size: 2rem;
   transform: translateY(35vh);
   text-align: center;
-}
+}

assets/css/_core/_media.scss

@@ -1,5 +1,5 @@
 @media only screen and (max-width: 1800px) {
-  .warpper {
+  .page {
     max-width: 780px;
 
     .post-toc {
@@ -10,7 +10,7 @@
 }
 
 @media only screen and (max-width: 1440px) {
-  .warpper {
+  .page {
     max-width: 680px;
 
     .post-toc {
@@ -21,7 +21,7 @@
 }
 
 @media only screen and (max-width: 1200px) {
-  .warpper {
+  .page {
     max-width: 560px;
 
     .post-toc {
@@ -38,7 +38,7 @@
     }
   }
 
-  .warpper {
+  .page {
     max-width: 80%;
 
     .post-toc {
@@ -60,7 +60,7 @@
     display: block;
   }
 
-  .warpper {
+  .page {
     max-width: 100%;
 
     .categories-card {