diff --git a/_config.yml b/_config.yml index 3bd344a..0be0715 100755 --- a/_config.yml +++ b/_config.yml @@ -1,22 +1,25 @@ # >> 主题配置 --------------------------------------------------------------------- +# 字体 在这里选好你需要的字体：https://fonts.google.com，然后在_defines.less中修改font_family。 +google_fonts: 'Ubuntu|Ubuntu+Mono' + # 导航栏 nav_menu: - name: 主页 - slug: about - icon: fa-home - url: / + slug: + icon: fas fa-home + url: https://xaoxuu.com/ - name: 项目 - slug: projects - icon: fa-cube - url: https://xaoxuu.com/proj + slug: + icon: fas fa-flask + url: https://xaoxuu.com/projects/ - name: 博客 slug: home - icon: fa-rss + icon: fas fa-rss url: / - name: 归档 slug: archives - icon: fa-archive - url: /archives + icon: fas fa-archive + url: /archives/ # 右边的小窗口，不想显示哪一项的注释掉对应的即可 widgets: @@ -24,8 +27,8 @@ widgets: author: enable: true avatar: https://xaoxuu.com/assets/img/avatar.jpg # 头像，如果config中已经设置avatar了，这里可以不用写 - title: 某知名博主 # 博客名、头衔等等，居中显示 - motto: 某知名博主的座右铭啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。 # 格言座右铭等等 + title: # 博客名、头衔等等，居中显示 + motto: # 格言座右铭等等 social: true # 是否显示社交信息（内容同页脚的社交信息） # 显示文章分类 categories: true @@ -36,50 +39,23 @@ widgets: # 显示友链 links: - name: xaoxuu's blog + avatar: https://xaoxuu.com/assets/img/avatar.jpg url: https://blog.xaoxuu.com # 显示目录（在文章中设置toc:false可以隐藏单篇文章的目录） toc: true # 页脚社交信息 social: - - icon: fa-envelope + - icon: fas fa-envelope url: mailto:me@xaoxuu.com - - icon: fa-github + - icon: fab fa-github url: https://github.com/xaoxuu - - icon: fa-instagram + - icon: fab fa-instagram url: - - icon: fa-google-plus + - icon: fab fa-twitter url: - - icon: fa-twitter - url: - - icon: fa-music + - icon: fas fa-music url: https://music.163.com/#/user/home?id=63035382 - - icon: fa-rss - url: atom - - icon: fa-telegram - url: - - icon: fa-vimeo - url: - - icon: fa-gitlab - url: - - icon: fa-linkedin - url: - - icon: fa-snapchat - url: - - icon: fa-steam - url: - - icon: fa-spotify - url: - - icon: fa-tumblr - url: - - icon: fa-youtube - url: - - icon: fa-weibo - url: - - icon: fa-weixin - url: - - icon: fa-qq - url: # 推荐文章 diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs index eb04ef2..b428090 100755 --- a/layout/_partial/archive.ejs +++ b/layout/_partial/archive.ejs @@ -18,7 +18,7 @@

- + 还剩最后一步就成功了

@@ -43,7 +43,7 @@ <% if (page.prev != 0) { %>

<% } %> @@ -53,7 +53,7 @@ <% if (page.next != 0) { %> <% } %> diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs index 7098515..4670d21 100755 --- a/layout/_partial/article.ejs +++ b/layout/_partial/article.ejs @@ -1,16 +1,17 @@
-

- <% if(post.title){ %> - <%= post.title %> - <% } else if (post.date) { %> - <%= date(post.date, config.date_format) %> - <% } %> -

-
@@ -20,26 +21,31 @@ <%- post.content %> - <% if (post.tags && post.tags && post.tags.each) { %> -
- <% post.tags.each(function(item){ %> -  <%=item.name %> - <%})%> -
- <% } %>
- + + <% if (post.tags && post.tags.length && post.tags.each) { %> + <% + var items = []; + post.tags.each(function(item){ + items.push('' + item.name + ''); + }); + %> +
+ + <%- items.join(', ') %> +
+ <% } %>
<% if(post.prev || post.next){ %>
<% if(post.prev){ %> -
+
-
 上一篇
+
 上一篇

- <% if (post.prev.tags && post.prev.tags.length) { %> + <% if (post.prev.tags && post.prev.tags.length && post.prev.tags.each) { %> + <% + var items = []; + post.prev.tags.each(function(item){ + items.push('' + item.name + ''); + }); + %>
- <% post.prev.tags.each(function(item){ %> - <%=item.name %> - <%})%> + + <%- items.join(', ') %>
<% } %> @@ -62,7 +73,7 @@ <% if(post.next){ %>
@@ -103,7 +119,7 @@ <% if (post.comments) { %> <% if (config.disqus_shortname) { %> -

 Disqus评论

+

 Disqus评论

⚠️ 无法加载评论系统，请确保您的网络能够正常访问 Disqus 。 @@ -112,7 +128,7 @@ <% } %> <% if (config.livere_uid){ %> -

 LiveRe评论

+

 LiveRe评论

@@ -122,18 +138,13 @@ <% if (config.valine){ %> <% if (config.valine.enable && config.valine.appId && config.valine.appKey){ %> -

 Valine评论

+

 Valine评论

-
文明评论，请勿灌水。为了便于区分，请您在留言时至少填写一下 昵称 啊。
- 与主题相关的内容及评论测试请到 https://xaoxuu.com/wiki/material-x/ 留言， - <% if (config.about_url){ %> - 其它想要对作者说的话可以到 <%= config.about_url %> 留言。 - <% } %> - 留言时填写邮箱可以在被回复时收到邮件提醒，也可以显示Gravatar头像，网址填写个人主页或者博客的作用是别人点击你的昵称会跳转到你的博客，为你增加访问量。
+
文明评论，请勿灌水。为了便于区分和接收回复提醒，请您在留言时填写一下昵称和邮箱。
- +
diff --git a/layout/_partial/categories.ejs b/layout/_partial/categories.ejs index e8c31fa..d841558 100755 --- a/layout/_partial/categories.ejs +++ b/layout/_partial/categories.ejs @@ -2,10 +2,11 @@ <% var cats = []; post.categories.forEach(function(cat){ - cats.push('' + cat.name + ''); + cats.push('' + cat.name + ''); }); %>
- <%- cats.join(', ') %> + + <%- cats.join(' / ') %>
<% } %> diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs index 98910ba..aa1234e 100755 --- a/layout/_partial/footer.ejs +++ b/layout/_partial/footer.ejs @@ -3,7 +3,7 @@ @@ -11,7 +11,7 @@
本站使用 Material X 作为主题， - 总访问量为 次。 + 总访问量为 次。
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 827e9e1..a9fba3a 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -26,8 +26,13 @@ - - + <% if (config.google_fonts){ %> + + <% } else { %> + + <% } %> + + <%- css('style.css') %> <% } %> diff --git a/layout/_partial/side.ejs b/layout/_partial/side.ejs index 64a39f7..21c00c4 100755 --- a/layout/_partial/side.ejs +++ b/layout/_partial/side.ejs @@ -8,13 +8,13 @@ <% if (config.widgets.tagcloud){ %> <%- partial('../_widget/tagcloud') %> <% } %> + <% if (config.widgets.toc){ %> + <%- partial('../_widget/toc') %> + <% } %> <% if (config.widgets.musicid){ %> <%- partial('../_widget/music') %> <% } %> <% if (config.widgets.links){ %> <%- partial('../_widget/links') %> <% } %> - <% if (config.widgets.toc){ %> - <%- partial('../_widget/toc') %> - <% } %> <% } %> diff --git a/layout/_widget/author.ejs b/layout/_widget/author.ejs index 5cd2cb8..6c7b43a 100755 --- a/layout/_widget/author.ejs +++ b/layout/_widget/author.ejs @@ -2,7 +2,7 @@
<% if(config.widgets.author.avatar || config.avatar) { %>
- +
<%} %> <% if (config.widgets.author.title || config.widgets.author.motto){ %> @@ -11,10 +11,7 @@

<%= config.widgets.author.title %>

<% } %> <% if (config.widgets.author.motto){ %> -
- - <%= config.widgets.author.motto %> -
+

<%= config.widgets.author.motto %>

<% } %>
<% } %> @@ -22,7 +19,7 @@ diff --git a/layout/_widget/categories.ejs b/layout/_widget/categories.ejs index 34bd3df..1b11fe0 100755 --- a/layout/_widget/categories.ejs +++ b/layout/_widget/categories.ejs @@ -1,5 +1,7 @@
-
  分类
+
+
  分类
+
<% if (site.categories.length){ %>
    diff --git a/layout/_widget/links.ejs b/layout/_widget/links.ejs index a9a93dc..bc94ba6 100755 --- a/layout/_widget/links.ejs +++ b/layout/_widget/links.ejs @@ -1,24 +1,24 @@
    -
      友链
    +
    +
      友链
    + <% if(config.email) { %> + + <%} %> +
    diff --git a/layout/_widget/music.ejs b/layout/_widget/music.ejs index f46e1c1..730dd34 100755 --- a/layout/_widget/music.ejs +++ b/layout/_widget/music.ejs @@ -1,5 +1,8 @@
    -
      音乐
    +
    +
      音乐
    + +
    diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs index 98f52b9..b941c33 100755 --- a/layout/_widget/tagcloud.ejs +++ b/layout/_widget/tagcloud.ejs @@ -1,6 +1,8 @@ <% if (site.tags.length){ %>
    -
      标签
    +
    +
      标签
    +
    <%- tagcloud(site.tags, { min_font: 14, diff --git a/layout/_widget/toc.ejs b/layout/_widget/toc.ejs index 75d0c8c..f8d4b2e 100755 --- a/layout/_widget/toc.ejs +++ b/layout/_widget/toc.ejs @@ -1,6 +1,9 @@ <% if(page.content && page.toc!==false && toc(page.content).length > 0){ %>
    -
      目录
    +
    +
      目录
    +
    +
    <%- toc(page.content, {list_number: false}) %>
    diff --git a/source/js/app.js b/source/js/app.js index 7106e7e..bfa0416 100755 --- a/source/js/app.js +++ b/source/js/app.js @@ -9,6 +9,11 @@ var customSearch; const $elem = elem.href ? $(elem.getAttribute('href')) : $(elem); $('html, body').animate({ 'scrollTop': $elem.offset().top - correction }, 400); }; + document.onkeydown = function() { + if (event.keyCode == 9) { + return false; + } + } function setHeader() { if (!window.subData) return; diff --git a/source/js/search.js b/source/js/search.js index 72b1f60..5486a62 100755 --- a/source/js/search.js +++ b/source/js/search.js @@ -8,7 +8,7 @@ var SearchService = ""; */ SearchService = function(options) { var self = this; - + self.config = $.extend({ per_page: 10, selectors: { @@ -70,7 +70,7 @@ var SearchService = ""; self.dom.modal_ajax_content.removeClass('loaded'); self.startLoading(); }; - + self.afterQuery = function() { self.dom.modal_body.scrollTop(0); self.dom.modal_ajax_content.addClass('loaded'); @@ -109,19 +109,19 @@ var SearchService = ""; self.dom.modal_error.html(errMsg); self.dom.modal_error.show(); }; - + self.nextPage = function() { if (self.nav.next !== -1) { self.search(self.nav.next); } }; - + self.prevPage = function() { if (self.nav.prev !== -1) { self.search(self.nav.prev); } }; - + /** * Generate html for one result * @param url : (string) url @@ -134,12 +134,12 @@ var SearchService = ""; html += ""; html += "" +title+ ""; html += "" +digest+ ""; - html += ""; + html += ""; html += ""; html += ""; return html; }; - + /** * Close the modal, resume body scrolling * no param @@ -149,7 +149,7 @@ var SearchService = ""; self.dom.container.fadeOut(); self.dom.body.removeClass('modal-active'); }; - + /** * Searchform submit event handler * @param queryText : (string) the query text @@ -161,19 +161,19 @@ var SearchService = ""; self.search(1); } }; - + /** * Start loading bar animation * no param */ self.startLoading = function() { self.dom.modal_loading_bar.show(); - self.loadingTimer = setInterval(function() { + self.loadingTimer = setInterval(function() { self.percentLoaded = Math.min(self.percentLoaded+5,95); self.dom.modal_loading_bar.css('width', self.percentLoaded+'%'); }, 100); }; - + /** * Stop loading bar animation * no param @@ -212,7 +212,7 @@ var SearchService = ""; self.dom.btn_prev.off('click'); self.dom.container.remove(); }; - + /** * Load template and register event handlers * no param @@ -233,7 +233,7 @@ var SearchService = ""; self.init(); }; - var template = ''; + var template = ''; })(jQuery); var AlgoliaSearch; @@ -250,7 +250,7 @@ var AlgoliaSearch; var self = this; var endpoint = "https://" +self.config.appId+ "-dsn.algolia.net/1/indexes/" +self.config.indexName; self.addLogo('algolia'); - + /** * Generate result list html * @param data : (array) result items @@ -268,7 +268,7 @@ var AlgoliaSearch; }); return html; }; - + /** * Generate metadata after a successful query * @param data : (object) the raw search response data @@ -303,7 +303,7 @@ var AlgoliaSearch; self.dom.btn_prev.hide(); } }; - + /** * Send a GET request * @param queryText : (string) the query text @@ -319,7 +319,7 @@ var AlgoliaSearch; "x-algolia-api-key": self.config.apiKey }, function(data, status) { if (status === 'success' && data.hits && data.hits.length > 0) { - var results = self.buildResultList(data.hits); + var results = self.buildResultList(data.hits); self.dom.modal_results.html(results); } else { @@ -331,7 +331,7 @@ var AlgoliaSearch; } }); }; - + return self; }; @@ -351,7 +351,7 @@ var AzureSearch; var endpoint = "https://" +self.config.serviceName+ ".search.windows.net/indexes/" +self.config.indexName+ "/docs?api-version=2015-02-28"; self.nav.current = 1; self.addLogo('azure'); - + /** * Generate result list html * @param data : (array) result items @@ -369,7 +369,7 @@ var AzureSearch; }); return html; }; - + /** * Generate metadata after a successful query * @param data : (object) the raw response data @@ -405,7 +405,7 @@ var AzureSearch; self.dom.btn_prev.hide(); } }; - + /** * Send a GET request * @param queryText : (string) the query text @@ -476,7 +476,7 @@ var BaiduSearch; }); return html; }; - + /** * Generate metadata after a successful query * @param data : (object) the raw google custom search response data @@ -537,7 +537,7 @@ var BaiduSearch; }; self.loadScript(); - + return self; }; @@ -546,7 +546,7 @@ var GoogleCustomSearch = ""; (function($) { 'use strict'; - + /** * Search by Google Custom Search Engine JSON API * @param options : (object) @@ -571,7 +571,7 @@ var GoogleCustomSearch = ""; }); return html; }; - + /** * Generate metadata after a successful query * @param data : (object) the raw google custom search response data @@ -605,7 +605,7 @@ var GoogleCustomSearch = ""; self.dom.btn_prev.hide(); } }; - + /** * Send a GET request * @param queryText : (string) the query text @@ -621,8 +621,8 @@ var GoogleCustomSearch = ""; num: self.config.per_page }, function(data, status) { if (status === 'success' && data.items && data.items.length > 0) { - var results = self.buildResultList(data.items); - self.dom.modal_results.html(results); + var results = self.buildResultList(data.items); + self.dom.modal_results.html(results); } else { self.onQueryError(queryText, status); @@ -633,7 +633,7 @@ var GoogleCustomSearch = ""; } }); }; - + return self; }; })(jQuery); @@ -641,7 +641,7 @@ var HexoSearch; (function($) { 'use strict'; - + /** * Search by Hexo generator json content * @param options : (object) @@ -652,7 +652,7 @@ var HexoSearch; self.config.endpoint = ROOT + ((options||{}).endpoint || "content.json"); self.config.endpoint = self.config.endpoint.replace("//","/"); //make sure the url is correct self.cache = ""; - + /** * Search queryText in title and content of a post * Credit to: http://hahack.com/codes/local-search-engine-for-hexo/ @@ -705,7 +705,7 @@ var HexoSearch; } return foundMatch; }; - + /** * Generate result list html * @param data : (array) result items @@ -719,7 +719,7 @@ var HexoSearch; }); return html; }; - + /** * Generate metadata after a successful query * @param data : (object) the raw google custom search response data @@ -727,7 +727,7 @@ var HexoSearch; self.buildMetadata = function(data) { self.dom.modal_footer.hide(); }; - + /** * Send a GET request * @param queryText : (string) the query text @@ -743,16 +743,16 @@ var HexoSearch; start: startIndex, num: self.config.per_page }, function(data, status) { - if (status !== 'success' || - !data || - (!data.posts && !data.pages) || + if (status !== 'success' || + !data || + (!data.posts && !data.pages) || (data.posts.length < 1 && data.pages.length < 1) ) { self.onQueryError(queryText, status); } else { self.cache = data; - var results = ""; + var results = ""; results += self.buildResultList(data.pages, queryText); results += self.buildResultList(data.posts, queryText); self.dom.modal_results.html(results); @@ -764,7 +764,7 @@ var HexoSearch; }); } else { - var results = ""; + var results = ""; results += self.buildResultList(self.cache.pages, queryText); results += self.buildResultList(self.cache.posts, queryText); self.dom.modal_results.html(results); @@ -774,8 +774,8 @@ var HexoSearch; } } }; - + return self; }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/source/less/_article.less b/source/less/_article.less index 10078f9..b486ead 100755 --- a/source/less/_article.less +++ b/source/less/_article.less @@ -156,8 +156,8 @@ background: fade(@theme_bg_quote, 10%); margin: 1em 0; padding: @gap; - border-left: @border_radius solid @theme_bg_quote; - border-radius: @border_radius; + border-left: @border_radius_code_block solid @theme_bg_quote; + border-radius: @border_radius_code_block; .enable-trans(); footer { strong { @@ -184,10 +184,9 @@ margin: 0px 2px; vertical-align: center; border-radius: 2px; - border: 1px solid fade(@theme_bg_code, 30%); + border: 1px solid fade(@theme_bg_code, 50%); font-size: @fontsize_base * .8; - - background: fade(@theme_bg_code, 10%); + background: @theme_bg_code; @media(max-width: @on_phone){ font-size: @fontsize_base * .8 * .95; } @@ -210,10 +209,10 @@ border-radius: @border_radius/2; .enable-trans(); &:hover { - background: darken(@theme_bg_navbar, 10%); + background: darken(@theme_bg_quote, 10%); } &:active { - // background: darken(@theme_bg_navbar, 20%); + // background: darken(@theme_bg_quote, 20%); } } @@ -227,10 +226,12 @@ margin-top: @gap; background: darken(fade(@theme_bg_main, 50%), 5%); &.article-tags { - background: transparent; + // padding-top: 2*@gap; + // background: transparent; } word-spacing: @gap; a { + color: @theme_text_main; position: relative; display: inline-block; word-spacing: 0; @@ -239,7 +240,6 @@ // margin-left: @gap/2; // } .enable-trans(); - color: @color_grey; &:hover { color: @theme_text_highlight; background: transparent; @@ -300,6 +300,7 @@ } h6{ margin: 0; + word-spacing: normal; } .enable-trans(); // border: 1px solid transparent; @@ -309,8 +310,8 @@ .tags{ background: transparent; padding: 0; - margin-top: @gap/2; - margin-bottom: 0; + margin-top: @gap/2; + margin-bottom: 0; } &:first-child{ margin-left: 0; @@ -360,7 +361,7 @@ } .gutter{ width: 24px; - padding: 0 @gap/2; + padding: 0 12px; text-align: right; border-width: 0; margin-left: 0; @@ -410,7 +411,7 @@ content: "SWIFT"; } &.objc .code:before{ - content: "OBJC"; + content: "OBJECTIVE-C"; } &.c .code:before{ content: "C"; diff --git a/source/less/_defines.less b/source/less/_defines.less index af56d89..09dcc50 100755 --- a/source/less/_defines.less +++ b/source/less/_defines.less @@ -55,9 +55,10 @@ // start: 字体 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // 大部分文字字体 -@fontfamily_base: 'Ubuntu', Menlo, Monaco, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial, sans-serif; +@fontfamily_base: 'Ubuntu', "Source Sans Pro", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Menlo, Monaco, Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial, sans-serif; // 代码字体 -@fontfamily_code: Menlo, Monaco, @fontfamily_base; +// mac自带Menlo字体，windows用户需要在config中添加以下字段来加载在线字体：google_fonts: 'Ubuntu|Ubuntu+Mono' +@fontfamily_code: Menlo, 'Ubuntu Mono', Monaco, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Ubuntu', monospace; // LOGO字体 @fontfamily_logo: @fontfamily_base; // end: 字体 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @@ -128,7 +129,7 @@ // 0px: 极端，2px：硬朗，4px：常规，8px：圆润，16px：温柔 @border_radius: 8px; // 圆角半径，可以根据心情随时调整风格 @border_radius_line: 4px; // 线的宽度和滚动条的宽度 -@border_radius_code_block: 8px; // 代码块的圆角 +@border_radius_code_block: 8px; // 引用、代码块的圆角 // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @@ -145,9 +146,9 @@ // 卡片标题栏背景 @theme_bg_card_header: @theme_bg_navbar; // 代码的背景色 -@theme_bg_code: fade(@color_mac_minimize, 10%); +@theme_bg_code: fade(@color_ax_blue, 10%); // 代码块的背景色 -@theme_bg_code_block: fade(@color_mac_minimize, 10%); +@theme_bg_code_block: fade(@color_ax_blue, 10%); // 引用的颜色以及分类、归档的 hover 时颜色 @theme_bg_quote: @theme_base_tint; // 文字颜色 ---------------- diff --git a/source/less/_header.less b/source/less/_header.less index cb1bc34..166e8f8 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -15,10 +15,12 @@ .enable-trans(); } .wrapper.sub{ + .enable-trans(); transform: translateY(-@height_navbar); .logo{ // padding-left: 0; @media(max-width: @on_phone){ + .enable-trans(); padding-left: @gap; padding-right: 0; font-size: @fontsize_base; @@ -223,18 +225,17 @@ line-height: 1.8em; padding: 8px @gap+6px; } - width: @width_sidebar; position: fixed; - top: @height_navbar + @gap; + top: @height_navbar + 2*@gap; right: 0; - width: @width_sidebar; + width: ~"calc(100% - 2*@{gap})"; z-index:9999 + 1; line-height: 2 * @gap; background: white; border-right: 0; box-shadow: @boxshadow_card_raised; border-radius: @border_radius; - transform: translate3d(@width_sidebar, -0, 0); + transform: translate3d(~"calc(100% + 2*@{gap})", -0, 0); .enable-trans(); &:hover { box-shadow: @boxshadow_card_raised; diff --git a/source/less/_main.less b/source/less/_main.less index 28d922e..5cf4015 100755 --- a/source/less/_main.less +++ b/source/less/_main.less @@ -47,10 +47,10 @@ border-radius: @border_radius/2; .enable-trans(); &:hover { - background: darken(@theme_bg_navbar, 10%); + background: darken(@theme_bg_quote, 10%); } &:active { - // background: lighten(@theme_bg_navbar, 20%); + // background: lighten(@theme_bg_quote, 20%); } } blockquote{ @@ -93,7 +93,8 @@ } a{ &.vnick{ - color: @color_vue; + color: #ff9800; + font-weight: bold; &:hover { color: @theme_text_highlight; text-decoration: underline; @@ -209,10 +210,17 @@ box-shadow: @boxshadow_card_normal; } } + .tags a{ + color: fade(@theme_text_main, 70%); + } .meta { + color: fade(@theme_text_main, 70%); + margin-top: 2*@gap; margin-bottom: 0.5*@gap; + font-size: @fontsize_small * .95; &:first-child{ - margin-bottom: 2*@gap; + margin-top: 0; + margin-bottom: 1*@gap; } .title { left: 0; @@ -238,39 +246,60 @@ } } } - time, - .cats { + .tags{ display: inline-block; + background: transparent; + word-spacing: normal; + } + .time, + .cats, + .browse, + .tags { font-size: @fontsize_small * .95; + line-height: 24px; + color: fade(@theme_text_main, 70%); + display: inline-block; + background: fade(@theme_bg_quote, 10%); + margin: 0 4px 8px 0px; + padding: 2px 8px 2px 6px; + border-radius: 0.5*@border_radius_code_block; + border-left: 0.5*@border_radius_code_block solid @theme_bg_quote; + a{ + color: fade(@theme_text_main, 70%); + .enable-trans(); + &:hover { + color: @theme_text_highlight; + text-decoration: underline; + } + &:active { + color: darken(@theme_text_highlight, 25%); + } + } + .categories { + font-weight: normal; + color: fade(@theme_text_main, 70%); + // color: @theme_text_link; + } + .tag{ + color: fade(@theme_text_main, 70%); + } } .cats { - &:before { - display: inline-block; - margin: 0 5px; - @border-width: 8px; - content: ''; - border-top: @border-width/2 solid transparent; - border-bottom: @border-width/2 solid transparent; - border-left: @border-width solid @theme_text_link; - } a { font-weight: bold; - color: @theme_text_link; - .enable-trans(); - &:hover { - color: @theme_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@theme_text_highlight, 25%); - } + color: @theme_text_link; + .enable-trans(); + &:hover { + color: @theme_text_highlight; + text-decoration: underline; + } + &:active { + color: darken(@theme_text_highlight, 25%); + } } } - time { - color: lighten(@color_grey, 20%); - } } .full-width,.highlight{ margin-left: 0*@gap; diff --git a/source/less/_toc.less b/source/less/_toc.less index 394beef..d8090c9 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -1,25 +1,50 @@ .m_widget.toc-wrapper{ + z-index: 1; overflow: auto; border-radius: @border_radius; position: sticky; top: @height_navbar + 1*@gap; + // bottom: @gap; + // max-height: ~"calc(100% - 2 * @{gap} - @{height_navbar})"; + // max-height: 600px; .enable-trans(); + .header{ + position: sticky; + width: 100%; + top: 0; + } .content{ padding: @gap/2 0; + padding-top: 0; // 适合白色导航栏背景 + a { + border-left: 4px solid transparent; + &:hover{ + color: fade(@theme_text_main, 100%); + border-left: 4px solid @theme_bg_quote; + } + &:active{ + border-left: 8px solid @theme_bg_quote; + } + &.active{ + color: fade(@theme_text_main, 100%); + border-left: 4px solid @theme_bg_quote; + background: fade(@theme_bg_quote, 10%); + } + } } &.active{ position: fixed; box-shadow: @boxshadow_card_raised; + .header{ + .s-toc{ + display: none; + } + } } - .header{ - position: sticky; - width: 100%; - top: 0; - } @media(max-width: @on_phone){ position: fixed; - width: 100% - 0.5 * @gap; + width: ~"calc(100% - 2 * @{gap})"; top: @height_navbar + @gap; left: @gap; box-shadow: @boxshadow_card_raised; @@ -35,20 +60,6 @@ color: fade(@theme_text_main, 60%); font-size: @fontsize_small; display: inline-block; - border-left: 4px solid transparent; - &:hover{ - color: fade(@theme_text_main, 100%); - border-left: 4px solid @theme_bg_quote; - } - &:active{ - border-left: 8px solid @theme_bg_quote; - } - &.active{ - color: fade(@theme_text_main, 100%); - border-left: 4px solid @theme_bg_quote; - background: fade(@theme_bg_quote, 10%); - } - } ol{ .toc-item.toc-level-1 { diff --git a/source/less/_widget.less b/source/less/_widget.less index 44e5f9b..01bf816 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -1,4 +1,5 @@ .m_widget{ + z-index: 0; &:extend(.z-depth-main); background: @theme_bg_card; margin-top: @gap; @@ -27,6 +28,8 @@ width: @width_sidebar; max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})"; .header{ + display: flex; + justify-content: space-between; border-top-left-radius: @border_radius; border-top-right-radius: @border_radius; @media(max-width: @on_phone) { @@ -36,44 +39,51 @@ color: @theme_text_in_header; font-weight: bold; line-height: 1.5em; - // padding: 8px @gap; // 适合深色导航栏背景 - padding: 14px @gap 2px @gap; // 适合白色导航栏背景 - // letter-spacing: .08em; - + padding: 8px @gap; + padding-top: 14px; // 适合白色导航栏背景 + padding-bottom: 14px; // 适合白色导航栏背景 + .rightBtn{ + color: @theme_text_in_header; + &:hover { + color: darken(@theme_text_highlight, 25%); + } + } } .content{ text-align: justify; padding: @gap/2; - max-height: ~"calc(100% - @{height_navbar} - 2.5 * @{gap})"; + // padding-top: 0; // 适合白色导航栏背景 + max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})"; + ul.entry > li > a{ + padding: 0 @gap; + line-height:@height_cell; + height: @height_cell; + display: flex; + justify-content: space-between; + align-content: center; + border-left: 2px solid transparent; + .enable-trans(); + .name{ + flex:auto; + &:extend(.txt-ellipsis); + color: fade(@theme_text_main,70%); + } + .badge{ + flex:none; + font-size: @fontsize_small; + color: fade(@theme_text_main, 50%); + } + &:hover{ + border-left: 4px solid @theme_bg_quote; + background: fade(@theme_bg_quote, 10%); + } + &:active{ + border-left: 8px solid @theme_bg_quote; + } + } } - ul.entry > li > a{ - padding: 0 @gap; - line-height:@height_cell; - height: @height_cell; - display: flex; - justify-content: space-between; - align-content: center; - border-left: 2px solid transparent; - .enable-trans(); - .name{ - flex:auto; - &:extend(.txt-ellipsis); - color: fade(@theme_text_main,70%); - } - .badge{ - flex:none; - font-size: @fontsize_small; - color: fade(@theme_text_main, 50%); - } - &:hover{ - border-left: 4px solid @theme_bg_quote; - background: fade(@theme_bg_quote, 10%); - } - &:active{ - border-left: 8px solid @theme_bg_quote; - } - } + } .m_widget.author{ .enable-trans(); @@ -104,8 +114,14 @@ border-top-right-radius: @border_radius; } .content{ + p{ + font-size: @fontsize_base; + text-align: center; + } + text-align: center; font-weight: bold; padding-bottom: 0; + padding: @gap/2 @gap 0 @gap; @media(max-width: @on_phone){ padding: @gap/2 @gap; } @@ -141,6 +157,7 @@ .m_widget.categories{ .content{ padding: @gap/2 0; + padding-top: 0; // 适合白色导航栏背景 } } @@ -148,6 +165,7 @@ .content{ text-align: justify; padding: @gap/2 @gap; + padding-top: 0; // 适合白色导航栏背景 a{ display:inline-block; .enable-trans(.1s); @@ -162,15 +180,31 @@ .m_widget.contacts{ .content{ padding: @gap/2 0; + padding-top: 0; // 适合白色导航栏背景 } } .m_widget.music{ + .header{ + padding-bottom: @gap/4; // 适合白色导航栏背景 + } .content{ padding: @gap/2; + padding-top: 0; // 适合白色导航栏背景 } } .m_widget.links{ .content{ padding: @gap/2 0; + padding-top: 0; // 适合白色导航栏背景 + .name{ + img{ + display: inline; + border-radius: 100%; + vertical-align: middle; + height: 18px; + width: 18px; + margin-bottom: 4px; + } + } } }