@varlet/cli 1.27.16 → 1.27.17-alpha.1656907860130

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 (210) hide show
  1. package/LICENCE +21 -21
  2. package/README.en-US.md +401 -401
  3. package/README.md +396 -396
  4. package/generators/base/.prettierignore +9 -9
  5. package/generators/base/.prettierrc +5 -5
  6. package/generators/base/README.md +82 -82
  7. package/generators/base/babel.config.js +10 -10
  8. package/generators/base/public/highlight.css +1 -1
  9. package/generators/base/public/logo.svg +1 -1
  10. package/generators/base/shims/shims-md.d.ts +4 -4
  11. package/generators/base/shims/shims-vue.d.ts +6 -6
  12. package/generators/base/tsconfig.json +13 -13
  13. package/generators/config/default/base/docs/home.zh-CN.md +10 -10
  14. package/generators/config/default/base/package.json +1 -0
  15. package/generators/config/default/base/types/basicComponent.d.ts +7 -7
  16. package/generators/config/default/base/types/button.d.ts +12 -12
  17. package/generators/config/default/base/types/index.d.ts +6 -6
  18. package/generators/config/default/base/varlet.config.js +110 -110
  19. package/generators/config/default/sfc/src/button/Button.vue +30 -30
  20. package/generators/config/default/sfc/src/button/__tests__/index.spec.js +7 -7
  21. package/generators/config/default/sfc/src/button/button.less +14 -14
  22. package/generators/config/default/sfc/src/button/docs/zh-CN.md +47 -47
  23. package/generators/config/default/sfc/src/button/example/BasicUse.vue +7 -7
  24. package/generators/config/default/sfc/src/button/example/ModifyColor.vue +7 -7
  25. package/generators/config/default/sfc/src/button/example/index.vue +13 -13
  26. package/generators/config/default/sfc/src/button/index.ts +10 -10
  27. package/generators/config/default/tsx/src/button/Button.tsx +31 -31
  28. package/generators/config/default/tsx/src/button/__tests__/index.spec.js +7 -7
  29. package/generators/config/default/tsx/src/button/button.less +14 -14
  30. package/generators/config/default/tsx/src/button/docs/zh-CN.md +47 -47
  31. package/generators/config/default/tsx/src/button/example/BasicUse.vue +7 -7
  32. package/generators/config/default/tsx/src/button/example/ModifyColor.vue +7 -7
  33. package/generators/config/default/tsx/src/button/example/index.vue +13 -13
  34. package/generators/config/default/tsx/src/button/index.ts +10 -10
  35. package/generators/config/i18n/base/docs/home.en-US.md +11 -11
  36. package/generators/config/i18n/base/docs/home.zh-CN.md +10 -10
  37. package/generators/config/i18n/base/package.json +1 -0
  38. package/generators/config/i18n/base/types/basicComponent.d.ts +7 -7
  39. package/generators/config/i18n/base/types/button.d.ts +12 -12
  40. package/generators/config/i18n/base/types/index.d.ts +7 -7
  41. package/generators/config/i18n/base/types/locale.d.ts +24 -24
  42. package/generators/config/i18n/base/varlet.config.js +122 -122
  43. package/generators/config/i18n/sfc/src/button/Button.vue +36 -36
  44. package/generators/config/i18n/sfc/src/button/__tests__/index.spec.js +7 -7
  45. package/generators/config/i18n/sfc/src/button/button.less +14 -14
  46. package/generators/config/i18n/sfc/src/button/docs/en-US.md +34 -34
  47. package/generators/config/i18n/sfc/src/button/docs/zh-CN.md +34 -34
  48. package/generators/config/i18n/sfc/src/button/example/BasicUse.vue +11 -11
  49. package/generators/config/i18n/sfc/src/button/example/ModifyColor.vue +11 -11
  50. package/generators/config/i18n/sfc/src/button/example/index.vue +13 -13
  51. package/generators/config/i18n/sfc/src/button/example/locale/en-US.ts +5 -5
  52. package/generators/config/i18n/sfc/src/button/example/locale/index.ts +23 -23
  53. package/generators/config/i18n/sfc/src/button/example/locale/zh-CN.ts +5 -5
  54. package/generators/config/i18n/sfc/src/button/index.ts +10 -10
  55. package/generators/config/i18n/sfc/src/locale/__tests__/index.spec.js +51 -51
  56. package/generators/config/i18n/sfc/src/locale/docs/en-US.md +26 -26
  57. package/generators/config/i18n/sfc/src/locale/docs/zh-CN.md +25 -25
  58. package/generators/config/i18n/sfc/src/locale/en-US.d.ts +5 -5
  59. package/generators/config/i18n/sfc/src/locale/en-US.ts +7 -7
  60. package/generators/config/i18n/sfc/src/locale/index.ts +67 -67
  61. package/generators/config/i18n/sfc/src/locale/zh-CN.d.ts +5 -5
  62. package/generators/config/i18n/sfc/src/locale/zh-CN.ts +7 -7
  63. package/generators/config/i18n/tsx/src/button/Button.tsx +35 -35
  64. package/generators/config/i18n/tsx/src/button/__tests__/index.spec.js +7 -7
  65. package/generators/config/i18n/tsx/src/button/button.less +14 -14
  66. package/generators/config/i18n/tsx/src/button/docs/en-US.md +34 -34
  67. package/generators/config/i18n/tsx/src/button/docs/zh-CN.md +34 -34
  68. package/generators/config/i18n/tsx/src/button/example/BasicUse.vue +11 -11
  69. package/generators/config/i18n/tsx/src/button/example/ModifyColor.vue +11 -11
  70. package/generators/config/i18n/tsx/src/button/example/index.vue +13 -13
  71. package/generators/config/i18n/tsx/src/button/example/locale/en-US.ts +5 -5
  72. package/generators/config/i18n/tsx/src/button/example/locale/index.ts +23 -23
  73. package/generators/config/i18n/tsx/src/button/example/locale/zh-CN.ts +5 -5
  74. package/generators/config/i18n/tsx/src/button/index.ts +10 -10
  75. package/generators/config/i18n/tsx/src/locale/__tests__/index.spec.js +51 -51
  76. package/generators/config/i18n/tsx/src/locale/docs/en-US.md +26 -26
  77. package/generators/config/i18n/tsx/src/locale/docs/zh-CN.md +25 -25
  78. package/generators/config/i18n/tsx/src/locale/en-US.d.ts +5 -5
  79. package/generators/config/i18n/tsx/src/locale/en-US.ts +7 -7
  80. package/generators/config/i18n/tsx/src/locale/index.ts +67 -67
  81. package/generators/config/i18n/tsx/src/locale/zh-CN.d.ts +5 -5
  82. package/generators/config/i18n/tsx/src/locale/zh-CN.ts +7 -7
  83. package/lib/commands/build.d.ts +1 -1
  84. package/lib/commands/build.js +67 -67
  85. package/lib/commands/changelog.d.ts +6 -6
  86. package/lib/commands/changelog.js +27 -27
  87. package/lib/commands/commitLint.d.ts +1 -1
  88. package/lib/commands/commitLint.js +21 -21
  89. package/lib/commands/compile.d.ts +5 -5
  90. package/lib/commands/compile.js +119 -119
  91. package/lib/commands/create.d.ts +3 -3
  92. package/lib/commands/create.js +132 -132
  93. package/lib/commands/dev.d.ts +3 -3
  94. package/lib/commands/dev.js +123 -123
  95. package/lib/commands/gen.d.ts +1 -1
  96. package/lib/commands/gen.js +112 -112
  97. package/lib/commands/jest.d.ts +8 -8
  98. package/lib/commands/jest.js +81 -81
  99. package/lib/commands/lint.d.ts +1 -1
  100. package/lib/commands/lint.js +123 -123
  101. package/lib/commands/preview.d.ts +1 -1
  102. package/lib/commands/preview.js +74 -74
  103. package/lib/commands/release.d.ts +3 -3
  104. package/lib/commands/release.js +267 -269
  105. package/lib/compiler/compileModule.d.ts +5 -5
  106. package/lib/compiler/compileModule.js +186 -186
  107. package/lib/compiler/compileSFC.d.ts +2 -2
  108. package/lib/compiler/compileSFC.js +132 -132
  109. package/lib/compiler/compileScript.d.ts +17 -17
  110. package/lib/compiler/compileScript.js +202 -202
  111. package/lib/compiler/compileSiteEntry.d.ts +13 -13
  112. package/lib/compiler/compileSiteEntry.js +237 -237
  113. package/lib/compiler/compileStyle.d.ts +11 -11
  114. package/lib/compiler/compileStyle.js +101 -101
  115. package/lib/compiler/compileTemplateHighlight.d.ts +10 -10
  116. package/lib/compiler/compileTemplateHighlight.js +193 -193
  117. package/lib/compiler/compileTypes.d.ts +2 -2
  118. package/lib/compiler/compileTypes.js +88 -88
  119. package/lib/config/babel.config.d.ts +2 -2
  120. package/lib/config/babel.config.js +31 -31
  121. package/lib/config/babel.sfc.transform.d.ts +1 -1
  122. package/lib/config/babel.sfc.transform.js +18 -18
  123. package/lib/config/jest.config.d.ts +1 -1
  124. package/lib/config/jest.config.js +36 -36
  125. package/lib/config/jest.media.mock.js +2 -2
  126. package/lib/config/jest.style.mock.js +2 -2
  127. package/lib/config/varlet.config.d.ts +1 -1
  128. package/lib/config/varlet.config.js +24 -24
  129. package/lib/config/vite.config.d.ts +5 -5
  130. package/lib/config/vite.config.js +162 -162
  131. package/lib/index.d.ts +2 -2
  132. package/lib/index.js +83 -83
  133. package/lib/shared/constant.d.ts +43 -43
  134. package/lib/shared/constant.js +50 -50
  135. package/lib/shared/fsUtils.d.ts +12 -12
  136. package/lib/shared/fsUtils.js +108 -108
  137. package/lib/shared/logger.d.ts +7 -7
  138. package/lib/shared/logger.js +20 -20
  139. package/package.json +7 -8
  140. package/preset.js +3 -3
  141. package/site/components/button/Button.vue +84 -84
  142. package/site/components/button/button.less +183 -183
  143. package/site/components/button/index.ts +10 -10
  144. package/site/components/button/props.ts +70 -70
  145. package/site/components/cell/Cell.vue +42 -42
  146. package/site/components/cell/cell.less +74 -74
  147. package/site/components/cell/index.ts +10 -10
  148. package/site/components/cell/props.ts +27 -27
  149. package/site/components/code-example/CodeExample.vue +143 -143
  150. package/site/components/code-example/codeExample.less +41 -41
  151. package/site/components/code-example/index.ts +10 -10
  152. package/site/components/context/index.ts +17 -17
  153. package/site/components/context/lock.ts +103 -103
  154. package/site/components/context/zIndex.ts +20 -20
  155. package/site/components/icon/Icon.vue +68 -68
  156. package/site/components/icon/icon.less +26 -26
  157. package/site/components/icon/index.ts +10 -10
  158. package/site/components/icon/props.ts +24 -24
  159. package/site/components/loading/Loading.vue +55 -55
  160. package/site/components/loading/index.ts +10 -10
  161. package/site/components/loading/loading.less +420 -420
  162. package/site/components/loading/props.ts +37 -37
  163. package/site/components/progress/Progress.vue +108 -108
  164. package/site/components/progress/index.ts +10 -10
  165. package/site/components/progress/progress.less +98 -98
  166. package/site/components/progress/props.ts +55 -55
  167. package/site/components/ripple/index.ts +167 -167
  168. package/site/components/ripple/ripple.less +17 -17
  169. package/site/components/snackbar/Snackbar.vue +38 -38
  170. package/site/components/snackbar/core.vue +117 -117
  171. package/site/components/snackbar/index.tsx +270 -270
  172. package/site/components/snackbar/props.ts +94 -94
  173. package/site/components/snackbar/snackbar.less +135 -135
  174. package/site/components/styles/common.less +64 -64
  175. package/site/components/styles/elevation.less +126 -126
  176. package/site/components/styles/var.less +27 -27
  177. package/site/components/utils/components.ts +69 -69
  178. package/site/components/utils/elements.ts +85 -85
  179. package/site/index.html +49 -49
  180. package/site/mobile/App.vue +291 -291
  181. package/site/mobile/components/AppHome.vue +134 -134
  182. package/site/mobile/components/AppType.vue +22 -22
  183. package/site/mobile/components/app-bar/AppBar.vue +69 -69
  184. package/site/mobile/components/app-bar/appBar.less +56 -56
  185. package/site/mobile/components/app-bar/index.ts +10 -10
  186. package/site/mobile/components/app-bar/props.ts +25 -25
  187. package/site/mobile/components/styles/common.less +64 -64
  188. package/site/mobile/components/styles/elevation.less +126 -126
  189. package/site/mobile/components/styles/var.less +27 -27
  190. package/site/mobile/main.ts +74 -74
  191. package/site/mobile.html +41 -41
  192. package/site/module.d.ts +5 -5
  193. package/site/pc/App.vue +43 -43
  194. package/site/pc/Layout.vue +397 -397
  195. package/site/pc/components/AnimationBox.vue +45 -45
  196. package/site/pc/components/AppHeader.vue +355 -355
  197. package/site/pc/components/AppMobile.vue +54 -54
  198. package/site/pc/components/AppSidebar.vue +134 -134
  199. package/site/pc/components/LogoAnimation.vue +119 -119
  200. package/site/pc/floating.ts +9 -9
  201. package/site/pc/main.ts +94 -94
  202. package/site/pc/pages/index/index.less +194 -194
  203. package/site/pc/pages/index/index.vue +128 -125
  204. package/site/pc/pages/index/locale/en-US.ts +3 -5
  205. package/site/pc/pages/index/locale/zh-CN.ts +3 -5
  206. package/site/tsconfig.json +11 -11
  207. package/site/useProgress.ts +75 -75
  208. package/site/utils.ts +153 -153
  209. package/tsconfig.json +14 -14
  210. package/varlet.default.config.js +151 -145
package/site/pc/main.ts CHANGED
@@ -1,94 +1,94 @@
1
- import App from './App.vue'
2
- import '@varlet/touch-emulator'
3
- import routes from '@pc-routes'
4
- import config from '@config'
5
-
6
- import Icon from '../components/icon'
7
- import Cell from '../components/cell'
8
- import Ripple from '../components/ripple'
9
- import CodeExample from '../components/code-example'
10
- import Snackbar from '../components/snackbar'
11
-
12
- import '../components/styles/common.less'
13
- import '../components/styles/elevation.less'
14
-
15
- import { createApp } from 'vue'
16
- import { createRouter, createWebHashHistory } from 'vue-router'
17
- import { get } from 'lodash-es'
18
- import { useProgress } from '../useProgress'
19
-
20
- const defaultLanguage = get(config, 'defaultLanguage')
21
- const redirect = get(config, 'pc.redirect')
22
- const mobileRedirect = get(config, 'mobile.redirect')
23
-
24
- Snackbar.allowMultiple(true)
25
-
26
- redirect &&
27
- routes.push({
28
- path: '/:pathMatch(.*)*',
29
- redirect: `/${defaultLanguage}${redirect}`,
30
- })
31
-
32
- const router = createRouter({
33
- history: createWebHashHistory(),
34
- scrollBehavior: () => ({ top: 0 }),
35
- routes,
36
- })
37
-
38
- let isEnd = true
39
- const { start, end } = useProgress()
40
-
41
- router.beforeEach((to: any, from: any) => {
42
- if (to.path === from.path) {
43
- return false
44
- }
45
-
46
- isEnd = false
47
- setTimeout(() => !isEnd && start(), 200)
48
-
49
- // @ts-ignore
50
- if (window._hmt) {
51
- if (to.path) {
52
- // @ts-ignore
53
- window._hmt.push(['_trackPageview', `/#${to.fullPath}`])
54
- }
55
- }
56
- })
57
-
58
- router.afterEach(() => {
59
- isEnd = true
60
- end()
61
- })
62
-
63
- Object.defineProperty(window, 'onMobileRouteChange', {
64
- value: (path: string, language: string, replace: string) => {
65
- if (path === mobileRedirect) {
66
- router.replace(`/${language}/${replace}`)
67
- return
68
- }
69
-
70
- router.replace(`/${language}${path}`)
71
- }
72
- })
73
-
74
- Object.defineProperty(window, 'scrollToMenu', {
75
- value: (docName: string) => {
76
- setTimeout(() => {
77
- const cell = document.getElementById(docName) as HTMLElement
78
- const scroller = cell.parentNode as HTMLElement
79
- scroller.scrollTo({ top: cell.offsetTop - scroller.offsetHeight / 2 })
80
- })
81
- }
82
- })
83
-
84
- createApp(App)
85
- .use(router)
86
- // @ts-ignore
87
- .use(Cell)
88
- .use(Ripple)
89
- // @ts-ignore
90
- .use(Icon)
91
- // @ts-ignore
92
- .use(CodeExample)
93
- .use(Snackbar)
94
- .mount('#app')
1
+ import App from './App.vue'
2
+ import '@varlet/touch-emulator'
3
+ import routes from '@pc-routes'
4
+ import config from '@config'
5
+
6
+ import Icon from '../components/icon'
7
+ import Cell from '../components/cell'
8
+ import Ripple from '../components/ripple'
9
+ import CodeExample from '../components/code-example'
10
+ import Snackbar from '../components/snackbar'
11
+
12
+ import '../components/styles/common.less'
13
+ import '../components/styles/elevation.less'
14
+
15
+ import { createApp } from 'vue'
16
+ import { createRouter, createWebHashHistory } from 'vue-router'
17
+ import { get } from 'lodash-es'
18
+ import { useProgress } from '../useProgress'
19
+
20
+ const defaultLanguage = get(config, 'defaultLanguage')
21
+ const redirect = get(config, 'pc.redirect')
22
+ const mobileRedirect = get(config, 'mobile.redirect')
23
+
24
+ Snackbar.allowMultiple(true)
25
+
26
+ redirect &&
27
+ routes.push({
28
+ path: '/:pathMatch(.*)*',
29
+ redirect: `/${defaultLanguage}${redirect}`,
30
+ })
31
+
32
+ const router = createRouter({
33
+ history: createWebHashHistory(),
34
+ scrollBehavior: () => ({ top: 0 }),
35
+ routes,
36
+ })
37
+
38
+ let isEnd = true
39
+ const { start, end } = useProgress()
40
+
41
+ router.beforeEach((to: any, from: any) => {
42
+ if (to.path === from.path) {
43
+ return false
44
+ }
45
+
46
+ isEnd = false
47
+ setTimeout(() => !isEnd && start(), 200)
48
+
49
+ // @ts-ignore
50
+ if (window._hmt) {
51
+ if (to.path) {
52
+ // @ts-ignore
53
+ window._hmt.push(['_trackPageview', `/#${to.fullPath}`])
54
+ }
55
+ }
56
+ })
57
+
58
+ router.afterEach(() => {
59
+ isEnd = true
60
+ end()
61
+ })
62
+
63
+ Object.defineProperty(window, 'onMobileRouteChange', {
64
+ value: (path: string, language: string, replace: string) => {
65
+ if (path === mobileRedirect) {
66
+ router.replace(`/${language}/${replace}`)
67
+ return
68
+ }
69
+
70
+ router.replace(`/${language}${path}`)
71
+ }
72
+ })
73
+
74
+ Object.defineProperty(window, 'scrollToMenu', {
75
+ value: (docName: string) => {
76
+ setTimeout(() => {
77
+ const cell = document.getElementById(docName) as HTMLElement
78
+ const scroller = cell.parentNode as HTMLElement
79
+ scroller.scrollTo({ top: cell.offsetTop - scroller.offsetHeight / 2 })
80
+ })
81
+ }
82
+ })
83
+
84
+ createApp(App)
85
+ .use(router)
86
+ // @ts-ignore
87
+ .use(Cell)
88
+ .use(Ripple)
89
+ // @ts-ignore
90
+ .use(Icon)
91
+ // @ts-ignore
92
+ .use(CodeExample)
93
+ .use(Snackbar)
94
+ .mount('#app')
@@ -1,194 +1,194 @@
1
- .home-page {
2
- position: relative;
3
- width: 100vw;
4
- height: 100vh;
5
- box-sizing: border-box;
6
- min-width: 1200px;
7
- background: var(--site-config-color-home-page-background);
8
- overflow: hidden;
9
- display: flex;
10
- align-items: center;
11
- }
12
-
13
- @keyframes fade-in {
14
- 0% {
15
- opacity: 0;
16
- transform: translateX(-100%);
17
- }
18
-
19
-
20
- to {
21
- opacity: 1;
22
- transform: translateX(0%);
23
- }
24
- }
25
-
26
- @keyframes slash-1 {
27
- from {
28
- transform: rotate(90deg);
29
- ;
30
- }
31
-
32
- to {
33
- transform: rotate(10deg);
34
- }
35
- }
36
-
37
- @keyframes slash-2 {
38
- from {
39
- transform: rotate(90deg);
40
- ;
41
- }
42
-
43
- to {
44
- transform: rotate(20deg);
45
- }
46
- }
47
-
48
- @keyframes slash-3 {
49
- from {
50
- transform: rotate(90deg);
51
- ;
52
- }
53
-
54
- to {
55
- transform: rotate(30deg);
56
- }
57
- }
58
-
59
- @keyframes slash-4 {
60
- from {
61
- transform: rotate(90deg);
62
- ;
63
- }
64
-
65
- to {
66
- transform: rotate(40deg);
67
- }
68
- }
69
-
70
- @keyframes slash-5 {
71
- from {
72
- transform: rotate(90deg);
73
- ;
74
- }
75
-
76
- to {
77
- transform: rotate(50deg);
78
- }
79
- }
80
-
81
- .slash-box {
82
- position: absolute;
83
- width: 30px;
84
- bottom: -70%;
85
- top: -130%;
86
- right: 52%;
87
- transform-origin: bottom right;
88
- transition: box-shadow 0.5s;
89
- box-shadow: -20px 0 20px var(--site-config-color-home-page-slash);
90
- }
91
-
92
- .box-1 {
93
- animation: slash-1 .75s forwards;
94
- }
95
-
96
- .box-2 {
97
- animation: slash-2 .75s forwards;
98
- }
99
-
100
- .box-3 {
101
- animation: slash-3 .75s forwards;
102
- }
103
-
104
- .box-4 {
105
- animation: slash-4 .75s forwards;
106
- }
107
-
108
- .box-5 {
109
- animation: slash-5 .75s forwards;
110
- }
111
-
112
- .profile-container {
113
- height: 100vh;
114
- padding-left: 10vw;
115
- display: flex;
116
- justify-content: center;
117
- align-items: center;
118
-
119
- .container-box {
120
- width: 35vw;
121
- min-width: 500px;
122
-
123
- .description-container {
124
- display: flex;
125
- margin-bottom: 35px;
126
- }
127
-
128
- .logo-container {
129
- margin-right: 20px;
130
- }
131
-
132
- .button-group {
133
- display: flex;
134
- margin-top: 25px;
135
- align-items: center;
136
- }
137
-
138
- .block-button-content {
139
- display: flex;
140
- align-items: center;
141
- }
142
-
143
- .common-button {
144
- height: 52px;
145
- font-size: 18px;
146
- transition: all .25s;
147
- animation: fade-in .75s forwards;
148
- }
149
-
150
- .extra-button {
151
- flex-shrink: 0;
152
- background-color: var(--site-config-color-home-page-extra-button-background);
153
- }
154
-
155
- .github-button {
156
- background-color: var(--site-config-color-home-page-github-button-background);
157
- color: #fff;
158
- }
159
-
160
- .primary-button {
161
- background-color: var(--site-config-color-home-page-primary-button-background);
162
- }
163
-
164
- .margin-left {
165
- margin-left: 10px;
166
- }
167
-
168
- .base-title {
169
- font-size: 84px;
170
- line-height: 72px;
171
- font-weight: 500;
172
- margin-top: 8px;
173
- animation: fade-in .75s forwards;
174
- }
175
-
176
- .base-description {
177
- font-size: 16px;
178
- line-height: 28px;
179
- padding-left: 4px;
180
- font-weight: 500;
181
- margin-bottom: 45px;
182
- letter-spacing: 1px;
183
- animation: fade-in .75s forwards;
184
- }
185
-
186
- .logo {
187
- width: 90px;
188
- height: 90px;
189
- flex-shrink: 0;
190
- margin-right: 25px;
191
- z-index: 2;
192
- }
193
- }
194
- }
1
+ .home-page {
2
+ position: relative;
3
+ width: 100vw;
4
+ height: 100vh;
5
+ box-sizing: border-box;
6
+ min-width: 1200px;
7
+ background: var(--site-config-color-home-page-background);
8
+ overflow: hidden;
9
+ display: flex;
10
+ align-items: center;
11
+ }
12
+
13
+ @keyframes fade-in {
14
+ 0% {
15
+ opacity: 0;
16
+ transform: translateX(-100%);
17
+ }
18
+
19
+
20
+ to {
21
+ opacity: 1;
22
+ transform: translateX(0%);
23
+ }
24
+ }
25
+
26
+ @keyframes slash-1 {
27
+ from {
28
+ transform: rotate(90deg);
29
+ ;
30
+ }
31
+
32
+ to {
33
+ transform: rotate(10deg);
34
+ }
35
+ }
36
+
37
+ @keyframes slash-2 {
38
+ from {
39
+ transform: rotate(90deg);
40
+ ;
41
+ }
42
+
43
+ to {
44
+ transform: rotate(20deg);
45
+ }
46
+ }
47
+
48
+ @keyframes slash-3 {
49
+ from {
50
+ transform: rotate(90deg);
51
+ ;
52
+ }
53
+
54
+ to {
55
+ transform: rotate(30deg);
56
+ }
57
+ }
58
+
59
+ @keyframes slash-4 {
60
+ from {
61
+ transform: rotate(90deg);
62
+ ;
63
+ }
64
+
65
+ to {
66
+ transform: rotate(40deg);
67
+ }
68
+ }
69
+
70
+ @keyframes slash-5 {
71
+ from {
72
+ transform: rotate(90deg);
73
+ ;
74
+ }
75
+
76
+ to {
77
+ transform: rotate(50deg);
78
+ }
79
+ }
80
+
81
+ .slash-box {
82
+ position: absolute;
83
+ width: 30px;
84
+ bottom: -70%;
85
+ top: -130%;
86
+ right: 52%;
87
+ transform-origin: bottom right;
88
+ transition: box-shadow 0.5s;
89
+ box-shadow: -20px 0 20px var(--site-config-color-home-page-slash);
90
+ }
91
+
92
+ .box-1 {
93
+ animation: slash-1 .75s forwards;
94
+ }
95
+
96
+ .box-2 {
97
+ animation: slash-2 .75s forwards;
98
+ }
99
+
100
+ .box-3 {
101
+ animation: slash-3 .75s forwards;
102
+ }
103
+
104
+ .box-4 {
105
+ animation: slash-4 .75s forwards;
106
+ }
107
+
108
+ .box-5 {
109
+ animation: slash-5 .75s forwards;
110
+ }
111
+
112
+ .profile-container {
113
+ height: 100vh;
114
+ padding-left: 10vw;
115
+ display: flex;
116
+ justify-content: center;
117
+ align-items: center;
118
+
119
+ .container-box {
120
+ width: 35vw;
121
+ min-width: 500px;
122
+
123
+ .description-container {
124
+ display: flex;
125
+ margin-bottom: 35px;
126
+ }
127
+
128
+ .logo-container {
129
+ margin-right: 20px;
130
+ }
131
+
132
+ .button-group {
133
+ display: flex;
134
+ margin-top: 25px;
135
+ align-items: center;
136
+ }
137
+
138
+ .block-button-content {
139
+ display: flex;
140
+ align-items: center;
141
+ }
142
+
143
+ .common-button {
144
+ height: 52px;
145
+ font-size: 18px;
146
+ transition: all .25s;
147
+ animation: fade-in .75s forwards;
148
+ }
149
+
150
+ .extra-button {
151
+ flex-shrink: 0;
152
+ background-color: var(--site-config-color-home-page-extra-button-background);
153
+ }
154
+
155
+ .github-button {
156
+ background-color: var(--site-config-color-home-page-github-button-background);
157
+ color: #fff;
158
+ }
159
+
160
+ .primary-button {
161
+ background-color: var(--site-config-color-home-page-primary-button-background);
162
+ }
163
+
164
+ .margin-left {
165
+ margin-left: 10px;
166
+ }
167
+
168
+ .base-title {
169
+ font-size: 84px;
170
+ line-height: 72px;
171
+ font-weight: 500;
172
+ margin-top: 8px;
173
+ animation: fade-in .75s forwards;
174
+ }
175
+
176
+ .base-description {
177
+ font-size: 16px;
178
+ line-height: 28px;
179
+ padding-left: 4px;
180
+ font-weight: 500;
181
+ margin-bottom: 45px;
182
+ letter-spacing: 1px;
183
+ animation: fade-in .75s forwards;
184
+ }
185
+
186
+ .logo {
187
+ width: 90px;
188
+ height: 90px;
189
+ flex-shrink: 0;
190
+ margin-right: 25px;
191
+ z-index: 2;
192
+ }
193
+ }
194
+ }