hexo-theme-particlex 2.2.1 → 2.2.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
  }