hexo-theme-particlex 2.5.7 → 2.5.8

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 (5) hide show
  1. package/README.md +282 -276
  2. package/_config.yml +4 -6
  3. package/layout/index.ejs +5 -3
  4. package/package.json +2 -2
  5. package/source/css/main.css +1 -1
package/README.md CHANGED
@@ -8,15 +8,15 @@
8
8
 
9
9
  > 目前有 Full、Night 和 Maiden **两个**主题样式
10
10
 
11
- 虽然更改后只有一种了，如果你想改颜色就在 `particlex.css` 里 `Ctrl+F` 替换吧
11
+ 虽然更改后只有一种了，如果你想改颜色就在 `main.css` 里替换吧
12
12
 
13
- ## 演示
13
+ # 1. 演示
14
14
 
15
15
  - [GitHub Pages](https://argvchs.github.io)
16
16
  - [Netlify](https://argvchs.netlify.app)
17
17
  - [Vercel](https://argvchs.vercel.app)
18
18
 
19
- ## 安装
19
+ # 2. 安装
20
20
 
21
21
  ```bash
22
22
  cd themes
@@ -29,319 +29,325 @@ git clone https://github.com/argvchs/hexo-theme-particlex.git particlex --depth=
29
29
  theme: particlex
30
30
  ```
31
31
 
32
- - 关闭自带 Highlight
32
+ ## 2.1. 关闭自带代码高亮
33
33
 
34
- Hexo 有自带的 Highlight，但是和 ParticleX 的 Highlight 不兼容
34
+ Hexo 有自带的代码高亮，但是和 ParticleX 的不兼容
35
35
 
36
- ```yaml
37
- highlight:
38
- enable: false
39
- prismjs:
40
- enable: false
41
- ```
36
+ ```yaml
37
+ highlight:
38
+ enable: false
39
+ prismjs:
40
+ enable: false
41
+ ```
42
42
 
43
- 如果使用 Pandoc 还需要设置一下
43
+ 如果使用 Pandoc 还需要设置一下
44
44
 
45
- ```yaml
46
- pandoc:
47
- extra:
48
- - no-highlight:
49
- ```
45
+ ```yaml
46
+ pandoc:
47
+ extra:
48
+ - no-highlight:
49
+ ```
50
50
 
51
- - 禁用年度月度归档
51
+ ## 2.2. 禁用年度月度归档
52
52
 
53
- Hexo 会自动生成年度月度归档，可是 ParticleX 主题没有这个功能 ~~我太懒了~~
53
+ Hexo 会自动生成年度月度归档，可是 ParticleX 主题没有这个功能 ~~我太懒了~~
54
54
 
55
- ```yaml
56
- archive_generator:
57
- enabled: true
58
- per_page: 0
59
- yearly: false
60
- monthly: false
61
- daily: false
62
- ```
55
+ ```yaml
56
+ archive_generator:
57
+ enabled: true
58
+ per_page: 0
59
+ yearly: false
60
+ monthly: false
61
+ daily: false
62
+ ```
63
63
 
64
64
  修改完请 `hexo cl` 清除缓存
65
65
 
66
- ## 配置
66
+ # 3. 配置
67
+
68
+ ## 3.1. 基本配置
67
69
 
68
70
  ```yaml
69
71
  # Avatar image
70
72
  avatar: /images/avatar.jpg
71
73
 
72
- # Home page info block
73
- headBlockEnable: true
74
-
75
74
  # Home page background image
76
- background: /images/background.jpg
75
+ background:
76
+ - /images/background.jpg
77
77
  ```
78
78
 
79
- 其中 Background 可以是一个列表，打开时会随机加载一个背景
80
-
81
- - 导航栏
82
-
83
- 为了方便，主题使用的图标是 Font Awesome 6 图标
84
-
85
- ```yaml
86
- # ParticleX theme icon is adopts the Font Awesome 6
87
- # https://fontawesome.com
88
-
89
- # Main menu navigation
90
- menu:
91
- Home:
92
- name: house
93
- theme: solid
94
- link: /
95
- About:
96
- name: id-card
97
- theme: solid
98
- link: /about
99
- Archives:
100
- name: box-archive
101
- theme: solid
102
- link: /archives
103
- Categories:
104
- name: bookmark
105
- theme: solid
106
- link: /categories
107
- Tags:
108
- name: tags
109
- theme: solid
110
- link: /tags
111
- ```
112
-
113
- - 主页信息卡片
114
-
115
- `description` 支持 Markdown 格式
116
-
117
- 图标链接配置和导航栏配置相同
118
-
119
- **如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
120
-
121
- ```yaml
122
- # Side info card
123
- card:
124
- enable: true
125
- description: |
126
- Description
127
- ...
128
- iconLinks:
129
- {}
130
- friendLinks:
131
- Argvchs: https://argvchs.netlify.app
132
- ```
133
-
134
- - 页脚
135
-
136
- 考虑到博客部署在服务器并使用自己域名的情况，按规定需要在网站下边添加备案消息
137
-
138
- 如没有需要显示备案消息的可以关闭
139
-
140
- ```yaml
141
- # Footer info
142
- footer:
143
- since: 2022
144
- # Customize the server domain name ICP
145
- ICP:
146
- enable: false
147
- code:
148
- link:
149
- ```
150
-
151
- - Polyfill
152
-
153
- 使用 [Polyfill.io](https://polyfill.io) 自动根据 UA 处理新的 JS API 兼容
154
-
155
- 可以配合 [Hexo-Babel](https://github.com/argvchs/hexo-babel) 插件处理 JS 语法兼容
156
-
157
- ```yaml
158
- # Polyfill
159
- # https://polyfill.io
160
- polyfill:
161
- enable: true
162
- features:
163
- - default
164
- ```
165
-
166
- - 代码高亮
167
-
168
- 使用 Highlight.js 代码高亮
169
-
170
- 样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
171
-
172
- ```yaml
173
- # Highlight.js
174
- # https://highlightjs.org
175
- highlight:
176
- enable: true
177
- style: github
178
- ```
179
-
180
- - 数学渲染
181
-
182
- 使用 KaTeX 渲染数学公式
183
-
184
- ```yaml
185
- # Rendering math with KaTeX
186
- math:
187
- enable: false
188
- ```
79
+ 其中 Background 是一个列表，打开时会随机加载一个背景
189
80
 
190
- - 图片预览
81
+ ## 3.2. 内容配置
191
82
 
192
- 简单的点击图片放大缩小的预览
83
+ ### 3.2.1. 导航栏
193
84
 
194
- ```yaml
195
- # Image Preview
196
- preview:
197
- enable: true
198
- ```
85
+ 为了方便，主题使用的图标是 Font Awesome 6 图标
199
86
 
200
- - 文章缩略
87
+ ```yaml
88
+ # ParticleX theme icon is adopts the Font Awesome 6
89
+ # https://fontawesome.com
90
+
91
+ # Main menu navigation
92
+ menu:
93
+ Home:
94
+ name: house
95
+ theme: solid
96
+ link: /
97
+ About:
98
+ name: id-card
99
+ theme: solid
100
+ link: /about
101
+ Archives:
102
+ name: box-archive
103
+ theme: solid
104
+ link: /archives
105
+ Categories:
106
+ name: bookmark
107
+ theme: solid
108
+ link: /categories
109
+ Tags:
110
+ name: tags
111
+ theme: solid
112
+ link: /tags
113
+ ```
201
114
 
202
- 一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
115
+ ### 3.2.2. 主页信息卡片
203
116
 
204
- 但考虑到不想把缩略内容放在正文里，就添加了此参数，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置
117
+ `description` 支持 Markdown 格式
205
118
 
206
- 支持 Markdown 格式
119
+ 图标链接配置和导航栏配置相同
207
120
 
208
- ```yaml
209
- description: |
210
- Normal _Italic_ **Strong**
211
- ```
121
+ **如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
212
122
 
213
- - 文章置顶
123
+ ```yaml
124
+ # Side info card
125
+ card:
126
+ enable: true
127
+ description: |
128
+ Description
129
+ ...
130
+ iconLinks:
131
+ {}
132
+ friendLinks:
133
+ Argvchs: https://argvchs.netlify.app
134
+ ```
214
135
 
215
- 在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0
136
+ ### 3.2.3. 页脚
216
137
 
217
- - 文章加密
138
+ 考虑到博客部署在服务器并使用自己域名的情况，按规定需要在网站下边添加备案消息
218
139
 
219
- 使用 AES 加密算法，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `secret` 作为密码，**使用请安装插件 [Hexo-Helper-Crypto](https://github.com/argvchs/hexo-helper-crypto)**
140
+ 如没有需要显示备案消息的可以关闭
220
141
 
221
- ```yaml
222
- # Article encryption
223
- crypto:
142
+ ```yaml
143
+ # Footer info
144
+ footer:
145
+ since: 2022
146
+ # Customize the server domain name ICP
147
+ ICP:
224
148
  enable: false
225
- ```
149
+ code:
150
+ link:
151
+ ```
226
152
 
227
- - 搜索
153
+ ## 3.3. 功能配置
228
154
 
229
- 嵌入到 Archives 中的搜索
155
+ ### 3.3.1. Polyfill
230
156
 
231
- 目前只支持搜索文档标题（我太弱了）
157
+ 使用 [Polyfill.io](https://polyfill.io) 自动根据 UA 处理新的 JS API 兼容
232
158
 
233
- ```yaml
234
- # Search
235
- search:
236
- enable: false
237
- ```
159
+ 可以配合 [Hexo-Babel](https://github.com/argvchs/hexo-babel) 插件处理 JS 语法兼容
238
160
 
239
- - Giscus
161
+ ```yaml
162
+ # Polyfill
163
+ # https://polyfill.io
164
+ polyfill:
165
+ enable: true
166
+ features:
167
+ - default
168
+ ```
240
169
 
241
- Giscus 是一个由 GitHub Discussions 支持的评论系统
170
+ ### 3.3.2. 代码高亮
242
171
 
243
- 在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
172
+ 使用 Highlight.js 代码高亮
244
173
 
245
- ```yaml
246
- # Giscus
247
- # https://github.com/giscus/giscus
248
- giscus:
249
- enable: false
250
- src: https://giscus.app/client.js
251
- repo:
252
- repoID:
253
- category:
254
- categoryID:
255
- mapping: pathname
256
- strict: 0
257
- reactionsEnabled: 1
258
- emitMetadata: 0
259
- inputPosition: bottom
260
- theme: preferred_color_scheme
261
- lang: zh-CN
262
- ```
263
-
264
- - Gitalk
265
-
266
- Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
267
-
268
- 考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于多个网站的评论
269
-
270
- **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
271
-
272
- 由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
273
-
274
- ```yaml
275
- # Gitalk
276
- # https://github.com/gitalk/gitalk
277
- gitalk:
278
- enable: false
279
- clientID: # Default ClientID
280
- clientSecret: # Default ClientSecret
281
- repo: # The name of repository of store comments
282
- owner: # GitHub repo owner
283
- admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
284
- language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
285
- proxy: # CORS proxy
286
- sites: # Sites
287
- {}
288
- # www.example.com:
289
- # clientID:
290
- # clientSecret:
291
- ```
292
-
293
- - Waline
294
-
295
- Waline 是一个简单、安全的评论系统
296
-
297
- 详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
298
-
299
- **注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
300
-
301
- ```yaml
302
- # Waline
303
- # https://github.com/walinejs/waline
304
- waline:
305
- enable: false
306
- serverURL: # Waline server address url, you should set this to your own link
307
- locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
308
- {}
309
- commentCount: true # If false, comment count will only be displayed in post page, not in home page
310
- pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
311
- emoji: # Custom emoji
312
- - https://unpkg.com/@waline/emojis@1.2.0/weibo
313
- - https://unpkg.com/@waline/emojis@1.2.0/alus
314
- - https://unpkg.com/@waline/emojis@1.2.0/bilibili
315
- - https://unpkg.com/@waline/emojis@1.2.0/qq
316
- - https://unpkg.com/@waline/emojis@1.2.0/tieba
317
- - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
318
- meta: # Comment information, valid meta are nick, mail and link
319
- - nick
320
- - mail
321
- - link
322
- requiredMeta: # Set required meta field, e.g.: [nick] | [nick, mail]
323
- - nick
324
- lang: zh-CN # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
325
- wordLimit: 0 # Word limit, no limit when setting to 0
326
- login: enable # Whether enable login, can choose from 'enable', 'disable' and 'force'
327
- pageSize: 10 # Comment per page
328
- ```
329
-
330
- - Twikoo
331
-
332
- Twikoo 是一个一个简洁、安全、免费的静态网站评论系统
333
-
334
- ```yaml
335
- # Twikoo
336
- # https://github.com/imaegoo/twikoo
337
- twikoo:
338
- enable: false
339
- envID:
340
- region:
341
- path: location.pathname
342
- lang: zh-CN
343
- ```
174
+ 样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
175
+
176
+ ```yaml
177
+ # Highlight.js
178
+ # https://highlightjs.org
179
+ highlight:
180
+ enable: true
181
+ style: github
182
+ ```
183
+
184
+ ### 3.3.3. 数学渲染
185
+
186
+ 使用 KaTeX 渲染数学公式
187
+
188
+ ```yaml
189
+ # KaTeX math rendering
190
+ math:
191
+ enable: false
192
+ ```
193
+
194
+ ### 3.3.4. 图片预览
195
+
196
+ 简单的点击图片放大缩小的预览
197
+
198
+ ```yaml
199
+ # Image preview
200
+ preview:
201
+ enable: true
202
+ ```
203
+
204
+ ### 3.3.5. 文章缩略
205
+
206
+ 一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
207
+
208
+ 但考虑到不想把缩略内容放在正文里，就添加了此参数，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置
209
+
210
+ 支持 Markdown 格式
211
+
212
+ ```yaml
213
+ description: |
214
+ Normal _Italic_ **Strong**
215
+ ```
216
+
217
+ ### 3.3.6. 文章置顶
218
+
219
+ 在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0
220
+
221
+ ### 3.3.7. 文章加密
222
+
223
+ 使用 AES 加密算法，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `secret` 作为密码，**使用请安装插件 [Hexo-Helper-Crypto](https://github.com/argvchs/hexo-helper-crypto)**
224
+
225
+ ```yaml
226
+ # Article encryption
227
+ crypto:
228
+ enable: false
229
+ ```
230
+
231
+ ### 3.3.8. 搜索
232
+
233
+ 嵌入到 Archives 中的搜索
234
+
235
+ 目前只支持搜索文档标题
236
+
237
+ ```yaml
238
+ # Search
239
+ search:
240
+ enable: false
241
+ ```
242
+
243
+ ## 3.4. 评论配置
244
+
245
+ ### 3.4.1. Giscus
246
+
247
+ Giscus 是一个由 GitHub Discussions 支持的评论系统
248
+
249
+ 在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
250
+
251
+ ```yaml
252
+ # Giscus
253
+ # https://github.com/giscus/giscus
254
+ giscus:
255
+ enable: false
256
+ src: https://giscus.app/client.js
257
+ repo:
258
+ repoID:
259
+ category:
260
+ categoryID:
261
+ mapping: pathname
262
+ strict: 0
263
+ reactionsEnabled: 1
264
+ emitMetadata: 0
265
+ inputPosition: bottom
266
+ theme: preferred_color_scheme
267
+ lang: zh-CN
268
+ ```
269
+
270
+ ### 3.4.2. Gitalk
271
+
272
+ Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
273
+
274
+ 考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于多个网站的评论
275
+
276
+ **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
277
+
278
+ 由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.netlify.app/2022/07/04/build-cors-anywhere)
279
+
280
+ ```yaml
281
+ # Gitalk
282
+ # https://github.com/gitalk/gitalk
283
+ gitalk:
284
+ enable: false
285
+ clientID: # Default ClientID
286
+ clientSecret: # Default ClientSecret
287
+ repo: # The name of repository of store comments
288
+ owner: # GitHub repo owner
289
+ admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
290
+ language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
291
+ proxy: # CORS proxy
292
+ sites: # Sites
293
+ {}
294
+ # www.example.com:
295
+ # clientID:
296
+ # clientSecret:
297
+ ```
298
+
299
+ ### 3.4.3. Waline
300
+
301
+ Waline 是一个简单、安全的评论系统
302
+
303
+ 详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
304
+
305
+ **注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
306
+
307
+ ```yaml
308
+ # Waline
309
+ # https://github.com/walinejs/waline
310
+ waline:
311
+ enable: false
312
+ serverURL: # Waline server address url, you should set this to your own link
313
+ locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
314
+ {}
315
+ commentCount: true # If false, comment count will only be displayed in post page, not in home page
316
+ pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
317
+ emoji: # Custom emoji
318
+ - https://unpkg.com/@waline/emojis@1.2.0/weibo
319
+ - https://unpkg.com/@waline/emojis@1.2.0/alus
320
+ - https://unpkg.com/@waline/emojis@1.2.0/bilibili
321
+ - https://unpkg.com/@waline/emojis@1.2.0/qq
322
+ - https://unpkg.com/@waline/emojis@1.2.0/tieba
323
+ - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
324
+ meta: # Comment information, valid meta are nick, mail and link
325
+ - nick
326
+ - mail
327
+ - link
328
+ requiredMeta: # Set required meta field, e.g.: [nick] | [nick, mail]
329
+ - nick
330
+ lang: zh-CN # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
331
+ wordLimit: 0 # Word limit, no limit when setting to 0
332
+ login: enable # Whether enable login, can choose from 'enable', 'disable' and 'force'
333
+ pageSize: 10 # Comment per page
334
+ ```
335
+
336
+ ### 3.4.4. Twikoo
337
+
338
+ Twikoo 是一个一个简洁、安全、免费的静态网站评论系统
339
+
340
+ ```yaml
341
+ # Twikoo
342
+ # https://github.com/imaegoo/twikoo
343
+ twikoo:
344
+ enable: false
345
+ envID:
346
+ region:
347
+ path: location.pathname
348
+ lang: zh-CN
349
+ ```
344
350
 
345
- ## 写在最后
351
+ # 4. 写在最后
346
352
 
347
353
  本项目采用 MIT 开源许可证，欢迎大家贡献，你可以随意打开一个 Issue 来进行提问，有任何改进想法都可以进行 Fork，期待您的 Pull Request！
package/_config.yml CHANGED
@@ -4,11 +4,9 @@
4
4
  # Avatar image
5
5
  avatar: /images/avatar.jpg
6
6
 
7
- # Home page info block
8
- headBlockEnable: true
9
-
10
7
  # Home page background image
11
- background: /images/background.jpg
8
+ background:
9
+ - /images/background.jpg
12
10
 
13
11
  # ParticleX theme icon is adopts the Font Awesome 6
14
12
  # https://fontawesome.com
@@ -69,11 +67,11 @@ highlight:
69
67
  enable: true
70
68
  style: github
71
69
 
72
- # Rendering math with KaTeX
70
+ # KaTeX math rendering
73
71
  math:
74
72
  enable: false
75
73
 
76
- # Image Preview
74
+ # Image preview
77
75
  preview:
78
76
  enable: true
79
77
 
package/layout/index.ejs CHANGED
@@ -1,6 +1,9 @@
1
1
  <div id="home-head">
2
- <div id="home-background" ref="homeBackground" data-image="<%- url_for(theme.background) %>"></div>
3
- <% if (theme.headBlockEnable) { %>
2
+ <div
3
+ id="home-background"
4
+ ref="homeBackground"
5
+ data-image="<%- theme.background.map(i => url_for(i)) %>"
6
+ ></div>
4
7
  <div id="home-info" @click="homeClick">
5
8
  <span class="loop"></span>
6
9
  <span class="loop"></span>
@@ -14,7 +17,6 @@
14
17
  </div>
15
18
  </span>
16
19
  </div>
17
- <% } %>
18
20
  </div>
19
21
  <div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
20
22
  <div id="home-posts">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hexo-theme-particlex",
3
- "version": "2.5.7",
3
+ "version": "2.5.8",
4
4
  "description": "A concise Hexo theme, based on Particle.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "homepage": "https://github.com/argvchs/hexo-theme-particlex#readme",
23
23
  "dependencies": {
24
- "hexo-helper-crypto": "^1.1.0",
24
+ "hexo-helper-crypto": "^1.1.2",
25
25
  "hexo-renderer-ejs": "^2.0.0"
26
26
  },
27
27
  "scripts": {
package/source/css/main.css CHANGED
@@ -363,8 +363,8 @@
363
363
  width: 50vmin;
364
364
  }
365
365
  #main {
366
+ display: grid;
366
367
  margin-right: calc(100% - 100vw);
367
- overflow: auto;
368
368
  }
369
369
  #menu {
370
370
  background: #92cafa;