feat(exampleSite): add some posts to exampleSite

pogor-dev · Feb 1, 2020 · 437ef95 · 437ef95
1 parent 8aa4b6d
commit 437ef95
Show file tree

Hide file tree

Showing 25 changed files with 345 additions and 144 deletions.
diff --git a/assets/css/_core/_base.scss b/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;

diff --git a/assets/css/_core/_layout.scss b/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;
-}
+}
diff --git a/assets/css/_core/_media.scss b/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 {

diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
@@ -1,6 +1,6 @@
 @import "_home";
 
-.warpper {
+.page {
   position: relative;
   width: 100%;
   max-width: 980px;

diff --git a/assets/css/_page/_post.scss b/assets/css/_page/_post.scss
@@ -138,6 +138,14 @@
   .table-wrapper {
     overflow-x: auto;
 
+    &::-webkit-scrollbar {
+      background-color: $table-background-color;
+
+      .dark-theme & {
+        background-color: $table-background-color-dark;
+      }
+    }
+
     > table {
       width: 100%;
       max-width: 100%;

diff --git a/assets/css/_partial/_post/_code.scss b/assets/css/_partial/_post/_code.scss
@@ -1,19 +1,9 @@
 code,
 pre {
-  padding: 7px;
   font-size: $code-font-size;
   font-family: $code-font-family;
-  background: $code-background-color;
-
-  .dark-theme & {
-    background: $code-background-color-dark;
-  }
-}
-
-code {
-  padding: 3px 5px;
-  border-radius: 4px;
   color: $code-color;
+  padding: 5px;
   background: $code-background-color;
 
   .dark-theme & {
@@ -22,50 +12,46 @@ code {
   }
 }
 
-p > code {
-  background: darken($code-background-color, 3%);
-
-  .dark-theme & {
-    color: $code-color-dark;
-    background: darken($code-background-color-dark, 3%);
-  }
+.highlight > pre.chroma {
+  padding: 38px 7px 8px;
+  overflow-x: auto;
 }
 
-// chroma
 .highlight > .chroma {
   margin: 1em 0;
-  border-radius: 6px;
-  overflow-x: auto;
   position: relative;
-  background: $code-background-color;
+  font-family: $code-font-family;
 
   code {
     padding: 0;
   }
 
-  table {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      padding: 2px 7px;
-      font-size: $code-font-size;
-      font-weight: bold;
-      color: darken($code-info-color, 10%);
-      background: darken($code-background-color, 3%);
-      content: 'Code';
-
-      .dark-theme & {
-        background: darken($code-background-color-dark, 3%);
-      }
+  pre {
+    margin: 0;
+    padding: 38px 7px 8px;
+    overflow-x: visible;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    padding: 2px 7px;
+    font-size: $code-font-size;
+    font-weight: bold;
+    color: $code-info-color;
+    background: darken($code-background-color, 3%);
+    content: 'Code';
+
+    .dark-theme & {
+      color: $code-info-color-dark;
+      background: darken($code-background-color-dark, 3%);
     }
   }
 
   @each $sign, $text in $code-type-list {
-    &.#{$sign} table::after {
+    &.#{$sign}::after {
       content: $text;
     }
   }
@@ -77,20 +63,10 @@ p > code {
 
     &:first-child {
       width: 10px;
-
-      pre {
-        margin: 0;
-        padding: 38px 7px 8px;
-      }
     }
 
     &:last-child {
       vertical-align: top;
-
-      pre {
-        margin: 0;
-        padding: 38px 10px 8px;
-      }
     }
   }
 
@@ -106,10 +82,14 @@ p > code {
     }
   }
 
-  /* LineNumbersTable */  .lnt { color: $code-info-color; }
-  /* LineHighlight */  .hl {
+  /* LineNumbersTable */
+  .lnt {
+    color: $code-info-color;
+  }
+
+  /* LineHighlight */
+  .hl {
     display: block;
-    width: 100%;
     background-color: darken($code-background-color, 5%);
 
     .dark-theme & {

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -11,7 +11,7 @@ $global-font-family: Lato, -apple-system, BlinkMacSystemFont, PingFang-SC-Regula
 $global-background-color: #fff !default;
 $global-background-color-dark: #292a2d !default;
 
-$navbar-background-color: #FAFAFA !default;
+$navbar-background-color: #fafafa !default;
 $navbar-background-color-dark: #252627 !default;
 
 // Text color of the body.
@@ -29,6 +29,12 @@ $global-link-hover-color-dark: #fff !default;
 $global-border-color: #dcdcdc !default;
 $global-border-color-dark: #4a4b50 !default;
 
+$scrollbar-color: #87878d !default;
+$scrollbar-hover-color: #a9a9b3 !default;
+
+$selection-color: rgba(38, 139, 211, 0.2) !default;
+$selection-color-dark: rgba(38, 139, 211, 0.3) !default;
+
 $navbar-hover-color: #161209 !default;
 $navbar-hover-color-dark: #fff !default;
 
@@ -47,7 +53,7 @@ $table-background-color: #fff !default;
 $table-background-color-dark: #272c34 !default;
 
 // Color of the table thead.
-$table-thead-color: #EDEDED !default;
+$table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;
 
 // ========== Code ========== //
@@ -59,13 +65,16 @@ $code-color-dark: #E5BF78 !default;
 $code-background-color: #f5f5f5 !default;
 $code-background-color-dark: #272C34 !default;
 
-$code-info-color: #cacaca !default;
+$code-info-color: #b1b0b0 !default;
+$code-info-color-dark: #b1b0b0 !default;
 
 // Font size of code.
 $code-font-size: 13px !default;
 
+@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
+
 // Font family of the code.
-$code-font-family: Source Code Pro, Consolas, Liberation Mono, Menlo, Courier, monospace !default;
+$code-font-family: Fira Mono, Source Code Pro, Menlo, monospace !default;
 
 // Code type list.
 $code-type-list: (

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,4 +1,5 @@
 @import "_variables";
+@import "_custom";
 
 @import "_core/normalize";
 @import "_core/base";
@@ -11,5 +12,3 @@
 @import "_partial/pagination";
 
 @import "_core/media";
-
-@import "_custom";
diff --git a/exampleSite/content/posts/LoveIt-Preview.md b/exampleSite/content/posts/LoveIt-Preview.md