lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pref: optimize global ui style

This commit is contained in:
XPoet 2020-09-03 12:28:24 +08:00
parent 024443f8d6
commit f49cfeb4a2
11 changed files with 111 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layout/_partial/tagcloud.ejs
View File

@ -1,9 +1,9 @@
<% if (site.tags.length){ %> <% if (site.tags.length){ %>
<div class="fade-in-down-animation"> <div class="fade-in-down-animation">
<div class="tagcloud-container"> <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> </div>
</div> </div>
<% } %> <% } %>

13
layout/home-content.ejs
View File

@ -25,7 +25,7 @@
<span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span> <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
<% if (theme.magic.enable === true) { %> <% if (theme.magic.enable === true) { %>
<% if (theme.home_article.category === true) { %> <% if (theme.home_article.category === true) { %>
<span> <span>
<i class="fa fa-folder"></i> <i class="fa fa-folder"></i>
<ul> <ul>
<% post.categories.forEach((category, i) => { %> <% post.categories.forEach((category, i) => { %>
@ -36,13 +36,14 @@
</span> </span>
<% } %> <% } %>
<% if (theme.home_article.tag === true) { %> <% if (theme.home_article.tag === true) { %>
<span> <span>
<i class="fa fa-tags"></i> <i class="fa fa-tags"></i>
<ul> <ul>
<% post.tags.forEach((tag, i) => { <% 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> </ul>
</span> </span>

13
layout/page.ejs
View File

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

15
source/css/layout/_partial/archive-list.styl
View File

@ -1,7 +1,7 @@
@require "../common/variables.styl"; @require "../common/variables.styl";
$archive-year-font-size = 1.8em; $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-title-font-size = 1.12em;
$article-date-font-size = 0.8em; $article-date-font-size = 0.8em;
@ -31,7 +31,7 @@ $article-date-font-size = 0.8em;
font-size: $archive-year-count-font-size; font-size: $archive-year-count-font-size;
+ils-tablet() { +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); color: var(--second-text-color);
@ -44,8 +44,15 @@ $article-date-font-size = 0.8em;
.article-list { .article-list {
.article-item { .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 { a.article-title {
color: var(--normal-text-color); color: var(--normal-text-color);

1
source/css/layout/_partial/sidebar-tagcloud.styl
View File

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

23
source/css/layout/_partial/tagcloud.styl
View File

@ -1,18 +1,19 @@
@require "../common/magic-theme.styl"; @require "../common/magic-theme.styl";
.tagcloud-container { .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{
a{
margin-right: 5px;
display: inline-block;
}
.tagcloud-content {
text-align: justify;
font-size: 1.2em;
a {
padding: 8px 6px;
display: inline-block;
} }
}
} }

7
source/css/layout/category-list.styl
View File

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

76
source/css/layout/common/basic.styl
View File

@ -2,6 +2,29 @@
@require 'animated.styl' @require 'animated.styl'
@require 'magic-theme.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 { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -11,49 +34,60 @@ html, body {
} else { } else {
background: var(--background-color); background: var(--background-color);
} }
font-size: $default-font-size;
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
font-size: $default-font-size;
line-height: $default-font-line-height; 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 { ::selection {
background: var(--selection-color); background: var(--selection-color);
color: #fff; 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; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
// ============================
// a
// ============================
a { a {
text-decoration: none; text-decoration: none;
color: var(--normal-text-color); color: var(--normal-text-color);
&:hover, &:active {
color: var(--primary-color);
}
} }
a:hover, a:active { // ============================
color: var(--primary-color); // button
} // ============================
button { button {
padding: 0; padding: 0;
margin: 0; margin: 0;

13
source/css/layout/common/codeblock/highlight.styl
View File

@ -9,19 +9,6 @@ $code-block {
background: var(--highlight-background); background: var(--highlight-background);
line-height: 1.5em; line-height: 1.5em;
transition: all 0.5s ease; 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;
}
} }

8
source/css/layout/common/markdown.styl
View File

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

25
source/css/layout/common/variables.styl
View File

@ -6,20 +6,20 @@
// layout // layout
// =================================== // ===================================
if (hexo-config('magic.enable')) { if (hexo-config('magic.enable')) {
$header-height = 80px; // 头部默认高度 $header-height = 80px; // magic 风格：头部默认高度
} else { } else {
$header-height = 100px; // 头部默认高度 $header-height = 100px; // normal 风格：头部默认高度
} }
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { 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 { } else {
$main-content-width = 62%; // 中间内容区域宽度 $main-content-width = 62%; // （单栏）中间内容区域宽度
} }
$header-shrink-height = 60px; // 头部收缩高度 $header-shrink-height = 60px; // 头部收缩高度
$tool-button-width = 36px; // 方形工具按钮宽度 $tool-button-width = 36px; // tools 方形工具按钮宽度
$component-interspace = 30px; // 组件/模块的间隔值（px） $component-interspace = 30px; // 组件/模块的间隔值（px）
// =================================== // ===================================
@ -80,16 +80,19 @@ $dark-selection-color = $selection-color;
// =================================== // ===================================
// font // 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-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-line-height = 20px;
$default-font-weight = 400; $default-font-weight = 400;
// ===================================
// light/dark color
// ===================================
:root { :root {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color; --magic-background-color: $magic-background-color;