pref: optimize global ui style

layout/_partial/tagcloud.ejs

@@ -1,8 +1,8 @@
 <% if (site.tags.length){ %>
     <div class="fade-in-down-animation">
         <div class="tagcloud-container">
-            <div class = "tagcloud-content">
+            <div class="tagcloud-content">
-                <%- tagcloud({min_font:15,max_font:25}) %>
+                <%- tagcloud({min_font: 16, max_font: 28}) %>
             </div>
         </div>
     </div>

layout/home-content.ejs

@@ -25,7 +25,7 @@
                         <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
                         <% if (theme.magic.enable === true) { %>
                             <% if (theme.home_article.category === true) { %>
-                            <span>
+                                <span>
                             <i class="fa fa-folder"></i>
                             <ul>
                                 <% post.categories.forEach((category, i) => { %>
@@ -36,13 +36,14 @@
                             </span>
                             <% } %>
                             <% if (theme.home_article.tag === true) { %>
-                            <span>
+                                <span>
                             <i class="fa fa-tags"></i>
                             <ul>
                                 <% post.tags.forEach((tag, i) => {
-                                    if (theme.home_article.tag_limit===0 | i+1<= theme.home_article.tag_limit) {%>
+                                if (theme.home_article.tag_limit === 0 | i + 1 <= theme.home_article.tag_limit) { %>
-                                        <li><%= i === 0 ? '' : '| ' %><a
+                                    <li>
-                                                    href="<%- url_for(tag.path) %>"><%= tag.name %></a></li>
+                                        <%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
+                                    </li>
                                 <% }}); %>
                             </ul>
                             </span>

layout/page.ejs

@@ -23,17 +23,18 @@
                 <% } else if (is_tag()) { %>
                     <%- partial('tag-content') %>
 
-                <% } else if (page.title == 'category') { %>
+                <% } else if (page.title === 'category' || page.title === 'categories') { %>
                     <%- partial('category-list') %>
 
-                <% } else if (page.title == 'about') { %>
+                <% } else if (page.title === 'tag' || page.title === 'tags') { %>
+                    <%- partial('_partial/tagcloud') %>
+
+                <% } else if (page.title === 'about') { %>
                     <%- partial('about') %>
 
-                <% } else if (page.title == 'links') { %>
+                <% } else if (page.title === 'link' || page.title === 'links') { %>
                     <%- partial('links') %>
 
-                <% } else if (page.title == 'tags') { %>
-                    <%- partial('_partial/tagcloud') %>
                 <% } %>
 
             </div>

source/css/layout/_partial/archive-list.styl

@@ -1,7 +1,7 @@
 @require "../common/variables.styl";
 
 $archive-year-font-size = 1.8em;
-$archive-year-count-font-size = 1.4em;
+$archive-year-count-font-size = 1.2em;
 $article-title-font-size = 1.12em;
 $article-date-font-size = 0.8em;
 
@@ -31,7 +31,7 @@ $article-date-font-size = 0.8em;
         font-size: $archive-year-count-font-size;
 
         +ils-tablet() {
-          font-size: $archive-year-count-font-size - 0.2em;
+          font-size: $archive-year-count-font-size - 0.1em;
         }
 
         color: var(--second-text-color);
@@ -44,8 +44,15 @@ $article-date-font-size = 0.8em;
     .article-list {
 
       .article-item {
-        margin-top: 20px;
+        margin-top: 18px;
-        font-size: $article-title-font-size;
+
+        +ils-tablet() {
+          margin-top: 16px;
+        }
+
+        +ils-mobile() {
+          margin-top: 14px;
+        }
 
         a.article-title {
           color: var(--normal-text-color);

source/css/layout/_partial/sidebar-tagcloud.styl

@@ -21,7 +21,6 @@
     a {
       padding: 0 2px;
       line-height: 1.8em;
-      //text-transform: uppercase;
     }
   }
 }

source/css/layout/_partial/tagcloud.styl

@@ -1,18 +1,19 @@
-
 @require "../common/magic-theme.styl";
 
 .tagcloud-container {
 
-    background: var(--background-color);
+  background: var(--background-color);
 
-    magic-container(1.005,1.01,30px);
+  magic-container(1.005, 1.01, 30px);
 
-    .tagcloud-content{
+  .tagcloud-content {
-        a{
-            margin-right: 5px;
-            display: inline-block;
-        }
 
+    text-align: justify;
+    font-size: 1.2em;
+
+    a {
+      padding: 8px 6px;
+      display: inline-block;
     }
-
+  }
 }

source/css/layout/category-list.styl

@@ -14,13 +14,6 @@
 
     .all-category-list {
 
-      font-size: 1.18em;
-
-      +ils-tablet() {
-        font-size: 1.12em;
-      }
-
-
       li.all-category-list-item {
 
         margin-bottom: 15px;

source/css/layout/common/basic.styl

@@ -2,6 +2,29 @@
 @require 'animated.styl'
 @require 'magic-theme.styl'
 
+
+// ============================
+// scrollbar
+// ============================
+* {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+
+// ============================
+// html, body
+// ============================
 html, body {
   margin: 0;
   padding: 0;
@@ -11,49 +34,60 @@ html, body {
   } else {
     background: var(--background-color);
   }
-  font-size: $default-font-size;
+
   font-family: $default-font-family;
   font-weight: $default-font-weight;
+  font-size: $default-font-size;
   line-height: $default-font-line-height;
+
+  +ils-tablet() {
+    font-size: 0.99em;
+    line-height: $default-font-line-height - 2px;
+  }
+
+  +ils-mobile() {
+    font-size: 0.98em;
+    line-height: $default-font-line-height - 4px;
+  }
+
 }
 
 
+
+// ============================
+// selection
+// ============================
 ::selection {
   background: var(--selection-color);
   color: #fff;
 }
 
-* {
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
 
-  &::-webkit-scrollbar-thumb {
+// ============================
-    background: rgba(0, 0, 0, 0.2)
+// ul, ol, li
-  }
+// ============================
-
+ul, ol, li {
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
-
-ul,
-li,
-ol {
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
+// ============================
+// a
+// ============================
 a {
   text-decoration: none;
   color: var(--normal-text-color);
+
+  &:hover, &:active {
+    color: var(--primary-color);
+  }
+
 }
 
-a:hover, a:active {
+// ============================
-  color: var(--primary-color);
+// button
-}
+// ============================
-
 button {
   padding: 0;
   margin: 0;

source/css/layout/common/codeblock/highlight.styl

@@ -9,19 +9,6 @@ $code-block {
   background: var(--highlight-background);
   line-height: 1.5em;
   transition: all 0.5s ease;
-
-  &::-webkit-scrollbar {
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 1px;
-    background: rgba(0, 0, 0, 0.3)
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
 }
 
 

source/css/layout/common/markdown.styl

@@ -68,12 +68,8 @@
   }
 
 
-  h1,
+  h1, h2, h3, h4, h5, h6 {
-  h2,
+  //  TODO: ...
-  h3,
-  h4,
-  h5,
-  h6 {
   }
 
   h1 {

source/css/layout/common/variables.styl

@@ -6,20 +6,20 @@
 // layout
 // ===================================
 if (hexo-config('magic.enable')) {
-  $header-height = 80px;        // 头部默认高度
+  $header-height = 80px;        // magic 风格：头部默认高度
 } else {
-  $header-height = 100px;       // 头部默认高度
+  $header-height = 100px;       // normal 风格：头部默认高度
 }
 
 if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
-  $main-content-width = 80%;    // 中间内容区域宽度
+  $main-content-width = 80%;    // magic.sidebar（双栏） 中间内容区域宽度
-  $sidebar-width = 280px;       // 侧边栏宽度
+  $sidebar-width = 280px;       // magic.sidebar（双栏） 侧边栏宽度
 } else {
-  $main-content-width = 62%;    // 中间内容区域宽度
+  $main-content-width = 62%;    // （单栏）中间内容区域宽度
 }
 
 $header-shrink-height = 60px;    // 头部收缩高度
-$tool-button-width = 36px;       // 方形工具按钮宽度
+$tool-button-width = 36px;       // tools 方形工具按钮宽度
 $component-interspace = 30px;    // 组件/模块的间隔值（px）
 
 // ===================================
@@ -80,16 +80,19 @@ $dark-selection-color = $selection-color;
 // ===================================
 // font
 // ===================================
-//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei';
+// 'PingHei', 'PingFang SC', 'Microsoft YaHei';
-//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
+// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
-//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
+// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
-//$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
+// "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
 $default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-$default-font-size = 15px;
+$default-font-size = 16px;
 $default-font-line-height = 20px;
 $default-font-weight = 400;
 
 
+// ===================================
+//  light/dark color
+// ===================================
 :root {
   --background-color: $background-color;
   --magic-background-color: $magic-background-color;