refactor(layout): use simple layout

11 files changed, 124 insertions, 148 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;
 }
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b63d448..6b869a5 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,31 +1,27 @@
 {{ define "main" }}
     <div class="container">
-        <div class="row">
-            <div class="column is-md-8 is-12 is-offset-md-2 main">
-                <div class="single">
-                    <div class="single-title">
-                        {{.Title}}
+        <div class="main">
+            <div class="single">
+                <div class="single-title">
+                    {{.Title}}
+                </div>
+                <div class="single-meta">
+                    <div class="single-date">
+                        {{ .Date.Format "2006-01-02" }}
                     </div>
-                    <div class="single-meta">
-                        <div class="single-date">
-                            {{ .Date.Format "2006-01-02" }}
+                    {{ if .Params.tags }}
+                        <div class="single-tags">
+                            {{ range $k, $v := .Params.tags }}
+                                <a class="single-tag" href="{{ "tags/" | absLangURL }}{{ . }}">
+                                    #{{ . }}
+                                </a>
+                            {{ end }}
                         </div>
-                        {{ if .Params.tags }}
-                            <div class="single-tags">
-                                {{ range $k, $v := .Params.tags }}
-                                    <a class="single-tag" href="{{ "tags/" | absLangURL }}{{ . }}">
-                                        #{{ . }}
-                                    </a>
-                                {{ end }}
-                            </div>
-                        {{ end }}
-                    </div>
-                    <div class="single-content">
-                        {{.Content}}
-                    </div>
+                    {{ end }}
+                </div>
+                <div class="single-content">
+                    {{.Content}}
                 </div>
-            </div>
-            <div class="column is-md-2" style="position: relative">
                 <div class="single-toc"></div>
             </div>
         </div>
diff --git a/layouts/index.html b/layouts/index.html
index 16274ff..4e880fc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,31 +1,18 @@
 {{ define "main" }}
     <div class="container">
         <div class="row">
-            <div class="column is-md-8 is-offset-md-2 main">
+            <div class="column main">
                 {{ range (.Site.RegularPages.GroupByDate "2006") }}
                     <div class="posts">
                         <div class="year">{{ .Key }}</div>
                         {{ range .Pages }}
                             <div class="post">
-                                <div class="post-left">
-                            <span class="post-date">
-                                {{ .Date.Format "01-02" }}
-                            </span>
-                                </div>
-                                <div class="post-right">
-                                    <a class="post-title" href="{{.Permalink}}">
-                                        {{.Title}}
-                                    </a>
-                                    <div class="post-summary">
-                                        {{ $length := (len .Summary) }}
-                                        {{ if gt $length 0 }}
-                                            {{ if gt $length 100 }}
-                                                {{ $length = 100 }}
-                                            {{ end }}
-                                            {{ slicestr .Summary 0 $length | plainify | htmlUnescape }}
-                                        {{ end }}
-                                    </div>
-                                </div>
+                                <a class="post-title" href="{{.Permalink}}">
+                                    {{.Title}}
+                                </a>
+                                <span class="post-date">
+                                    {{ .Date.Format "Jan 02" }}
+                                </span>
                             </div>
                         {{ end }}
                     </div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 72ba546..caaa5a6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     {{ $options := (dict "targetPath" "less.css" "outputStyle" "compressed" "enableSourceMap" true) }}
     {{ $style := resources.Get "scss/less.scss" | resources.ToCSS $options }}
-    <link href="/images/logo.png" rel="icon" type="image/ico">
+    <link href="/images/favicon.png" rel="icon" type="image/ico">
     <link rel="stylesheet" href="{{ $style.Permalink }}">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1995642_5r07rt5x862.css">
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/tocbot/4.11.1/tocbot.css">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4c6bb51..bfee24f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,13 +1,13 @@
 <div class="container">
     <div class="nav">
         <a class="logo" href="/">
-            <img src="/images/logo.png" alt="">
+            <img src="/images/logo.svg" alt="">
         </a>
-        <ul class="nav-menu">
-            <li>
-                <a href="/about">关于</a>
-            </li>
-        </ul>
+<!--         <ul class="nav-menu"> -->
+<!--             <li> -->
+<!--                 <a href="/about">关于</a> -->
+<!--             </li> -->
+<!--         </ul> -->
         <i class="icon icon-moon" id="btn-dark"></i>
     </div>
 </div>
\ No newline at end of file
diff --git a/static/images/favicon.png b/static/images/favicon.png
new file mode 100644
index 0000000..32c6bfc
--- /dev/null
+++ b/static/images/favicon.png
diff --git a/static/images/logo.png b/static/images/logo.png
index bb8fb6f..d85af5c 100644
--- a/static/images/logo.png
+++ b/static/images/logo.png
diff --git a/static/images/logo.svg b/static/images/logo.svg
new file mode 100644
index 0000000..2f9a2b2
--- /dev/null
+++ b/static/images/logo.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="84px" height="44px" viewBox="0 0 84 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group 2</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-114.000000, -251.000000)">
+            <g id="Group-2" transform="translate(114.000000, 251.000000)">
+                <polygon id="Polygon" fill="#A9DFDC" points="19 3 35.4544827 12.5 35.4544827 31.5 19 41 2.54551733 31.5 2.54551733 12.5"></polygon>
+                <text id="L" font-family="PlantagenetCherokee, Plantagenet Cherokee" font-size="36" font-weight="normal" fill="#FFFFFF">
+                    <tspan x="9" y="34">L</tspan>
+                </text>
+                <text id="ess" font-family="JCfg, PilGi" font-size="38" font-weight="normal" fill="#B2B2B2">
+                    <tspan x="38" y="30">ess</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file