hexo-theme-shokax 0.4.5 → 0.4.6-beta1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (183) hide show
  1. package/CODE_OF_CONDUCT.md +128 -128
  2. package/CONTRIBUTING.md +58 -58
  3. package/LICENSE +660 -660
  4. package/LICENSE-shoka +21 -21
  5. package/README.md +99 -98
  6. package/README_en.MD +91 -90
  7. package/UsageRestrictions.md +25 -25
  8. package/_config.yml +381 -388
  9. package/_images.yml +9 -9
  10. package/eslint.config.mjs +55 -55
  11. package/index.html +231 -0
  12. package/languages/README.md +19 -19
  13. package/languages/default.yml +1 -1
  14. package/languages/en.yml +153 -153
  15. package/languages/ja.yml +153 -153
  16. package/languages/zh-CN.yml +153 -153
  17. package/languages/zh-HK.yml +153 -153
  18. package/languages/zh-TW.yml +153 -153
  19. package/layout/_alternate/atom.ejs +30 -30
  20. package/layout/_alternate/json.ejs +16 -16
  21. package/layout/_alternate/rss.ejs +34 -34
  22. package/layout/_mixin/breadcrumb.pug +33 -33
  23. package/layout/_mixin/card.pug +38 -38
  24. package/layout/_mixin/comment.pug +6 -6
  25. package/layout/_mixin/postmeta.pug +29 -29
  26. package/layout/_mixin/segment.pug +35 -35
  27. package/layout/_mixin/sidebar.pug +40 -40
  28. package/layout/_mixin/widgets.pug +28 -28
  29. package/layout/_partials/footer.pug +43 -43
  30. package/layout/_partials/head/head.pug +55 -56
  31. package/layout/_partials/head/head_com.pug +24 -24
  32. package/layout/_partials/head/pwa.pug +18 -18
  33. package/layout/_partials/header.pug +18 -18
  34. package/layout/_partials/layout.pug +140 -140
  35. package/layout/_partials/loading.pug +13 -13
  36. package/layout/_partials/pagination.pug +4 -4
  37. package/layout/_partials/post/copyright.pug +20 -20
  38. package/layout/_partials/post/footer.pug +17 -17
  39. package/layout/_partials/post/nav.pug +13 -13
  40. package/layout/_partials/post/post.pug +41 -41
  41. package/layout/_partials/post/reward.pug +18 -18
  42. package/layout/_partials/sidebar/menu.pug +37 -37
  43. package/layout/_partials/sidebar/overview.pug +42 -42
  44. package/layout/_partials/third-party/baidu-analytics.pug +11 -11
  45. package/layout/_partials/third-party/clarity.pug +8 -8
  46. package/layout/_partials/third-party/google-analytics.pug +9 -9
  47. package/layout/archive.pug +118 -118
  48. package/layout/category.pug +59 -59
  49. package/layout/index.pug +33 -33
  50. package/layout/page.pug +55 -55
  51. package/layout/post.pug +36 -36
  52. package/layout/tag.pug +43 -43
  53. package/meta.json +6431 -0
  54. package/package.json +72 -70
  55. package/scripts/helpers/engine.js +10 -0
  56. package/scripts/plugin/check.js +2 -2
  57. package/scripts/tags/links.js +4 -4
  58. package/source/assets/algolia_logo.svg +9 -9
  59. package/source/assets/logo.svg +16 -16
  60. package/source/css/_colors.styl +207 -207
  61. package/source/css/_common/components/components.styl +6 -6
  62. package/source/css/_common/components/highlight/highlight.styl +357 -357
  63. package/source/css/_common/components/highlight/operation.styl +21 -21
  64. package/source/css/_common/components/pages/collapse.styl +119 -119
  65. package/source/css/_common/components/pages/home.styl +391 -391
  66. package/source/css/_common/components/pages/pages.styl +56 -56
  67. package/source/css/_common/components/pages/tag-cloud.styl +12 -12
  68. package/source/css/_common/components/post/breadcrumb.styl +39 -39
  69. package/source/css/_common/components/post/copyright.styl +41 -41
  70. package/source/css/_common/components/post/expand.styl +263 -263
  71. package/source/css/_common/components/post/footer.styl +11 -11
  72. package/source/css/_common/components/post/header.styl +79 -79
  73. package/source/css/_common/components/post/nav.styl +64 -64
  74. package/source/css/_common/components/post/post.styl +29 -29
  75. package/source/css/_common/components/post/reward.styl +50 -50
  76. package/source/css/_common/components/post/rtl.styl +12 -12
  77. package/source/css/_common/components/post/tags.styl +39 -39
  78. package/source/css/_common/components/tags/collapse.styl +72 -72
  79. package/source/css/_common/components/tags/container.styl +49 -49
  80. package/source/css/_common/components/tags/label.styl +12 -12
  81. package/source/css/_common/components/tags/links.styl +77 -77
  82. package/source/css/_common/components/tags/list.styl +131 -131
  83. package/source/css/_common/components/tags/note.styl +70 -70
  84. package/source/css/_common/components/tags/player.styl +361 -361
  85. package/source/css/_common/components/tags/quiz.styl +200 -200
  86. package/source/css/_common/components/tags/tabs.styl +89 -89
  87. package/source/css/_common/components/tags/tags.styl +9 -9
  88. package/source/css/_common/components/third-party/loading.styl +222 -222
  89. package/source/css/_common/components/third-party/mermaid/class.styl +90 -90
  90. package/source/css/_common/components/third-party/mermaid/flowchart.styl +72 -72
  91. package/source/css/_common/components/third-party/mermaid/gantt.styl +251 -251
  92. package/source/css/_common/components/third-party/mermaid/git.styl +7 -7
  93. package/source/css/_common/components/third-party/mermaid/mermaid.styl +37 -37
  94. package/source/css/_common/components/third-party/mermaid/pie.styl +9 -9
  95. package/source/css/_common/components/third-party/mermaid/sequence.styl +95 -95
  96. package/source/css/_common/components/third-party/mermaid/state.styl +130 -130
  97. package/source/css/_common/components/third-party/pace.styl +18 -18
  98. package/source/css/_common/components/third-party/search.styl +167 -167
  99. package/source/css/_common/components/third-party/theme.styl +151 -151
  100. package/source/css/_common/components/third-party/third-party.styl +22 -22
  101. package/source/css/_common/components/third-party/widgets.styl +57 -57
  102. package/source/css/_common/outline/footer/footer.styl +67 -67
  103. package/source/css/_common/outline/header/brand.styl +77 -77
  104. package/source/css/_common/outline/header/header.styl +20 -20
  105. package/source/css/_common/outline/header/image.styl +85 -85
  106. package/source/css/_common/outline/header/menu.styl +117 -117
  107. package/source/css/_common/outline/header/nav.styl +81 -81
  108. package/source/css/_common/outline/header/right.styl +15 -15
  109. package/source/css/_common/outline/header/tool.styl +207 -207
  110. package/source/css/_common/outline/header/waves.styl +57 -57
  111. package/source/css/_common/outline/mobile.styl +46 -46
  112. package/source/css/_common/outline/outline.styl +78 -78
  113. package/source/css/_common/outline/sidebar/author.styl +59 -59
  114. package/source/css/_common/outline/sidebar/dimmer.styl +23 -23
  115. package/source/css/_common/outline/sidebar/menu.styl +63 -63
  116. package/source/css/_common/outline/sidebar/quick.styl +43 -43
  117. package/source/css/_common/outline/sidebar/related.styl +56 -56
  118. package/source/css/_common/outline/sidebar/sidebar.styl +80 -80
  119. package/source/css/_common/outline/sidebar/social.styl +69 -69
  120. package/source/css/_common/outline/sidebar/state.styl +37 -37
  121. package/source/css/_common/outline/sidebar/tab.styl +71 -71
  122. package/source/css/_common/outline/sidebar/toc.styl +47 -47
  123. package/source/css/_common/scaffolding/animate.styl +322 -322
  124. package/source/css/_common/scaffolding/base.styl +190 -190
  125. package/source/css/_common/scaffolding/buttons.styl +48 -48
  126. package/source/css/_common/scaffolding/divider.styl +36 -36
  127. package/source/css/_common/scaffolding/iconfont.styl +443 -443
  128. package/source/css/_common/scaffolding/normalize.styl +273 -273
  129. package/source/css/_common/scaffolding/pagination.styl +81 -81
  130. package/source/css/_common/scaffolding/ribbon.styl +38 -38
  131. package/source/css/_common/scaffolding/scaffolding.styl +14 -14
  132. package/source/css/_common/scaffolding/scrollbar.styl +37 -37
  133. package/source/css/_common/scaffolding/tables.styl +50 -50
  134. package/source/css/_common/scaffolding/tip.styl +19 -19
  135. package/source/css/_common/scaffolding/toggles.styl +59 -59
  136. package/source/css/_iconfont.styl +455 -455
  137. package/source/css/_mixins.styl +148 -148
  138. package/source/css/_variables.styl +89 -89
  139. package/source/css/app.styl +41 -41
  140. package/source/css/mermaid.styl +5 -5
  141. package/source/css/optimize.styl +5 -5
  142. package/source/js/_app/components/comments.js +59 -0
  143. package/source/js/_app/components/comments.ts +88 -89
  144. package/source/js/_app/components/sidebar.js +244 -0
  145. package/source/js/_app/components/sidebar.ts +239 -239
  146. package/source/js/_app/components/tcomments.js +47 -0
  147. package/source/js/_app/components/tcomments.ts +54 -54
  148. package/source/js/_app/globals/globalVars.ts +99 -99
  149. package/source/js/_app/globals/handles.js +105 -0
  150. package/source/js/_app/globals/handles.ts +124 -124
  151. package/source/js/_app/globals/themeColor.ts +63 -63
  152. package/source/js/_app/globals/thirdparty.ts +63 -63
  153. package/source/js/_app/globals/tools.ts +75 -75
  154. package/source/js/_app/library/anime.ts +110 -110
  155. package/source/js/_app/library/declare.d.ts +128 -130
  156. package/source/js/_app/library/dom.ts +28 -28
  157. package/source/js/_app/library/loadFile.js +43 -0
  158. package/source/js/_app/library/loadFile.ts +47 -50
  159. package/source/js/_app/library/proto.ts +137 -137
  160. package/source/js/_app/library/scriptPjax.ts +72 -72
  161. package/source/js/_app/library/storage.ts +12 -12
  162. package/source/js/_app/library/vue.js +52 -0
  163. package/source/js/_app/library/vue.ts +49 -49
  164. package/source/js/_app/page/common.js +45 -0
  165. package/source/js/_app/page/common.ts +43 -43
  166. package/source/js/_app/page/fancybox.js +70 -0
  167. package/source/js/_app/page/fancybox.ts +72 -72
  168. package/source/js/_app/page/post.js +253 -0
  169. package/source/js/_app/page/post.ts +266 -266
  170. package/source/js/_app/page/search.js +111 -0
  171. package/source/js/_app/page/search.ts +115 -115
  172. package/source/js/_app/page/tab.ts +60 -60
  173. package/source/js/_app/pjax/domInit.js +80 -0
  174. package/source/js/_app/pjax/domInit.ts +97 -97
  175. package/source/js/_app/pjax/refresh.js +137 -0
  176. package/source/js/_app/pjax/refresh.ts +140 -138
  177. package/source/js/_app/pjax/siteInit.js +115 -0
  178. package/source/js/_app/pjax/siteInit.ts +106 -104
  179. package/source/js/_app/player.js +777 -0
  180. package/source/js/_app/player.ts +798 -798
  181. package/toolbox/compiler.mjs +73 -0
  182. package/toolbox/hoistdep.mjs +6 -0
  183. package/toolbox/lib.mjs +40 -0
@@ -1,57 +1,57 @@
1
- .widgets {
2
- display: flex;
3
- z-index: 1;
4
- background: var(--body-bg-shadow);
5
- justify-content: space-around;
6
-
7
- > div {
8
- width: calc(50% - 2rem);
9
- padding: 1rem;
10
- }
11
-
12
- +mobile() {
13
- flex-direction: column-reverse;
14
-
15
- > div {
16
- width: calc(100% - 1rem) !important;
17
- }
18
- }
19
-
20
- ul {
21
- counter-reset: counter;
22
- }
23
-
24
- .item {
25
- padding: .5rem 0 .5rem 2rem;
26
- border-bottom: .0625rem dashed var(--grey-4);
27
- position: relative;
28
-
29
- &::before {
30
- counter-increment: counter;
31
- content: counter(counter);
32
- position: absolute;
33
- left: 0;
34
- font-size: 1.5em;
35
- color: var(--grey-4);
36
- line-height: 1.2;
37
- text-align: right;
38
- width: 1em;
39
- }
40
-
41
-
42
- span, .breadcrumb {
43
- display: block;
44
- text-overflow: ellipsis;
45
- overflow: hidden;
46
- max-height: 2rem;
47
- white-space: nowrap;
48
- }
49
-
50
- .breadcrumb {
51
- margin: 0;
52
- display: flex;
53
- max-height: 1.2rem;
54
- }
55
- }
56
-
57
- }
1
+ .widgets {
2
+ display: flex;
3
+ z-index: 1;
4
+ background: var(--body-bg-shadow);
5
+ justify-content: space-around;
6
+
7
+ > div {
8
+ width: calc(50% - 2rem);
9
+ padding: 1rem;
10
+ }
11
+
12
+ +mobile() {
13
+ flex-direction: column-reverse;
14
+
15
+ > div {
16
+ width: calc(100% - 1rem) !important;
17
+ }
18
+ }
19
+
20
+ ul {
21
+ counter-reset: counter;
22
+ }
23
+
24
+ .item {
25
+ padding: .5rem 0 .5rem 2rem;
26
+ border-bottom: .0625rem dashed var(--grey-4);
27
+ position: relative;
28
+
29
+ &::before {
30
+ counter-increment: counter;
31
+ content: counter(counter);
32
+ position: absolute;
33
+ left: 0;
34
+ font-size: 1.5em;
35
+ color: var(--grey-4);
36
+ line-height: 1.2;
37
+ text-align: right;
38
+ width: 1em;
39
+ }
40
+
41
+
42
+ span, .breadcrumb {
43
+ display: block;
44
+ text-overflow: ellipsis;
45
+ overflow: hidden;
46
+ max-height: 2rem;
47
+ white-space: nowrap;
48
+ }
49
+
50
+ .breadcrumb {
51
+ margin: 0;
52
+ display: flex;
53
+ max-height: 1.2rem;
54
+ }
55
+ }
56
+
57
+ }
@@ -1,67 +1,67 @@
1
- // Footer Section
2
- // --------------------------------------------------
3
- #footer {
4
- color: var(--grey-5);
5
- font-size: $font-size-small;
6
- background: var(--body-bg-shadow);
7
-
8
- .inner {
9
- margin: 2rem auto .625rem;
10
- width: $content-desktop;
11
- position: relative;
12
-
13
- if (hexo-config('sidebar.position') == 'left') {
14
- padding-left: 16.25rem;
15
- } else {
16
- padding-right: 16.25rem;
17
- }
18
-
19
- +desktop-large() {
20
- width: $content-desktop-large;
21
- }
22
-
23
- +desktop-largest() {
24
- width: $content-desktop-largest;
25
- }
26
-
27
- +tablet-mobile() {
28
- padding-left: 0;
29
- padding-right: 0;
30
- width: auto;
31
- }
32
- }
33
- }
34
-
35
- .status {
36
- width: 100%;
37
- text-align: center;
38
- }
39
-
40
- .languages {
41
- display: inline-block;
42
- font-size: $font-size-large;
43
- position: relative;
44
-
45
- .lang-select-label span {
46
- margin: 0 .5rem;
47
- }
48
-
49
- .lang-select {
50
- height: 100%;
51
- left: 0;
52
- opacity: 0;
53
- position: absolute;
54
- top: 0;
55
- width: 100%;
56
- }
57
- }
58
-
59
- .with-love {
60
- color: unquote(hexo-config('footer.icon.color'));
61
- display: inline-block;
62
- margin: 0 .3125rem 0 .125rem;
63
- }
64
-
65
- .powered-by, .theme-info {
66
- display: inline-block;
67
- }
1
+ // Footer Section
2
+ // --------------------------------------------------
3
+ #footer {
4
+ color: var(--grey-5);
5
+ font-size: $font-size-small;
6
+ background: var(--body-bg-shadow);
7
+
8
+ .inner {
9
+ margin: 2rem auto .625rem;
10
+ width: $content-desktop;
11
+ position: relative;
12
+
13
+ if (hexo-config('sidebar.position') == 'left') {
14
+ padding-left: 16.25rem;
15
+ } else {
16
+ padding-right: 16.25rem;
17
+ }
18
+
19
+ +desktop-large() {
20
+ width: $content-desktop-large;
21
+ }
22
+
23
+ +desktop-largest() {
24
+ width: $content-desktop-largest;
25
+ }
26
+
27
+ +tablet-mobile() {
28
+ padding-left: 0;
29
+ padding-right: 0;
30
+ width: auto;
31
+ }
32
+ }
33
+ }
34
+
35
+ .status {
36
+ width: 100%;
37
+ text-align: center;
38
+ }
39
+
40
+ .languages {
41
+ display: inline-block;
42
+ font-size: $font-size-large;
43
+ position: relative;
44
+
45
+ .lang-select-label span {
46
+ margin: 0 .5rem;
47
+ }
48
+
49
+ .lang-select {
50
+ height: 100%;
51
+ left: 0;
52
+ opacity: 0;
53
+ position: absolute;
54
+ top: 0;
55
+ width: 100%;
56
+ }
57
+ }
58
+
59
+ .with-love {
60
+ color: unquote(hexo-config('footer.icon.color'));
61
+ display: inline-block;
62
+ margin: 0 .3125rem 0 .125rem;
63
+ }
64
+
65
+ .powered-by, .theme-info {
66
+ display: inline-block;
67
+ }
@@ -1,77 +1,77 @@
1
- #brand {
2
- position: fixed;
3
- padding: 3rem 5rem 0;
4
- text-align: center;
5
- width: 100%;
6
- height: 50vh;
7
- min-height: 10rem;
8
-
9
- &.affix {
10
- z-index: $zindex-0;
11
- }
12
-
13
- &, .pjax {
14
- the-flex();
15
- }
16
-
17
- .artboard {
18
- font-family: $font-family-logo;
19
- font-size: $font-size-logo;
20
- line-height: 1.2;
21
- }
22
-
23
- h1 {
24
- font-size: $font-size-title;
25
- letter-spacing: .125rem;
26
- }
27
-
28
- .artboard + h1 {
29
- margin: .625rem 0;
30
- }
31
-
32
- .sticky {
33
- font-size: $font-size-smallest;
34
- display: inline-block;
35
- transform: rotate(30deg);
36
- backface-visibility: hidden;
37
- }
38
-
39
- .meta {
40
- display: flex;
41
- font-size: $font-size-subtitle;
42
- margin: 0;
43
-
44
- .item+.item {
45
- margin-left: .625rem;
46
- }
47
- }
48
-
49
- +tablet() {
50
- .meta {
51
- font-size: $font-size-smaller;
52
- }
53
- }
54
-
55
- +mobile() {
56
- padding: 3rem .5rem 0;
57
-
58
- h1 {
59
- font-size: $font-size-largest;
60
- }
61
-
62
- .meta {
63
- font-size: $font-size-smallest;
64
-
65
- .text {
66
- display: none;
67
- }
68
- }
69
- }
70
-
71
-
72
- +mobile-smallest() {
73
- .artboard {
74
- font-size: $font-size-title;
75
- }
76
- }
77
- }
1
+ #brand {
2
+ position: fixed;
3
+ padding: 3rem 5rem 0;
4
+ text-align: center;
5
+ width: 100%;
6
+ height: 50vh;
7
+ min-height: 10rem;
8
+
9
+ &.affix {
10
+ z-index: $zindex-0;
11
+ }
12
+
13
+ &, .pjax {
14
+ the-flex();
15
+ }
16
+
17
+ .artboard {
18
+ font-family: $font-family-logo;
19
+ font-size: $font-size-logo;
20
+ line-height: 1.2;
21
+ }
22
+
23
+ h1 {
24
+ font-size: $font-size-title;
25
+ letter-spacing: .125rem;
26
+ }
27
+
28
+ .artboard + h1 {
29
+ margin: .625rem 0;
30
+ }
31
+
32
+ .sticky {
33
+ font-size: $font-size-smallest;
34
+ display: inline-block;
35
+ transform: rotate(30deg);
36
+ backface-visibility: hidden;
37
+ }
38
+
39
+ .meta {
40
+ display: flex;
41
+ font-size: $font-size-subtitle;
42
+ margin: 0;
43
+
44
+ .item+.item {
45
+ margin-left: .625rem;
46
+ }
47
+ }
48
+
49
+ +tablet() {
50
+ .meta {
51
+ font-size: $font-size-smaller;
52
+ }
53
+ }
54
+
55
+ +mobile() {
56
+ padding: 3rem .5rem 0;
57
+
58
+ h1 {
59
+ font-size: $font-size-largest;
60
+ }
61
+
62
+ .meta {
63
+ font-size: $font-size-smallest;
64
+
65
+ .text {
66
+ display: none;
67
+ }
68
+ }
69
+ }
70
+
71
+
72
+ +mobile-smallest() {
73
+ .artboard {
74
+ font-size: $font-size-title;
75
+ }
76
+ }
77
+ }
@@ -1,20 +1,20 @@
1
- // Header Section
2
- // --------------------------------------------------
3
- #header {
4
- margin: 0 auto;
5
- position: relative;
6
- width: 100%;
7
- height: 50vh;
8
- text-shadow: 0 .2rem .3rem alpha(#000, .5);
9
- color: var(--header-text-color);
10
-
11
- a:hover {
12
- color: currentColor;
13
- }
14
- }
15
-
16
- @import 'image';
17
- @import 'nav';
18
- @import 'brand';
19
- @import 'tool';
20
- @import 'waves';
1
+ // Header Section
2
+ // --------------------------------------------------
3
+ #header {
4
+ margin: 0 auto;
5
+ position: relative;
6
+ width: 100%;
7
+ height: 50vh;
8
+ text-shadow: 0 .2rem .3rem alpha(#000, .5);
9
+ color: var(--header-text-color);
10
+
11
+ a:hover {
12
+ color: currentColor;
13
+ }
14
+ }
15
+
16
+ @import 'image';
17
+ @import 'nav';
18
+ @import 'brand';
19
+ @import 'tool';
20
+ @import 'waves';
@@ -1,85 +1,85 @@
1
- #imgs {
2
- display: block;
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- width: 100%;
7
- height: 70vh;
8
- min-height: 25rem;
9
- z-index: -9;
10
- background-color: #363636;
11
- content-visibility: auto;
12
- contain-intrinsic-size: 100vw 70vh;
13
-
14
- li.stop-animation {
15
- animation-play-state: paused;
16
- }
17
-
18
- img {
19
- width: 100%;
20
- height: 100%;
21
- position: absolute;
22
- top: 0;
23
- left: 0;
24
- object-fit: cover;
25
- }
26
-
27
- .item {
28
- width: 100%;
29
- height: 100%;
30
- position: absolute;
31
- top: 0;
32
- left: 0;
33
- background-size: cover;
34
- background-position: 50% 50%;
35
- background-repeat: no-repeat;
36
- opacity: 0;
37
- z-index: 0;
38
- animation: imageAnimation 36s linear infinite 0s;
39
- backface-visibility: hidden;
40
- transform-style: preserve-3d;
41
- }
42
-
43
- for num in (1 .. 6) {
44
- .item:nth-child({num+1}) {
45
- animation-delay: unit(num * 6, 's');
46
- }
47
- }
48
-
49
- &::before {
50
- content: '';
51
- display: block;
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- width: 100%;
56
- height: 100%;
57
- background-color: rgba(0, 0, 0, .2);
58
- z-index: $zindex-1;
59
- the-transition();
60
- }
61
- }
62
-
63
- @keyframes imageAnimation {
64
- 0% {
65
- opacity: 0;
66
- animation-timing-function: ease-in;
67
- }
68
- 2% {
69
- opacity: 1;
70
- }
71
- 8% {
72
- opacity: 1;
73
- transform: scale(1.05);
74
- animation-timing-function: ease-out;
75
- }
76
- 17% {
77
- opacity: 1;
78
- transform: scale(1.1);
79
- }
80
- 25% {
81
- opacity: 0;
82
- transform: scale(1.1);
83
- }
84
- 100% { opacity: 0 }
85
- }
1
+ #imgs {
2
+ display: block;
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ width: 100%;
7
+ height: 70vh;
8
+ min-height: 25rem;
9
+ z-index: -9;
10
+ background-color: #363636;
11
+ content-visibility: auto;
12
+ contain-intrinsic-size: 100vw 70vh;
13
+
14
+ li.stop-animation {
15
+ animation-play-state: paused;
16
+ }
17
+
18
+ img {
19
+ width: 100%;
20
+ height: 100%;
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ object-fit: cover;
25
+ }
26
+
27
+ .item {
28
+ width: 100%;
29
+ height: 100%;
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ background-size: cover;
34
+ background-position: 50% 50%;
35
+ background-repeat: no-repeat;
36
+ opacity: 0;
37
+ z-index: 0;
38
+ animation: imageAnimation 36s linear infinite 0s;
39
+ backface-visibility: hidden;
40
+ transform-style: preserve-3d;
41
+ }
42
+
43
+ for num in (1 .. 6) {
44
+ .item:nth-child({num+1}) {
45
+ animation-delay: unit(num * 6, 's');
46
+ }
47
+ }
48
+
49
+ &::before {
50
+ content: '';
51
+ display: block;
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ background-color: rgba(0, 0, 0, .2);
58
+ z-index: $zindex-1;
59
+ the-transition();
60
+ }
61
+ }
62
+
63
+ @keyframes imageAnimation {
64
+ 0% {
65
+ opacity: 0;
66
+ animation-timing-function: ease-in;
67
+ }
68
+ 2% {
69
+ opacity: 1;
70
+ }
71
+ 8% {
72
+ opacity: 1;
73
+ transform: scale(1.05);
74
+ animation-timing-function: ease-out;
75
+ }
76
+ 17% {
77
+ opacity: 1;
78
+ transform: scale(1.1);
79
+ }
80
+ 25% {
81
+ opacity: 0;
82
+ transform: scale(1.1);
83
+ }
84
+ 100% { opacity: 0 }
85
+ }