From d225c222ed18a09a25ef3ac733e2ddfcad8f531d Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 30 Oct 2020 10:18:42 +0800
Subject: [PATCH] style: optimize empty page template

---
 layout/_partial/empty-page.ejs             |  6 +-
 source/css/layout/_partial/empty-page.styl |  9 ++-
 source/css/layout/common/markdown.styl     | 70 ++++++++++++++--------
 3 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/layout/_partial/empty-page.ejs b/layout/_partial/empty-page.ejs
index 8215b95..47adb7b 100644
--- a/layout/_partial/empty-page.ejs
+++ b/layout/_partial/empty-page.ejs
@@ -1,7 +1,11 @@
 <div class="fade-in-down-animation">
     <div class="empty-page-container">
         <div class="empty-page-content markdown-body">
-            <%- page.content %>
+            <% if (page.content) { %>
+                <%- page.content %>
+            <% } else { %>
+                <h1><%- page.title %></h1>
+            <% } %>
         </div>
         <div class="empty-page-comments">
             <% if (page.comment) { %>
diff --git a/source/css/layout/_partial/empty-page.styl b/source/css/layout/_partial/empty-page.styl
index 4d7eca3..bfe4c28 100644
--- a/source/css/layout/_partial/empty-page.styl
+++ b/source/css/layout/_partial/empty-page.styl
@@ -1,4 +1,5 @@
 @require "../common/magic-theme.styl";
+@require "../common/variables.styl";
 
 .empty-page-container {
 
@@ -20,10 +21,14 @@
 
     }
 
-    margin-bottom: 30px;
+    margin-bottom: $component-interspace;
 
     +ils-tablet() {
-      margin-bottom: 20px;
+      margin-bottom: $component-interspace-tablet;
+    }
+
+    +ils-mobile() {
+      margin-bottom: $component-interspace-mobile;
     }
   }
 }
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index 1d1b0a4..1d9e3ad 100644
--- a/source/css/layout/common/markdown.styl
+++ b/source/css/layout/common/markdown.styl
@@ -69,57 +69,75 @@
 
 
   h1, h2, h3, h4, h5, h6 {
+    color: var(--second-text-color);
   }
 
   h1 {
-    color: var(--second-text-color);
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: 600;
-    margin-block-start: 1.4em;
-    margin-block-end: 1.0em;
+    line-height: 1.2em;
+
+    +ils-tablet() {
+      font-size: 1.7em;
+      line-height: 1.1em;
+    }
   }
 
 
   h2 {
-    color: var(--second-text-color);
-    font-size: 1.8em;
+    font-size: 1.7em;
     font-weight: 600;
-    margin-block-start: 1.4em;
-    margin-block-end: 1.0em;
+    line-height: 1.2em;
+
+    +ils-tablet() {
+      font-size: 1.6em;
+      line-height: 1.1em;
+    }
   }
 
   h3 {
-    color: var(--second-text-color);
     font-size: 1.6em;
     font-weight: 550;
-    margin-block-start: 1.2em;
-    margin-block-end: 0.8em;
+    line-height: 1.16em;
+
+    +ils-tablet() {
+      font-size: 1.5em;
+      line-height: 1.06em;
+    }
   }
 
 
   h4 {
-    color: var(--second-text-color);
-    font-size: 1.4em;
+    font-size: 1.5em;
     font-weight: 550;
-    margin-block-start: 1.2em;
-    margin-block-end: 0.8em;
+    line-height: 1.16em;
+
+    +ils-tablet() {
+      font-size: 1.4em;
+      line-height: 1.06em;
+    }
   }
 
   h5 {
-    color: var(--second-text-color);
-    font-size: 1.2em;
+    font-size: 1.28em;
     font-weight: 500;
-    margin-block-start: 1.0em;
-    margin-block-end: 0.6em;
+    line-height: 1.12em;
 
+    +ils-tablet() {
+      font-size: 1.18em;
+      line-height: 1.02em;
+    }
   }
 
   h6 {
-    color: var(--second-text-color);
     font-size: 1.2em;
     font-weight: 500;
-    margin-block-start: 1.0em;
-    margin-block-end: 0.6em;
+    line-height: 1.12em;
+    
+    +ils-tablet() {
+      font-size: 1.1em;
+      line-height: 1.02em;
+    }
   }
 
 
@@ -150,16 +168,16 @@
     td,
     th {
       padding: 6px 13px;
-      border: 1px solid #dfe2e5;
+      border: 1px solid var(--border-color);
     }
 
     tr {
-      //background-color: #fff;
-      border-top: 1px solid #c6cbd1;
+      background-color: var(--background-color);
+      border: 1px solid var(--fourth-text-color);
     }
 
     tr:nth-child(2n) {
-      //background-color: #f6f8fa;
+      background-color: var(--magic-background-color);
     }