style: optimize empty page template

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) { %>

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;
     }
   }
 }

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: 1.8em;
-    font-size: 2em;
     font-weight: 600;
-    margin-block-start: 1.4em;
+    line-height: 1.2em;
-    margin-block-end: 1.0em;
+
+    +ils-tablet() {
+      font-size: 1.7em;
+      line-height: 1.1em;
+    }
   }
 
 
   h2 {
-    color: var(--second-text-color);
+    font-size: 1.7em;
-    font-size: 1.8em;
     font-weight: 600;
-    margin-block-start: 1.4em;
+    line-height: 1.2em;
-    margin-block-end: 1.0em;
+
+    +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;
+    line-height: 1.16em;
-    margin-block-end: 0.8em;
+
+    +ils-tablet() {
+      font-size: 1.5em;
+      line-height: 1.06em;
+    }
   }
 
 
   h4 {
-    color: var(--second-text-color);
+    font-size: 1.5em;
-    font-size: 1.4em;
     font-weight: 550;
-    margin-block-start: 1.2em;
+    line-height: 1.16em;
-    margin-block-end: 0.8em;
+
+    +ils-tablet() {
+      font-size: 1.4em;
+      line-height: 1.06em;
+    }
   }
 
   h5 {
-    color: var(--second-text-color);
+    font-size: 1.28em;
-    font-size: 1.2em;
     font-weight: 500;
-    margin-block-start: 1.0em;
+    line-height: 1.12em;
-    margin-block-end: 0.6em;
 
+    +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;
+    line-height: 1.12em;
-    margin-block-end: 0.6em;
+    
+    +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;
+      background-color: var(--background-color);
-      border-top: 1px solid #c6cbd1;
+      border: 1px solid var(--fourth-text-color);
     }
 
     tr:nth-child(2n) {
-      //background-color: #f6f8fa;
+      background-color: var(--magic-background-color);
     }