From 7cc68beb039e0c5f7382fe34c842aeecede09c61 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Thu, 30 Aug 2018 20:24:14 +0800 Subject: [PATCH] fix toc & update theme --- README.md | 234 ++++++++++++++++++++-------------- _config.yml | 124 +++++++++++------- layout/_partial/archive.ejs | 2 +- layout/_partial/footer.ejs | 20 ++- layout/_partial/head.ejs | 5 - layout/_partial/header.ejs | 29 +++-- layout/_partial/scripts.ejs | 30 +++-- layout/_partial/side.ejs | 23 +++- layout/_widget/about.ejs | 33 ----- layout/_widget/author.ejs | 29 +++++ layout/_widget/categories.ejs | 20 +-- layout/_widget/contacts.ejs | 13 -- layout/_widget/links.ejs | 32 +++-- layout/_widget/music.ejs | 8 +- layout/_widget/tagcloud.ejs | 24 ++-- source/js/app.js | 11 +- source/less/_base.less | 5 +- source/less/_defines.less | 7 +- source/less/_footer.less | 9 +- source/less/_header.less | 4 + source/less/_toc.less | 6 +- source/less/_widget.less | 11 +- 22 files changed, 382 insertions(+), 297 deletions(-) delete mode 100755 layout/_widget/about.ejs create mode 100755 layout/_widget/author.ejs delete mode 100755 layout/_widget/contacts.ejs diff --git a/README.md b/README.md index 0a82326..8d68146 100755 --- a/README.md +++ b/README.md @@ -57,50 +57,36 @@ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autop ## 主题配置 -把 `themes/material-x/_config.yml` 中的这部分内容复制到博客主目录的 `_config.yml` 文件中： - -```yml -# >> copy_start 请把这一段复制到博客主目录的【_config.yml】中 ↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓ - -{中间这部分是要复制的内容} - -# >> copy_end 到这里为止，下面的就不要复制了。 ↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑ -... -``` - -复制到博客主目录的 `_config.yml` 文件之后根据自己的需要填写和修改。这样做的好处是：更新主题的时候你修改过的配置就不会被覆盖了。 +把 `themes/material-x/_config.yml` 中的**所有**内容复制到博客主目录的 `_config.yml` 文件中，然后根据自己的需要填写和修改。这样做的好处是：更新主题的时候你修改过的配置就不会被覆盖了。 > 以下这些配置如果没有特殊说明，都指的是博客主目录的 `_config.yml` 文件。 - - ### 导航栏 -你可以 `materialx:` 下面找到类似这一段，把它改为你需要的： +你可以找到类似这一段，把它改为你需要的： ```yaml -materialx: - # 导航栏 - nav_menu: - - name: 主页 - slug: about - fa: home - url: / - - name: 项目 - slug: projects - fa: cube - url: https://xaoxuu.com/proj - - name: 博客 - slug: home - fa: rss - url: / - - name: 归档 - slug: archives - fa: archive - url: /archives +# 导航栏 +nav_menu: + - name: 主页 + slug: about + icon: fa-home + url: / + - name: 项目 + slug: projects + icon: fa-cube + url: https://xaoxuu.com/proj + - name: 博客 + slug: home + icon: fa-rss + url: / + - name: 归档 + slug: archives + icon: fa-archive + url: /archives ``` -其中 `fa` 是 `font-awesome` 图标名，你要显示什么图标，去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。 +其中 icon 是 `font-awesome` 图标名，你要显示什么图标，去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。 @@ -108,27 +94,55 @@ materialx: 右边的小窗口，可以根据需要显示。 -#### 头像 +```yaml +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + # 博主信息，显示个人头像、格言、社交信息等 + author: + enable: true + avatar: # 头像，如果config中已经设置avatar了，这里可以不用写 + title: # 博客名、头衔等等，居中显示 + motto: 永远不要忘了自己是谁，因为这个世界就不会。 # 格言座右铭等等 + social: true # 是否显示社交信息 + # 显示文章分类 + categories: true + # 显示文章标签 + tagcloud: true + # 显示网易云歌单id + musicid: 746319661 + # 显示友链 + links: + - name: xaoxuu + url: https://xaoxuu.com + # 显示目录（在文章中设置toc:false可以隐藏单篇文章的目录） + toc: true +``` -如果你没有设置头像，将会显示默认头像。 -```yaml -avatar: "https://xaoxuu.com/assets/img/avatar.jpg" # 如果没有设置头像 url 将会显示默认头像。 -# 主题配置 -materialx: - widgets: - - avatar # 把这一项注释掉就不显示头像了 +#### 博主（头像/头衔/格言/社交信息） + +```yaml +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + # 博主信息，显示个人头像、格言、社交信息等 + author: + enable: true + avatar: # 头像，如果config中已经设置avatar了，这里可以不用写 + title: # 博客名、头衔等等，居中显示 + motto: 永远不要忘了自己是谁，因为这个世界就不会。 # 格言座右铭等等 + social: true # 是否显示社交信息（内容同页脚的社交信息） ``` #### 分类 ```yaml -# 主题配置 -materialx: - widgets: - - categories # 把这一项注释掉就不显示了 +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + ... + # 显示文章分类 + categories: true ``` @@ -136,10 +150,11 @@ materialx: #### 标签 ```yaml -# 主题配置 -materialx: - widgets: - - tagcloud # 把这一项注释掉就不显示了 +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + ... + # 显示文章标签 + tagcloud: true ``` @@ -147,46 +162,37 @@ materialx: #### 网易云音乐歌单 ```yaml -# 主题配置 -materialx: - widgets: - - music # 把这一项注释掉就不显示了 - # 网易云音乐歌单id - widgets_musicid: 746319661 +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + ... + # 显示网易云歌单id + musicid: 746319661 ``` -#### 联系信息 +#### 友链 ```yaml -# 主题配置 -materialx: - widgets: - - contacts # 把这一项注释掉就不显示了 - # 右边的联系信息小窗口 - widgets_contacts: - - name: GitHub - desc: xaoxuu - url: https://github.com/xaoxuu - - name: 10086 - desc: 测试打电话 - url: tel:10086 +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + ... + # 显示友链 + links: + - name: xaoxuu + url: https://xaoxuu.com ``` -#### 友链 +#### 显示目录（TOC） ```yaml -# 主题配置 -materialx: - widgets: - - links # 把这一项注释掉就不显示了 - # 侧边栏的友链 - widgets_links: - - name: xaoxuu - url: https://xaoxuu.com +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + ... + # 显示目录（在文章中设置toc:false可以隐藏单篇文章的目录） + toc: true ``` @@ -202,7 +208,7 @@ recommended_posts: server: https://api.truelaurel.com # 后端推荐服务器地址 timeoutInMillis: 10000 # 服务时长，超过此时长，则使用离线推荐模式 excludePattern: [] - titleHtml:

推荐文章

#自定义标题 + titleHtml:

推荐文章

#自定义标题 internalLinks: 3 # 内部文章数量 externalLinks: 2 # 外部文章数量 fixedNumber: false @@ -257,21 +263,45 @@ valine: ### 页脚 ```yaml -# 主题配置 -materialx: - # 页脚 - footer_social: - - slug: envelope +# 页脚社交信息 +social: + - icon: fa-envelope url: mailto:me@xaoxuu.com - - slug: github + - icon: fa-github url: https://github.com/xaoxuu - - slug: instagram + - icon: fa-instagram + url: https://www.instagram.com/xaoxuu + - icon: fa-google-plus + url: + - icon: fa-twitter + url: https://twitter.com/xaoxuu + - icon: 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: - - slug: google-plus + - icon: fa-steam url: - - slug: twitter + - icon: fa-spotify url: - - slug: music + - icon: fa-tumblr + url: + - icon: fa-youtube + url: + - icon: fa-weibo + url: + - icon: fa-weixin + url: + - icon: fa-qq url: ``` @@ -308,18 +338,33 @@ mathjax: true ## 主题色和其他样式 -打开 `themes/material-x/source/less/_defines.less` 这个文件，修改下面这些内容为你需要的即可： +找到 `themes/material-x/source/less/_defines.less` 这个文件。 + +### 如果你比较懒，可以只修改整体的主题色： ```yaml // 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -// 定义颜色 +// 如果你比较懒，就只改这两行就可以了： @theme-base-main: #EEE; @theme-base-tint: @ax-red; +// 如果你想更深层次DIY，可以更改下面这些： +... +// 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< +``` + +### 如果你想更深层次DIY，可以修改下面这些： + +```yaml +// 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +// 如果你比较懒，就只改这两行就可以了： +... + +// 如果你想更深层次DIY，可以更改下面这些： // 网页背景 @theme-bg-main: #EFEFEF; // 导航栏背景 -@theme-bg-nav-header: #FFF; +@theme-bg-nav-header: #EFEFEF; // 卡片标题背景 @theme-bg-card-header: #E3E3E3; // 按钮背景 @@ -330,7 +375,7 @@ mathjax: true @theme-bg-code: @theme-base-tint; // 代码块的背景色 @theme-bg-code-block: #F5F5F5; -// 引用的颜色 和 分类、归档的 hover 时颜色 +// 引用的颜色以及分类、归档的 hover 时颜色 @theme-bg-quote: @theme-base-tint; // 标题文字颜色（h1/h2） @@ -343,6 +388,7 @@ mathjax: true @theme-text-in-header: @dark; // 正文文字颜色 @theme-text-main: @dark; + // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ``` diff --git a/_config.yml b/_config.yml index 75da10b..18c6079 100755 --- a/_config.yml +++ b/_config.yml @@ -1,56 +1,84 @@ -# >> copy_start 请把这一段复制到博客主目录的【_config.yml】中 ↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓ +# >> 主题配置 --------------------------------------------------------------------- +# 导航栏 +nav_menu: + - name: 主页 + slug: about + icon: fa-home + url: / + - name: 项目 + slug: projects + icon: fa-cube + url: https://xaoxuu.com/proj + - name: 博客 + slug: home + icon: fa-rss + url: / + - name: 归档 + slug: archives + icon: fa-archive + url: /archives -# 主题配置 -materialx: - # 导航栏 - nav_menu: - - name: 主页 - slug: about - fa: home - url: / - - name: 项目 - slug: projects - fa: cube - url: https://xaoxuu.com/proj - - name: 博客 - slug: home - fa: rss - url: / - - name: 归档 - slug: archives - fa: archive - url: /archives - # 右边的小窗口 - widgets: - - about # 显示个人头像、格言、社交信息等，如果注释掉这一行就不显示 - - categories # 显示分类 - - tagcloud # 显示tags - - music # 显示自己的网易云歌单 - - links # 显示友链 - - toc # 显示目录 - widgets_about: - title: - motto: 永远不要忘了自己是谁，因为这个世界就不会。 - social: true - # 网易云音乐歌单id - widgets_musicid: - # 侧边栏的友链 - widgets_links: +# 右边的小窗口，不想显示哪一项的注释掉对应的即可 +widgets: + # 博主信息，显示个人头像、格言、社交信息等 + author: + enable: true + avatar: # 头像，如果config中已经设置avatar了，这里可以不用写 + title: # 博客名、头衔等等，居中显示 + motto: 永远不要忘了自己是谁，因为这个世界就不会。 # 格言座右铭等等 + social: true # 是否显示社交信息（内容同页脚的社交信息） + # 显示文章分类 + categories: true + # 显示文章标签 + tagcloud: true + # 显示网易云歌单id + musicid: 746319661 + # 显示友链 + links: - name: xaoxuu url: https://xaoxuu.com - # 页脚 - footer_social: - - slug: envelope + # 显示目录（在文章中设置toc:false可以隐藏单篇文章的目录） + toc: true + +# 页脚社交信息 +social: + - icon: fa-envelope url: mailto:me@xaoxuu.com - - slug: github + - icon: fa-github url: https://github.com/xaoxuu - - slug: instagram + - icon: fa-instagram + url: + - icon: fa-google-plus + url: + - icon: fa-twitter + url: + - icon: 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: - - slug: google-plus + - icon: fa-snapchat url: - - slug: twitter + - icon: fa-steam url: - - slug: music + - icon: fa-spotify + url: + - icon: fa-tumblr + url: + - icon: fa-youtube + url: + - icon: fa-weibo + url: + - icon: fa-weixin + url: + - icon: fa-qq url: @@ -65,12 +93,9 @@ recommended_posts: externalLinks: 2 # 外部文章数量 fixedNumber: false -# >> copy_end 到这里为止，下面的就不要复制了。 ↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑ - - # Search -nav_search: +search: enable: true service: hexo # google @@ -90,3 +115,4 @@ nav_search: # Less less: compress: true +# >> 主题配置 --------------------------------------------------------------------- diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs index 8b6045f..51bc3a6 100755 --- a/layout/_partial/archive.ejs +++ b/layout/_partial/archive.ejs @@ -13,7 +13,7 @@ <% } %>
- <% if(!config.materialx){ %> + <% if(!config.nav_menu){ %>
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs index eb9684d..ee3c4fe 100755 --- a/layout/_partial/footer.ejs +++ b/layout/_partial/footer.ejs @@ -1,20 +1,18 @@
- + <% if (config.social) { %> + + <%}%>
本站使用 Material-X 作为主题， 总访问量为 次。
-
<% if (page.mathjax){ %> diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index e3039c0..b7ac70c 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -25,11 +25,6 @@ <%- favicon_tag(config.favicon) %> <%- feed_tag(config.feed.path, {title: config.title}) %> - <%- open_graph({ - twitter_id: theme.twitter, - google_plus: theme.google_plus, - fb_admins: theme.fb_admins, - fb_app_id: theme.fb_app_id}) %> diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index dbbd4d3..646d1d5 100755 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -8,19 +8,20 @@
    - <% (config.materialx && config.materialx.nav_menu && (config.materialx.nav_menu||[]) || (theme.materialx.nav_menu||[])).forEach(function(value){ %> -
  • - - - <%=value.name%> - -
    • - <%})%> + <% if (config.nav_menu) { %> + <% (config.nav_menu || []).forEach(function(value){ %> +
  • + + <%=value.name%> + +
    • + <%})%> + <% } %>
- <% if (theme.nav_search.enable === true) { %> + <% if (config.search.enable === true) { %>
@@ -29,7 +30,7 @@
<% } %>
    - <% if (theme.nav_search.enable === true) { %> + <% if (config.search.enable === true) { %>
    • <% } %>
    • @@ -52,12 +53,14 @@ diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 301bec5..1971cab 100755 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -6,20 +6,22 @@ <%- js('js/jquery.fitvids.js') %> - +<% if (config.search && config.search.enable) { %> + +<% } %> <%- js('js/search.js') %> <%- js('js/app.js') %> diff --git a/layout/_partial/side.ejs b/layout/_partial/side.ejs index 5814a70..64a39f7 100755 --- a/layout/_partial/side.ejs +++ b/layout/_partial/side.ejs @@ -1,3 +1,20 @@ -<% (config.materialx && config.materialx.widgets && (config.materialx.widgets||[]) || (theme.materialx.widgets||[])).forEach(function(name){ %> - <%- partial('../_widget/'+name) %> -<% }) %> +<% if (config.widgets){ %> + <% if (config.widgets.author){ %> + <%- partial('../_widget/author') %> + <% } %> + <% if (config.widgets.categories){ %> + <%- partial('../_widget/categories') %> + <% } %> + <% if (config.widgets.tagcloud){ %> + <%- partial('../_widget/tagcloud') %> + <% } %> + <% 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/about.ejs b/layout/_widget/about.ejs deleted file mode 100755 index 400ff7f..0000000 --- a/layout/_widget/about.ejs +++ /dev/null @@ -1,33 +0,0 @@ -
    -
    - <% if(config.avatar) { %> - - <% } else { %> - - <%} %> -
    -
    - <% if (config.materialx && (config.materialx.widgets_about.title)){ %> -

    <%= config.materialx.widgets_about.title %>

    - <% } %> -
    - - <% if (config.materialx && (config.materialx.widgets_about.motto)){ %> - <%= config.materialx.widgets_about.motto %> - <% } %> -
    -
    - <% if (config.materialx && config.materialx.widgets_about.social){ %> - - <% } %> - -
    diff --git a/layout/_widget/author.ejs b/layout/_widget/author.ejs new file mode 100755 index 0000000..21d2dd1 --- /dev/null +++ b/layout/_widget/author.ejs @@ -0,0 +1,29 @@ +<% if(config.widgets.author.enable != false) { %> +
    + <% if(config.widgets.author.avatar || config.avatar) { %> +
    + +
    + <%} %> +
    + <% if (config.widgets.author.title){ %> +

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

    + <% } %> + <% if (config.widgets.author.motto){ %> +
    + + <%= config.widgets.author.motto %> +
    + <% } %> +
    + <% if (config.widgets.author.social){ %> + + <% } %> +
    +<% } %> diff --git a/layout/_widget/categories.ejs b/layout/_widget/categories.ejs index 2ce2156..34bd3df 100755 --- a/layout/_widget/categories.ejs +++ b/layout/_widget/categories.ejs @@ -1,12 +1,12 @@
    -
      分类
    -
    - <% if (site.categories.length){ %> - - <% } %> -
    +
      分类
    +
    + <% if (site.categories.length){ %> + + <% } %> +
    diff --git a/layout/_widget/contacts.ejs b/layout/_widget/contacts.ejs deleted file mode 100755 index fedb5a7..0000000 --- a/layout/_widget/contacts.ejs +++ /dev/null @@ -1,13 +0,0 @@ -
    -
      联系
    -
    - -
    -
    diff --git a/layout/_widget/links.ejs b/layout/_widget/links.ejs index 26af35f..41ec9e6 100755 --- a/layout/_widget/links.ejs +++ b/layout/_widget/links.ejs @@ -1,17 +1,15 @@ -<% if (config.materialx && (config.materialx.widgets_links)){ %> -
    -
      友链
    -
    - -
    -
    -<% } %> +
    +
      友链
    +
    + +
    +
    diff --git a/layout/_widget/music.ejs b/layout/_widget/music.ejs index 143e24d..641e6cd 100755 --- a/layout/_widget/music.ejs +++ b/layout/_widget/music.ejs @@ -1,8 +1,6 @@ -<% if (config.materialx && config.materialx.widgets_musicid){ %> -
    +
      音乐
    - +
    -
    -<% } %> +
    diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs index 015df14..e9be950 100755 --- a/layout/_widget/tagcloud.ejs +++ b/layout/_widget/tagcloud.ejs @@ -1,14 +1,14 @@ <% if (site.tags.length){ %> -
    -
      标签
    -
    - <%- tagcloud(site.tags, { - min_font: 14, - max_font: 24, - color: true, - start_color: '#999', - end_color: '#555', - }) %> -
    -
    +
    +
      标签
    +
    + <%- tagcloud(site.tags, { + min_font: 14, + max_font: 24, + color: true, + start_color: '#999', + end_color: '#555', + }) %> +
    +
    <% } %> diff --git a/source/js/app.js b/source/js/app.js index e474a0a..e1823c0 100755 --- a/source/js/app.js +++ b/source/js/app.js @@ -132,13 +132,20 @@ var customSearch; function setTocToggle() { const $toc = $('.toc-wrapper'); if ($toc.length === 0) return; - $toc.click((e) => { e.stopPropagation(); $toc.addClass('active'); }); + $toc.click((e) => { + e.stopPropagation(); + $toc.addClass('active'); + }); $(document).click(() => $toc.removeClass('active')); $toc.on('click', 'a', (e) => { e.preventDefault(); e.stopPropagation(); - scrolltoElement(e.target.tagName.toLowerCase === 'a' ? e.target : e.target.parentElement); + if (e.target.tagName === 'A') { + scrolltoElement(e.target); + } else if (e.target.tagName === 'SPAN') { + scrolltoElement(e.target.parentElement); + } }); const liElements = Array.from($toc.find('li a')); diff --git a/source/less/_base.less b/source/less/_base.less index 0c43119..256f94f 100755 --- a/source/less/_base.less +++ b/source/less/_base.less @@ -317,8 +317,11 @@ li { ul.h-list { display: flex; align-items: center; + height: 100%; &>li { - flex: none; + // flex: none; + height: 100%; + justify-content: center; } } diff --git a/source/less/_defines.less b/source/less/_defines.less index e50005b..4c8a998 100755 --- a/source/less/_defines.less +++ b/source/less/_defines.less @@ -66,10 +66,11 @@ // 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -// 定义颜色 +// 如果你比较懒，就只改这两行就可以了： @theme-base-main: #EEE; @theme-base-tint: @ax-red; +// 如果你想更深层次DIY，可以更改下面这些： // 网页背景 @theme-bg-main: #EFEFEF; // 导航栏背景 @@ -84,7 +85,7 @@ @theme-bg-code: @theme-base-tint; // 代码块的背景色 @theme-bg-code-block: #F5F5F5; -// 引用的颜色 和 分类、归档的 hover 时颜色 +// 引用的颜色以及分类、归档的 hover 时颜色 @theme-bg-quote: @theme-base-tint; // 标题文字颜色（h1/h2） @@ -98,8 +99,6 @@ // 正文文字颜色 @theme-text-main: @dark; - - // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @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); diff --git a/source/less/_footer.less b/source/less/_footer.less index 76d09b4..eb7a7f8 100755 --- a/source/less/_footer.less +++ b/source/less/_footer.less @@ -17,7 +17,9 @@ text-decoration: underline; } .social-wrapper { - // padding-top: 20px; + display: flex; + justify-content: center; + flex-wrap: wrap; } a { color: fade(@theme-text-main, 70%); @@ -29,12 +31,13 @@ position: relative; display: inline-block; text-align: center; + display: flex; + justify-content: center; + align-items: center; width: 32px; height: 32px; - padding: 4px 2px; margin: 4px; border-radius: 100px; - background: darken(@theme-bg-main, 5%); &:hover { background: darken(@theme-bg-main, 20%); color: @theme-text-highlight; diff --git a/source/less/_header.less b/source/less/_header.less index fb93380..5ed6e45 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -23,6 +23,8 @@ // padding: 0 @gap; &, a{ .txt-ellipsis; + height: @header-height; + line-height: @header-height; color: @theme-text-in-header; } &:extend(.z-depth-nav); @@ -229,6 +231,8 @@ nav { padding: @gap/2 0px; .nav { + height: @item-height; + line-height: @item-height; position: relative; display: block; color: @black; diff --git a/source/less/_toc.less b/source/less/_toc.less index 12a4318..cabc5b4 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -15,7 +15,11 @@ // margin-right:0; // width: @side-width; } - + .header{ + position: sticky; + width: 100%; + top: 0; + } @media(max-width: @on-phone){ width: 100% - 0.5 * @gap; top: @header-height + @gap; diff --git a/source/less/_widget.less b/source/less/_widget.less index 5a1d6a4..8ccfd91 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -67,7 +67,7 @@ } } } -.m_widget.about{ +.m_widget.author{ .enable-trans(); h2{ text-align: center; @@ -104,6 +104,7 @@ .social-wrapper{ display: flex; justify-content: center; + flex-wrap: wrap; padding-top: 0; padding-bottom: @gap/2; a { @@ -113,15 +114,13 @@ color: @theme-text-highlight; } &.social { - position: relative; - display: inline-block; - text-align: center; + display: flex; + justify-content: center; + align-items: 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;