🏷️ 更新至3.0.0-RC-1 close #189, close #192, close #223, close #224, close #229, close 232, close #240

source/css/_layout/404.styl

@@ -1,44 +1,80 @@
 if hexo-config('error_404.enable')
-  #nav.error-no-found
-    display: flex
-    flex-direction: column
-    justify-content: center
-    height: 100vh
+  #error-wrap
+    position: absolute
+    top: 50%
+    right: 0
+    left: 0
+    margin: 0 auto
+    padding: 0 1rem
+    max-width: 1000px
+    transform: translate(0, -50%)
 
-    &:before
-      width: 100%
-      height: 100%
-      background-color: alpha($dark-black, .5)
-      content: ''
+    .error-content
+      display: flex
+      flex-direction: row
+      justify-content: center
+      align-items: center
+      margin: 0 1rem
+      height: 18rem
+      border-radius: 8px
+      background: #fff
+      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
 
-    #error_info
-      position: absolute
-      padding: 0 4rem
-      width: 100%
-      letter-spacing: 3px
-      line-height: 1
-
-      #error_title,
-      #error_subtitle
+      @media screen and (max-width: 768px)
+        flex-direction: column
         margin: 0
-        padding: 0
-        color: $light-grey
-        letter-spacing: 5px
+        height: 25rem
+
+      .error-img
+        flex: 1
+        height: 100%
+        border-top-left-radius: 8px
+        border-bottom-left-radius: 8px
+        background-color: #49b1f5
+        background-position: center
+        background-size: cover
+
+        @media screen and (max-width: 768px)
+          flex: 1
+          width: 100%
+          border-top-right-radius: 8px
+          border-bottom-left-radius: 0
+
+      .error-info
+        flex: 1
+        padding: .5rem
+        text-align: center
+        font-size: 14px
         font-family: $site-name-font
 
-      #error_title
-        font-size: 10rem
+        @media screen and (max-width: 768px)
+          flex: 1.1
+          width: 100%
 
-      #error_subtitle
-        font-size: 2rem
+        .error_title
+          margin-top: -4rem
+          color: $font-color
+          font-size: 9em
 
-  @media screen and (max-width: $sm)
-    #nav.error-no-found
-      #error_info
-        padding: 0 2rem
+          @media screen and (max-width: 768px)
+            margin-top: -3rem
 
-        #error_title
-          font-size: 7rem !important
+        .error_subtitle
+          @extend .limit-more-line
+          margin-top: -3.5rem
+          color: $font-color
+          word-break: break-word
+          font-size: 1.6em
+          -webkit-line-clamp: 2
 
-        #error_subtitle
-          font-size: 1rem !important
+        a
+          position: relative
+          z-index: 1
+          display: inline-block
+          margin-top: .5rem
+          padding: .3rem 1.5rem
+          background: $theme-color
+          color: white
+
+          i
+            padding-right: .3rem