hexo-theme-stellar 1.30.2 → 1.30.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.
package/_config.yml CHANGED
@@ -1,6 +1,6 @@
1
1
  ######## Stellar info ########
2
2
  stellar:
3
- version: '1.30.2'
3
+ version: '1.30.3'
4
4
  homepage: 'https://xaoxuu.com/wiki/stellar/'
5
5
  repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
6
6
  main_css: /css/main.css
@@ -654,6 +654,12 @@ style:
654
654
  background-image: #'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/image/site-bg1@small.webp)' # 未完全适配,慎用
655
655
  blur-px: 100px
656
656
  blur-bg: var(--alpha75)
657
+ # 技术文章内页各级标题前面的符号
658
+ header_prefix:
659
+ h2: '⌘'
660
+ h3: '='
661
+ h4: '|'
662
+ h5: ':'
657
663
 
658
664
 
659
665
  default:
@@ -2,6 +2,8 @@
2
2
  function layoutDiv() {
3
3
  var el = '';
4
4
  el += '<div class="navbar top">';
5
+ el += '<div class="navbar-blur">';
6
+ el += '<div class="navbar-container">';
5
7
  el += '<nav class="post">';
6
8
  if (is_home()) {
7
9
  el += '<a class="active" href="' + url_for(config.index_generator.path) + '">' + __("btn.recent_publish") + '</a>';
@@ -60,6 +62,8 @@ function layoutDiv() {
60
62
 
61
63
  el += '</nav>';
62
64
  el += '</div>';
65
+ el += '</div>';
66
+ el += '</div>';
63
67
  return el;
64
68
  }
65
69
  %>
@@ -2,6 +2,8 @@
2
2
  function layoutDiv() {
3
3
  var el = '';
4
4
  el += '<div class="navbar top">';
5
+ el += '<div class="navbar-blur">';
6
+ el += '<div class="navbar-container">';
5
7
  el += '<nav class="wiki">';
6
8
  // 所有项目
7
9
  el += '<a';
@@ -40,6 +42,8 @@ function layoutDiv() {
40
42
 
41
43
  el += '</nav>';
42
44
  el += '</div>';
45
+ el += '</div>';
46
+ el += '</div>';
43
47
  return el;
44
48
  }
45
49
  %>
@@ -1,4 +1,4 @@
1
- <div class='float-panel blur'>
1
+ <div class='float-panel'>
2
2
  <button type='button' style='display:none' class='laptop-only rightbar-toggle mobile' onclick='sidebar.rightbar()'>
3
3
  <%- icon('default:rightbar') %>
4
4
  </button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hexo-theme-stellar",
3
- "version": "1.30.2",
3
+ "version": "1.30.3",
4
4
  "description": "Elegant and powerful theme for Hexo.",
5
5
  "main": "package.json",
6
6
  "scripts": {
@@ -6,8 +6,8 @@ blur-effect()
6
6
  background: var(--blur-bg)
7
7
  @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
8
8
  background: var(--blur-bg) !important
9
- backdrop-filter: saturate(200%) blur(var(--blur-px))
10
- -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
9
+ backdrop-filter: saturate(300%) blur(var(--blur-px))
10
+ -webkit-backdrop-filter: saturate(300%) blur(var(--blur-px))
11
11
  &:hover
12
12
  background: var(--card)
13
13
 
@@ -10,35 +10,32 @@
10
10
  .float-panel
11
11
  position: sticky
12
12
  grid-column-end: span 3
13
+ padding: 4px
14
+ --inset: 2rem
13
15
  right: 0
14
- bottom: 2rem
16
+ bottom: calc(var(--inset) * 2)
17
+ margin-left: auto
18
+ margin-right: var(--inset)
15
19
  float: right
16
20
  z-index: 10
17
21
  display: flex
22
+ justify-content: center
18
23
  flex-direction: column
19
- border-radius: $border-bar
20
- margin-left: auto
21
- margin-right: 1rem
24
+ border-radius: 64px
22
25
  @media screen and (min-width: $device-mobile-max)
23
- margin-right: 2rem
26
+ margin-right: 3rem
24
27
  overflow: hidden
25
- --blur-px: 16px
26
- --blur-bg: alpha(#fff, .4)
27
28
  trans1: all
28
- ondark()
29
- --blur-bg: alpha(#000, .4)
30
- :root[data-theme="dark"] &
31
- ondark()
32
- :root:not([data-theme]) &
33
- @media (prefers-color-scheme: dark)
34
- ondark()
29
+ newblur()
30
+
35
31
 
36
32
  // 侧边栏弹出按钮
37
33
  .float-panel button
38
34
  cursor: pointer
39
35
  color: var(--text)
40
36
  background: none
41
- padding: 8px
37
+ width: 40px
38
+ height: 40px
42
39
  line-height: 0
43
40
  font-size: 28px
44
41
  margin: 0
@@ -53,9 +50,6 @@
53
50
  .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
54
51
  box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
55
52
 
56
- .l_body[leftbar] .float-panel button.leftbar-toggle
57
- background: var(--alpha100)
58
-
59
53
  .l_body[leftbar] .float-panel button.leftbar-toggle
60
54
  color: $color-theme
61
55
  border-color: var(--block-border)
@@ -70,9 +64,6 @@
70
64
  .l_body .l_right:empty+.float-panel button.rightbar-toggle
71
65
  display: none !important
72
66
 
73
- .l_body[rightbar] .float-panel button.rightbar-toggle
74
- background: var(--alpha100)
75
-
76
67
  .l_body[rightbar] .float-panel button.rightbar-toggle
77
68
  color: $color-theme
78
69
  border-color: var(--block-border)
@@ -35,11 +35,13 @@
35
35
  .l_right
36
36
  top: 8px
37
37
  position: fixed
38
- max-height: calc(100% - 8px * 2)
39
38
  transform: translateX(320px)
40
39
  transition: transform .38s ease-out
41
40
  margin: 0
42
- right: 8px
41
+ --inset: 8px
42
+ right: var(--inset)
43
+ top: var(--inset)
44
+ max-height: 'calc(%s - 96px)' % (100vh)
43
45
  box-shadow: $boxshadow-card-float
44
46
  z-index: 10
45
47
  background: var(--site-bg)
@@ -66,7 +68,13 @@
66
68
  transform: translateX(-320px)
67
69
  transition: transform .38s ease-out
68
70
  margin: 0
69
- left: 8px
71
+ --inset: 8px
72
+ left: var(--inset)
73
+ top: var(--inset)
74
+ max-height: 'calc(%s - 96px)' % (100vh)
75
+ .leftbar-container
76
+ --inset: 8px
77
+ height: 'calc(%s - 96px)' % (100vh)
70
78
  box-shadow: $boxshadow-card-float
71
79
  z-index: 10
72
80
  .l_main
@@ -75,7 +83,7 @@
75
83
  .l_left
76
84
  transform: translateX(0px)
77
85
  .main-mask
78
- opacity 1
86
+ // opacity 1
79
87
  pointer-events: inherit
80
88
 
81
89
 
@@ -22,14 +22,14 @@
22
22
  font-weight: 500
23
23
  >a:first-child
24
24
  &:before
25
- content: ''
25
+ content: hexo-config('style.header_prefix.h2')
26
26
  h3
27
27
  >a:first-child:before
28
- content: '='
28
+ content: hexo-config('style.header_prefix.h3')
29
29
  h4
30
30
  >a:first-child:before
31
- content: '|'
31
+ content: hexo-config('style.header_prefix.h4')
32
32
  h5
33
33
  >a:first-child:before
34
- content: ':'
34
+ content: hexo-config('style.header_prefix.h5')
35
35
 
@@ -1,5 +1,5 @@
1
1
  .article-footer
2
- margin-top: 4rem
2
+ margin: 2rem 1rem 1rem
3
3
  padding: 1rem
4
4
  background: var(--block)
5
5
  border-radius: $border-card-l
@@ -42,7 +42,7 @@
42
42
 
43
43
  .article-footer .social-wrap
44
44
  grid-gap: 0.5rem 2rem
45
- margin: 0.75rem 0
45
+ margin: 1rem 0 0.5rem
46
46
  grid-template-columns: repeat(auto-fill, 20px);
47
47
  a.social
48
48
  background: none
@@ -1,76 +1,57 @@
1
1
  .navbar
2
- padding: 0 1rem
3
2
  z-index: 8
4
- top: 0
5
- background: var(--site-bg)
6
- if hexo-config('style.site') && hexo-config('style.site.background-image')
7
- position inherit
8
- background: none
9
- else
10
- position: sticky
11
- position: -webkit-sticky
12
- margin-bottom: 1px
13
- margin-top: -8px
14
- &:after
15
- content: ''
16
- height: 2px
17
- border-radius: 2px
18
- position: absolute
19
- bottom: 0
20
- left: 1rem
21
- right: 1rem
22
- background: var(--block-hover)
3
+ top: 8px
4
+ position: sticky
5
+ position: -webkit-sticky
23
6
 
24
- .navbar nav
25
- display: flex
7
+ .navbar-blur
8
+ margin: 0 1rem
9
+ border-radius: 64px
10
+ position: relative
11
+ newblur()
12
+
13
+ .navbar-container
14
+ max-width: 100%
15
+ margin: 1px
16
+ border-radius: 64px
26
17
  overflow: scroll visible
27
18
  scrollbar(0, 0)
19
+
20
+ .navbar nav
21
+ display: inline-flex
28
22
  font-size: $fs-14
23
+ z-index: 1
29
24
  >p
30
25
  margin: 0
31
26
  a
32
- padding: 2px 0.75rem
33
- if hexo-config('style.site') && hexo-config('style.site.background-image')
34
- margin: 10px 0.25rem 8px 0
35
- else
36
- margin: 10px 0.25rem 8px 0.25rem
27
+ padding: .25rem 0.75rem
28
+ margin: 0.25rem
37
29
  line-height: 2
38
- color: var(--text-p3)
39
- border-radius: $border-button
30
+ color: var(--text-p1)
31
+ border-radius: 32px
40
32
  font-weight: 500
41
33
  white-space: nowrap
42
34
  position: relative
43
35
  z-index: 1
44
- &:after
45
- height: 2px
46
- position: absolute
47
- bottom: -8px
48
- left: 0.75rem
49
- right: 0.75rem
50
- background: $color-theme
51
- border-radius: 2px
52
- pointer-events: none
36
+ trans1 all
53
37
  &:hover
54
- background: var(--block-hover)
38
+ background: var(--alpha100)
55
39
  &.active, &:hover
56
- color: var(--text-p1)
40
+ color: var(--text)
57
41
  &.active
58
- background: var(--card)
42
+ background: var(--alpha60)
43
+ @media (prefers-color-scheme: dark)
44
+ background: rgba(white, 0.25)
59
45
  box-shadow: $boxshadow-button
60
46
  cursor default
61
47
  pointer-events: none
48
+ backdrop-filter: saturate(300%)
62
49
  &.active:after
63
50
  content: ''
64
51
  a+a
65
52
  margin-left: 4px
66
53
 
67
- @media screen and (max-width: $device-mobile-max)
54
+ @media screen and (max-width: $device-mobile-iphone-max)
68
55
  .navbar.top
69
- margin-top: 0
70
- padding-left: 0
71
- padding-right: 0
72
- nav
73
- a:first-child
74
- margin-left: 1rem
75
- a:last-child
76
- margin-right: 1rem
56
+ top: 36px
57
+
@@ -1,6 +1,6 @@
1
1
  .l_left
2
2
  margin: 8px
3
- height: 'calc(%s - 16px)' % 100vh
3
+ max-height: 'calc(%s - 16px)' % 100vh
4
4
  border-radius: $border-card-l
5
5
  overflow: hidden
6
6
  overflow: clip
@@ -27,7 +27,7 @@
27
27
  else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
28
28
  background: convert(hexo-config('style.leftbar.background'))
29
29
  .leftbar-container
30
- height: 100%
30
+ height: 'calc(%s - 16px)' % 100vh
31
31
  display: flex
32
32
  flex-direction: column
33
33
  word-break: break-all
@@ -4,7 +4,7 @@
4
4
  padding: 0.75rem 0.5rem
5
5
  color: var(--text-p2)
6
6
  background: var(--card)
7
- border-radius: $border-card
7
+ border-radius: $border-card-s
8
8
  hoverable-card()
9
9
  >div+div
10
10
  margin-top: 0.5rem
@@ -55,7 +55,7 @@
55
55
  padding: 16px 0
56
56
  &:first-child
57
57
  top: 8px
58
- padding-top: 8px
58
+ padding-top: 1rem
59
59
  .widget-body .toc
60
60
  max-height: 70vh
61
61
  @media screen and (max-width: $device-laptop)
@@ -77,7 +77,7 @@
77
77
  @media screen and (max-width: $device-laptop)
78
78
  .widget-wrapper
79
79
  margin-top: var(--gap-margin)
80
- border-radius: $border-card
80
+ border-radius: $border-card-s
81
81
  // 大屏幕
82
82
  @media screen and (min-width: $device-laptop)
83
83
  .widget-wrapper.markdown .widget-body
@@ -1,6 +1,7 @@
1
1
  // 用来进行设备适配,请勿修改
2
2
  $device-mobile-375 = 375px
3
3
  $device-mobile-425 = 425px
4
+ $device-mobile-iphone-max = 450px
4
5
  $device-mobile = 500px
5
6
  $device-mobile-max = 667px
6
7
  $device-tablet = 768px
@@ -132,3 +132,30 @@ hoverable-card()
132
132
  onlight()
133
133
  @media (prefers-color-scheme: dark)
134
134
  ondark()
135
+
136
+ newblur()
137
+ box-shadow: 0 0 2px rgba(black, .05), 0 0 8px rgba(black, .05)
138
+ trans1: all
139
+ &:before,&:after
140
+ z-index -1
141
+ position: absolute
142
+ pointer-events: none
143
+ content: ''
144
+ left: 0
145
+ right: 0
146
+ top: 0
147
+ bottom: 0
148
+ border-radius: 64px
149
+ &:before
150
+ backdrop-filter: blur(8px)
151
+ &:after
152
+ --blur-px: 16px
153
+ --blur-sat: 500%
154
+ background: var(--alpha50)
155
+ backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
156
+ mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1))
157
+ box-shadow: inset 0 0 8px 1px white
158
+ trans1 all
159
+ @media (prefers-color-scheme: dark)
160
+ opacity 0.4
161
+ background: var(--alpha20)