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 5 years ago
parent 70045a5266
commit dfe3e05243
17 changed files with 122 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      _config.yml
  2. 2
      layout/_cover/search.ejs
  3. 4
      layout/_partial/header.ejs
  4. 2
      layout/archive.ejs
  5. 2
      layout/category.ejs
  6. 2
      layout/index.ejs
  7. 2
      layout/links.ejs
  8. 2
      layout/list.ejs
  9. 3
      layout/page.ejs
  10. 3
      layout/post.ejs
  11. 1
      source/less/_article.less
  12. 56
      source/less/_base.less
  13. 96
      source/less/_header.less
  14. 11
      source/less/_layout.less
  15. 11
      source/less/_main.less
  16. 7
      source/less/_side.less
  17. 6
      source/less/_toc.less

12
_config.yml
Unescape View File

@ -104,6 +104,10 @@ menu_mobile:
icon: fas fa-link icon: fas fa-link
url: friends/ url: friends/
rel: nofollow rel: nofollow
- name: 主题文档
icon: fas fa-book
url: wiki/material-x/
rel: nofollow
- name: 关于小站 - name: 关于小站
icon: fas fa-info-circle icon: fas fa-info-circle
url: about/ url: about/
@ -137,10 +141,6 @@ sidebar:
- name: 开源项目 - name: 开源项目
icon: fas fa-code-branch icon: fas fa-code-branch
url: projects/ url: projects/
- name: Wiki文档
icon: fas fa-book
url: wiki/
rel: nofollow
- name: 歌单分享 - name: 歌单分享
icon: fas fa-compact-disc icon: fas fa-compact-disc
url: music/ url: music/
@ -149,6 +149,10 @@ sidebar:
icon: fas fa-link icon: fas fa-link
url: friends/ url: friends/
rel: nofollow rel: nofollow
- name: 主题文档
icon: fas fa-book
url: wiki/material-x/
rel: nofollow
- name: 关于小站 - name: 关于小站
icon: fas fa-info-circle icon: fas fa-info-circle
url: about/ url: about/

2
layout/_cover/search.ejs
Unescape View File

@ -8,7 +8,7 @@
<div class="m_search"> <div class="m_search">
<form name="searchform" class="form u-search-form"> <form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- theme.cover.search_placeholder %>" /> <input type="text" class="input u-search-input" placeholder="<%- theme.cover.search_placeholder %>" />
<span class="icon"><i class="fas fa-search fa-fw"></i></span> <i class="icon fas fa-search fa-fw"></i>
</form> </form>
</div> </div>
<% } %> <% } %>

4
layout/_partial/header.ejs
Unescape View File

@ -1,4 +1,4 @@
<header class="l_header <%= theme.style %>"> <header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%= theme.style %>">
<div id="loading-bar-wrapper"> <div id="loading-bar-wrapper">
<div id="loading-bar" class="<%= theme.style %>"></div> <div id="loading-bar" class="<%= theme.style %>"></div>
</div> </div>
@ -37,7 +37,7 @@
<div class="m_search"> <div class="m_search">
<form name="searchform" class="form u-search-form"> <form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" /> <input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
<span class="icon"><i class="fas fa-search fa-fw"></i></span> <i class="icon fas fa-search fa-fw"></i>
</form> </form>
</div> </div>
<% } %> <% } %>

2
layout/archive.ejs
Unescape View File

@ -1,4 +1,4 @@
<div class='l_main'> <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (page.year || page.month) { %> <% if (page.year || page.month) { %>
<%- partial('_partial/archive') %> <%- partial('_partial/archive') %>
<% } else { %> <% } else { %>

2
layout/category.ejs
Unescape View File

@ -1,4 +1,4 @@
<div class='l_main'> <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %> <% if (site.posts && site.posts.length > 0) { %>
<% if (page.index) { %> <% if (page.index) { %>
<section class="post-list"> <section class="post-list">

2
layout/index.ejs
Unescape View File

@ -1,4 +1,4 @@
<div class='l_main'> <div class='l_main<%- page.sidebar == false ? 'no_sidebar' : '' %>'>
<%- partial('_partial/archive') %> <%- partial('_partial/archive') %>
</div> </div>
<%- partial('_partial/side') %> <%- partial('_partial/side') %>

2
layout/links.ejs
Unescape View File

@ -1,4 +1,4 @@
<div class='l_main'> <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost"> <article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost">
<%- partial('_partial/meta',{post:page, position:'header'}) %> <%- partial('_partial/meta',{post:page, position:'header'}) %>
<section class="article typo l_friends"> <section class="article typo l_friends">

2
layout/list.ejs
Unescape View File

@ -1,4 +1,4 @@
<div class='l_main'> <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %> <% if (site.posts && site.posts.length > 0) { %>
<section class="post-list"> <section class="post-list">
<% site.posts.sort(page.sort ? page.sort : "-date").each(function(p){ %> <% site.posts.sort(page.sort ? page.sort : "-date").each(function(p){ %>

3
layout/page.ejs
Unescape View File

@ -1,5 +1,4 @@
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<div class='l_main'>
<%- partial('_partial/article', {post: page, index: false}) %> <%- partial('_partial/article', {post: page, index: false}) %>
</div> </div>
<%- partial('_partial/side') %> <%- partial('_partial/side') %>

3
layout/post.ejs
Unescape View File

@ -1,5 +1,4 @@
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<div class='l_main'>
<%- partial('_partial/article', {post: page, index: false}) %> <%- partial('_partial/article', {post: page, index: false}) %>
</div> </div>
<%- partial('_partial/side') %> <%- partial('_partial/side') %>

1
source/less/_article.less
Unescape View File

@ -67,6 +67,7 @@
justify-content: center; justify-content: center;
} }
&.pure{ &.pure{
margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

56
source/less/_base.less
Unescape View File

@ -79,6 +79,8 @@ fancybox{
} }
} }
.m_search{ .m_search{
@iconW: 32px;
@iconMargin: 4px;
margin-top: 2vh; margin-top: 2vh;
position: relative; position: relative;
height: @height_navbar - @gap; height: @height_navbar - @gap;
@ -95,55 +97,49 @@ fancybox{
width: 100%; width: 100%;
} }
.icon,.input{ .icon,.input{
.enable-trans(.1s); .enable-trans(.3s);
} }
.icon { .icon {
position: absolute; position: absolute;
display:block; display:block;
height: @height_navbar - @gap; line-height: @searchbar_height_cover;
width: @height_navbar - @gap; height: @searchbar_height_cover;
line-height: @height_navbar - @gap; width: @iconW;
top: 0; top: 0;
left: @gap/2; left: @iconMargin+1px;
font-size: @fontsize_base; font-size: @fontsize_base;
color: fade(@color_text_main, 60%);
} }
.input { .input {
display:block; display: block;
color: @color_text_main;
background: lighten(@theme_cardbg, 10%);
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @fontsize_base*2.2; line-height: @fontsize_base;
margin: 0; height: @searchbar_height_cover;
width: 100%; width: 100%;
padding-left: @fontsize_base + @gap; color: @color_text_main;
padding-right: @gap; box-shadow: none;
padding-top: 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap;
}
font-family: @fontfamily_base;
border: none;
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: none; padding-left: @iconW + @iconMargin;
border: 1px dashed transparent; @media(max-width: @on_phone){
.enable-trans(); padding-left: @iconW + @iconMargin;
}
border-radius: @height_navbar; border-radius: @height_navbar;
~ .icon{ background: lighten(@theme_cardbg, 10%);
line-height: @fontsize_base*2.2+4px; border: 1px dashed transparent;
padding-left: 2px; .set-placeholder({
padding-top: 2px; padding-top: 2px;
color: fade(@color_text_main, 80%); color: fade(@color_text_main, 60%);
} });
.set-placeholder({color: fade(@color_text_main, 60%)});
&:hover{ &:hover{
border: 1px dashed @theme_main; ~.icon{
color: @theme_main;
}
} }
&:focus { &:focus {
~ .icon{ ~.icon{
color: @theme_main; color: @theme_main;
} }
color: @color_text_main;
border: 1px solid @theme_main; border: 1px solid @theme_main;
} }
} }

96
source/less/_header.less
Unescape View File

@ -1,8 +1,9 @@
.l_header { .l_header {
@iconW: 32px;
@iconMargin: 4px;
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
top: 0; top: 0;
left: 0;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
font-size: @fontsize_base; font-size: @fontsize_base;
@ -18,7 +19,12 @@
margin: auto; margin: auto;
.enable-trans(); .enable-trans();
} }
&.no_sidebar{
.wrapper{
max-width: @on_pad;
margin: auto;
}
}
.wrapper.sub{ .wrapper.sub{
.enable-trans(); .enable-trans();
transform: translateY(-@height_navbar); transform: translateY(-@height_navbar);
@ -123,7 +129,7 @@
margin: 2px; margin: 2px;
@height: @height_navbar - @gap; @height: @height_navbar - @gap;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
width: @height; margin: 0;
height: @height; height: @height;
} }
a{ a{
@ -138,7 +144,7 @@
background: fade(@theme_cardbg, 30%); background: fade(@theme_cardbg, 30%);
} }
@media(max-width: @on_phone){ @media(max-width: @on_phone){
width: @height; width: @iconW;
height: @height; height: @height;
} }
} }
@ -154,69 +160,62 @@
} }
.m_search { .m_search {
position: relative; position: relative;
height: @height_navbar - @gap; display: flex;
width: @width_sidebar; width: @width_sidebar;
@media(max-width: @on_laptop){ @media(max-width: @on_desktop){
width: @width_sidebar_m; width: @width_sidebar_m;
} }
line-height: @height_navbar - @gap;
margin-top: @gap/2;
margin-bottom: @gap/2;
vertical-align: middle;
.form { .form {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
height: 100%;
} }
.icon,.input{ .icon,.input{
.enable-trans(.1s); .enable-trans(.3s);
} }
.icon { .icon {
position: absolute; position: absolute;
display:block; display: block;
height: @height_navbar - @gap; line-height: @height_searchbar;
width: @height_navbar - @gap; height: @height_searchbar;
line-height: @height_navbar - @gap; width: @iconW;
top: 0; top: 0;
left: @gap/2; left: @iconMargin+1px;
font-size: @fontsize_base; font-size: @fontsize_base;
color: fade(@color_text_in_header, 60%);
} }
.input { .input {
display:block; display: block;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @height_navbar - @gap; line-height: @fontsize_base;
margin: 0; height: @height_searchbar;
width: 100%; width: 100%;
color: fade(@color_text_in_header, 60%); color: fade(@color_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px; box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
padding-left: @iconW + @iconMargin;
@media(max-width: @on_phone){ @media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px; padding-left: @iconW + @iconMargin;
} }
height: @height_navbar - @gap;
line-height: @height_navbar - @gap;
font-family: @fontfamily_base;
border: none;
border-radius: @border_radius_searchbar; border-radius: @border_radius_searchbar;
background: fade(@theme_cardbg, 15%); background: fade(@theme_cardbg, 15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent; border: 1px dashed transparent;
.enable-trans(); .set-placeholder({
~ .icon{ padding-top: 2px;
color: fade(@color_text_in_header, 60%); color: fade(@color_text_in_header, 60%);
} });
.set-placeholder({color: fade(@color_text_in_header, 60%)});
&:hover{ &:hover{
border: 1px dashed fade(@color_text_in_header, 60%); color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%);
} }
&:focus { &:focus {
~ .icon{ ~.icon{
color: @color_text_in_header; color: @color_text_in_header;
} }
color: @color_text_in_header; color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%); border: 1px solid @color_text_in_header;
// .set-placeholder({color: @black});
} }
} }
} }
@ -226,6 +225,12 @@
color: @theme_main; color: @theme_main;
} }
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景 box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
// box-shadow: none;
// background: transparent;
// .wrapper{
// background: @theme_cardbg;
// box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
// }
.menu{ .menu{
ul > li > a{ ul > li > a{
.enable-trans(); .enable-trans();
@ -254,23 +259,28 @@
} }
} }
.m_search { .m_search {
.icon{
color: fade(@color_text_main, 60%);
}
.input { .input {
color: @color_text_main; color: @color_text_main;
background: @theme_background; background: @theme_background;
~ .icon{ .set-placeholder({
color: fade(@color_text_main, 60%); color: fade(@color_text_main, 60%);
} });
.set-placeholder({color: fade(@color_text_main, 60%)});
&:hover{ &:hover{
border: 1px dashed fade(@theme_main, 60%); ~.icon{
color: fade(@theme_main, 80%);
}
border: 1px solid fade(@theme_main, 60%);
} }
&:focus { &:focus {
~ .icon{ ~.icon{
color: @theme_main; color: @theme_main;
} }
color: @color_text_main; color: @color_text_main;
background: fade(@theme_main, 15%); background: fade(@theme_main, 15%);
border: 1px solid fade(@theme_main, 60%); border: 1px solid @theme_main;
} }
} }
} }
@ -289,7 +299,7 @@
opacity:0; opacity:0;
} }
.m_search{ .m_search{
width: 100% - 1.5*@gap; width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})";
} }
} }
} }

11
source/less/_layout.less
Unescape View File

@ -1,5 +1,5 @@
// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@gap: 20px; @gap: 16px;
// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -9,7 +9,7 @@
@on_laptop: 1024px; // 1024 + 285 @on_laptop: 1024px; // 1024 + 285
@on_desktop: 1200px; @on_desktop: 1200px;
// container // container
@width_container: 1200px; @width_container: 1080px;
@on_modal_threshold: 680px; @on_modal_threshold: 680px;
// 侧边栏宽度 // 侧边栏宽度
@width_sidebar: 285px; @width_sidebar: 285px;
@ -17,6 +17,9 @@
// 搜索框的宽度，建议和侧边栏宽度保持一致 // 搜索框的宽度，建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar; @width_searchbar: @width_sidebar;
@width_searchbar_m: @width_sidebar_m; @width_searchbar_m: @width_sidebar_m;
// 搜索框的高度，建议不要超出导航栏的高度
@height_searchbar: 40px;
@searchbar_height_cover: 44px;
// 一个cell的高度 // 一个cell的高度
@height_cell: 36px; @height_cell: 36px;
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -24,7 +27,7 @@
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度 // 导航栏高度
@height_navbar: 54px; @height_navbar: 64px;
@fontsize_logo: @fontsize_base * 1.2; @fontsize_logo: @fontsize_base * 1.2;
@fontsize_header_switcher: 1.3em; @fontsize_header_switcher: 1.3em;
@fontsize_header: 1em; @fontsize_header: 1em;
@ -38,7 +41,7 @@
@border_radius_line: 4px; // 线的宽度和滚动条的宽度 @border_radius_line: 4px; // 线的宽度和滚动条的宽度
@border_radius_code_block: 4px; // 引用、代码块的圆角 @border_radius_code_block: 4px; // 引用、代码块的圆角
@border_radius_searchbar: 4px; // 搜索框的圆角半径，可以根据心情随时调整风格 @border_radius_searchbar: 8px; // 搜索框的圆角半径，可以根据心情随时调整风格
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

11
source/less/_main.less
Unescape View File

@ -1,12 +1,21 @@
.l_main { .l_main {
width: ~"calc(100% - 1 * @{width_sidebar})"; width: ~"calc(100% - 1 * @{width_sidebar})";
@media(max-width: @on_laptop) { @media(max-width: @on_desktop) {
width: ~"calc(100% - 1 * @{width_sidebar_m})"; width: ~"calc(100% - 1 * @{width_sidebar_m})";
} }
@media(max-width: @on_pad) { @media(max-width: @on_pad) {
width: 100%; width: 100%;
} }
padding-right: @gap; padding-right: @gap;
&.no_sidebar{
width: 100%;
padding-right: 0;
max-width: @on_pad;
margin: auto;
~.l_side{
display: none;
}
}
float: left; float: left;
.post-list { .post-list {
position: relative; position: relative;

7
source/less/_side.less
Unescape View File

@ -4,7 +4,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media(max-width: @on_laptop) { @media(max-width: @on_desktop) {
width: @width_sidebar_m; width: @width_sidebar_m;
} }
@media(max-width: @on_pad) { @media(max-width: @on_pad) {
@ -34,7 +34,7 @@
} }
width: @width_sidebar; width: @width_sidebar;
@media(max-width: @on_laptop) { @media(max-width: @on_desktop) {
width: @width_sidebar_m; width: @width_sidebar_m;
} }
@media(max-width: @on_pad) { @media(max-width: @on_pad) {
@ -138,7 +138,7 @@
height: @width_sidebar; height: @width_sidebar;
border-top-left-radius: @border_radius; border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius; border-top-right-radius: @border_radius;
@media(max-width: @on_laptop) { @media(max-width: @on_desktop) {
width: @width_sidebar_m; width: @width_sidebar_m;
height: @width_sidebar_m; height: @width_sidebar_m;
} }
@ -194,6 +194,7 @@
} }
@media(max-width: @on_pad){ @media(max-width: @on_pad){
justify-content: center; justify-content: center;
display: none;
} }
} }
} }

6
source/less/_toc.less
Unescape View File

@ -3,7 +3,7 @@
overflow: hidden; overflow: hidden;
border-radius: @border_radius; border-radius: @border_radius;
position: sticky; position: sticky;
top: @height_navbar + 1*@gap; top: @height_navbar;
.enable-trans(); .enable-trans();
header{ header{
position: sticky; position: sticky;
@ -43,10 +43,10 @@
} }
} }
.enable-trans(); .enable-trans();
@media(max-width: @on_phone){ @media(max-width: @on_pad){
position: fixed; position: fixed;
max-height: 1000px; max-height: 1000px;
// width: ~"calc(100% - 2 * @{gap})"; width: ~"calc(100% - 2 * @{gap})";
top: @height_navbar; top: @height_navbar;
box-shadow: @boxshadow_card_raised; box-shadow: @boxshadow_card_raised;
visibility: hidden; visibility: hidden;

Write Preview
Loading…
Cancel
Save