iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

样式优化

Browse Source
i18n
xaoxuu 6 years ago
parent 77c1f783c9
commit 5f0e8d62b8
11 changed files with 82 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      layout/_partial/article.ejs
  2. 2
      layout/_partial/post.ejs
  3. 15
      source/less/_article.less
  4. 10
      source/less/_base.less
  5. 15
      source/less/_color.less
  6. 4
      source/less/_footer.less
  7. 6
      source/less/_header.less
  8. 47
      source/less/_main.less
  9. 2
      source/less/_normalize.less
  10. 8
      source/less/_toc.less
  11. 10
      source/less/_widget.less

20
layout/_partial/article.ejs
Unescape View File

@ -42,20 +42,16 @@
<section class='meta' id="footer-meta">
<time class="time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
<i class="fas fa-pen fa-fw" aria-hidden="true"></i>
本文最后更新于：<%- date(post.updated, config.date_format) %>
<i class="fas fa-pen fa-fw" aria-hidden="true"></i>&nbsp;本文最后更新于：<%- date(post.updated, config.date_format) %>
</time>
<% if (post.tags && post.tags.length && post.tags.each) { %>
<%
var items = [];
post.tags.each(function(item){
items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
items.push('<div class="tags"><a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>&nbsp;' + item.name + '</a></div>');
});
%>
<div class="tags">
<i class="fas fa-tags fa-fw" aria-hidden="true"></i>
<%- items.join(', ') %>
</div>
<%- items.join(' ') %>
<% } %>
</section>
@ -78,12 +74,11 @@
<%
var items = [];
post.prev.tags.each(function(item){
items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>' + item.name + '</a>');
});
%>
<h6 class="tags">
<i class="fas fa-tags fa-fw" aria-hidden="true"></i>
<%- items.join(', ') %>
<%- items.join(' ') %>
</h6>
<% } %>
</span>
@ -106,12 +101,11 @@
<%
var items = [];
post.next.tags.each(function(item){
items.push('<a class="tag" href="'+url_for(item.path)+'">' + item.name + '</a>');
items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>' + item.name + '</a>');
});
%>
<h6 class="tags">
<i class="fas fa-tags fa-fw" aria-hidden="true"></i>
<%- items.join(', ') %>
<%- items.join(' ') %>
</h6>
<% } %>
</span>

2
layout/_partial/post.ejs
Unescape View File

@ -37,7 +37,7 @@
<% if (post.tags && post.tags.length) { %>
<div class="full-width auto-padding tags">
<% post.tags.each(function(item){ %>
<a href="<%- url_for(item.path) %>"><i class="fas fa-tag fa-fw"></i>&nbsp;<%=item.name %></a>
<a href="<%- url_for(item.path) %>"><i class="fas fa-hashtag fa-fw"></i><%=item.name %></a>
<%})%>
</div>
<% } %>

15
source/less/_article.less
Unescape View File

@ -207,16 +207,16 @@
vertical-align: middle;
line-height: 2rem;
font-weight: bold;
background-color: @color_bg_quote;
background-color: @theme_main;
padding: .2em 2.4em;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@color_bg_quote, 10%);
background: darken(@theme_main, 10%);
}
&:active {
// background: darken(@color_bg_quote, 20%);
// background: darken(@theme_main, 20%);
}
}
@ -233,9 +233,9 @@
// padding-top: 2*@gap;
// background: transparent;
}
word-spacing: @gap;
word-spacing: @gap/2;
a {
color: @color_text_main;
color: @color_text_main;
position: relative;
display: inline-block;
word-spacing: 0;
@ -247,6 +247,7 @@
&:hover {
color: @color_text_highlight;
background: transparent;
text-decoration: none;
}
&::before {
// content: "#";
@ -309,13 +310,15 @@
.enable-trans();
// border: 1px solid transparent;
// &:hover{
// border: 1px solid fade(@color_bg_quote, 30%);
// border: 1px solid fade(@theme_main, 30%);
// }
.tags{
background: transparent;
padding: 0;
margin-top: @gap/2;
margin-bottom: 0;
font-size: @fontsize_small * 0.9;
word-spacing: 4px;
}
&:first-child{
margin-left: 0;

10
source/less/_base.less
Unescape View File

@ -101,11 +101,11 @@ body {
}
::-moz-selection {
background: fade(lighten(@color_text_link, 5%), 25%);
background: @color_bg_selection;
}
::selection {
background: fade(lighten(@color_text_link, 5%), 25%);
background: @color_bg_selection;
}
// transition
.enable-trans(@time: 0.25s){
@ -262,12 +262,12 @@ li {
border-radius: @border_radius_code_block;
.enable-trans();
&:hover {
background: fade(@color_bg_quote, 10%);
border-left: @border_radius_line solid @color_bg_quote;
background: fade(@theme_main, 10%);
border-left: @border_radius_line solid @theme_main;
padding: 8px;
}
&:active {
border-left: max(@border_radius, @border_radius_line) solid @color_bg_quote;
border-left: max(@border_radius, @border_radius_line) solid @theme_main;
}
}

15
source/less/_color.less
Unescape View File

@ -6,8 +6,7 @@
// 卡片背景颜色
@theme_cardbg: white; // 暗色主题示例：#555;
// 正文文字颜色
@color_text_main: @dark; // 暗色主题示例：white;
@ -17,11 +16,13 @@
// 导航栏背景，默认和主题色保持一致
@color_bg_navbar: @theme_main;
// 代码的背景色
@color_bg_code: fade(@color_ax_blue, 10%);
@color_bg_code: fade(@color_md_blue, 10%);
// 代码块的背景色
@color_bg_code_block: fade(@color_ax_blue, 10%);
// 引用的颜色以及分类、归档的 hover 时颜色
@color_bg_quote: @theme_main;
@color_bg_code_block: fade(@color_md_blue, 10%);
// 引用的颜色
@color_bg_quote: @color_mac_maximize;
// 选中部分文字的背景颜色
@color_bg_selection: fade(@color_md_blue, 20%);
// 文字颜色 ----------------
// 标题文字颜色（h1/h2）
@ -32,3 +33,5 @@
@color_text_highlight: @theme_main;
// 在主题色中显示的文本（一般为白或深灰）
@color_text_in_header: white;
// 正文文字颜色
@color_text_main: @dark; // 暗色主题示例：white;

4
source/less/_footer.less
Unescape View File

@ -39,8 +39,8 @@
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@color_bg_quote, 10%);
color: @color_bg_quote;
background: fade(@theme_main, 10%);
color: @theme_main;
}
}
}

6
source/less/_header.less
Unescape View File

@ -309,11 +309,11 @@
padding: 2px 20px;
border-left: 2px solid transparent;
&:hover{
border-left: 4px solid @color_bg_quote;
background: fade(@color_bg_quote, 10%);
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
&.active{
border-left: 4px solid @color_bg_quote;
border-left: 4px solid @theme_main;
}
}
}

47
source/less/_main.less
Unescape View File

@ -28,11 +28,24 @@
.vwrap{
border-radius: @border_radius;
border-style: dashed;
.enable-trans();
&:hover{
border: 1px dashed fade(@color_bg_quote, 100%);
border: 1px dashed fade(@theme_main, 100%);
}
.vheader{
.vinput{
&:hover{
border-bottom: 1px dashed @theme_main;
}
&:focus{
border-bottom: 1px solid @theme_main;
}
}
}
.vedit .vctrl span {
color: @theme_main;
padding: 0;
margin: 10px;
}
@ -42,15 +55,15 @@
padding-left: 2.4em;
padding-right: 2.4em;
font-weight: bold;
background-color: @color_bg_quote;
background-color: @theme_main;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@color_bg_quote, 10%);
background: darken(@theme_main, 10%);
}
&:active {
// background: lighten(@color_bg_quote, 20%);
// background: lighten(@theme_main, 20%);
}
}
blockquote{
@ -105,7 +118,8 @@
}
.vmeta{
.vat{
color: @color_text_link;
font-weight: bold;
color: @theme_main;
.enable-trans();
&:hover {
color: @color_text_highlight;
@ -266,21 +280,30 @@
.cats,
.browse,
.tags {
.enable-trans();
font-size: @fontsize_small * .95;
line-height: 24px;
color: fade(@color_text_main, 70%);
display: inline-block;
background: fade(@color_bg_quote, 10%);
margin: 0 4px 8px 0px;
padding: 2px 8px 2px 6px;
background: @theme_background;
margin: 4px 4px 4px 0px;
padding: 4px 8px 2px 6px;
border-radius: 0.5*@border_radius_code_block;
border-left: 0.5*@border_radius_code_block solid @color_bg_quote;
border-left: 30px solid @theme_main;
padding-left: 2px;
&:hover {
background: fade(@theme_main, 20%);
}
i{
width: 30px;
color: @color_text_in_header;
margin-left: -30px;
}
a{
color: fade(@color_text_main, 70%);
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
@ -303,7 +326,6 @@
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
@ -352,6 +374,9 @@
p{
margin: @gap;
}
a{
color: fade(@color_text_link, 90%);
}
section{
color: fade(@color_text_main, 80%);
padding: @gap;

2
source/less/_normalize.less vendored
Unescape View File

@ -429,7 +429,7 @@ table {
}
tr {
// border-bottom: 2px solid #eee;
// background-color: @color_bg_quote;
// background-color: @theme_main;
}
&>thead>th {
// border-bottom-width: 2px;

8
source/less/_toc.less
Unescape View File

@ -22,15 +22,15 @@
border-left: 4px solid transparent;
&:hover{
color: fade(@color_text_main, 100%);
border-left: 4px solid @color_bg_quote;
border-left: 4px solid @theme_main;
}
&:active{
border-left: 8px solid @color_bg_quote;
border-left: 8px solid @theme_main;
}
&.active{
color: fade(@color_text_main, 100%);
border-left: 4px solid @color_bg_quote;
background: fade(@color_bg_quote, 10%);
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
}
}

10
source/less/_widget.less
Unescape View File

@ -83,11 +83,11 @@
color: fade(@color_text_main, 50%);
}
&:hover{
border-left: 4px solid @color_bg_quote;
background: fade(@color_bg_quote, 10%);
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
&:active{
border-left: 8px solid @color_bg_quote;
border-left: 8px solid @theme_main;
}
}
}
@ -155,8 +155,8 @@
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@color_bg_quote, 10%);
color: @color_bg_quote;
background: fade(@theme_main, 10%);
color: @theme_main;
}
}
}

Write Preview
Loading…
Cancel
Save