feat(*): use baseof page

6 files changed, 194 insertions, 38 deletions

diff --git a/assets/js/less.js b/assets/js/less.js
new file mode 100644
index 0000000..44c0408
--- /dev/null
+++ b/assets/js/less.js
@@ -0,0 +1,6 @@
+console.log(99)
+
+$(document).on('click', '#btn-dark', function(e) {
+    e.preventDefault()
+    $('body').toggleClass('dark')
+})
\ No newline at end of file
diff --git a/assets/scss/_dark.scss b/assets/scss/_dark.scss
new file mode 100644
index 0000000..3d28e9d
--- /dev/null
+++ b/assets/scss/_dark.scss
@@ -0,0 +1,32 @@
+
+.dark {
+  background: #16171c;
+
+  .icon-moon {
+    color: #ffbe00 !important;
+  }
+
+  .year {
+    color: #f0f0f0;
+  }
+
+  .post-right {
+    &:after {
+      background: #000;
+    }
+  }
+
+  .post-title, .single-title {
+    color: #d0d0d0;
+  }
+
+  .single-content {
+    color: #b0b0b0;
+  }
+
+  .is-active-li {
+    & > a {
+      color: #f0f0f0!important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index 9ac7e5c..a3db990 100644
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -5,6 +5,7 @@ footer {
   justify-content: center;
   text-align: center;
   color: #5D5C5C;
+  font-size: 14px;
 
   a {
     color: #5D5C5C;
diff --git a/assets/scss/_heaader.scss b/assets/scss/_heaader.scss
new file mode 100644
index 0000000..113fdd4
--- /dev/null
+++ b/assets/scss/_heaader.scss
@@ -0,0 +1,32 @@
+.logo {
+  height: 30px;
+  width: auto;
+
+  img {
+    display: block;
+    height: 100%;
+  }
+}
+
+.nav {
+  padding: 10px 0;
+  @include flex-y-center;
+  justify-content: space-between;
+
+  .icon-moon {
+    color: #999;
+  }
+}
+
+.nav-menu {
+  @include flex-y-center;
+
+  a {
+    padding: 10px 14px;
+    color: #4C4E4D;
+
+    &:hover {
+      color: var(--theme-color);
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
index 18c9dcc..d6826f8 100644
--- a/assets/scss/_single.scss
+++ b/assets/scss/_single.scss
@@ -5,15 +5,19 @@
   font-size: 16px;
 
   .single-title {
-    font-size: 36px;
+    font-size: 32px;
     text-align: center;
-    margin-bottom: 40px;
     font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif;
+    @include mobile {
+      font-size: 22px;
+    }
   }
 
   pre {
     border-radius: 2px;
     padding: 20px;
+    overflow: hidden;
+    white-space: pre-line;
 
     code {
       font-family: "menlo", serif;
@@ -26,6 +30,7 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
+    outline: none;
     margin: 30px 0 30px;
     font-family: 'Monda', -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, Arial, sans-serif;
   }
@@ -49,4 +54,68 @@
   ol, ul {
     padding-left: 30px;
   }
-}
\ No newline at end of file
+}
+
+.single-meta {
+  @include flex-y-center;
+  @include flex-x-center;
+  color: #999;
+
+  .single-date {
+    margin-right: 10px;
+  }
+  a {
+    color: #999;
+    margin-right: 10px;
+  }
+}
+
+.single-toc {
+  width: 240px;
+  overflow: hidden;
+  padding: 0 20px;
+  font-size: 14px;
+  color: #909090;
+  position: fixed;
+  top: 50%;
+  transform: translate(0, -50%);
+
+  @include mobile {
+    display: none;
+  }
+
+  .toc-list-item {
+    transition: color .2s;
+  }
+
+  .toc-link {
+    &:before {
+      display: none;
+    }
+  }
+
+  .toc-list {
+    padding-left: 20px;
+    margin: 5px 0;
+  }
+
+
+  .toc-list-item {
+    margin-bottom: 5px;
+    @include text-truncate;
+  }
+
+  .is-active-li {
+    & > a {
+      color: #303030;
+    }
+  }
+
+  & > .toc-list {
+    padding-left: 0;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+}
diff --git a/assets/scss/less.scss b/assets/scss/less.scss
index 4866f82..775463d 100644
--- a/assets/scss/less.scss
+++ b/assets/scss/less.scss
@@ -1,13 +1,43 @@
 @import "../../node_modules/@forever9/lego/lego";
+@mixin mobile() {
+  @include media-down(map-get($breakpoints, md)) {
+    @content
+  }
+}
+@import "dark";
+@import "heaader";
 @import "single";
 @import "footer";
 
 @include container();
 @include row();
-@include column();
+@include column($grid-gap: 30px);
 @include gen-grids();
+
+$breakpoints: (md:768px, lg:992px, xl:1200px);
+
+@mixin offset($name: is-offset, $column-number: 12, $breakpoints: $breakpoints) {
+  @for $i from 1 through $column-number {
+    .#{$name}-#{$i} {
+      margin-left: percentage($i / $column-number);
+    }
+  }
+
+  @each $breakpoint, $width in $breakpoints {
+    @include media-up($width) {
+      @for $i from 1 through 12 {
+        .#{$name}-#{$breakpoint}-#{$i} {
+          margin-left: percentage($i / $column-number);
+        }
+      }
+    }
+  }
+}
+
 @include offset();
 
+
+
 /* monda-regular */
 @font-face {
   font-family: 'Monda';
@@ -30,42 +60,18 @@ body {
   background: #fff;
 }
 
-.main {
-  padding-top: 100px;
+.icon {
+  cursor: pointer;
 }
 
-.nav {
-  padding: 10px 0;
-  @include flex-y-center;
-  justify-content: space-between;
+.main {
+  padding-top: 100px;
 }
 
 a {
   text-decoration: none;
 }
 
-.nav-menu {
-  @include flex-y-center;
-
-  a {
-    padding: 10px 14px;
-    color: #4C4E4D;
-
-    &:hover {
-      color: var(--theme-color);
-    }
-  }
-}
-
-.logo {
-  height: 30px;
-  width: auto;
-
-  img {
-    display: block;
-    height: 100%;
-  }
-}
 
 .posts {
   margin-bottom: 40px;
@@ -95,28 +101,38 @@ a {
 
 .post-left {
   min-width: 50px;
-  line-height: 1.5;
+  padding-top: 8px;
 }
 
 .post-title {
-  font-size: 20px;
+  //font-weight: 500;
+  font-size: 22px;
   color: #000;
+  @include mobile {
+    font-size: 18px;
+  }
 }
 
 .post-date {
   color: #999;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .post-summary {
   color: #999;
-  font-size: 12px;
+  font-size: 14px;
+  max-height: 20px;
+  overflow: hidden;
+
+  @include mobile {
+    display: none;
+  }
 }
 
 .post-right {
   position: relative;
   padding-left: 30px;
-  padding-bottom: 50px;
+  padding-bottom: 40px;
 
   &:before {
     content: ' ';
@@ -147,7 +163,7 @@ a {
 }
 
 .year {
-  font-size: 20px;
+  font-size: 22px;
   margin-bottom: 30px;
   font-weight: 500;
 }