hexo-theme-particlex 2.2.1 → 2.2.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.
@@ -1,497 +1,415 @@
1
1
  @keyframes into {
2
- 0% {
2
+ from {
3
3
  opacity: 0;
4
4
  transform: scale(1.1);
5
5
  }
6
- 100% {
6
+ to {
7
7
  opacity: 1;
8
8
  transform: scale(1);
9
9
  }
10
10
  }
11
11
  @keyframes loading {
12
- 0% {
12
+ from {
13
13
  opacity: 0;
14
14
  }
15
- 100% {
15
+ to {
16
16
  opacity: 1;
17
17
  }
18
18
  }
19
19
  @keyframes loop1 {
20
- 0% {
20
+ from {
21
21
  transform: rotate(30deg);
22
22
  }
23
- 100% {
23
+ to {
24
24
  transform: rotate(390deg);
25
25
  }
26
26
  }
27
27
  @keyframes loop2 {
28
- 0% {
28
+ from {
29
29
  transform: rotate(60deg);
30
30
  }
31
- 100% {
31
+ to {
32
32
  transform: rotate(420deg);
33
33
  }
34
34
  }
35
35
  @keyframes loop3 {
36
- 0% {
36
+ from {
37
37
  transform: rotate(90deg);
38
38
  }
39
- 100% {
39
+ to {
40
40
  transform: rotate(450deg);
41
41
  }
42
42
  }
43
43
  @keyframes loop4 {
44
- 0% {
44
+ from {
45
45
  transform: rotate(120deg);
46
46
  }
47
- 100% {
47
+ to {
48
48
  transform: rotate(480deg);
49
49
  }
50
50
  }
51
- body {
51
+ #archives {
52
+ margin: auto;
53
+ padding: 20px;
54
+ position: relative;
55
+ top: 100px;
56
+ }
57
+ #archives .categories-tags {
58
+ margin: auto;
59
+ margin-bottom: 50px;
60
+ max-width: 900px;
61
+ text-align: center;
52
62
  width: 100%;
53
- background: #f6f8fa;
54
- color: #000000d9;
55
- font-family: "Lexend", "Noto Sans SC", sans-serif;
56
- font-size: 14px;
57
- font-weight: 500;
58
- overflow-x: hidden;
59
63
  }
60
- * {
61
- margin: 0;
62
- padding: 0;
63
- word-wrap: break-word;
64
- word-break: keep-all;
65
- scrollbar-width: thin;
66
- scrollbar-color: #8ab5ff #e6efff;
64
+ #archives .categories-tags span {
65
+ display: inline-block;
66
+ margin: 10px;
67
67
  }
68
- ul {
69
- margin-top: 15px !important;
70
- margin-bottom: 10px !important;
71
- line-height: 1.7;
68
+ #archives .categories-tags span .icon {
69
+ color: #fff;
70
+ margin-left: 0;
71
+ margin-right: 10px;
72
72
  }
73
- ul li {
74
- margin: 8px auto;
73
+ #archives .categories-tags span a {
74
+ border: #ffffff80 1px solid;
75
+ border-radius: 10px;
76
+ color: #fff;
77
+ padding: 10px 15px;
78
+ transition: background 0.25s, border 0.25s, color 0.25s;
75
79
  }
76
- ol {
77
- margin-top: 15px !important;
78
- margin-bottom: 10px !important;
79
- line-height: 1.7;
80
+ #archives .categories-tags span a:hover {
81
+ background: #fff !important;
82
+ border: #a5c2f5 1px solid;
83
+ color: #5c6b72;
80
84
  }
81
- ol li {
82
- margin: 8px auto;
85
+ #archives .category,
86
+ #archives .tags .tag,
87
+ .article .info .category,
88
+ .article .info .tags,
89
+ .article .info .tags .tag {
90
+ display: inline-block;
91
+ margin-right: 10px;
83
92
  }
84
- h1 {
85
- margin: 15px 0;
86
- font-weight: bold;
87
- font-family: "Lexend", "Noto Sans SC", sans-serif;
88
- color: #1e3e3f;
89
- font-size: 30px;
93
+ #archives h3 {
94
+ margin: 10px 0;
90
95
  }
91
- h2 {
92
- margin: 15px 0;
93
- font-weight: bold;
94
- font-family: "Lexend", "Noto Sans SC", sans-serif;
95
- color: #1e3e3f;
96
- font-size: 27px;
96
+ #card-div {
97
+ position: sticky;
98
+ top: 80px;
97
99
  }
98
- h3 {
99
- margin: 15px 0;
100
- font-weight: bold;
101
- font-family: "Lexend", "Noto Sans SC", sans-serif;
102
- color: #1e3e3f;
103
- font-size: 24px;
100
+ #crypto {
101
+ margin: 50px auto 0;
104
102
  }
105
- h4 {
106
- margin: 15px 0;
107
- font-weight: bold;
108
- font-family: "Lexend", "Noto Sans SC", sans-serif;
109
- color: #1e3e3f;
110
- font-size: 21px;
103
+ #crypto.fail {
104
+ border-color: #ea4a5a;
105
+ color: #ea4a5a;
111
106
  }
112
- h5 {
113
- margin: 15px 0;
114
- font-weight: bold;
115
- font-family: "Lexend", "Noto Sans SC", sans-serif;
116
- color: #1e3e3f;
117
- font-size: 18px;
107
+ #crypto.fail:focus {
108
+ box-shadow: 0 0 0 3px #ea4a5a4d;
118
109
  }
119
- p {
120
- margin: 15px 0;
121
- line-height: 1.7;
110
+ #crypto.success {
111
+ border-color: #34d058;
112
+ color: #34d058;
122
113
  }
123
- a {
124
- text-decoration: none;
114
+ #home-background {
115
+ background-position: center;
116
+ background-repeat: no-repeat;
117
+ background-size: cover;
118
+ position: absolute;
119
+ height: 100vh;
120
+ left: 0;
121
+ top: 0;
122
+ width: 100vw;
123
+ z-index: -1;
125
124
  }
126
- a:hover {
127
- opacity: 0.8;
125
+ #home-card {
126
+ position: relative;
127
+ width: 300px;
128
128
  }
129
- img {
129
+ #home-card .card-style {
130
+ background: #fff;
131
+ border: none;
130
132
  border-radius: 10px;
133
+ box-shadow: 0 0 20px #d9d9d980;
134
+ padding: 25px 0;
135
+ text-align: center;
131
136
  }
132
- hr {
133
- border-style: dashed;
134
- border-width: 2px;
135
- border-left: none;
136
- border-right: none;
137
- border-bottom: none;
137
+ #home-card .card-style .avatar {
138
+ border: #f1f1f1 solid 3px;
139
+ border-radius: 50%;
140
+ height: 140px;
141
+ margin: auto;
142
+ text-align: center;
143
+ width: 140px;
138
144
  }
139
- blockquote {
140
- padding: 0.1px 15px;
141
- margin: 15px 0;
142
- border-radius: 3px;
143
- border-left: 3px solid #1e3e3f;
144
- background: #d9e8ff6b;
145
+ #home-card .card-style .avatar img {
146
+ border-radius: 50%;
147
+ height: 100%;
148
+ width: 100%;
145
149
  }
146
- button,
147
- img,
148
- iframe,
149
- #home-head,
150
- #menu,
151
- .math,
152
- .go-post,
153
- .page-current,
154
- .categories-tags span a,
155
- .friend-link a,
156
- pre .language,
157
- pre .copycode {
158
- user-select: none;
150
+ #home-card .card-style .avatar:hover img {
151
+ transform: rotate(360deg);
159
152
  }
160
- #home-posts-wrap,
161
- #archives,
162
- .article,
163
- footer .footer-wrap {
164
- box-sizing: border-box;
153
+ #home-card .card-style .description {
154
+ margin: 20px auto;
155
+ width: 85%;
165
156
  }
166
- .icon {
167
- margin-right: 5px;
157
+ #home-card .card-style .friend-links .friend-link {
158
+ margin-bottom: 5px;
159
+ }
160
+ #home-card .card-style .friend-links a {
161
+ display: block;
162
+ border-radius: 5px;
168
163
  color: #5c6b72;
164
+ padding: 8px 0;
169
165
  }
170
- .into-enter-active {
171
- animation: into 0.6s;
166
+ #home-card .card-style .icon-links .icon-link {
167
+ margin: 5px;
172
168
  }
173
- .into-leave-active {
174
- animation: into 0.6s;
169
+ #home-card .card-style .icon-links a {
170
+ border-radius: 5px;
171
+ color: #5c6b72;
172
+ font-size: 18px;
173
+ padding: 5px;
175
174
  }
176
- .slide-enter-active,
177
- .slide-leave-active {
178
- transition: margin-top 0.3s, opacity 0.3s;
175
+ #home-card .card-style .icon-links a:hover,
176
+ #home-card .card-style .friend-links a:hover {
177
+ background: #66afef;
178
+ color: #fff;
179
179
  }
180
- .slide-enter-from,
181
- .slide-leave-to {
182
- margin-top: -300px;
183
- opacity: 0;
180
+ #home-card .card-style .icon-links,
181
+ #home-card .card-style .friend-links {
182
+ border-top: #cdcdcd solid 1px;
183
+ margin: 10px auto;
184
+ padding-top: 10px;
185
+ width: 85%;
186
+ }
187
+ #home-card .card-style .name {
188
+ color: #1e3e3f;
189
+ font-size: 16px;
190
+ font-weight: bold;
191
+ margin: 20px auto;
184
192
  }
185
193
  #home-head {
186
- width: 100vw;
187
- height: 100vh;
188
- position: relative;
189
194
  display: flex;
190
- }
191
- #home-head .home-info {
195
+ height: 100vh;
192
196
  position: relative;
193
- margin: auto;
197
+ width: 100vw;
194
198
  }
195
199
  #home-head .home-info .info {
196
- position: absolute;
197
- display: flex;
198
200
  align-items: center;
201
+ border-radius: 50%;
202
+ color: #333;
203
+ display: flex;
199
204
  justify-content: center;
205
+ position: absolute;
200
206
  text-align: center;
201
- color: #333;
202
- border-radius: 50%;
203
207
  }
204
208
  #home-head .home-info .loop:nth-child(1) {
205
- border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
209
+ animation: loop1 10s linear infinite;
206
210
  background: #fff;
211
+ border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
207
212
  opacity: 0.3;
208
213
  transform: rotate(30deg);
209
- animation: loop1 10s linear infinite;
210
214
  }
211
215
  #home-head .home-info .loop:nth-child(2) {
212
- border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
216
+ animation: loop2 15s linear infinite;
213
217
  background: #fff;
218
+ border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
214
219
  opacity: 0.45;
215
220
  transform: rotate(60deg);
216
- animation: loop2 15s linear infinite;
217
221
  }
218
222
  #home-head .home-info .loop:nth-child(3) {
223
+ animation: loop3 10s linear infinite;
224
+ background: #fff;
219
225
  border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
220
226
  opacity: 0.3;
221
- background: #fff;
222
227
  transform: rotate(90deg);
223
- animation: loop3 10s linear infinite;
224
228
  }
225
229
  #home-head .home-info .loop:nth-child(4) {
230
+ animation: loop4 15s linear infinite;
231
+ background: #fff;
226
232
  border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
227
233
  opacity: 0.45;
228
- background: #fff;
229
234
  transform: rotate(120deg);
230
- animation: loop4 15s linear infinite;
231
- }
232
- #home-background {
233
- position: absolute;
234
- z-index: -1;
235
- top: 0;
236
- left: 0;
237
- width: 100vw;
238
- height: 100vh;
239
- background-position: center;
240
- background-size: cover;
241
- background-repeat: no-repeat;
242
- }
243
- #home-posts-wrap {
244
- position: relative;
245
- display: flex;
246
- margin: auto;
247
- padding: 20px;
248
- background: transparent;
249
- border-radius: 10px;
250
235
  }
236
+ #home-head .home-info,
251
237
  #home-posts {
252
- position: relative;
253
238
  margin: auto;
239
+ position: relative;
254
240
  }
255
- #home-posts .post-title {
256
- text-align: center;
257
- color: #66afef;
258
- text-decoration: none;
241
+ #home-posts .page-current {
242
+ align-items: center;
243
+ color: #999;
244
+ display: flex;
245
+ justify-content: center;
246
+ margin-top: 50px;
247
+ width: 100%;
248
+ }
249
+ #home-posts .page-current .current {
250
+ border-radius: 5px;
251
+ color: #da0a51;
252
+ display: inline-block;
253
+ height: 35px;
254
+ line-height: 35px;
255
+ margin: 0 7px;
256
+ padding: 5px;
257
+ width: 35px;
258
+ }
259
+ #home-posts .page-current .page-index {
260
+ font-weight: bold;
261
+ text-align: center;
262
+ width: 300px;
263
+ }
264
+ #home-posts .page-current .page-num,
265
+ #home-posts .page-current .page-omit {
266
+ border-radius: 5px;
267
+ display: inline-block;
268
+ height: 35px;
269
+ line-height: 35px;
270
+ margin: 0 7px;
271
+ padding: 5px;
272
+ width: 35px;
273
+ }
274
+ #home-posts .page-current .page-num:hover {
275
+ background: #66afef;
276
+ color: #fff;
277
+ }
278
+ #home-posts .page-current .prev,
279
+ #home-posts .page-current .next {
280
+ text-align: center;
281
+ width: 50px;
282
+ }
283
+ #home-posts .page-current a {
284
+ color: #999;
259
285
  }
260
286
  #home-posts .post {
261
- position: relative;
262
- border-radius: 20px;
263
287
  background: #fff;
288
+ border-radius: 20px;
264
289
  box-shadow: 0 0 20px #d9d9d980;
265
- transition: all 0.25s;
266
- }
267
- #home-posts .post:hover {
268
- box-shadow: 0 0 5px #d9d9d9;
269
- transform: translate(-5px, -5px);
270
- }
271
- #home-posts .post a {
272
- text-decoration: none;
290
+ position: relative;
291
+ transition: box-shadow 0.25s, transform 0.25s;
273
292
  }
274
293
  #home-posts .post .category-and-date {
275
- width: 100%;
276
- margin-top: 15px;
277
294
  color: #5c6b72;
295
+ margin-top: 15px;
278
296
  text-align: center;
297
+ width: 100%;
279
298
  }
280
299
  #home-posts .post .category-and-date .category {
281
300
  display: inline-block;
282
301
  margin-right: 25px;
283
302
  }
284
- #home-posts .post .category-and-date .category a {
303
+ #home-posts .post .category-and-date .category a,
304
+ #archives a,
305
+ #archives .tag-icon,
306
+ #archives .item-time,
307
+ #archives .categories-tags span a:hover .icon,
308
+ .article .info a {
285
309
  color: #5c6b72;
286
310
  }
287
- #home-posts .post .category-and-date .date {
311
+ #home-posts .post .category-and-date .date,
312
+ #archives .tags {
313
+ display: inline-block;
314
+ }
315
+ #home-posts .post .category-and-date .special {
288
316
  display: inline-block;
317
+ margin-left: 25px;
289
318
  }
290
319
  #home-posts .post .excerpt {
291
320
  color: #1e3e3f;
292
321
  }
293
- #home-posts .post .post-tags {
294
- line-height: 1.7;
295
- }
296
- #home-posts .post .post-tags a {
297
- font-size: 14px;
298
- }
299
- #home-posts .post .post-tags .tag {
300
- display: inline-block;
301
- margin-right: 10px;
302
- font-weight: bold;
303
- }
304
322
  #home-posts .post .go-post {
305
323
  background: linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%);
306
324
  border: 0;
307
- padding: 10px 24px;
308
- color: #fff;
309
- font-weight: bold;
310
325
  border-radius: 20px 0;
326
+ bottom: -5px;
327
+ box-shadow: 2px 2px 10px 0 #ffbbf47a;
328
+ color: #fff;
311
329
  font-size: 14px;
330
+ font-weight: bold;
331
+ padding: 10px 24px;
312
332
  position: absolute;
313
- bottom: -5px;
314
333
  right: -5px;
315
- transition: all 0.25s ease-out;
316
- box-shadow: 2px 2px 10px 0 #ffbbf47a;
334
+ transition: box-shadow 0.25s ease-out, right 0.25s ease-out;
317
335
  }
318
336
  #home-posts .post .go-post:hover {
319
- right: -7px;
320
337
  box-shadow: -2px -2px 10px 0 #9abbf77a;
338
+ right: -7px;
321
339
  }
322
- #home-posts .page-current {
323
- display: flex;
324
- width: 100%;
325
- align-items: center;
326
- justify-content: center;
327
- color: #999;
328
- margin-top: 50px;
329
- }
330
- #home-posts .page-current .prev {
331
- width: 50px;
332
- text-align: center;
333
- }
334
- #home-posts .page-current .next {
335
- width: 50px;
336
- text-align: center;
337
- }
338
- #home-posts .page-current .page-index {
339
- width: 300px;
340
- text-align: center;
341
- font-weight: bold;
342
- }
343
- #home-posts .page-current .current {
344
- color: #da0a51;
345
- display: inline-block;
346
- width: 35px;
347
- height: 35px;
348
- border-radius: 5px;
349
- line-height: 35px;
350
- padding: 5px;
351
- margin: 0 7px;
352
- }
353
- #home-posts .page-current a {
354
- color: #999;
355
- text-decoration: none;
356
- }
357
- #home-posts .page-current .page-num {
340
+ #home-posts .post .post-tags .tag {
358
341
  display: inline-block;
359
- width: 35px;
360
- height: 35px;
361
- border-radius: 5px;
362
- line-height: 35px;
363
- padding: 5px;
364
- margin: 0 7px;
342
+ font-weight: bold;
343
+ margin-right: 10px;
365
344
  }
366
- #home-posts .page-current .page-num:hover {
367
- background: #92cafa;
368
- color: #fff;
345
+ #home-posts .post .post-tags a {
346
+ font-size: 14px;
369
347
  }
370
- #home-posts .page-current .page-omit {
371
- display: inline-block;
372
- width: 35px;
373
- height: 35px;
374
- border-radius: 5px;
375
- line-height: 35px;
376
- padding: 5px;
377
- margin: 0 7px;
348
+ #home-posts .post .post-tags,
349
+ #archives .info,
350
+ .article .info {
351
+ line-height: 1.7;
378
352
  }
379
- #home-card {
380
- position: relative;
381
- width: 300px;
353
+ #home-posts .post-title {
354
+ color: #66afef;
355
+ text-align: center;
382
356
  }
383
- #card-div {
384
- position: sticky;
385
- top: 80px;
357
+ #home-posts .post:hover {
358
+ box-shadow: 0 0 5px #d9d9d9;
359
+ transform: translate(-5px, -5px);
386
360
  }
387
- #home-card .card-style {
388
- padding: 25px 0;
389
- background: #fff;
361
+ #home-posts-wrap {
362
+ background: transparent;
390
363
  border-radius: 10px;
391
- text-align: center;
392
- border: none;
393
- box-shadow: 0 0 20px #d9d9d980;
394
- }
395
- #home-card .card-style .avatar {
396
- text-align: center;
364
+ display: flex;
397
365
  margin: auto;
398
- width: 140px;
399
- height: 140px;
400
- border-radius: 50%;
401
- border: #f1f1f1 solid 3px;
402
- transition: all 0.25s;
403
- }
404
- #home-card .card-style .avatar:hover img {
405
- transform: rotate(360deg);
406
- }
407
- #home-card .card-style .avatar img {
408
- border-radius: 50%;
409
- width: 100%;
410
- height: 100%;
411
- }
412
- #home-card .card-style .name {
413
- margin: 20px auto;
414
- font-size: 16px;
415
- font-weight: bold;
416
- color: #1e3e3f;
417
- }
418
- #home-card .card-style .description {
419
- margin: 20px auto;
420
- width: 85%;
421
- }
422
- #home-card .card-style .icon-links {
423
- width: 85%;
424
- margin: 10px auto;
425
- padding-top: 10px;
426
- border-top: #cdcdcd solid 1px;
427
- }
428
- #home-card .card-style .icon-links a {
429
- color: #5c6b72;
430
- font-size: 18px;
431
- padding: 3px 5px;
432
- border-radius: 5px;
433
- }
434
- #home-card .card-style .icon-links a:hover {
435
- color: #fff;
436
- background: #66afef;
437
- }
438
- #home-card .card-style .icon-links .icon-link {
439
- margin: 5px;
440
- }
441
- #home-card .card-style .friend-links {
442
- width: 85%;
443
- margin: 10px auto;
444
- padding-top: 10px;
445
- border-top: #cdcdcd solid 1px;
366
+ padding: 20px;
367
+ position: relative;
446
368
  }
447
- #home-card .card-style .friend-links .friend-link a {
448
- display: inline-block;
449
- width: 100%;
450
- margin-bottom: 5px;
451
- line-height: 30px;
452
- color: #5c6b72;
453
- border-radius: 15px;
369
+ #home-posts-wrap,
370
+ #archives,
371
+ .article,
372
+ footer .footer-wrap {
373
+ box-sizing: border-box;
454
374
  }
455
- #home-card .card-style .friend-links .friend-link a:hover {
456
- color: #fff;
457
- background: #66afef;
375
+ #main {
376
+ margin-right: calc(100% - 100vw);
458
377
  }
459
378
  #menu {
460
- z-index: 10005;
461
- position: fixed;
462
- width: 100%;
463
- line-height: 50px;
464
- font-weight: bold;
465
- transition: all 0.25s ease-out;
379
+ background: #92cafa;
466
380
  box-shadow: 0 -1px 10px 0 #9e9e9e4d;
381
+ font-weight: bold;
382
+ line-height: 50px;
383
+ position: fixed;
467
384
  top: 0;
468
- background: #92cafa;
385
+ transition: background 0.25s ease-out, top 0.25s ease-out;
386
+ width: 100%;
387
+ z-index: 10005;
469
388
  }
470
389
  #menu .desktop-menu {
471
390
  height: 50px;
472
391
  }
473
392
  #menu .desktop-menu .title {
393
+ color: #555;
474
394
  display: inline-block;
475
- margin-left: 30px;
476
395
  font-family: "Lexend", "Noto Sans SC", sans-serif;
396
+ margin-left: 30px;
477
397
  text-transform: uppercase;
478
- color: #555;
479
398
  }
480
399
  #menu .desktop-menu a {
400
+ color: #555;
481
401
  display: inline-block;
482
402
  margin-left: 30px;
483
- text-decoration: none;
484
- color: #555;
485
403
  }
486
404
  #menu .desktop-menu a span {
487
405
  display: inline-block;
488
406
  position: relative;
489
407
  }
490
408
  #menu .desktop-menu a span img {
409
+ height: 20px;
491
410
  position: relative;
492
411
  top: 3px;
493
412
  width: 20px;
494
- height: 20px;
495
413
  }
496
414
  #menu .desktop-menu a span:nth-child(1) {
497
415
  margin-right: 5px;
@@ -500,434 +418,271 @@ footer .footer-wrap {
500
418
  min-height: 50px;
501
419
  text-align: center;
502
420
  }
503
- #menu .phone-menu .title {
504
- z-index: 10004;
505
- cursor: pointer;
506
- text-transform: uppercase;
507
- color: #555;
508
- }
509
- #menu .phone-menu .items {
510
- padding: 10px 0 20px;
511
- z-index: 10003;
421
+ #menu .phone-menu .curtain {
422
+ height: 100%;
423
+ left: 0;
424
+ position: fixed;
425
+ top: 0;
426
+ width: 100%;
427
+ z-index: -1;
512
428
  }
513
- #menu .phone-menu .items a {
514
- color: #555;
429
+ #menu .phone-menu .items {
430
+ padding: 10px 0 20px;
431
+ position: relative;
432
+ z-index: 10003;
515
433
  }
516
434
  #menu .phone-menu .items .item {
435
+ display: flex;
436
+ justify-content: center;
437
+ margin: auto;
517
438
  min-width: 200px;
518
439
  width: 80%;
440
+ }
441
+ #menu .phone-menu .items a {
442
+ color: #555;
443
+ }
444
+ #menu .phone-menu .title {
445
+ color: #555;
446
+ cursor: pointer;
447
+ text-transform: uppercase;
448
+ position: relative;
449
+ z-index: 10004;
450
+ }
451
+ #search-bar {
452
+ margin: 0 auto 50px;
453
+ }
454
+ #search-mask {
455
+ background: #f6f8fa;
456
+ height: 150px;
519
457
  margin: auto;
458
+ margin-bottom: -25px;
459
+ margin-top: -125px;
460
+ position: relative;
461
+ width: 100%;
462
+ }
463
+ #showimg {
464
+ align-items: center;
465
+ background-color: #fffc;
520
466
  display: flex;
467
+ height: 100%;
521
468
  justify-content: center;
522
- }
523
- #menu .phone-menu .curtain {
469
+ left: 0;
470
+ opacity: 0;
524
471
  position: fixed;
525
- z-index: -1;
526
472
  top: 0;
527
- left: 0;
473
+ transition: opacity 0.25s, visibility 0.25s;
474
+ visibility: hidden;
528
475
  width: 100%;
529
- height: 100%;
530
- }
531
- .hidden-menu {
532
- top: -70px !important;
533
- }
534
- .menu-color {
535
- background: #0003 !important;
536
- box-shadow: 0 -1px 10px 0 #fff0 !important;
537
- }
538
- .menu-color .title {
539
- color: #fff !important;
540
- }
541
- .menu-color a {
542
- color: #fff !important;
543
- }
544
- .content {
545
- transition: all 0.5s;
546
- }
547
- .content code {
548
- font-family: "Fira Code", "Noto Sans SC", monospace;
549
- background: #bddcf76b;
550
- padding: 4px 8px;
551
- border-radius: 4px;
552
- line-height: 2.5;
553
- font-size: 14px;
554
- color: #4b616b;
476
+ z-index: 10006;
555
477
  }
556
- .content pre {
557
- box-shadow: 0 2px 12px 0 #0000001a;
558
- border: 1px solid #ebeef5;
559
- margin: 25px 0;
560
- border-radius: 15px;
478
+ #showimg-content {
479
+ box-shadow: 0 0 50px 10px #d9d9d980;
480
+ margin: auto;
481
+ max-height: 95%;
482
+ max-width: 95%;
561
483
  position: relative;
562
484
  }
563
- .content .code-content {
564
- overflow: auto;
565
- padding: 50px 30px 20px;
566
- }
567
- .content pre code {
568
- background: none;
485
+ * {
486
+ margin: 0;
569
487
  padding: 0;
488
+ scrollbar-color: #8ab5ff #e6efff;
489
+ scrollbar-width: thin;
490
+ word-break: keep-all;
491
+ word-wrap: break-word;
570
492
  }
571
- .content h1 {
572
- text-align: left !important;
573
- margin: 18px 0;
574
- }
575
- .content h2 {
576
- text-align: left !important;
577
- margin: 18px 0;
578
- }
579
- .content h3 {
580
- text-align: left !important;
581
- margin: 18px 0;
582
- }
583
- .content h4 {
584
- text-align: left !important;
585
- margin: 18px 0;
586
- }
587
- .content h5 {
588
- text-align: left !important;
589
- margin: 18px 0;
590
- }
591
- .content a {
592
- color: #66afef;
593
- text-decoration: none;
594
- }
595
- .content b {
596
- line-height: 2.5;
597
- font-weight: bold;
598
- }
599
- .content strong {
600
- line-height: 2.5;
601
- font-weight: bold;
602
- }
603
- .content img {
604
- display: block;
605
- max-width: 70%;
606
- margin: 0 auto;
607
- }
608
- .content table tr th {
609
- padding: 8px 20px;
493
+ .article {
610
494
  color: #1e3e3f;
495
+ font-size: 15px;
496
+ margin: auto;
497
+ padding: 20px;
498
+ position: relative;
499
+ top: 100px;
611
500
  }
612
- .content table tr th:nth-child(2n) {
613
- background: #a3ddfb;
614
- }
615
- .content table tr th:nth-child(2n-1) {
616
- background: #a3ddfb;
617
- }
618
- .content table tr td {
619
- padding: 8px 20px;
620
- }
621
- .content table tr td:nth-child(2n) {
622
- background: #c7e0fb4d;
623
- }
624
- .content table tr td:nth-child(2n-1) {
625
- background: #d9e8ff4d;
626
- }
627
- .content table tbody tr {
628
- border-top: 2px solid #fff;
501
+ .article .content {
502
+ margin: 50px 0;
629
503
  }
630
- .content .markdownIt-Anchor {
631
- display: none;
504
+ .article .info .date {
505
+ color: #5c6b72;
506
+ display: inline-block;
507
+ margin-right: 10px;
632
508
  }
633
- .content .language {
634
- font-family: "Fira Code", "Noto Sans SC", monospace;
635
- position: absolute;
636
- top: 0;
637
- left: 30px;
638
- padding: 10px 15px;
639
- background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
640
- box-shadow: 1px 1px 0.75rem #ed6ea14d;
641
- color: #fff;
509
+ .article h1 {
642
510
  font-weight: bold;
643
- font-size: 12px;
644
- border-radius: 0 0 10px 10px;
511
+ margin: 20px 0;
512
+ }
513
+ .content .code-content {
514
+ background: none;
515
+ font: 500 13px/2 "Fira Code", "Noto Sans SC", monospace;
516
+ overflow: auto;
517
+ padding: 50px 30px 20px;
645
518
  }
646
519
  .content .copycode {
520
+ color: #5c6b72;
647
521
  position: absolute;
648
- top: 0;
649
522
  right: 0;
650
- color: #5c6b72;
651
- }
652
- .content .copycode:hover {
653
- opacity: 0.8;
523
+ top: 0;
654
524
  }
655
525
  .content .copycode i {
526
+ padding: 15px;
656
527
  position: absolute;
657
- top: 0;
658
528
  right: 0;
659
- padding: 15px;
529
+ top: 0;
660
530
  transition: transform 0.25s;
661
531
  }
662
- .content .copycode.copied i:first-child {
663
- opacity: 0;
664
- }
665
- .content .copycode:not(.copied) i:last-child {
666
- opacity: 0;
667
- }
668
532
  .content .copycode.copied i {
669
533
  transform: scale(1.25);
670
534
  }
671
- .content .hljs {
672
- font-family: "Fira Code", "Noto Sans SC", monospace;
673
- background: none;
674
- line-height: 2;
675
- font-size: 13px;
676
- }
677
- #main {
678
- margin-right: calc(100% - 100vw);
679
- }
680
- footer {
681
- position: relative;
682
- font-size: 14px;
683
- width: 100%;
684
- text-align: center;
685
- top: 150px;
686
- padding-bottom: 20px;
535
+ .content .copycode.copied i:first-child,
536
+ .content .copycode:not(.copied) i:last-child {
537
+ opacity: 0;
687
538
  }
688
- footer .footer-wrap {
689
- border-top: 1px solid #aaa;
690
- width: 900px;
691
- margin: auto;
692
- color: #5c6b72;
539
+ .content .language {
540
+ background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
541
+ border-radius: 0 0 10px 10px;
542
+ box-shadow: 1px 1px 0.75rem #ed6ea14d;
543
+ color: #fff;
544
+ font: bold 12px "Fira Code", "Noto Sans SC", monospace;
545
+ left: 30px;
546
+ padding: 10px 15px;
547
+ position: absolute;
548
+ top: 0;
693
549
  }
694
- footer .footer-wrap div {
695
- margin: 15px;
550
+ .content .markdownIt-Anchor {
551
+ display: none;
696
552
  }
553
+ .content a,
697
554
  footer .footer-wrap a {
698
- text-decoration: none;
699
555
  color: #66afef;
700
556
  }
701
- footer .footer-icon {
702
- display: inline-block;
703
- margin: 0 10px;
704
- color: #66afef;
705
- font-size: 18px;
706
- }
707
- #archives {
708
- position: relative;
709
- top: 100px;
710
- margin: auto;
711
- padding: 20px;
712
- }
713
- #archives a {
714
- color: #5c6b72;
715
- text-decoration: none;
716
- }
717
- #archives .info {
718
- line-height: 1.7;
719
- }
720
- #archives .category {
721
- display: inline-block;
722
- margin-right: 10px;
723
- }
724
- #archives .tags {
725
- display: inline-block;
726
- }
727
- #archives .tags .tag {
728
- display: inline-block;
729
- margin-right: 10px;
557
+ .content b,
558
+ .content strong {
559
+ font-weight: bold;
560
+ line-height: 2.5;
730
561
  }
731
- #archives .tag-icon {
732
- color: #5c6b72;
733
- text-decoration: none;
562
+ .content code {
563
+ background: #bddcf76b;
564
+ border-radius: 4px;
565
+ color: #4b616b;
566
+ font: 500 14px/2.5 "Fira Code", "Noto Sans SC", monospace;
567
+ padding: 4px 8px;
734
568
  }
735
- #archives h3 {
736
- margin: 10px 0;
569
+ .content h1,
570
+ .content h2,
571
+ .content h3,
572
+ .content h4,
573
+ .content h5 {
574
+ margin: 18px 0;
575
+ text-align: left !important;
737
576
  }
738
- #archives .item-time {
739
- color: #5c6b72;
577
+ .content img {
578
+ display: block;
579
+ margin: 0 auto;
580
+ max-width: 70%;
740
581
  }
741
- #archives .categories-tags {
742
- text-align: center;
743
- max-width: 900px;
744
- width: 100%;
745
- margin: auto;
746
- margin-bottom: 50px;
582
+ .content pre {
583
+ border: 1px solid #ebeef5;
584
+ border-radius: 15px;
585
+ box-shadow: 0 2px 12px 0 #0000001a;
586
+ margin: 25px 0;
587
+ position: relative;
747
588
  }
748
- #archives .categories-tags span {
749
- display: inline-block;
750
- margin: 10px;
589
+ .content pre code {
590
+ background: none;
591
+ padding: 0;
751
592
  }
752
- #archives .categories-tags span a {
753
- padding: 10px 15px;
754
- color: #fff;
755
- text-decoration: none;
756
- border-radius: 10px;
757
- transition: all 0.25s;
758
- border: #ffffff80 1px solid;
593
+ .content table tbody tr {
594
+ border-top: 2px solid #fff;
759
595
  }
760
- #archives .categories-tags span a:hover {
761
- border: #a5c2f5 1px solid;
762
- background: #fff !important;
763
- color: #5c6b72;
596
+ .content table tr td {
597
+ padding: 8px 20px;
764
598
  }
765
- #archives .categories-tags span a:hover .icon {
766
- color: #5c6b72;
599
+ .content table tr td:nth-child(2n) {
600
+ background: #c7e0fb4d;
767
601
  }
768
- #archives .categories-tags span .icon {
769
- margin-left: 0;
770
- margin-right: 10px;
771
- color: #fff;
602
+ .content table tr td:nth-child(2n-1) {
603
+ background: #d9e8ff4d;
772
604
  }
773
- .article {
774
- margin: auto;
775
- padding: 20px;
776
- position: relative;
777
- top: 100px;
605
+ .content table tr th {
778
606
  color: #1e3e3f;
779
- font-size: 15px;
780
- }
781
- .article h1 {
782
- font-weight: bold;
783
- margin: 20px 0;
607
+ padding: 8px 20px;
784
608
  }
785
- .article .info {
786
- line-height: 1.7;
609
+ .content table tr th:nth-child(2n),
610
+ .content table tr th:nth-child(2n-1) {
611
+ background: #a3ddfb;
787
612
  }
788
- .article .info a {
789
- color: #5c6b72;
790
- text-decoration: none;
613
+ .hidden-menu {
614
+ top: -70px !important;
791
615
  }
792
- .article .info .date {
616
+ .icon {
793
617
  color: #5c6b72;
794
- display: inline-block;
795
- margin-right: 10px;
618
+ margin-right: 5px;
796
619
  }
797
- .article .info .category {
798
- display: inline-block;
799
- margin-right: 10px;
620
+ .into-enter-active,
621
+ .into-leave-active {
622
+ animation: into 0.6s;
800
623
  }
801
- .article .info .tags {
802
- display: inline-block;
803
- margin-right: 10px;
624
+ .math.display .katex {
625
+ overflow: auto;
804
626
  }
805
- .article .info .tags .tag {
806
- display: inline-block;
807
- margin-right: 10px;
627
+ .menu-color {
628
+ background: #0003 !important;
629
+ box-shadow: 0 -1px 10px 0 transparent !important;
808
630
  }
809
- .article .content {
810
- margin: 50px 0;
631
+ .menu-color .title,
632
+ .menu-color a {
633
+ color: #fff !important;
811
634
  }
812
635
  .page-num,
813
636
  .icon-link a,
814
637
  .friend-link a {
815
- transition: all 0.25s;
638
+ transition: background 0.25s, color 0.25s;
639
+ }
640
+ .page-num:hover,
641
+ .icon-link a:hover,
642
+ .friend-link a:hover,
643
+ .categories-tags a:hover,
644
+ .go-post:hover {
645
+ opacity: 1;
646
+ }
647
+ .slide-enter-active,
648
+ .slide-leave-active {
649
+ transition: margin-top 0.3s, opacity 0.3s;
650
+ }
651
+ .slide-enter-from,
652
+ .slide-leave-to {
653
+ margin-top: -300px;
654
+ opacity: 0;
816
655
  }
817
656
  .timeline {
818
- position: relative;
819
657
  margin-bottom: 30px;
658
+ position: relative;
820
659
  transition: margin-top 0.5s, opacity 0.25s;
821
660
  }
822
661
  .timeline-content {
823
- margin-left: 17.5px;
824
- padding: 24px;
825
662
  background: #fff;
826
663
  border: 1px solid #0002;
827
664
  border-radius: 3px;
665
+ margin-left: 17.5px;
666
+ padding: 24px;
828
667
  transition: box-shadow 0.5s;
829
668
  }
830
669
  .timeline-content:hover {
831
670
  box-shadow: 0 2px 8px #00000017;
832
671
  }
833
672
  .timeline-tail {
834
- position: absolute;
835
- width: 7px;
836
- height: 7px;
837
673
  background: #fff;
838
674
  border: 2px solid #a5c2f5;
839
675
  border-radius: 50%;
840
- }
841
- input.ipt {
842
- position: relative;
843
- display: block;
844
- width: 100%;
845
- height: 50px;
846
- text-indent: 20px;
847
- color: #000;
848
- background: #f6f8fa;
849
- box-sizing: border-box;
850
- border: 1px solid #d0d7de;
851
- border-radius: 50px;
852
- font-family: "Fira Code", "Noto Sans SC", monospace;
853
- font-size: 15px;
854
- transition: all 0.25s;
855
- }
856
- input.ipt:hover {
857
- background: #fff;
858
- }
859
- input.ipt:focus {
860
- outline: none;
861
- background: #fff;
862
- border-color: #0969da;
863
- box-shadow: 0 0 0 3px #0969da4d;
864
- }
865
- #crypto {
866
- margin: 50px auto 0;
867
- }
868
- #crypto.fail {
869
- color: #ea4a5a;
870
- border-color: #ea4a5a;
871
- }
872
- #crypto.fail:focus {
873
- box-shadow: 0 0 0 3px #ea4a5a4d;
874
- }
875
- #crypto.success {
876
- color: #34d058;
877
- border-color: #34d058;
878
- }
879
- #search-bar {
880
- margin: 0 auto 50px;
881
- }
882
- #search-mask {
883
- position: relative;
884
- margin: auto;
885
- margin-top: -125px;
886
- margin-bottom: -25px;
887
- width: 100%;
888
- height: 150px;
889
- background: #f6f8fa;
890
- }
891
- #showimg {
892
- position: fixed !important;
893
- display: flex;
894
- z-index: 10006;
895
- left: 0;
896
- top: 0;
897
- width: 100%;
898
- height: 100%;
899
- background-color: #fffc;
900
- opacity: 0;
901
- transition: all 0.25s;
902
- align-items: center;
903
- justify-content: center;
904
- visibility: hidden;
905
- }
906
- #showimg-content {
907
- position: relative;
908
- margin: auto;
909
- max-width: 95%;
910
- max-height: 95%;
911
- box-shadow: 0 0 50px 10px #d9d9d980;
912
- }
913
- .math.display .katex {
914
- overflow: auto;
676
+ height: 7px;
677
+ position: absolute;
678
+ width: 7px;
915
679
  }
916
680
  ::-webkit-scrollbar {
917
- width: 12px;
918
681
  height: 12px;
919
- }
920
- ::-webkit-scrollbar-track {
921
- background: #e6efff;
922
- border-radius: 100px;
923
- }
924
- body::-webkit-scrollbar-track {
925
- border-radius: 0;
682
+ width: 12px;
926
683
  }
927
684
  ::-webkit-scrollbar-thumb {
928
685
  background: #8ab5ff;
929
- border-radius: 100px;
930
- border: 3px solid #e6efff;
931
686
  background-image: linear-gradient(
932
687
  45deg,
933
688
  #fff6 25%,
@@ -938,31 +693,153 @@ body::-webkit-scrollbar-track {
938
693
  transparent 75%,
939
694
  transparent
940
695
  );
696
+ border: 3px solid #e6efff;
697
+ border-radius: 100px;
698
+ }
699
+ ::-webkit-scrollbar-track {
700
+ background: #e6efff;
701
+ border-radius: 100px;
941
702
  }
942
703
  ::selection {
943
704
  background-color: #3392ff2a;
944
705
  color: unset;
945
706
  }
707
+ a {
708
+ text-decoration: none;
709
+ }
710
+ a:hover,
711
+ .content .copycode:hover {
712
+ opacity: 0.8;
713
+ }
714
+ blockquote {
715
+ background: #d9e8ff6b;
716
+ border-left: 3px solid #1e3e3f;
717
+ border-radius: 3px;
718
+ margin: 15px 0;
719
+ padding: 0.1px 15px;
720
+ }
721
+ body {
722
+ background: #f6f8fa;
723
+ color: #000000d9;
724
+ font: 500 14px "Lexend", "Noto Sans SC", sans-serif;
725
+ overflow-x: hidden;
726
+ width: 100%;
727
+ }
728
+ body::-webkit-scrollbar-track {
729
+ border-radius: 0;
730
+ }
731
+ button,
732
+ img,
733
+ iframe,
734
+ #home-head,
735
+ #menu,
736
+ .math,
737
+ .go-post,
738
+ .page-current,
739
+ .categories-tags span a,
740
+ .friend-link a,
741
+ pre .language,
742
+ pre .copycode {
743
+ user-select: none;
744
+ }
745
+ footer {
746
+ font-size: 14px;
747
+ padding-bottom: 20px;
748
+ position: relative;
749
+ text-align: center;
750
+ top: 150px;
751
+ width: 100%;
752
+ }
753
+ footer .footer-icon {
754
+ color: #66afef;
755
+ display: inline-block;
756
+ font-size: 18px;
757
+ margin: 0 10px;
758
+ }
759
+ footer .footer-wrap {
760
+ border-top: 1px solid #aaa;
761
+ color: #5c6b72;
762
+ margin: auto;
763
+ width: 900px;
764
+ }
765
+ footer .footer-wrap div {
766
+ margin: 15px;
767
+ }
768
+ h1 {
769
+ color: #1e3e3f;
770
+ font: bold 30px "Lexend", "Noto Sans SC", sans-serif;
771
+ margin: 15px 0;
772
+ }
773
+ h2 {
774
+ color: #1e3e3f;
775
+ font: bold 27px "Lexend", "Noto Sans SC", sans-serif;
776
+ margin: 15px 0;
777
+ }
778
+ h3 {
779
+ color: #1e3e3f;
780
+ font: bold 24px "Lexend", "Noto Sans SC", sans-serif;
781
+ margin: 15px 0;
782
+ }
783
+ h4 {
784
+ color: #1e3e3f;
785
+ font: bold 21px "Lexend", "Noto Sans SC", sans-serif;
786
+ margin: 15px 0;
787
+ }
788
+ h5 {
789
+ color: #1e3e3f;
790
+ font: bold 18px "Lexend", "Noto Sans SC", sans-serif;
791
+ margin: 15px 0;
792
+ }
793
+ hr {
794
+ border-bottom: none;
795
+ border-left: none;
796
+ border-right: none;
797
+ border-style: dashed;
798
+ border-width: 2px;
799
+ }
800
+ img {
801
+ border-radius: 10px;
802
+ }
803
+ input.ipt {
804
+ background: #f6f8fa;
805
+ border: 1px solid #d0d7de;
806
+ border-radius: 50px;
807
+ box-sizing: border-box;
808
+ color: #000;
809
+ display: block;
810
+ font: 15px "Fira Code", "Noto Sans SC", monospace;
811
+ height: 50px;
812
+ position: relative;
813
+ text-indent: 20px;
814
+ transition: background 0.25s, border 0.25s, box-shadow 0.25s;
815
+ width: 100%;
816
+ }
817
+ input.ipt:focus {
818
+ background: #fff;
819
+ border-color: #0969da;
820
+ box-shadow: 0 0 0 3px #0969da4d;
821
+ outline: none;
822
+ }
823
+ input.ipt:hover {
824
+ background: #fff;
825
+ }
826
+ p {
827
+ line-height: 1.7;
828
+ margin: 15px 0;
829
+ }
830
+ ul li,
831
+ ol li {
832
+ margin: 8px auto;
833
+ }
834
+ ul,
835
+ ol {
836
+ line-height: 1.7;
837
+ margin-bottom: 10px !important;
838
+ margin-top: 15px !important;
839
+ }
946
840
  @media (min-width: 900px) {
947
- #menu .desktop-menu {
948
- display: block;
949
- }
950
- #menu .phone-menu {
951
- display: none;
952
- }
953
- #home-head .home-info {
954
- width: 500px;
955
- height: 500px;
956
- }
957
- #home-head .home-info .loop {
958
- position: absolute;
959
- width: 500px;
960
- height: 500px;
961
- display: inline-block;
962
- }
963
- #home-head .home-info .info {
964
- width: 500px;
965
- height: 500px;
841
+ #home-card {
842
+ margin-right: auto;
966
843
  }
967
844
  #home-head .home-info .info .wrap {
968
845
  padding: 25px;
@@ -980,92 +857,84 @@ body::-webkit-scrollbar-track {
980
857
  font-size: 16px;
981
858
  margin: 20px 0;
982
859
  }
983
- ul {
984
- padding-left: 40px;
985
- }
986
- ol {
987
- padding-left: 40px;
860
+ #home-head .home-info .loop {
861
+ display: inline-block;
862
+ height: 500px;
863
+ position: absolute;
864
+ width: 500px;
988
865
  }
989
- #home-posts-wrap {
990
- max-width: 1150px;
991
- padding: 30px 0;
866
+ #home-head .home-info,
867
+ #home-head .home-info .info {
868
+ height: 500px;
869
+ width: 500px;
992
870
  }
993
871
  #home-posts {
994
- width: 900px;
995
872
  margin-left: auto;
996
873
  margin-right: 50px;
874
+ width: 900px;
997
875
  }
998
876
  #home-posts .post {
999
- padding: 50px 50px;
1000
- margin: 0 0 25px;
877
+ margin-bottom: 25px;
878
+ padding: 50px;
1001
879
  }
1002
880
  #home-posts .post .excerpt {
1003
881
  padding: 20px 0;
1004
882
  }
1005
- .home-posts-wrap-no-card #home-posts {
1006
- margin: auto;
1007
- }
1008
- #home-card {
1009
- margin-right: auto;
883
+ #home-posts-wrap {
884
+ max-width: 1150px;
885
+ padding: 30px 0;
1010
886
  }
1011
- .article {
1012
- width: 900px;
887
+ #menu .desktop-menu {
888
+ display: block;
1013
889
  }
1014
- #archives {
1015
- width: 900px;
890
+ #menu .phone-menu {
891
+ display: none;
1016
892
  }
893
+ .article,
894
+ #archives,
1017
895
  footer .footer-wrap {
1018
896
  width: 900px;
1019
897
  }
898
+ .home-posts-wrap-no-card #home-posts {
899
+ margin: auto;
900
+ }
901
+ ul,
902
+ ol {
903
+ padding-left: 40px;
904
+ }
1020
905
  }
1021
906
  @media (min-width: 900px) and (max-width: 1200px) {
1022
- #home-posts-wrap {
1023
- width: 800px;
907
+ #home-card {
908
+ display: none;
1024
909
  }
1025
910
  #home-posts {
1026
911
  margin: auto;
1027
912
  width: 100%;
1028
913
  }
1029
- #home-card {
1030
- display: none;
1031
- }
914
+ #home-posts-wrap,
1032
915
  #archives {
1033
916
  width: 800px;
1034
917
  }
1035
918
  }
1036
919
  @media (max-width: 900px) {
1037
- #menu .desktop-menu {
1038
- display: none;
1039
- }
1040
- #menu .phone-menu {
1041
- display: block;
1042
- }
1043
920
  #home-head .home-info {
1044
- width: 350px;
1045
921
  height: 350px;
1046
- }
1047
- #home-head .home-info .loop {
1048
- position: absolute;
1049
922
  width: 350px;
1050
- height: 350px;
1051
- display: none;
1052
923
  }
1053
924
  #home-head .home-info .info {
925
+ align-items: center;
926
+ background: #ffffffa6;
1054
927
  display: flex;
928
+ height: 350px;
1055
929
  justify-content: center;
1056
- align-items: center;
1057
930
  margin: auto;
1058
931
  width: 350px;
1059
- height: 350px;
1060
- background: #ffffffa6;
1061
932
  }
1062
933
  #home-head .home-info .info .wrap {
1063
934
  padding: 50px;
1064
935
  }
1065
936
  #home-head .home-info .info .wrap h1 {
1066
- font-size: 46px;
1067
- font-weight: bold;
1068
- font-family: "Lexend", "Noto Sans SC", sans-serif;
937
+ font: bold 46px "Lexend", "Noto Sans SC", sans-serif;
1069
938
  margin-bottom: 10px;
1070
939
  }
1071
940
  #home-head .home-info .info .wrap h3 {
@@ -1076,39 +945,41 @@ body::-webkit-scrollbar-track {
1076
945
  font-size: 14px;
1077
946
  margin: 20px 0;
1078
947
  }
1079
- ul {
1080
- padding-left: 20px;
1081
- }
1082
- ol {
1083
- padding-left: 20px;
1084
- }
1085
- #home-posts-wrap {
1086
- width: 100%;
1087
- }
1088
- #home-card {
948
+ #home-head .home-info .loop {
1089
949
  display: none;
950
+ height: 350px;
951
+ position: absolute;
952
+ width: 350px;
1090
953
  }
1091
954
  #home-posts {
1092
955
  margin: auto;
1093
956
  width: 100%;
1094
957
  }
1095
958
  #home-posts .post {
959
+ margin-bottom: 30px;
1096
960
  padding: 20px 30px;
1097
- margin: 0 0 30px;
1098
- }
1099
- #home-posts .post .post-tags {
1100
- padding-right: 69px;
1101
961
  }
1102
962
  #home-posts .post .excerpt {
1103
963
  padding: 20px 0;
1104
964
  }
1105
- .article {
1106
- width: 100%;
1107
- }
1108
- #archives {
1109
- width: 100%;
965
+ #home-posts .post .post-tags {
966
+ padding-right: 69px;
1110
967
  }
968
+ #home-posts-wrap,
969
+ .article,
970
+ #archives,
1111
971
  footer .footer-wrap {
1112
972
  width: 100%;
1113
973
  }
974
+ #menu .desktop-menu,
975
+ #home-card {
976
+ display: none;
977
+ }
978
+ #menu .phone-menu {
979
+ display: block;
980
+ }
981
+ ul,
982
+ ol {
983
+ padding-left: 20px;
984
+ }
1114
985
  }