hexo-theme-stellar 1.18.1 → 1.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/_config.yml +17 -4
  2. package/layout/404.ejs +1 -1
  3. package/layout/_partial/cover/wiki_cover.ejs +1 -1
  4. package/layout/wiki.ejs +1 -1
  5. package/package.json +1 -1
  6. package/scripts/generators/search.js +12 -40
  7. package/scripts/tags/lib/tabs.js +2 -2
  8. package/source/css/_common/base.styl +2 -2
  9. package/source/css/_common/blockquote.styl +2 -2
  10. package/source/css/_common/button.styl +38 -2
  11. package/source/css/_common/highlight.styl +11 -10
  12. package/source/css/_custom.styl +17 -8
  13. package/source/css/_defines/func.styl +1 -1
  14. package/source/css/_defines/theme.styl +1 -3
  15. package/source/css/_layout/list.styl +0 -1
  16. package/source/css/_layout/md.styl +5 -3
  17. package/source/css/_layout/pages/archives.styl +1 -1
  18. package/source/css/_layout/pages/error.styl +0 -1
  19. package/source/css/_layout/partial/related.styl +1 -1
  20. package/source/css/_layout/sidebar/header.styl +1 -1
  21. package/source/css/_layout/sidebar/sidebar.styl +2 -1
  22. package/source/css/_layout/tag-plugins/checkbox.styl +3 -4
  23. package/source/css/_layout/tag-plugins/common.styl +5 -5
  24. package/source/css/_layout/tag-plugins/copy.styl +1 -1
  25. package/source/css/_layout/tag-plugins/folders.styl +11 -24
  26. package/source/css/_layout/tag-plugins/folding.styl +25 -19
  27. package/source/css/_layout/tag-plugins/grid.styl +4 -1
  28. package/source/css/_layout/tag-plugins/link.styl +1 -1
  29. package/source/css/_layout/tag-plugins/note.styl +10 -10
  30. package/source/css/_layout/tag-plugins/override.styl +13 -0
  31. package/source/css/_layout/tag-plugins/quot.styl +4 -2
  32. package/source/css/_layout/tag-plugins/tabs.styl +2 -2
  33. package/source/css/_layout/tag-plugins/timeline.styl +1 -8
  34. package/source/css/_layout/tag-plugins/toc.styl +1 -1
  35. package/source/css/_layout/widgets/search.styl +27 -18
  36. package/source/css/_layout/widgets/toc_wiki.styl +1 -1
  37. package/source/css/_plugins/swiper.styl +10 -3
  38. package/source/js/main.js +24 -2
  39. package/source/js/search/local-search.js +2 -5
package/_config.yml CHANGED
@@ -1,6 +1,6 @@
1
1
  ######## Stellar info ########
2
2
  stellar:
3
- version: '1.18.1'
3
+ version: '1.18.3'
4
4
  homepage: 'https://xaoxuu.com/wiki/stellar/'
5
5
  repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
6
6
  cdn_css: # Use cdn links instead of /css/main.css
@@ -79,7 +79,6 @@ search:
79
79
  field: all # post, page, all
80
80
  path: /search.json # 搜索文件存放位置
81
81
  content: true # 是否搜索内容
82
- codeblock: true # 是否搜索代码块(需要content: true)
83
82
 
84
83
 
85
84
  ######## Comments ########
@@ -197,9 +196,10 @@ footer:
197
196
 
198
197
  ######## Tag Plugins ########
199
198
  tag_plugins:
200
- # {% note text %}
199
+ # {% ablock %} / {% note %}
201
200
  note:
202
201
  default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
202
+ border: true # true / false
203
203
  # {% checkbox %}
204
204
  checkbox:
205
205
  interactive: false # enable interactive for user
@@ -319,12 +319,22 @@ plugins:
319
319
  style:
320
320
  darkmode: auto # auto / always / false
321
321
  smooth_scroll: true # true / false
322
- font-size: 16px
322
+ font-size:
323
+ root: 16px
324
+ body: .9375rem # 15px
325
+ code: 85% # 14px
326
+ codeblock: 0.8125rem # 13px
323
327
  font-family:
324
328
  logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
325
329
  body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
326
330
  code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
331
+ codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
327
332
  text-align: left
333
+ border-radius:
334
+ card: 12px
335
+ block: 12px
336
+ bar: 6px
337
+ image: 6px
328
338
  color:
329
339
  # 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可)
330
340
  background: 'hsl(212 16% 98%)' # 浅色背景颜色
@@ -346,6 +356,9 @@ style:
346
356
  loading:
347
357
  loading: 正在加载
348
358
  error: 加载失败,请稍后重试。
359
+ gradient: # https://webgradients.com/
360
+ start: 'linear-gradient(to right, #92fe9d 0%, #00c9ff 50%, #92fe9d 100%)'
361
+ search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
349
362
 
350
363
  default:
351
364
  avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg
package/layout/404.ejs CHANGED
@@ -16,6 +16,6 @@ page.robots = 'none';
16
16
  <%- __('page.error.why') %>
17
17
  </p>
18
18
  <br><br>
19
- <a class='button theme' id='back' href="<%- config.root %>"><%- __('page.error.action') %></a>
19
+ <a class='button' id='back' href="<%- config.root %>"><%- __('page.error.action') %></a>
20
20
  </article>
21
21
  <%- partial('_partial/plugins/comments/layout') %>
@@ -39,7 +39,7 @@ function layoutWikiCover() {
39
39
  el += '<div class="description">' + desc + '</div>';
40
40
  }
41
41
  el += '<div class="start-wrap">';
42
- el += '<a class="button theme start" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
42
+ el += '<a class="button start gradient" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
43
43
  el += '</div>';
44
44
  el += '</article>';
45
45
  el += '</div>';
package/layout/wiki.ejs CHANGED
@@ -30,7 +30,7 @@ function layoutTitle() {
30
30
  }
31
31
  %>
32
32
  <%- partial('_partial/main/navbar/breadcrumb') %>
33
- <article class='md-text content <%- page.layout %><%- scrollreveal() %>'>
33
+ <article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
34
34
  <%- layoutTitle() %>
35
35
  <%- page.content %>
36
36
  <%- partial('_partial/main/article/article_footer') %>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hexo-theme-stellar",
3
- "version": "1.18.1",
3
+ "version": "1.18.3",
4
4
  "description": "Elegant and powerful theme for Hexo.",
5
5
  "main": "package.json",
6
6
  "scripts": {
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * https://github.com/wzpan/hexo-generator-search
3
3
  */
4
+ const { stripHTML } = require('hexo-util')
4
5
 
5
6
  hexo.extend.generator.register('search_json_generator', function (locals) {
6
7
  if (this.theme.config.search.service != 'local_search') { return {} }
@@ -29,46 +30,17 @@ hexo.extend.generator.register('search_json_generator', function (locals) {
29
30
  if (post.path) {
30
31
  temp_post.path = root + post.path
31
32
  }
32
- if (cfg.content != false && post._content) {
33
- var content = post._content.trim()
34
- // 过滤掉标签和注释
35
- if (content.includes('{%')) {
36
- // 需要保留内容的的标签
37
- content = content.replace(/{%\s*mark\s*(.*?)\s*%}/g, '$1')
38
- content = content.replace(/{%\s*folding\s*(.*?)\s*%}/g, '$1')
39
- content = content.replace(/{%\s*copy\s*(.*?)\s*%}/g, '$1')
40
- content = content.replace(/{%\s*note\s*(.*?)\s*%}/g, '$1')
41
- content = content.replace(/{%\s*kbd\s*(.*?)\s*%}/g, '$1')
42
- content = content.replace(/{%\s*emp\s*(.*?)\s*%}/g, '$1')
43
- content = content.replace(/{%\s*wavy\s*(.*?)\s*%}/g, '$1')
44
- content = content.replace(/{%\s*sub\s*(.*?)\s*%}/g, '$1')
45
- content = content.replace(/{%\s*sup\s*(.*?)\s*%}/g, '$1')
46
- content = content.replace(/<!--\s*folder(.*?)\s*-->/g, '$1')
47
- content = content.replace(/<!--\s*tab(.*?)\s*-->/g, '$1')
48
- content = content.replace(/<!--\s*node(.*?)\s*-->/g, '$1')
49
- // 不保留内容的标签
50
- content = content.replace(/{%\s*(.*?)\s*%}/g, '')
51
- // 注释
52
- content = content.replace(/<!--\s*(.*?)\s*-->/g, '')
53
- // ## 标题
54
- content = content.replace(/[#]{2,} /g, '')
55
- // 部分HTML标签
56
- content = content.replace(/<iframe[\s|\S]+iframe>/g, '')
57
- content = content.replace(/<hr>/g, '')
58
- content = content.replace(/<br>/g, '')
59
- // 图片
60
- content = content.replace(/\!\[(.*?)\]\((.*?)\)/g, '')
61
- // 链接
62
- content = content.replace(/\[(.*?)\]\((.*?)\)/g, '$1')
63
- // 过滤代码块
64
- if (cfg.codeblock == false) {
65
- content = content.replace(/```([^`]+)```/g, '')
66
- }
67
- // 多个连续空格换成单个空格
68
- content = content.replace(/[\s]{2,} /g, ' ')
69
- // 特殊字符
70
- content = content.replace(/[\r|\n]+/g, '')
71
- }
33
+ if (cfg.content != false && post.content) {
34
+ var content = stripHTML(post.content).trim()
35
+ // 部分HTML标签
36
+ content = content.replace(/<iframe[\s|\S]+iframe>/g, '')
37
+ content = content.replace(/<hr>/g, '')
38
+ content = content.replace(/<br>/g, '')
39
+ // 换行符换成空格
40
+ content = content.replace(/\\n/g, ' ')
41
+ content = content.replace(/\n/g, ' ')
42
+ // 多个连续空格换成单个空格
43
+ content = content.replace(/[\s]{2,}/g, ' ')
72
44
  temp_post.content = content.trim()
73
45
  }
74
46
  if (post.tags && post.tags.length > 0) {
@@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
39
39
  const abbr = tabName + ' ' + ++tabId
40
40
  const href = abbr.toLowerCase().split(' ').join('-')
41
41
  const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
42
- tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>`
42
+ tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
43
43
  tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
44
44
  })
45
45
 
46
- tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
46
+ tabNav = `<div class="nav-tabs">${tabNav}</div>`
47
47
  tabContent = `<div class="tab-content">${tabContent}</div>`
48
48
 
49
49
  var el = ''
@@ -1,6 +1,6 @@
1
1
  pre
2
- font-family: $ff-code
3
- font-size: $fs-code
2
+ font-family: $ff-codeblock
3
+ font-size: $fs-codeblock
4
4
  tab-size: 4
5
5
  -moz-tab-size: 4
6
6
  -o-tab-size: 4
@@ -2,9 +2,9 @@ blockquote
2
2
  display: block
3
3
  margin-left: 0
4
4
  margin-right: 0
5
- padding: 0.5rem 0.75rem
5
+ padding: 0.25rem 0.75rem
6
6
  background: var(--block)
7
7
  $bd-left = 4px
8
8
  border-left: $bd-left solid var(--text-meta)
9
- border-radius: $bd-left $border-block $border-block $bd-left
9
+ border-radius: $bd-left $border-bar $border-bar $bd-left
10
10
  color: var(--text-p2)
@@ -9,14 +9,50 @@ a.button
9
9
  font-weight: 500
10
10
  line-height: 1
11
11
  padding: 0.75rem 2rem
12
- border-radius: 3px
13
- trans1: background
12
+ border-radius: $border-button
14
13
  font-size: $fs-15
14
+ user-select: none
15
15
  &.theme
16
16
  background: $color-theme
17
17
  color: var(--card)
18
18
  &:hover
19
19
  background: $color-hover
20
+ &.start
21
+ border-radius: 100px
22
+ background: var(--text-p1)
23
+ color: var(--card)
20
24
 
21
25
  a[onclick]:hover
22
26
  cursor: pointer
27
+
28
+ a.button.start.gradient
29
+ transition: 0.38s ease-out
30
+ position relative
31
+ z-index: 0
32
+ background: convert(hexo-config('style.gradient.start'))
33
+ background-size: 1000%
34
+ color: white
35
+ animation: glow 60s linear infinite
36
+ @keyframes glow {
37
+ from {
38
+ background-position: 0%
39
+ }
40
+ to {
41
+ background-position: 1000%
42
+ }
43
+ }
44
+ &:after
45
+ content: ''
46
+ position absolute
47
+ left: 0
48
+ right: 0
49
+ top: 0
50
+ bottom: 0
51
+ border-radius: 100px
52
+ background: inherit
53
+ z-index -1
54
+ filter: blur(36px)
55
+ transition: 0.38s ease-out
56
+ opacity 0
57
+ &:hover:after
58
+ opacity 1
@@ -4,7 +4,7 @@ code
4
4
  font-family: $ff-code
5
5
 
6
6
  p>code:not([class]),li>code:not([class])
7
- font-size: 85%
7
+ font-size: $fs-code
8
8
  background: var(--block)
9
9
  padding: .2em
10
10
  border-radius: 4px
@@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
16
16
  overflow: hidden
17
17
  background: var(--block)
18
18
  line-height: 1.5
19
- font-family: $ff-code
19
+ font-family: $ff-codeblock
20
20
  box-sizing: border-box
21
21
  @media screen and (min-width: $device-mobile)
22
22
  min-width: 180px
@@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
27
27
  display: block
28
28
  figcaption
29
29
  color: var(--text-p2)
30
- font-size: $fs-code
31
- padding: 4px 0.5rem
32
- position: sticky
33
- left: 0
34
- background: var(--block-hover)
35
- border-top-left-radius: "calc(%s - 1px)" % $border-block
36
- border-top-right-radius: "calc(%s - 1px)" % $border-block
30
+ font-size: $fs-codeblock
31
+ font-weight: 500
32
+ margin-left: 0.5rem
33
+ display: inline-block
37
34
  span
38
- margin-right: 4px
35
+ padding: 4px 0.5rem
36
+ display: block
37
+ border-bottom-left-radius: $border-bar
38
+ border-bottom-right-radius: $border-bar
39
+ background: var(--block-hover)
39
40
  >table
40
41
  overflow: auto
41
42
  display: block
@@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
20
20
  // font-style: normal
21
21
 
22
22
  $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
23
- $ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
23
+ $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
24
+ $ff-code = $ff-codeblock
24
25
  $ff-logo = $ff-body
25
26
 
26
27
  if hexo-config('style.font-family.body')
@@ -29,12 +30,15 @@ if hexo-config('style.font-family.body')
29
30
  if hexo-config('style.font-family.code')
30
31
  $ff-code = convert(hexo-config('style.font-family.code'))
31
32
 
33
+ if hexo-config('style.font-family.codeblock')
34
+ $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
35
+
32
36
  if hexo-config('style.font-family.logo')
33
37
  $ff-logo = convert(hexo-config('style.font-family.logo'))
34
38
 
35
39
 
36
40
  // font size
37
- $fs-root = convert(hexo-config('style.font-size'))
41
+ $fs-root = convert(hexo-config('style.font-size.root'))
38
42
  $fs-15 = .9375rem
39
43
  $fs-14 = .875rem
40
44
  $fs-13 = .8125rem
@@ -46,19 +50,24 @@ $fs-h3 = 1.375rem // 22px
46
50
  $fs-h4 = 1.125rem // 18px
47
51
  $fs-h5 = $fs-15
48
52
  $fs-h6 = $fs-12
49
- $fs-p = $fs-15
50
- $fs-code = $fs-13
53
+ $fs-p = convert(hexo-config('style.font-size.body'))
54
+ $fs-code = convert(hexo-config('style.font-size.code'))
55
+ $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
56
+
51
57
 
52
- $border-card = 12px
53
- $border-block = 6px
54
- $border-image = 6px
58
+ $border-card = convert(hexo-config('style.border-radius.card'))
59
+ $border-block = convert(hexo-config('style.border-radius.block'))
60
+ $border-bar = convert(hexo-config('style.border-radius.bar'))
61
+ $border-image = convert(hexo-config('style.border-radius.image'))
62
+ $border-button = 4px
55
63
 
56
64
  // 可以动态变化的属性
57
65
  :root
58
66
  --width-left: 288px
59
67
  --width-main: 720px
60
68
  --gap-l: 16px
61
- --gap-p: .75rem // gap for paragraph
69
+ --gap-p: 1rem // gap for paragraph
70
+ --gap-p-compact: 0.75rem
62
71
  // desktop 2k or larger
63
72
  @media screen and (min-width: $device-2k)
64
73
  --gap-l: 32px
@@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
83
83
  &::-webkit-scrollbar-thumb
84
84
  background: transparent
85
85
  cursor: pointer
86
- border-radius: $border-block
86
+ border-radius: $border-bar
87
87
  &:hover
88
88
  &::-webkit-scrollbar-thumb
89
89
  background: var(--text-meta)
@@ -38,7 +38,6 @@ set_text_light()
38
38
  --block: hsl($color-block-h, $color-block-s, 95)
39
39
  --block-border: hsl($color-block-h, $color-block-s, 90)
40
40
  --block-hover: hsl($color-block-h, $color-block-s, 92)
41
- --block-lighten: hsl($color-block-h, $color-block-s, 100)
42
41
  set_text_dark()
43
42
  --theme-bg2: $color-theme
44
43
  --theme-link: $color-link
@@ -46,11 +45,10 @@ set_text_light()
46
45
  set_darkmode()
47
46
  :root
48
47
  --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
49
- --card: hsl($color-block-h, $color-block-s * 1.5, 24)
48
+ --card: hsl($color-block-h, $color-block-s * 1.2, 24)
50
49
  --block: hsl($color-block-h, $color-block-s, 16)
51
50
  --block-border: hsl($color-block-h, $color-block-s, 24)
52
51
  --block-hover: hsl($color-block-h, $color-block-s, 20)
53
- --block-lighten: hsl($color-block-h, $color-block-s, 32)
54
52
  set_text_light()
55
53
  @media screen and (max-width: $device-mobile-max)
56
54
  --site-bg: black
@@ -55,7 +55,6 @@
55
55
 
56
56
  .post-list .post-card:hover
57
57
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
58
- transform: translateY(-1px)
59
58
  img
60
59
  transform: scale(1.02)
61
60
  filter: brightness(80%)
@@ -36,8 +36,6 @@ h1.article-title
36
36
  margin-top: 0
37
37
  h1:not(:first-child)
38
38
  margin-top: 2em
39
- h2:first-child
40
- margin-top: 0
41
39
  h2
42
40
  margin-bottom: 1rem
43
41
  h3,h4,h5,h6
@@ -62,9 +60,13 @@ h1.article-title
62
60
  p,ul,ol
63
61
  font-size: $fs-14
64
62
  line-height: 1.5
63
+ code
64
+ font-size: inherit
65
+ padding: 0
66
+ background: none
65
67
  p,blockquote,.tag-plugin,ul,ol,.highlight,table
66
68
  *
67
- --gap-p: .5rem
69
+ --gap-p: var(--gap-p-compact)
68
70
  p,ul,ol
69
71
  margin-top: 'calc(%s - 4px)' % var(--gap-p)
70
72
  margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
@@ -47,7 +47,7 @@
47
47
  &.child
48
48
  padding-left: 2rem
49
49
  padding: .5em 1rem
50
- border-radius: $border-block
50
+ border-radius: $border-bar
51
51
  color: var(--text-p2)
52
52
  align-items: center
53
53
  justify-content: space-between
@@ -17,7 +17,6 @@
17
17
  display: inline-block
18
18
  background: #FDB62F
19
19
  color: black
20
- border-radius: 4px
21
20
  border: 2px solid black
22
21
 
23
22
  @media screen and (max-width: $device-tablet)
@@ -14,7 +14,7 @@
14
14
 
15
15
  a.more
16
16
  padding: 0.25rem 0.5rem
17
- border-radius: $border-block
17
+ border-radius: $border-bar
18
18
  color: var(--text-p1)
19
19
 
20
20
  article.md-text.content+.related-wrap
@@ -28,7 +28,7 @@ nav.menu
28
28
  text-align: center
29
29
  &.active, &:hover
30
30
  color: var(--text-p1)
31
- background: var(--block-lighten)
31
+ background: var(--card)
32
32
  box-shadow: $boxshadow-button
33
33
 
34
34
  .l_left .menu a.nav-item
@@ -23,7 +23,8 @@
23
23
  margin-bottom: 6rem
24
24
 
25
25
 
26
- .l_left .widgets .widget-wrapper.logo-wrap.wiki
26
+ .l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
27
+ display: flex
27
28
  margin-bottom: 1.5rem
28
29
  flex-direction: column
29
30
  align-items: flex-start
@@ -1,8 +1,9 @@
1
- .md-text .checkbox
1
+ .md-text .tag-plugin.checkbox
2
2
  display: flex
3
+ align-items: center
3
4
  font-size: $fs-15
4
5
  line-height: 1.2
5
- --gap-p: .25rem
6
+ --gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
6
7
  input
7
8
  -webkit-appearance: none
8
9
  -moz-appearance: none
@@ -20,8 +21,6 @@
20
21
  margin-right: 8px
21
22
  if hexo-config('tag_plugins.checkbox.interactive') != true
22
23
  pointer-events: none
23
- span
24
- margin-top: 1px
25
24
  /* Checkbox */
26
25
  input[type=checkbox]
27
26
  &:before, &:after
@@ -16,8 +16,8 @@ set_dynamic_color($theme)
16
16
  --theme-bg1: hsl(hue($theme), 90, 90)
17
17
  --theme-bg2: hsl(hue($theme), 80, 95)
18
18
  --theme-border: hsl(hue($theme), 50, 80)
19
- --text-p0: hsl(hue($theme), 60, 16)
20
- --text-p1: hsl(hue($theme), 50, 24)
19
+ --text-p0: hsl(hue($theme), 55, 16)
20
+ --text-p1: hsl(hue($theme), 55, 20)
21
21
  --text-p2: hsl(hue($theme), 90, 24)
22
22
 
23
23
  .tag-plugin
@@ -69,11 +69,11 @@ set_dynamic_color($theme)
69
69
  set_darkmode_tags()
70
70
  set_dynamic_color($theme)
71
71
  --theme: $theme
72
- --theme-bg1: hsl(hue($theme), 80, 20)
72
+ --theme-bg1: hsl(hue($theme), 50, 16)
73
73
  --theme-bg2: hsl(hue($theme), 16, 16)
74
74
  --theme-border: hsl(hue($theme), 50, 24)
75
- --text-p0: hsl(hue($theme), 80, 80)
76
- --text-p1: hsl(hue($theme), 64, 80)
75
+ --text-p0: hsl(hue($theme), 100, 85)
76
+ --text-p1: hsl(hue($theme), 50, 75)
77
77
  --text-p2: hsl(hue($theme), 80, 72)
78
78
  .tag-plugin.tag
79
79
  set_dynamic_color($color-theme)
@@ -3,7 +3,7 @@
3
3
  justify-content: space-between
4
4
  box-sizing: border-box
5
5
  background: var(--block)
6
- border-radius: $border-block
6
+ border-radius: $border-bar
7
7
  border: 1px solid var(--block-border)
8
8
  overflow: hidden
9
9
  width: 320px
@@ -1,35 +1,30 @@
1
1
  .tag-plugin.folders
2
- display: block
3
- margin: 1rem 0
4
- border-radius: $border-block
2
+ margin: var(--gap-p) 0
5
3
  font-size: $fs-14
6
- border: 1px solid var(--theme-border)
4
+ border-top: 1px solid var(--block-border)
7
5
  overflow: hidden
8
6
  .folder
9
- display: block
10
- font-size: $fs-14
11
- background: var(--block)
12
- &:last-child summary
13
- border-bottom: none
7
+ border-bottom: 1px solid var(--block-border)
8
+ padding: 1rem
14
9
  summary
15
- display: block
16
10
  cursor: pointer
17
11
  color: var(--text-p2)
18
12
  font-weight: 500
19
13
  position: relative
20
14
  line-height: 1.2
21
15
  outline: none
22
- padding: 0.75rem 1rem
23
- border-bottom: 1px solid var(--theme-border)
16
+ padding: 1rem
17
+ margin: -1rem
24
18
  &:last-child
25
19
  border-bottom: none
26
20
  >
21
+ span
22
+ margin-left: 0.25em
27
23
  p,h1,h2,h3,h4,h5,h6
28
24
  display: inline
29
25
  border-bottom: none !important
30
26
  &:hover
31
27
  color: var(--text-p0)
32
- background: var(--block-hover)
33
28
  &:after
34
29
  position: absolute
35
30
  content: '+'
@@ -40,23 +35,15 @@
40
35
 
41
36
 
42
37
  .tag-plugin.folders details[open]
43
- background: none
44
- &:last-child
45
- summary
46
- border-bottom: 1px solid var(--theme-border)
47
- .body
48
- border-bottom: none
49
38
  >summary
50
39
  color: var(--text-p1)
51
- background: var(--block-hover)
40
+ font-weight: 700
52
41
  &:after
53
42
  content: '-'
54
43
 
55
44
  >div.body
56
- padding: 1rem
57
- border-bottom: 1px solid var(--theme-border)
58
45
  font-size: $fs-15
59
46
  >:first-child
60
- margin-top: 0
47
+ margin-top: 1rem
61
48
  >:last-child
62
- margin-bottom: 0
49
+ margin-bottom: 0
@@ -3,20 +3,21 @@ details.folding
3
3
  padding: 1rem
4
4
  margin: 1rem 0
5
5
  border-radius: $border-block
6
- font-size: $fs-14
7
6
  background: var(--theme-bg2)
8
7
  border: 1px solid var(--theme-border)
9
8
  summary
10
9
  cursor: pointer
11
- padding: .75rem 1rem
12
- margin: 0 - 1rem
13
- border-radius: $border-block
10
+ padding: 1rem
11
+ margin: -1rem
14
12
  color: var(--text-p2)
15
13
  font-weight: 500
14
+ font-size: $fs-14
16
15
  position: relative
17
- line-height: normal
16
+ line-height: 1.2
18
17
  outline: none
19
18
  >
19
+ span
20
+ margin-left: 0.25em
20
21
  p,h1,h2,h3,h4,h5,h6
21
22
  display: inline
22
23
  border-bottom: none !important
@@ -29,29 +30,22 @@ details.folding
29
30
  top: 50%
30
31
  transform: translateY(-50%)
31
32
  right: 1rem
33
+ line-height: 1
32
34
 
33
35
 
34
36
  details.folding[open]
35
37
  >summary
36
- border-bottom: 1px solid var(--theme-border)
37
- border-bottom-left-radius: 0
38
- border-bottom-right-radius: 0
39
38
  color: var(--text-p1)
40
- margin-bottom: 0
39
+ font-weight: 700
40
+ z-index 1
41
41
  &:after
42
42
  content: '-'
43
43
  >div.body
44
- display: flex;
45
- flex-direction: column;
46
- padding: 1rem
47
- margin: 0 - 1rem
48
- margin-top: 0
49
- background: var(--card)
50
- border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
51
- border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
52
- font-size: $fs-15
44
+ padding: 0 1rem 1rem
45
+ margin: 0 -1rem -1rem
46
+ color: var(--text-p1)
53
47
  >:first-child
54
- margin-top: 0
48
+ margin-top: 1rem
55
49
  >:last-child
56
50
  margin-bottom: 0
57
51
 
@@ -64,5 +58,17 @@ details.folding[child=codeblock]>div.body
64
58
  border-radius: 0
65
59
  background: transparent
66
60
  margin: 0
61
+ figcaption
62
+ display: none
67
63
  .code:before
68
64
  content: none
65
+
66
+ details.folding[child=iframe]
67
+ overflow: hidden
68
+ background: none
69
+ >summary
70
+ background: none
71
+ >div.body
72
+ padding: 0
73
+ background: none
74
+ overflow: hidden
@@ -17,7 +17,10 @@
17
17
  margin-top: -0.25em
18
18
  p:last-child
19
19
  margin-bottom: -0.25em
20
-
20
+
21
+ .md-text .tag-plugin.grid
22
+ margin-top: -0.5rem
23
+ margin-bottom: -0.5rem
21
24
 
22
25
  .tag-plugin.grid
23
26
  @media screen and (max-width: $device-tablet)
@@ -18,7 +18,7 @@
18
18
  @media screen and (max-width: $device-mobile-375)
19
19
  width: 100%
20
20
  box-shadow: $boxshadow-card
21
- border-radius: $border-block
21
+ border-radius: $border-bar
22
22
  trans2: box-shadow transform
23
23
  &:hover
24
24
  box-shadow: $boxshadow-card-float
@@ -1,26 +1,26 @@
1
1
  .md-text .tag-plugin.note
2
2
  position: relative
3
- margin-top: 1rem
4
- margin-bottom: 1rem
5
- padding: 0 1rem
3
+ padding: 0.25rem 1rem
6
4
  border-radius: $border-block
7
5
  background: var(--theme-bg2)
8
- border: 1px solid var(--theme-border)
6
+ overflow: hidden
7
+ if hexo-config('tag_plugins.note.border') == true
8
+ border: 1px solid var(--theme-border)
9
9
  color: var(--text-p1)
10
10
  >.title
11
11
  font-size: $fs-15
12
- line-height: 1.2
13
- margin-top: 1rem
12
+ line-height: 1.5
13
+ margin-top: var(--gap-p-compact)
14
14
  font-weight: 500
15
15
  color: var(--text-p0)
16
16
  >.body
17
17
  &,p
18
18
  font-size: $fs-14
19
19
  line-height: 1.5
20
- margin-top: .5rem
21
- margin-bottom: 1rem
20
+ margin-top: var(--gap-p-compact)
21
+ margin-bottom: var(--gap-p-compact)
22
22
  >.body:only-child
23
- margin: 1rem 0
23
+ margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
24
24
 
25
25
 
26
26
  .md-text .tag-plugin.note[color]
@@ -47,12 +47,12 @@
47
47
  margin-top: .5rem
48
48
 
49
49
  .md-text .tag-plugin.note[child=iframe]
50
- overflow: hidden
51
50
  padding: 0
52
51
  >.body
53
52
  margin: 0
54
53
  iframe
55
54
  margin: 0
56
55
 
56
+
57
57
  .md-text .tag-plugin .tag-plugin.note
58
58
  --gap-p: 1rem
@@ -0,0 +1,13 @@
1
+ .tag-plugin.note, .tag-plugin.folding
2
+ blockquote
3
+ border-top-left-radius: 0
4
+ border-bottom-left-radius: 0
5
+ background: none
6
+ padding-top: 0
7
+ padding-bottom: 0
8
+ table:not([class])
9
+ th
10
+ background: var(--block-hover)
11
+ td,th
12
+ border-color: var(--block-border)
13
+
@@ -17,10 +17,10 @@
17
17
  line-height: 1.2
18
18
 
19
19
  .md-text .tag-plugin.quot .content
20
- max-width 400px
20
+ max-width 500px
21
21
  position: relative
22
22
  // override
23
- .tag-plugin.quot
23
+ .md-text.content .tag-plugin.quot
24
24
  h1
25
25
  font-size: $fs-h1
26
26
  font-weight: 900
@@ -29,6 +29,8 @@
29
29
  padding: 20px 24px 12px
30
30
  h2,h3,h4,h5,h6
31
31
  font-size: $fs-h3
32
+ margin-top: 1em
33
+ margin-bottom: 0
32
34
  p
33
35
  font-size: $fs-h4
34
36
  color: var(--text-p0)
@@ -16,7 +16,7 @@
16
16
  align-self: flex-end
17
17
 
18
18
  .tag-plugin.tabs
19
- ul.nav-tabs
19
+ .nav-tabs
20
20
  display: flex
21
21
  align-self: center
22
22
  overflow: scroll visible
@@ -36,7 +36,7 @@
36
36
  bottom: 0
37
37
  left: 0
38
38
  border-radius: 2px
39
- li.tab
39
+ .tab
40
40
  list-style-type: none
41
41
  a
42
42
  display: block
@@ -1,6 +1,3 @@
1
- .md-text .tag-plugin.folding .body:has(.timeline)
2
- background: var(--site-bg)
3
-
4
1
  .md-text .tag-plugin.timeline
5
2
  position: relative
6
3
  margin-top: 0
@@ -99,15 +96,11 @@
99
96
 
100
97
  .tag-plugin.timeline .body
101
98
  background: var(--card)
102
- border-radius: 12px
99
+ border-radius: $border-card
103
100
  border-top-left-radius: 2px
104
101
  padding: 0.5rem 1rem
105
102
  margin-top: 4px
106
103
  box-shadow: $boxshadow-block
107
- trans2: transform box-shadow
108
- &:hover
109
- transform: translateY(-1px)
110
- box-shadow: $boxshadow-card-float
111
104
  p
112
105
  font-size: $fs-14
113
106
  img
@@ -1,7 +1,7 @@
1
1
  details.toc
2
2
  background: var(--block)
3
3
  border: 1px solid var(--block-border)
4
- border-radius: $border-block
4
+ border-radius: $border-bar
5
5
  overflow: hidden
6
6
  color: var(--text-p2)
7
7
  summary
@@ -10,23 +10,36 @@
10
10
  display: flex
11
11
  flex-direction: row
12
12
  align-items: center
13
+ transition: 0.38s ease-out
14
+ z-index: 0
15
+ &:after
16
+ content: ''
17
+ position absolute
18
+ left: 0
19
+ right: 0
20
+ bottom: 0
21
+ height: 2px
22
+ border-radius: 4px
23
+ background: convert(hexo-config('style.gradient.search'))
24
+ background-size: 200%
25
+ animation: glow 10s linear infinite
26
+ @keyframes glow {
27
+ from {
28
+ background-position: 0%
29
+ }
30
+ to {
31
+ background-position: 200%
32
+ }
33
+ }
13
34
  .search-input
14
35
  width: 100%
15
- padding: 0.5rem
36
+ padding: 0.5rem 0
16
37
  line-height: 1
17
38
  box-sizing: border-box
18
39
  font-family: $ff-body
19
- border-radius: $border-block
20
- background-color: var(--card)
21
40
  color: var(--text-p0)
22
- border: 1px solid var(--block-border)
23
- &:focus
24
- trans1 border-color
25
41
 
26
- &.noresult
27
- .search-input
28
- &:focus
29
- border: 1px solid $c-red
42
+ &.noresult
30
43
  .search-icon
31
44
  color: $c-red
32
45
 
@@ -38,7 +51,7 @@
38
51
  font-size: $fs-14
39
52
  padding: 2rem
40
53
  background: var(--block)
41
- border-radius: $border-block
54
+ border-radius: $border-bar
42
55
 
43
56
  #search-result
44
57
  ul.search-result-list
@@ -84,20 +97,16 @@
84
97
  top: 0
85
98
  background: var(--site-bg)
86
99
  .search-input
87
- margin-top: 1rem
88
- margin-bottom: -1rem
89
- padding-left: 1.75rem
100
+ padding-left: 1.5rem
90
101
  .search-icon
91
- margin-top: 1rem
92
- margin-bottom: -1rem
93
102
  position: absolute
94
- margin-left: 0.5rem
103
+ margin-left: 0.25rem
95
104
  left: 0
96
105
  pointer-events: none
97
106
  color: var(--text-p2)
98
107
 
99
108
  #search-result,.search-no-result
100
- margin-top: 2rem
109
+ margin-top: 1rem
101
110
 
102
111
  .widget-wrapper:not(:first-child)
103
112
  .search-wrapper
@@ -5,7 +5,7 @@
5
5
 
6
6
  // 其它分页链接
7
7
  .widget-wrapper.toc.multi .doc-tree
8
- border-radius: $border-block
8
+ border-radius: $border-bar
9
9
  background: var(--block)
10
10
  overflow: hidden
11
11
  border: 1px solid var(--block-border)
@@ -35,15 +35,22 @@ div.swiper-slide
35
35
  max-width: 75%
36
36
 
37
37
  .swiper-button-prev,.swiper-button-next
38
- padding: 1rem 0.5rem
38
+ padding: 1rem 0.25rem
39
39
  margin-top: -2rem !important
40
- border-radius: 4px
40
+ border-radius: 40px
41
41
  background: alpha(white, 0.25)
42
42
  trans1 background
43
- --swiper-theme-color: black !important
43
+ --swiper-theme-color: var(--text-p0) !important
44
44
  &:after
45
45
  font-size: 1.2rem !important
46
46
  font-weight: 700 !important
47
+ color: var(--swiper-theme-color)
47
48
  &:hover
48
49
  background: white !important
49
50
  --swiper-theme-color: $color-hover !important
51
+
52
+ .swiper-button-prev:after
53
+ transform: translateX(-1px)
54
+
55
+ .swiper-button-next:after
56
+ transform: translateX(1px)
package/source/js/main.js CHANGED
@@ -95,6 +95,13 @@ const init = {
95
95
  $("article.md-text :header").each(function (idx, node) {
96
96
  segs.push(node)
97
97
  });
98
+ // 定位到激活的目录树(不如pjax体验好)
99
+ // const widgets = document.querySelector('.widgets')
100
+ // const e1 = document.querySelector('.doc-tree-link.active')
101
+ // const offsetTop = e1.getBoundingClientRect().top - widgets.getBoundingClientRect().top - 100
102
+ // if (offsetTop > 0) {
103
+ // widgets.scrollBy({top: offsetTop, behavior: 'smooth'})
104
+ // }
98
105
  // 滚动
99
106
  $(document, window).scroll(function (e) {
100
107
  var scrollTop = $(this).scrollTop();
@@ -114,7 +121,19 @@ const init = {
114
121
  $("#data-toc a.toc-link").removeClass("active")
115
122
  var link = "#" + topSeg.attr("id")
116
123
  if (link != '#undefined') {
117
- $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
124
+ const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
125
+ if (highlightItem.length > 0) {
126
+ highlightItem.addClass("active")
127
+ const e0 = document.querySelector('.widgets')
128
+ const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
129
+ const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100
130
+ const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64
131
+ if (offsetTop < 0) {
132
+ e0.scrollBy(0, offsetTop)
133
+ } else if (offsetBottom > 0) {
134
+ e0.scrollBy(0, offsetBottom)
135
+ }
136
+ }
118
137
  } else {
119
138
  $('#data-toc a.toc-link:first').addClass("active")
120
139
  }
@@ -144,7 +163,7 @@ const init = {
144
163
  */
145
164
  registerTabsTag: function () {
146
165
  // Binding `nav-tabs` & `tab-content` by real time permalink changing.
147
- document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
166
+ document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
148
167
  element.addEventListener('click', event => {
149
168
  event.preventDefault();
150
169
  // Prevent selected tab to select again.
@@ -309,6 +328,9 @@ if (stellar.search.service) {
309
328
  stellar.jQuery(() => {
310
329
  stellar.loadScript('/js/search/local-search.js', { defer: true }).then(function () {
311
330
  var $inputArea = $("input#search-input");
331
+ if ($inputArea.length == 0) {
332
+ return;
333
+ }
312
334
  var $resultArea = document.querySelector("div#search-result");
313
335
  $inputArea.focus(function() {
314
336
  var path = stellar.search[stellar.search.service]?.path || '/search.json';
@@ -54,13 +54,10 @@ var searchFunc = function(path, filter, searchId, contentId) {
54
54
  }
55
55
  // perform local searching
56
56
  datas.forEach(function(data) {
57
- if (!data.title?.trim().length) { return }
58
57
  if (!data.content?.trim().length) { return }
59
58
  var matches = 0;
60
- if (filter && !data.path.includes(filter)) {
61
- return;
62
- }
63
- var dataTitle = data.title.trim();
59
+ if (filter && !data.path.includes(filter)) { return }
60
+ var dataTitle = data.title?.trim() || 'Untitled';
64
61
  var dataTitleLowerCase = dataTitle.toLowerCase();
65
62
  var dataContent = data.content;
66
63
  var dataContentLowerCase = dataContent.toLowerCase();