From f49cfeb4a28ec6757a34e0b0b7bb74be5d00c526 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 3 Sep 2020 12:28:24 +0800 Subject: [PATCH] pref: optimize global ui style --- layout/_partial/tagcloud.ejs | 6 +- layout/home-content.ejs | 13 ++-- layout/page.ejs | 13 ++-- source/css/layout/_partial/archive-list.styl | 15 +++- .../css/layout/_partial/sidebar-tagcloud.styl | 1 - source/css/layout/_partial/tagcloud.styl | 23 +++--- source/css/layout/category-list.styl | 7 -- source/css/layout/common/basic.styl | 76 ++++++++++++++----- .../layout/common/codeblock/highlight.styl | 13 ---- source/css/layout/common/markdown.styl | 8 +- source/css/layout/common/variables.styl | 25 +++--- 11 files changed, 111 insertions(+), 89 deletions(-) diff --git a/layout/_partial/tagcloud.ejs b/layout/_partial/tagcloud.ejs index aeafe6a..6c83e63 100644 --- a/layout/_partial/tagcloud.ejs +++ b/layout/_partial/tagcloud.ejs @@ -1,9 +1,9 @@ <% if (site.tags.length){ %>
-
- <%- tagcloud({min_font:15,max_font:25}) %> +
+ <%- tagcloud({min_font: 16, max_font: 28}) %>
-<% } %> \ No newline at end of file +<% } %> diff --git a/layout/home-content.ejs b/layout/home-content.ejs index 95cda57..acc30cb 100644 --- a/layout/home-content.ejs +++ b/layout/home-content.ejs @@ -25,7 +25,7 @@ <%= date(post.date, 'YYYY-MM-DD') %> <% if (theme.magic.enable === true) { %> <% if (theme.home_article.category === true) { %> - +
    <% post.categories.forEach((category, i) => { %> @@ -36,13 +36,14 @@ <% } %> <% if (theme.home_article.tag === true) { %> - +
      - <% post.tags.forEach((tag, i) => { - if (theme.home_article.tag_limit===0 | i+1<= theme.home_article.tag_limit) {%> -
    • <%= i === 0 ? '' : '| ' %><%= tag.name %>
      • + <% post.tags.forEach((tag, i) => { + if (theme.home_article.tag_limit === 0 | i + 1 <= theme.home_article.tag_limit) { %> +
    • + <%= i === 0 ? '' : '| ' %><%= tag.name %> +
      • <% }}); %>
    diff --git a/layout/page.ejs b/layout/page.ejs index d5d2b8d..b78c6ef 100644 --- a/layout/page.ejs +++ b/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') %> + <% } %>
diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index b68af7b..a58fc31 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/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; - font-size: $article-title-font-size; + margin-top: 18px; + + +ils-tablet() { + margin-top: 16px; + } + + +ils-mobile() { + margin-top: 14px; + } a.article-title { color: var(--normal-text-color); diff --git a/source/css/layout/_partial/sidebar-tagcloud.styl b/source/css/layout/_partial/sidebar-tagcloud.styl index 7d8ae29..89a34a3 100644 --- a/source/css/layout/_partial/sidebar-tagcloud.styl +++ b/source/css/layout/_partial/sidebar-tagcloud.styl @@ -21,7 +21,6 @@ a { padding: 0 2px; line-height: 1.8em; - //text-transform: uppercase; } } } diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl index 049d569..796e8ce 100644 --- a/source/css/layout/_partial/tagcloud.styl +++ b/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); - - .tagcloud-content{ - a{ - margin-right: 5px; - display: inline-block; - } + magic-container(1.005, 1.01, 30px); + .tagcloud-content { + + text-align: justify; + font-size: 1.2em; + + a { + padding: 8px 6px; + display: inline-block; } - -} \ No newline at end of file + } +} diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl index bdc1dba..ff1f9ab 100644 --- a/source/css/layout/category-list.styl +++ b/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; diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl index 71691cb..3f8802c 100644 --- a/source/css/layout/common/basic.styl +++ b/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) - } - - &::-webkit-scrollbar-track { - background: transparent; - } -} - -ul, -li, -ol { +// ============================ +// ul, ol, li +// ============================ +ul, ol, li { 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; diff --git a/source/css/layout/common/codeblock/highlight.styl b/source/css/layout/common/codeblock/highlight.styl index 2b9a872..9e4f77b 100644 --- a/source/css/layout/common/codeblock/highlight.styl +++ b/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; - } } diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl index 4f9a102..c2695a7 100644 --- a/source/css/layout/common/markdown.styl +++ b/source/css/layout/common/markdown.styl @@ -68,12 +68,8 @@ } - h1, - h2, - h3, - h4, - h5, - h6 { + h1, h2, h3, h4, h5, h6 { + // TODO: ... } h1 { diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 4faeccb..8216516 100644 --- a/source/css/layout/common/variables.styl +++ b/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%; // 中间内容区域宽度 - $sidebar-width = 280px; // 侧边栏宽度 + $main-content-width = 80%; // magic.sidebar（双栏） 中间内容区域宽度 + $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'; -//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light'; -//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif; -//$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial"; +// 'PingHei', 'PingFang SC', 'Microsoft YaHei'; +// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light'; +// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif; +// "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;