pref: optimize global ui style
This commit is contained in:
XPoet
parent
024443f8d6
commit
f49cfeb4a2
|
|
@ -1,8 +1,8 @@
|
|||
<% if (site.tags.length){ %>
|
||||
<div class="fade-in-down-animation">
|
||||
<div class="tagcloud-container">
|
||||
<div class = "tagcloud-content">
|
||||
<%- tagcloud({min_font:15,max_font:25}) %>
|
||||
<div class="tagcloud-content">
|
||||
<%- tagcloud({min_font: 16, max_font: 28}) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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) {%>
|
||||
<li><%= i === 0 ? '' : '| ' %><a
|
||||
href="<%- url_for(tag.path) %>"><%= tag.name %></a></li>
|
||||
if (theme.home_article.tag_limit === 0 | i + 1 <= theme.home_article.tag_limit) { %>
|
||||
<li>
|
||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
|
||||
</li>
|
||||
<% }}); %>
|
||||
</ul>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
a {
|
||||
padding: 0 2px;
|
||||
line-height: 1.8em;
|
||||
//text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
a{
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.tagcloud-content {
|
||||
|
||||
text-align: justify;
|
||||
font-size: 1.2em;
|
||||
|
||||
a {
|
||||
padding: 8px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,12 +68,8 @@
|
|||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
// TODO: ...
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue