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

update

Browse Source
i18n
xaoxuu 6 years ago
parent 0b9c106e64
commit b30bd9e64e
16 changed files with 235 additions and 110 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. 26
      README.md
  2. 6
      _config.yml
  3. 2
      layout/_partial/article.ejs
  4. 10
      layout/_partial/header.ejs
  5. 30
      layout/_widget/about.ejs
  6. 7
      layout/_widget/avatar.ejs
  7. 24
      source/less/_article.less
  8. 6
      source/less/_base.less
  9. 37
      source/less/_defines.less
  10. 7
      source/less/_footer.less
  11. 34
      source/less/_header.less
  12. 12
      source/less/_main.less
  13. 2
      source/less/_search.less
  14. 5
      source/less/_toc.less
  15. 2
      source/less/_tog.less
  16. 135
      source/less/_widget.less

26
README.md
Unescape View File

@ -312,24 +312,36 @@ mathjax: true
```yaml
// 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 定义颜色
@theme-base-main: #EEE;
@theme-base-tint: @ax-red;
// 网页背景
@theme-bg-main: #EFEFEF;
// 导航栏背景（主题色）
@theme-bg-header: @xiaowenwen-green;
// 导航栏背景
@theme-bg-nav-header: #FFF;
// 卡片标题背景
@theme-bg-card-header: #E3E3E3;
// 按钮背景
@theme-bg-button: @theme-bg-card-header;
// 卡片背景
@theme-bg-card: #FFF;
// 代码的背景色
@theme-bg-code: @theme-base-tint;
// 代码块的背景色
@theme-bg-code: #F5F5F5;
@theme-bg-code-block: #F5F5F5;
// 引用的颜色 和 分类、归档的 hover 时颜色
@theme-bg-quote: @theme-bg-header;
@theme-bg-quote: @theme-base-tint;
// 标题文字颜色（h1/h2）
@theme-text-header: darken(@theme-bg-header, 0%);
@theme-text-header: @theme-base-tint;
// 链接颜色
@theme-text-link: @ax-blue;
// 链接高亮颜色
@theme-text-highlight: @material-orange;
@theme-text-highlight: @theme-base-tint;
// 在主题色中显示的文本（白或深灰）
@theme-text-in-header: white;
@theme-text-in-header: @dark;
// 正文文字颜色
@theme-text-main: @dark;
// 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
```

6
_config.yml
Unescape View File

@ -22,13 +22,15 @@ materialx:
url: /archives
# 右边的小窗口
widgets:
- avatar # 显示个人头像，如果注释掉这一行就不显示
- about # 显示个人头像、格言、社交信息等，如果注释掉这一行就不显示
- categories # 显示分类
- tagcloud # 显示tags
- contacts # 显示自己的联系信息
- music # 显示自己的网易云歌单
- links # 显示友链
- toc # 显示目录
widgets_about:
title:
motto: 永远不要忘了自己是谁，因为这个世界就不会。
# 网易云音乐歌单id
widgets_musicid:
# 侧边栏的友链

2
layout/_partial/article.ejs
Unescape View File

@ -23,7 +23,7 @@
<% if (post.tags && post.tags.length) { %>
<div class="article-tags tags">
<% post.tags.each(function(item){ %>
<a href="<%- url_for(item.path) %>"><i class="fa fa-tag fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%=item.name %></a>
<a href="<%- url_for(item.path) %>"><i class="fa fa-tag fa-fw" aria-hidden="true"></i>&nbsp;<%=item.name %></a>
<%})%>
</div>
<% } %>

10
layout/_partial/header.ejs
Unescape View File

@ -30,9 +30,9 @@
<% } %>
<ul class='switcher h-list'>
<% if (theme.nav_search.enable === true) { %>
<li class='s-search flat-box'><a href='javascript:void(0)'><i class="fa fa-search fa-fw"></i></span></a></li>
<li class='s-search'><a href='javascript:void(0)'><i class="fa fa-search fa-fw"></i></span></a></li>
<% } %>
<li class='s-menu flat-box'><a href='javascript:void(0)'><i class="fa fa-navicon fa-fw"></i></a></li>
<li class='s-menu'><a href='javascript:void(0)'><i class="fa fa-navicon fa-fw"></i></a></li>
</ul>
</div>
@ -42,9 +42,9 @@
</a>
<ul class='switcher h-list'>
<li class='s-comment flat-box'><a href='javascript:void(0)'><i class="fa fa-comments fa-fw"></i></a></li>
<li class='s-top flat-box'><a href='javascript:void(0)'><i class="fa fa-arrow-up fa-fw"></i></a></li>
<li class='s-toc flat-box'><a href='javascript:void(0)'><i class="fa fa-list-ul fa-fw"></i></a></li>
<li class='s-comment'><a href='javascript:void(0)'><i class="fa fa-comments fa-fw"></i></a></li>
<li class='s-top'><a href='javascript:void(0)'><i class="fa fa-arrow-up fa-fw"></i></a></li>
<li class='s-toc'><a href='javascript:void(0)'><i class="fa fa-list-ul fa-fw"></i></a></li>
</ul>
</div>
</div>

30
layout/_widget/about.ejs
Unescape View File

@ -0,0 +1,30 @@
<section class='m_widget about'>
<div class='header'>
<% if(config.avatar) { %>
<img class='avatar' src='<%= url_for(config.avatar) %>' />
<% } else { %>
<img class='avatar waves-image' src='https://xaoxuu.com/assets/img/avatar.jpg' />
<%} %>
</div>
<div class='content'>
<% if (config.materialx && (config.materialx.widgets_about.title)){ %>
<h2><%= config.materialx.widgets_about.title %></h2>
<% } %>
<div>
<i class="fa fa-quote-left fa-3x fa-pull-left" aria-hidden="true"></i>
<% if (config.materialx && (config.materialx.widgets_about.motto)){ %>
<%= config.materialx.widgets_about.motto %>
<% } %>
</div>
</div>
<div class="social-wrapper">
<% (config.materialx && config.materialx.footer_social && (config.materialx.footer_social||[]) || (theme.materialx.footer_social||[])).forEach(function(value){ %>
<% if (value.url && value.slug) { %>
<a href="<%= value.url %>" class="social <%= value.slug %>"
target="_blank" rel="external">
<i class="fa fa-<%= value.slug %> fa-fw"></i>
</a>
<%}%>
<%})%>
</div>
</section>

7
layout/_widget/avatar.ejs
Unescape View File

@ -1,7 +0,0 @@
<section class='m_widget about'>
<% if(config.avatar) { %>
<img class='avatar waves-image' src='<%= url_for(config.avatar) %>' />
<% } else { %>
<img class='avatar waves-image' src='https://xaoxuu.com/assets/img/avatar.jpg' />
<%} %>
</section>

24
source/less/_article.less
Unescape View File

@ -173,9 +173,9 @@
border-left: 8px solid @theme-bg-quote;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-right: 1px solid fade(@theme-bg-quote, 30%);
border-top: 1px solid fade(@theme-bg-quote, 30%);
border-bottom: 1px solid fade(@theme-bg-quote, 30%);
border-right: 1px solid fade(@theme-bg-quote, 40%);
border-top: 1px solid fade(@theme-bg-quote, 40%);
border-bottom: 1px solid fade(@theme-bg-quote, 40%);
}
footer {
strong {
@ -197,10 +197,10 @@
margin: 0px 2px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@theme-bg-header, 30%);
border: 1px solid fade(@theme-bg-code, 30%);
font-size: @base-font-size * .8;
background: fade(@theme-bg-header, 10%);
background: fade(@theme-bg-code, 10%);
@media(max-width: @on-phone){
font-size: @base-font-size * .8 * .95;
}
@ -216,16 +216,16 @@
display: inline-block;
vertical-align: middle;
line-height: 2rem;
background-color: fade(@theme-bg-header, 90%);
background-color: fade(@theme-bg-button, 90%);
padding: .2em 2.4em;
color: @theme-text-in-header;
border-radius: @border-radius-width/2;
.enable-trans();
&:hover {
background: darken(@theme-bg-header, 10%);
background: darken(@theme-bg-button, 10%);
}
&:active {
background: lighten(@theme-bg-header, 20%);
background: lighten(@theme-bg-button, 20%);
}
}
@ -330,7 +330,7 @@
display: block;
// background: #2d2d2d;
// background: fade(@material-blue, 8%);
background: @theme-bg-code;
background: @theme-bg-code-block;
// color: #cccccc;
font-size: @small-font-size * .95;
font-family:@code-font-family;
@ -341,7 +341,7 @@
border: 1px solid transparent;
.enable-trans();
&:hover{
border: 1px solid fade(@theme-bg-quote, 30%);
border: 1px solid fade(@theme-bg-quote, 40%);
}
.gutter{
@ -378,12 +378,12 @@
/* Handle */
&::-webkit-scrollbar-thumb {
background: darken(@theme-bg-code, 5%);
background: darken(@theme-bg-code-block, 5%);
cursor: pointer;
border-radius: 3px;
.enable-trans();
&:hover {
background: darken(@theme-bg-code, 12%);
background: darken(@theme-bg-code-block, 12%);
}
}

6
source/less/_base.less
Unescape View File

@ -306,9 +306,9 @@ li {
&:active {
border-radius: 8px;
border-left: 8px solid @theme-bg-quote;
border-right: 1px solid fade(@theme-bg-quote, 30%);
border-top: 1px solid fade(@theme-bg-quote, 30%);
border-bottom: 1px solid fade(@theme-bg-quote, 30%);
border-right: 1px solid fade(@theme-bg-quote, 40%);
border-top: 1px solid fade(@theme-bg-quote, 40%);
border-bottom: 1px solid fade(@theme-bg-quote, 40%);
}
}

37
source/less/_defines.less
Unescape View File

@ -55,44 +55,51 @@
@mac-minimize: #FFBD2B;
@mac-close: #FE5F58;
@xiaowenwen-green: #5CC281;
@ax-light-pink: #E7BED0;
@ax-light-red: #FF8485;
@ax-red: #F05153;
@ax-red: #F24E32;
@ax-blue: #52A1F8;
// 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 定义颜色
@theme-base-main: #EEE;
@theme-base-tint: @ax-red;
// 网页背景
@theme-bg-main: #EFEFEF;
// 导航栏背景（主题色）
@theme-bg-header: #fff;
// 导航栏背景
@theme-bg-nav-header: #FFF;
// 卡片标题背景
@theme-bg-card-header: #E3E3E3;
// 按钮背景
@theme-bg-button: @theme-bg-card-header;
// 卡片背景
@theme-bg-card: #FFF;
// 代码的背景色
@theme-bg-code: @theme-base-tint;
// 代码块的背景色
@theme-bg-code: #F5F5F5;
@theme-bg-code-block: #F5F5F5;
// 引用的颜色 和 分类、归档的 hover 时颜色
@theme-bg-quote: @theme-bg-header;
@theme-bg-quote: @ax-light-red;
@theme-bg-quote: @theme-base-tint;
// 标题文字颜色（h1/h2）
@theme-text-header: darken(@theme-bg-header, 0%);
@theme-text-header: @ax-light-red;
@theme-text-header: @theme-base-tint;
// 链接颜色
@theme-text-link: @ax-blue;
// 链接高亮颜色
@theme-text-highlight: @ax-light-red;
@theme-text-highlight: @theme-base-tint;
// 在主题色中显示的文本（白或深灰）
@theme-text-in-header: white;
@theme-text-in-header: @dark;
// 正文文字颜色
@theme-text-main: @dark;
// @theme-bg-main: #444;
// @theme-bg-card: lighten(@theme-bg-main, 10%);
// @theme-bg-code: #555555;
@theme-text-in-header: @dark;
// @theme-text-main: @light;
// 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@box-shadow-card-raised: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12);

7
source/less/_footer.less
Unescape View File

@ -29,11 +29,14 @@
position: relative;
display: inline-block;
text-align: center;
font-size: 16px;
width: 32px;
height: 32px;
padding: 4px 2px;
margin: 4px;
border-radius: 100px;
background: darken(@theme-bg-main, 5%);
&:hover {
background: transparent;
background: darken(@theme-bg-main, 20%);
color: @theme-text-highlight;
}
}

34
source/less/_header.less
Unescape View File

@ -19,7 +19,7 @@
.nav--main,.nav-sub{
height: @header-height;
}
background: @theme-bg-header;
background: @theme-bg-nav-header;
// padding: 0 @gap;
&, a{
.txt-ellipsis;
@ -118,11 +118,11 @@
top:(@header-height - @search-height)/2;
}
&.z_search-open{
.logo,.switcher{
// opacity:0;
.logo{
opacity:0;
}
.m_search{
width: 100% - 1.7*@gap;
width: 100% - 1.5*@gap;
}
}
}
@ -156,29 +156,37 @@
line-height: @search-height - 10px;
margin: 0;
width: 100%;
color: @theme-text-in-header;
padding: 5px 10px 5px 40px;
color: fade(@theme-text-in-header, 60%);
padding: 5px 10px 5px 38px;
height: @search-height;
line-height: @search-height;
line-height: @search-height/2;
font-family: @base-font-family;
border: none;
border-radius: 3px;
background:fade(@theme-text-in-header,15%);
border-radius: 100px;
background: fade(@theme-text-in-header,15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
~ .icon{
color: fade(@theme-text-in-header, 60%);
}
.set-placeholder({color: fade(@theme-text-in-header, 60%)});
&:hover{
background: fade(white,35%);
// background: fade(white,35%);
border: 1px dashed @theme-text-in-header;
}
&:focus {
color:@black;
background: white;
// background: white;
border: 1px dashed @theme-text-in-header;
.set-placeholder({color: @black});
}
&:focus ~ .icon{
color: @black;
}
.set-placeholder({color: @theme-text-in-header});
}
}
@ -187,7 +195,7 @@
.header{
border-top-left-radius: @border-radius-width;
border-top-right-radius: @border-radius-width;
background-color: fade(@theme-bg-header,90%);
background-color: fade(@theme-bg-nav-header,90%);
color: @theme-text-in-header;
font-size: @base-font-size;
line-height: 1.8em;

12
source/less/_main.less
Unescape View File

@ -41,15 +41,15 @@
border: none;
padding-left: 2.4em;
padding-right: 2.4em;
background-color: fade(@theme-bg-header, 90%);
background-color: fade(@theme-bg-button, 90%);
color: @theme-text-in-header;
border-radius: @border-radius-width/2;
.enable-trans();
&:hover {
background: darken(@theme-bg-header, 10%);
background: darken(@theme-bg-button, 10%);
}
&:active {
background: lighten(@theme-bg-header, 20%);
background: lighten(@theme-bg-button, 20%);
}
}
blockquote{
@ -68,9 +68,9 @@
border-left: 8px solid @theme-bg-quote;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-right: 1px solid fade(@theme-bg-quote, 30%);
border-top: 1px solid fade(@theme-bg-quote, 30%);
border-bottom: 1px solid fade(@theme-bg-quote, 30%);
border-right: 1px solid fade(@theme-bg-quote, 40%);
border-top: 1px solid fade(@theme-bg-quote, 40%);
border-bottom: 1px solid fade(@theme-bg-quote, 40%);
}
}
a, .vemoji-btn, .vpreview-btn{

2
source/less/_search.less
Unescape View File

@ -47,7 +47,7 @@
position: relative;
width: 100%;
height: @header-height;
background-color: @theme-bg-header;
background-color: @theme-bg-nav-header;
z-index: 3;
border-top-left-radius: @border-radius-width;
border-top-right-radius: @border-radius-width;

5
source/less/_toc.less
Unescape View File

@ -4,6 +4,9 @@
position: fixed;
top: @header-height + @gap;
display: none;
.content{
padding: @gap/2 0;
}
&.active{
display: block;
}
@ -26,7 +29,7 @@
}
}
a {
padding-left: 8px;
color: fade(@theme-text-main, 50%);

2
source/less/_tog.less
Unescape View File

@ -16,7 +16,7 @@
z-index:3;
&:extend(.z-depth-2);
padding: @gap;
border-left: 6px solid @theme-bg-header;
border-left: 6px solid @theme-bg-nav-header;
background: @theme-text-in-header;
a {
display: inline-block;

135
source/less/_widget.less
Unescape View File

@ -17,31 +17,29 @@
box-shadow: @box-shadow-card-normal;
}
.header{
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: sticky;
top: 0;
border-top-left-radius: @border-radius-width;
border-top-right-radius: @border-radius-width;
@media(max-width: @on-phone) {
border-radius: 0;
}
background-color: @theme-bg-header;
background-color: @theme-bg-card-header;
color: @theme-text-in-header;
font-size: @base-font-size;
line-height: 1.8em;
padding: 8px @gap;
padding: 8px @gap/2;
// letter-spacing: .08em;
}
.content{
text-align: justify;
overflow: auto;
padding: @gap/2 0;
padding: @gap/2;
max-height: ~"calc(100% - @{header-height} - 2.5 * @{gap})";
}
ul.entry > li > a{
padding: 0 @gap;
padding: 0 @gap/2;
line-height:@item-height;
height: @item-height;
font-size: @base-font-size;
@ -70,41 +68,100 @@
}
}
.m_widget.about{
.waves-effect,img{
width: 100%;
display: block;
border-radius: @border-radius-width;
.enable-trans();
h2{
text-align: center;
// color: @theme-text-header;
}
@media(max-width: @on-phone){
display:none;
.header{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
@media(max-width: @on-phone){
padding: @gap/2;
}
}
img{
width: @side-width;
height: @side-width;
@media(max-width: @on-phone){
width: 80px;
height: 80px;
border-radius: 100%;
}
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.content{
padding:0;
.desc{
position: relative;
padding: @gap;
.enable-trans(.15s);
line-height: 1.2em;
font-style: italic;
&:before{
content:'#';
position: absolute;
left:0;
top:0;
width:2px;
height:100%;
// margin-top: 0;
// padding: @gap/2 @gap;
font-weight: bold;
}
.social-wrapper{
display: flex;
justify-content: center;
padding-top: 0;
padding-bottom: @gap/2;
a {
color: fade(@theme-text-main, 70%);
.enable-trans();
&:hover {
color: @theme-text-highlight;
}
&:empty{
padding:0;
height: 0;
&.social {
position: relative;
display: inline-block;
text-align: center;
width: 32px;
height: 32px;
padding: 4px 2px;
margin: 4px;
border-radius: 100px;
background: darken(@theme-bg-card, 5%);
&:hover {
background: darken(@theme-bg-card, 20%);
color: @theme-text-highlight;
}
}
}
}
}
// .m_widget.avatar{
//
// .content{
// // padding:0;
// .desc{
// position: relative;
// padding: @gap;
// .enable-trans(.15s);
// line-height: 1.2em;
// font-style: italic;
// &:before{
// content:'#';
// position: absolute;
// left:0;
// top:0;
// width:2px;
// height:100%;
// }
// &:empty{
// padding:0;
// height: 0;
// }
// }
// }
// }
.m_widget.categories{
.content{
padding: @gap/2 0;
}
}
.m_widget.tagcloud{
.content{
text-align: justify;
padding: @gap/2 @gap;
// padding: @gap/2 @gap;
a{
display:inline-block;
.enable-trans(.1s);
@ -116,8 +173,18 @@
}
}
}
.m_widget.contacts{
.content{
padding: @gap/2 0;
}
}
.m_widget.music{
.content{
padding: @gap/2;
padding: @gap/2 2px;
}
}
.m_widget.links{
.content{
padding: @gap/2 0;
}
}

Write Preview
Loading…
Cancel
Save