feat: 404 layout and search panel style optimized

README-zh.md

@@ -28,6 +28,7 @@ TeXt 是针对个人或团队网站、博客、项目、文档等的一款高度
 - 流程图， 序列图，甘特图（[mermaid](https://mermaidjs.github.io/)）
 - 柱状图，折线图，饼图，雷达图（[chartjs](http://www.chartjs.org/)）
 - 阅读次数统计（[LeanCloud](https://leancloud.cn/)）
+- 分享（[AddToAny](https://www.addtoany.com/)）
 - 评论（[Disqus](https://disqus.com/), [gitalk](https://gitalk.github.io/)）
 - Google Analytics
 

README.md

@@ -28,6 +28,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Flowchart, Sequence diagram, Gantt diagram ([mermaid](https://mermaidjs.github.io/))
 - Line Chart, Bar Chart, Radar Chart, Pie Chart ([chartjs](http://www.chartjs.org/))
 - Page views ([LeanCloud](https://leancloud.cn/))
+- Share ([AddToAny](https://www.addtoany.com/))
 - Comments ([Disqus](https://disqus.com/))
 - Google Analytics
 

_layouts/404.html

@@ -4,8 +4,9 @@
 show_title: false
 ---
 <div class="layout--404">
-  <div class="main">
+  <div class="sign">
     <h1>404</h1>
+    <p>Page not found :(</p>
   </div>
 </div>
 

_sass/common/_variables.scss

@@ -101,7 +101,8 @@ $responsive: (
 );
 
 $animation: (
-  duration:               .6s,
+  duration:               .4s,
+  duration-sm:            .2s,
   timing-function:        ease-in-out
 );
 

_sass/components/_search.scss

@@ -97,6 +97,7 @@
   list-style-type: none;
   a {
     padding: .4rem 1rem;
+    @include transition(none);
     @include clickable($text-color, transparent, $text-color-3, $main-color-3);
     .search--light & {
       @include clickable($text-color-theme-light, transparent, $text-color-3, $main-color-3);
@@ -111,6 +112,9 @@
         color: $text-color-3;
         background-color: $main-color-3;
       }
+      @include active() {
+        @include transition(map-get($link, transition));
+      }
     }
   }
 }

_sass/layout/_404.scss

@@ -1,7 +1,14 @@
 .layout--404 {
-  @include flexbox;
-  @include align-items(center);
-  & > .main > h1 {
-    font-size: 7rem;
+  .sign {
+    display: table;
+    margin: map-get($base, vertical-space-lg) auto;
+    margin-top: map-get($base, vertical-space-lg) * 2;
+    h1 {
+      font-size: map-get($base, font-size-xl) * 4;
+      line-height: 1;
+    }
+    p {
+      font-size: map-get($base, font-size-xl) * 1.2;
+    }
   }
 }

_sass/layout/_page.scss

@@ -29,7 +29,7 @@
     height: 100%;
     background-color: $background-color;
     @include split-line(right);
-    @include transition(transform .4s);
+    @include transition(transform map-get($animation, duration));
     @include overflow(auto);
     .sidebar-toc {
       padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);

about.md

@@ -32,6 +32,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Flowchart, Sequence diagram, Gantt diagram ([mermaid](https://mermaidjs.github.io/))
 - Line Chart, Bar Chart, Radar Chart, Pie Chart ([chartjs](http://www.chartjs.org/))
 - Page views ([LeanCloud](https://leancloud.cn/))
+- Share ([AddToAny](https://www.addtoany.com/))
 - Comments ([Disqus](https://disqus.com/))
 - Google Analytics