feat(*): use baseof page

13 files changed, 304 insertions, 113 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;
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5f8e2ec..0c2e761 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,11 +1,8 @@
-<!DOCTYPE html>
-<html>
-    {{- partial "head.html" . -}}
-    <body>
-        {{- partial "header.html" . -}}
-        <div id="content">
-        {{- block "main" . }}{{- end }}
-        </div>
-        {{- partial "footer.html" . -}}
-    </body>
+<html lang="en">
+{{ partial "head.html" . }}
+<body>
+{{ partial "header.html" . }}
+{{ block "main" . }} {{ end }}
+{{ partial "footer.html" . }}
+</body>
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index cf0926a..b63d448 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,16 +1,33 @@
-{{ partial "header.html" . }}
-
-<div class="container">
-    <div class="row">
-        <div class="column is-md-8 is-offset-2 main">
-            <div class="single">
-                <div class="single-title">
-                    {{.Title}}
+{{ 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>
+                    <div class="single-meta">
+                        <div class="single-date">
+                            {{ .Date.Format "2006-01-02" }}
+                        </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>
                 </div>
-                {{.Content}}
+            </div>
+            <div class="column is-md-2" style="position: relative">
+                <div class="single-toc"></div>
             </div>
         </div>
     </div>
-</div>
-
-{{partial "footer.html" . }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 04da3f9..16274ff 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,36 +1,36 @@
-{{ partial "header.html" . }}
-
-<div class="container">
-    <div class="row">
-        <div class="column is-md-8 is-offset-2 main">
-            {{ range (.Site.RegularPages.GroupByDate "2006") }}
-                <div class="posts">
-                    <div class="year">{{ .Key }}</div>
-                    {{ range .Pages }}
-                        <div class="post">
-                            <div class="post-left">
+{{ define "main" }}
+    <div class="container">
+        <div class="row">
+            <div class="column is-md-8 is-offset-md-2 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 (len .Summary) 100 }}
-                                        {{ $length = 100 }}
-                                    {{ end }}
-                                    {{ slicestr .Summary 0 $length | plainify | htmlUnescape }}
+                                </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>
                             </div>
-                        </div>
-                    {{ end }}
-                </div>
-            {{ end }}
+                        {{ end }}
+                    </div>
+                {{ end }}
+            </div>
         </div>
     </div>
-</div>
-
-{{ partial "footer.html" . }}
\ No newline at end of file
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 74164f0..d9ad6cd 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,10 +1,35 @@
-
 <div class="container">
     <footer>
         <div>Less is More</div>
-        <span class="copyright">©2018-{{now.Year}}</span>
+        <span class="copyright">
+        {{ $year := "2020" }}
+            {{ $created := $.Site.Params.siteCreated }}
+            {{ if and $created (lt $created now.Year) }}
+                {{ $year = printf "%d - %d" $created now.Year }}
+            {{ else }}
+                {{ $year = printf "%d" now.Year }}
+            {{ end }}
+        © {{ $year }}
+        </span>
         <a href="">粤ICP备120011798号</a>
     </footer>
 </div>
 </body>
+<script src="https://cdn.staticfile.org/tocbot/4.11.2/tocbot.min.js"></script>
+<script>
+    tocbot.init({
+        // Where to render the table of contents.
+        tocSelector: '.single-toc',
+        // Where to grab the headings to build the table of contents.
+        contentSelector: '.single-content',
+        // Which headings to grab inside of the contentSelector element.
+        headingSelector: 'h1, h2, h3',
+        // For headings inside relative or absolute positioned containers within content.
+        hasInnerContainers: false,
+        collapseDepth: 4
+    });
+</script>
+<script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
+{{ $built := resources.Get "js/less.js" | js.Build "less.js" }}
+<script type="text/javascript" src="{{ $built.RelPermalink }}"></script>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e69de29..72ba546 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -0,0 +1,13 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <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 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">
+    <title>面向自由编程</title>
+</head>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b330262..4c6bb51 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,18 +1,3 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <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 rel="stylesheet" href="{{ $style.Permalink }}">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1995642_svj67i6zduq.css">
-    <title>面向自由编程</title>
-</head>
-<body>
 <div class="container">
     <div class="nav">
         <a class="logo" href="/">
@@ -20,12 +5,9 @@
         </a>
         <ul class="nav-menu">
             <li>
-                <a href="">系列</a>
-            </li>
-            <li>
-                <a href="">关于</a>
+                <a href="/about">关于</a>
             </li>
         </ul>
-        <i class="icon icon-search"></i>
+        <i class="icon icon-moon" id="btn-dark"></i>
     </div>
 </div>
\ No newline at end of file
diff --git a/theme.toml b/theme.toml
index 8d79c9e..7ecede8 100644
--- a/theme.toml
+++ b/theme.toml
@@ -9,10 +9,11 @@ homepage = "http://example.com/"
 tags = []
 features = []
 min_version = "0.41.0"
+siteCreated = 2020
 
 [author]
-  name = ""
-  homepage = ""
+  name = "Aiden X"
+  homepage = "https://forever9.com"
 
 # If porting an existing theme
 [original]