refactor(layout): use simple layout

4 files changed, 74 insertions, 98 deletions

diff --git a/assets/scss/_font.scss b/assets/scss/_font.scss
new file mode 100644
index 0000000..82d8eb0
--- /dev/null
+++ b/assets/scss/_font.scss
@@ -0,0 +1,27 @@
+
+/* monda-regular */
+@font-face {
+  font-family: 'Monda';
+  font-style: normal;
+  src: url('//lib.baomitu.com/fonts/monda/monda-regular.eot'); /* IE9 Compat Modes */
+  src: local('Monda'), local('Monda-Normal'),
+  url('//lib.baomitu.com/fonts/monda/monda-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('//lib.baomitu.com/fonts/monda/monda-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('//lib.baomitu.com/fonts/monda/monda-regular.woff') format('woff'), /* Modern Browsers */
+  url('//lib.baomitu.com/fonts/monda/monda-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('//lib.baomitu.com/fonts/monda/monda-regular.svg#Monda') format('svg'); /* Legacy iOS */
+}
+
+/* merriweather-regular */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: regular;
+  src: url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.eot'); /* IE9 Compat Modes */
+  src: local('Merriweather'), local('Merriweather-Normal'),
+  url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.woff') format('woff'), /* Modern Browsers */
+  url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('//lib.baomitu.com/fonts/merriweather/merriweather-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
+}
\ No newline at end of file
diff --git a/assets/scss/_heaader.scss b/assets/scss/_heaader.scss
index 113fdd4..89d9ffb 100644
--- a/assets/scss/_heaader.scss
+++ b/assets/scss/_heaader.scss
@@ -1,5 +1,5 @@
 .logo {
-  height: 30px;
+  height: 48px;
   width: auto;
 
   img {
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
index d6826f8..b75aaa0 100644
--- a/assets/scss/_single.scss
+++ b/assets/scss/_single.scss
@@ -5,60 +5,66 @@
   font-size: 16px;
 
   .single-title {
-    font-size: 32px;
-    text-align: center;
+    font-size: 30px;
+    font-weight: 500;
     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;
+      font-size: 26px;
     }
   }
 
+  a {
+    color: var(--theme-color);
+  }
+
   pre {
     border-radius: 2px;
     padding: 20px;
-    overflow: hidden;
-    white-space: pre-line;
+    overflow: auto;
 
     code {
-      font-family: "menlo", serif;
       font-size: 14px;
     }
   }
 
+  code {
+    font-family: "menlo", serif;
+  }
+
   p {
     margin: 30px 0 30px;
   }
 
   h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
     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;
   }
 
   h1 {
-    font-size: 28px;
+    font-size: 26px;
   }
 
   h2 {
-    font-size: 26px;
+    font-size: 24px;
   }
 
   h3 {
-    font-size: 24px;
+    font-size: 22px;
   }
 
   h4 {
-    font-size: 22px;
+    font-size: 20px;
   }
 
   ol, ul {
-    padding-left: 30px;
+    list-style: inherit;
+    padding-left: 20px;
   }
 }
 
 .single-meta {
-  @include flex-y-center;
-  @include flex-x-center;
   color: #999;
 
   .single-date {
@@ -78,6 +84,7 @@
   color: #909090;
   position: fixed;
   top: 50%;
+  right: 0;
   transform: translate(0, -50%);
 
   @include mobile {
diff --git a/assets/scss/less.scss b/assets/scss/less.scss
index 775463d..f908fa5 100644
--- a/assets/scss/less.scss
+++ b/assets/scss/less.scss
@@ -1,20 +1,24 @@
 @import "../../node_modules/@forever9/lego/lego";
+
+$breakpoints: (md:856px);
+$container-max-widths: (md: 800px,);
 @mixin mobile() {
   @include media-down(map-get($breakpoints, md)) {
     @content
   }
 }
+
+@import "font";
 @import "dark";
 @import "heaader";
 @import "single";
 @import "footer";
 
-@include container();
+@include container($breakpoints: $breakpoints);
 @include row();
 @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 {
@@ -36,27 +40,12 @@ $breakpoints: (md:768px, lg:992px, xl:1200px);
 
 @include offset();
 
-
-
-/* monda-regular */
-@font-face {
-  font-family: 'Monda';
-  font-style: normal;
-  src: url('//lib.baomitu.com/fonts/monda/monda-regular.eot'); /* IE9 Compat Modes */
-  src: local('Monda'), local('Monda-Normal'),
-  url('//lib.baomitu.com/fonts/monda/monda-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('//lib.baomitu.com/fonts/monda/monda-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('//lib.baomitu.com/fonts/monda/monda-regular.woff') format('woff'), /* Modern Browsers */
-  url('//lib.baomitu.com/fonts/monda/monda-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('//lib.baomitu.com/fonts/monda/monda-regular.svg#Monda') format('svg'); /* Legacy iOS */
-}
-
 html {
-  --theme-color: #88BDEC;
+  --theme-color: #5dc2c3;
 }
 
 body {
-  font-family: -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;
+  font-family: "Merriweather", -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;
   background: #fff;
 }
 
@@ -65,7 +54,8 @@ body {
 }
 
 .main {
-  padding-top: 100px;
+  padding-top: 40px;
+  max-width: 100%;
 }
 
 a {
@@ -74,40 +64,18 @@ a {
 
 
 .posts {
-  margin-bottom: 40px;
-
-  &:nth-child(2n+1) {
-    .post-right {
-      &:before {
-        background: #71D6E8;
-      }
-    }
-  }
-
-  .post {
-    &:last-child {
-      .post-right {
-        &:after {
-          display: none;
-        }
-      }
-    }
-  }
+  margin-bottom: 80px;
 }
 
 .post {
-  display: flex;
-}
-
-.post-left {
-  min-width: 50px;
-  padding-top: 8px;
+  margin-bottom: 30px;
 }
 
 .post-title {
-  //font-weight: 500;
-  font-size: 22px;
+  font-size: 20px;
   color: #000;
+  display: block;
+  margin-bottom: 10px;
   @include mobile {
     font-size: 18px;
   }
@@ -115,55 +83,29 @@ a {
 
 .post-date {
   color: #999;
-  font-size: 13px;
+  font-size: 12px;
 }
 
-.post-summary {
-  color: #999;
-  font-size: 14px;
-  max-height: 20px;
-  overflow: hidden;
-
-  @include mobile {
-    display: none;
-  }
+.post-title {
+  //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;
 }
 
-.post-right {
+.year {
+  font-size: 28px;
+  margin-bottom: 40px;
+  font-weight: 500;
+  padding-left: 20px;
   position: relative;
-  padding-left: 30px;
-  padding-bottom: 40px;
 
   &:before {
-    content: ' ';
     display: block;
+    content: "";
+    border-radius: 100%;
     width: 8px;
     height: 8px;
-    border-radius: 8px;
+    background: var(--theme-color);
     position: absolute;
     left: 0;
     top: 12px;
-    background: #DC9E5B;
   }
-
-  &:after {
-    position: absolute;
-    content: ' ';
-    display: block;
-    width: 1px;
-    height: 100%;
-    background: #f0f0f0;
-    left: 3px;
-    top: 20px;
-  }
-}
-
-.post-title {
-  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;
-}
-
-.year {
-  font-size: 22px;
-  margin-bottom: 30px;
-  font-weight: 500;
 }