jekyll-theme-h2o-ac 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
data/dev/sass/common.scss DELETED
@@ -1,918 +0,0 @@
1
- /*** Main style ***/
2
-
3
- .g-container {
4
- width: $g-container-w;
5
- }
6
-
7
- .g-header {
8
- position: fixed;
9
- top: 0;
10
- left: 0;
11
- width: 100%;
12
- height: $g-header-h;
13
- padding: 16px 0;
14
- background-color: transparent;
15
- transition: all .6s;
16
- z-index: 1000;
17
- .g-logo {
18
- float: left;
19
- margin-left: 2%;
20
- width: 60px;
21
- height: $g-header-h;
22
- background: url('../icons/logo.svg') no-repeat center;
23
- background-size: 100% 100%;
24
- opacity: .8;
25
- transition: all .2s;
26
- &:hover {
27
- opacity: 1;
28
- }
29
- a {
30
- display: block;
31
- width: 100%;
32
- height: 100%;
33
- }
34
- }
35
-
36
- .icon-menu {
37
- display: none;
38
- position: absolute;
39
- top: 22px;
40
- right: 0;
41
- padding: 8px;
42
- font-size: 28px;
43
- color: #fff;
44
- opacity: .8;
45
- border-radius: 3px;
46
- &:active {
47
- background-color: rgba(255, 255, 255, .2);
48
- }
49
- }
50
-
51
- .g-nav {
52
- float: right;
53
- margin-right: 2%;
54
- &>ul>li{
55
- float: left;
56
- height: $g-header-h;
57
- line-height: $g-header-h;
58
- text-transform: uppercase;
59
- margin-right: 18px;
60
- &:last-child {
61
- margin-right: 0;
62
- }
63
- &>a {
64
- display: inline-block;
65
- font-size: 14px;
66
- letter-spacing: 1px;
67
- color: #fff;
68
- padding: 0 12px;
69
- opacity: .7;
70
- &:hover {
71
- opacity: 1;
72
- }
73
- }
74
- }
75
- }
76
-
77
- .nav-default {
78
- a:hover {
79
- color: $color-theme-default !important;
80
- }
81
- }
82
- .nav-pink {
83
- a:hover {
84
- color: $color-theme-pink !important;
85
- }
86
- }
87
- }
88
- // header scroll
89
- .headerUp{
90
- top: -65px;
91
- }
92
- .headerDown{
93
- top: 0;
94
- }
95
-
96
- .g-banner {
97
- height: $g-banner-h;
98
- background-color: #2F3139;
99
- color: #fff;
100
- padding: 0 60px;
101
- }
102
-
103
- .home-banner {
104
- position: relative;
105
- text-align: center;
106
- overflow: hidden;
107
- box-shadow: 0 4px 20px rgba(0, 38, 55, .16);
108
- h2, h3{
109
- position: relative;
110
- z-index: 1;
111
- text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
112
- }
113
- h2 {
114
- padding-top: 190px;
115
- line-height: 38px;
116
- font-size: 42px;
117
- font-family: 'Microsoft YaHei', 'Arial', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
118
- font-weight: bold;
119
- line-height: 52px;
120
- }
121
- h3 {
122
- font-size: 20px;
123
- font-weight: 400;
124
- margin-top: 8px;
125
- }
126
- }
127
-
128
- .banner-theme-default {
129
- background: -webkit-linear-gradient(0deg, #3CD5FF, #007AFF);
130
- background: -o-linear-gradient(0deg, #3CD5FF, #007AFF);
131
- background: -moz-linear-gradient(0deg, #3CD5FF, #007AFF);
132
- background: linear-gradient(100deg, #3CD5FF, #007AFF);
133
- }
134
- .banner-theme-pink {
135
- background: -webkit-linear-gradient(0deg, #FFCE69, #FA709A);
136
- background: -o-linear-gradient(0deg, #FFCE69, #FA709A);
137
- background: -moz-linear-gradient(0deg, #FFCE69, #FA709A);
138
- background: linear-gradient(100deg, #FFCE69, #FA709A);
139
- }
140
-
141
- .themeColor-default {
142
- background-color: $color-theme-default;
143
- }
144
- .themeColor-pink {
145
- background-color: $color-theme-pink;
146
- }
147
-
148
- .home-content {
149
- margin: 40px auto 60px;
150
- @include clearfix;
151
- }
152
-
153
- .article-list {
154
- float: left;
155
- width: 695px;
156
- .article-item {
157
- width: 100%;
158
- margin-bottom: 16px;
159
- @include cardStyle;
160
- &:last-child {
161
- margin-bottom: 0;
162
- }
163
- .post-link {
164
- position: absolute;
165
- top: 0;
166
- left: 0;
167
- width: 100%;
168
- height: 100%;
169
- }
170
- .post-cover {
171
- position: relative;
172
- width: 100%;
173
- max-height: 300px;
174
- margin-bottom: 14px;
175
- overflow: hidden;
176
- img {
177
- width: 100%;
178
- vertical-align: middle;
179
- }
180
- }
181
- .post-preview {
182
- position: relative;
183
- .post-title {
184
- font-family: 'Merriweather', $fonts;
185
- color: $color-f-primary;
186
- font-size: 24px;
187
- line-height: 32px;
188
- }
189
- .post-subtitle {
190
- margin-top: 3px;
191
- font-size: 18px;
192
- font-weight: normal;
193
- color: $color-brand;
194
- line-height: 26px;
195
- }
196
- .post-excerpt {
197
- margin-top: 8px;
198
- font-size: 16px;
199
- font-family: 'Merriweather', $fonts;
200
- line-height: 26px;
201
- word-break: break-all;
202
- color: #b8bdc3;
203
- }
204
- }
205
- .post-meta {
206
- height: 22px;
207
- margin-top: 16px;
208
- .post-tags {
209
- float: left;
210
- display: inline-block;
211
- }
212
- .post-date {
213
- float: right;
214
- color: #A9B0BC;
215
- @include timeStyle;
216
- }
217
- }
218
- }
219
- }
220
-
221
- .author-card {
222
- @include authorCard;
223
- }
224
-
225
- .article-item .post-meta .post-tag, .tags-card .tag, .tags-content .tag{
226
- @include tagStyle;
227
- }
228
-
229
- .tags-card .links {
230
- width: 100%;
231
- font-size: 16px;
232
- color: #4e4e4e;
233
- font-weight: 500;
234
- margin: 12px 0 6px;
235
- text-align: center;
236
- }
237
-
238
- .g-sidebar-wrapper {
239
- float: right;
240
- width: 240px;
241
- }
242
-
243
- .g-sidebar {
244
- @include cardStyle;
245
- section {
246
- padding: 30px 0;
247
- border-bottom: 1px solid #E7EAF1;
248
- &:first-child {
249
- padding-top: 0;
250
- }
251
- &:last-child {
252
- border-bottom: none;
253
- padding-bottom: 0;
254
- }
255
- .tag {
256
- margin-bottom: 8px;
257
- }
258
- }
259
- }
260
-
261
- .search-card {
262
- position: relative;
263
- margin-top: 16px;
264
- padding: 0;
265
- // float: right;
266
- // width: 240px;
267
- input, .search_item {
268
- font-size: 16px;
269
- color: $color-f-primary;
270
- }
271
- input {
272
- @include cardStyle;
273
- position: relative;
274
- padding: 12px 46px 12px 18px;
275
- margin: 0;
276
- width: 100%;
277
- background-color: #fff;
278
- outline: none;
279
- z-index: 1;
280
- }
281
- ::-webkit-input-placeholder {
282
- color: #9EA8B3;
283
- }
284
- :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
285
- color: #9EA8B3;
286
- }
287
- ::-moz-placeholder { /* Mozilla Firefox 19+ */
288
- color: #9EA8B3;
289
- }
290
- .icon-search {
291
- position: absolute;
292
- top: 10px;
293
- right: 18px;
294
- font-size: 26px;
295
- color: #CAD3DC;
296
- transition: .2s;
297
- z-index: 1;
298
- }
299
- .icon {
300
- position: absolute;
301
- top: 13px;
302
- right: 18px;
303
- color: #CAD3DC;
304
- z-index: 1;
305
- width: 20px;
306
- height: 20px;
307
- vertical-align: -0.15em;
308
- fill: currentColor;
309
- overflow: hidden;
310
- }
311
- .search_result {
312
- position: relative;
313
- margin-top: -2px;
314
- // max-height: 230px;
315
- background-color: #fff;
316
- border-radius: 0 0 4px 4px;
317
- // overflow: scroll;
318
- z-index: 0;
319
- }
320
- .search_item {
321
- padding: 6px 18px;
322
- margin-bottom: 0;
323
- width: 100%;
324
- display: block;
325
- overflow: hidden;
326
- text-overflow:ellipsis;
327
- white-space: nowrap;
328
- border-left: 1px solid #E7EAF1;
329
- border-right: 1px solid #E7EAF1;
330
- box-sizing: border-box;
331
- opacity: .8;
332
- transition: .2s;
333
- &:first-child {
334
- padding-top: 14px;
335
- }
336
- &:last-child {
337
- padding-bottom: 14px;
338
- border-radius: 0 0 4px 4px;
339
- border-bottom: 1px solid #E7EAF1;
340
- }
341
- &:hover {
342
- opacity: 1;
343
- background-color: #FAFAFA;
344
- }
345
- }
346
- }
347
-
348
- .pagination {
349
- float: left;
350
- position: relative;
351
- left: 50%;
352
- margin: 8px auto 0;
353
- .page-links {
354
- position: relative;
355
- left: -50%;
356
- border: 1px solid #E7EAF1;
357
- border-radius: 3px;
358
- background-color: #fff;
359
- padding: 0 8px;
360
- overflow: auto;
361
- box-shadow: 0 1px 3px rgba(0, 37, 55, .06);
362
- }
363
- .page-link {
364
- display: block;
365
- float: left;
366
- width: 34px;
367
- height: 34px;
368
- margin: 6px;
369
- font-size: 16px;
370
- color: #A9B0BC;
371
- line-height: 34px;
372
- text-align: center;
373
- border-radius: 2px;
374
- cursor: pointer;
375
- &:hover {
376
- color: #8F98AA;
377
- background-color: #EEF0F4;
378
- }
379
- }
380
- .active {
381
- color: #8F98AA;
382
- background-color: #EEF0F4;
383
- }
384
- #page-link-container {
385
- display: inline-block;
386
- float: left;
387
- }
388
- }
389
-
390
- .g-footer {
391
- min-height: $g-footer-h;
392
- padding: 20px 0;
393
- border-top: 1px solid #E7EAF1;
394
- text-align: center;
395
- section {
396
- font-size: 14px;
397
- line-height: 20px;
398
- color: #4E4E4E;
399
- a {
400
- color: #4E4E4E;
401
- &:hover {
402
- color: #83888F;
403
- }
404
-
405
- }
406
- }
407
- }
408
-
409
- .post-header, .markdown-body, .post-wrapper, .author-detail, .social-share-wrapper {
410
- margin: 0 auto;
411
- }
412
- .post-wrapper {
413
- width: $post-content-w;
414
- }
415
-
416
- .post-header {
417
- position: relative;
418
- padding: 0;
419
- margin: 0;
420
- color: #fff;
421
- overflow: hidden;
422
- background-color: #4285f4;
423
- z-index: 0;
424
- h1 {
425
- font-size: 32px;
426
- line-height: 42px;
427
- margin-bottom: 12px;
428
- }
429
- .post-tags {
430
- margin: 150px 0 16px;
431
- .post-tag {
432
- @include tagStyle;
433
- color: #fff;
434
- background-color: rgba(255, 255, 255, .26);
435
- box-shadow: none;
436
- margin-bottom: 8px;
437
- &:hover {
438
- color: #fff;
439
- background-color: rgba(255, 255, 255, .4);
440
- }
441
- }
442
- }
443
- .post-meta {
444
- margin-top: 32px;
445
- .post-meta-item {
446
- display: inline-block;
447
- font-size: 16px;
448
- color: #fff;
449
- margin-right: 4px;
450
- opacity: .8;
451
- &:last-child {
452
- margin-right: 0;
453
- }
454
- .iconfont {
455
- font-size: 18px;
456
- margin-right: 4px;
457
- }
458
- a {
459
- color: #fff;
460
- }
461
- }
462
- }
463
-
464
- .filter {
465
- position: absolute;
466
- content: '';
467
- top: 0;
468
- left: 0;
469
- width: 100%;
470
- height: 100%;
471
- background-color: #000;
472
- opacity: .3;
473
- z-index: -1;
474
- }
475
-
476
- .post-cover {
477
- position: absolute;
478
- top: 0;
479
- left: 0;
480
- width: 100%;
481
- height: 100%;
482
- z-index: -2;
483
- }
484
- }
485
-
486
- .bgcolor-default {
487
- background-color: $color-theme-default;
488
- }
489
- .bgcolor-pink {
490
- background-color: $color-theme-pink;
491
- }
492
-
493
- .post-no-cover {
494
- height: 360px;
495
- .post-tags {
496
- margin-top: 100px;
497
- }
498
- }
499
-
500
- .post-pattern-circuitBoard {
501
- @include postHeaderPattern('circuitBoard');
502
- }
503
- .post-pattern-overlappingCircles {
504
- @include postHeaderPattern('overlappingCircles');
505
- }
506
- .post-pattern-food {
507
- @include postHeaderPattern('food');
508
- }
509
- .post-pattern-glamorous {
510
- @include postHeaderPattern('glamorous');
511
- }
512
- .post-pattern-ticTacToe {
513
- @include postHeaderPattern('ticTacToe');
514
- }
515
- .post-pattern-seaOfClouds {
516
- @include postHeaderPattern('seaOfClouds');
517
- }
518
-
519
- .post-content {
520
- position: relative;
521
- width: 100%;
522
- background-color: #fff;
523
- overflow: hidden;
524
- padding: 40px 0 80px;
525
- .post-subtitle {
526
- position: relative;
527
- width: $post-content-w;
528
- font-size: 18px;
529
- color: #a6a6a6;
530
- font-weight: normal;
531
- line-height: 28px;
532
- text-align: center;
533
- padding: 35px 0;
534
- margin: 0 auto 40px;
535
- box-sizing: border-box;
536
- &:before, &:after {
537
- position: absolute;
538
- content: '';
539
- left: 50%;
540
- margin-left: -13%;
541
- width: 26%;
542
- height: 2px;
543
- background-color: #EAECEE;
544
- }
545
- &:before {
546
- top: 0;
547
- }
548
- &:after {
549
- bottom: 0;
550
- }
551
- }
552
- }
553
-
554
- // Post style
555
- .markdown-body {
556
- font-family: 'Merriweather', $fonts;
557
- width: $post-content-w;
558
- box-sizing: border-box;
559
- padding: 0 0 32px;
560
- .highlight {
561
- margin: 0 0 16px;
562
- /** overflow: scroll; 修复代码高亮 显示两个 scroll的问题 **/
563
- }
564
- img {
565
- transition: .3s;
566
- }
567
- ul, ol {
568
- li {
569
- p {
570
- margin: 0;
571
- &:first-child {
572
- margin-bottom: 0;
573
- }
574
- }
575
- }
576
- }
577
- }
578
-
579
- .social-share-wrapper {
580
- float: left;
581
- position: relative;
582
- left: 50%;
583
- .social-share {
584
- position: relative;
585
- left: -50%;
586
- }
587
- }
588
-
589
- .post-footer-item {
590
- margin: 0 auto;
591
- width: $post-content-w;
592
- }
593
-
594
- .author-detail {
595
- position: relative;
596
- top: -35px;
597
- .comment {
598
- margin-bottom: 60px;
599
- }
600
- }
601
-
602
- .read-next {
603
- display: flex;
604
- width: $post-content-w;
605
- margin: 60px auto;
606
- }
607
- .read-next-item {
608
- position: relative;
609
- flex: 1;
610
- height: 260px;
611
- padding: 0;
612
- top: 0;
613
- background-color: #AAB4CA;
614
- border-radius: 3px;
615
- overflow: hidden;
616
- box-shadow: 0 2px 10px rgba(109, 127, 144, .5);
617
- transition: box-shadow .4s ease, top .3s ease;
618
- &:first-child {
619
- margin-right: 10px;
620
- }
621
- &:hover {
622
- top: -5px;
623
- box-shadow: 0 8px 20px rgba(52, 61, 70, .3);
624
- }
625
- .read-next-link {
626
- position: absolute;
627
- top: 0;
628
- left: 0;
629
- width: 100%;
630
- height: 100%;
631
- z-index: 3;
632
- }
633
- section {
634
- display: none;
635
- position: relative;
636
- width: 80%;
637
- margin-left: 10%;
638
- margin-top: 45px;
639
- color: #fff;
640
- z-index: 2;
641
- span {
642
- font-size: 22px;
643
- font-weight: bold;
644
- margin: 0;
645
- }
646
- p {
647
- margin-top: 8px;
648
- font-size: 15px;
649
- line-height: 22px;
650
- opacity: .8;
651
- }
652
- }
653
- .filter {
654
- position: absolute;
655
- top: 0;
656
- left: 0;
657
- width: 100%;
658
- height: 100%;
659
- background-color: rgba(0, 0, 0, .22);
660
- z-index: 1;
661
- transition: .3s linear;
662
- }
663
- img {
664
- display: none;
665
- position: absolute;
666
- top: 0;
667
- left: 0;
668
- width: 100%;
669
- -webkit-filter: blur(6px);
670
- z-index: 0;
671
- }
672
- }
673
-
674
- .tags-banner {
675
- height: 300px;
676
- text-align: center;
677
- h2 {
678
- font-size: 36px;
679
- line-height: 300px;
680
- }
681
- }
682
- .tags-content {
683
- width: 695px;
684
- margin: -100px auto 0;
685
- }
686
- .tags-list {
687
- padding: 40px 0;
688
- li {
689
- @include cardStyle;
690
- margin-bottom: 12px;
691
- &:first-child {
692
- margin-bottom: 24px;
693
- cursor: default;
694
- }
695
- .tag {
696
- box-shadow: 0 0 .3px #BFC2C6;
697
- margin-bottom: 12px;
698
- }
699
- .tag-name {
700
- display: block;
701
- font-size: 20px;
702
- color: #333;
703
- text-align: center;
704
- margin-bottom: 20px;
705
- }
706
- .tag-post {
707
- display: block;
708
- font-size: 16px;
709
- color: #666;
710
- text-align: center;
711
- margin: 16px auto;
712
- &:hover {
713
- color: #000;
714
- }
715
- }
716
- }
717
-
718
- }
719
-
720
- // 404 page
721
- .np-banner {
722
- position: fixed;
723
- top: 0;
724
- left: 0;
725
- width: 100%;
726
- height: 100%;
727
- padding: 0 !important;
728
- text-align: center;
729
- h1 {
730
- font-size: 86px;
731
- letter-spacing: 4px;
732
- font-weight: normal;
733
- padding: 160px 0 20px;
734
- }
735
- .subheading {
736
- font-size: 18px;
737
- }
738
- .btn {
739
- display: block;
740
- width: 160px;
741
- height: 38px;
742
- font-size: 16px;
743
- color: #fff;
744
- line-height: 38px;
745
- border-radius: 3px;
746
- border: 1px solid #fff;
747
- margin: 80px auto 0;
748
- opacity: .8;
749
- }
750
-
751
- }
752
-
753
- // 夜间模式
754
- .night-mode {
755
- background-color: $color-dark-primary;
756
-
757
- .g-banner {
758
- background-color: $color-dark-primary;
759
- color: #C8CDD3;
760
- }
761
-
762
- .post-header {
763
- .filter {
764
- opacity: .6;
765
- }
766
- }
767
-
768
- .article-item, .g-sidebar, .page-links, .search-card input, .search_result,
769
- .search_item, .article-item .post-tag, .tags-card .tag, .tags-list li,
770
- .tags-list .tag {
771
- color: $color-f-dark;
772
- background-color: $color-dark-secondary;
773
- border-color: rgba(255, 255, 255, 0.1);
774
- }
775
-
776
- .article-item {
777
- .post-cover img {
778
- -webkit-filter: brightness(.6);
779
- }
780
- .post-preview {
781
- .post-title, .post-subtitle, .post-excerpt {
782
- color: $color-f-dark;
783
- }
784
- }
785
- .post-meta {
786
- .post-tags, .post-date {
787
- color: $color-f-dark;
788
- }
789
- }
790
- }
791
-
792
- .pagination {
793
- .page-link{
794
- &:hover {
795
- background-color: rgba(255, 255, 255, .1);
796
- }
797
- }
798
- .active {
799
- background-color: rgba(255, 255, 255, .1);
800
- }
801
- }
802
-
803
- .g-sidebar {
804
- section {
805
- border-bottom: 1px solid rgba(255, 255, 255, .1);
806
- &:last-child {
807
- border-bottom: none;
808
- }
809
- }
810
- }
811
- .avatar img {
812
- -webkit-filter: brightness(.6);
813
- }
814
- .author-name, .bio {
815
- color: $color-f-dark;
816
- }
817
- .search_result {
818
- .search_item {
819
- &:last-child {
820
- border-color: rgba(255, 255, 255, 0.1);
821
- }
822
- &:hover {
823
- background-color: transparent;
824
- color: #fff;
825
- }
826
- }
827
- }
828
- .article-item .post-tag, .tags-card .tag {
829
- border: none;
830
- }
831
- .tags-list {
832
- li {
833
- .tag-name, .tag-post {
834
- color: $color-f-dark;
835
- }
836
- }
837
- }
838
- .g-footer {
839
- border-color: rgba(255, 255, 255, 0.1);
840
- section {
841
- color: $color-f-dark;
842
- }
843
- }
844
- .post-content {
845
- background-color: $color-dark-primary;
846
- .post-subtitle {
847
- &:before, &:after {
848
- background-color: #575B63;
849
- }
850
- }
851
- }
852
-
853
- .markdown-body {
854
- color: $color-f-dark;
855
- img {
856
- -webkit-filter: brightness(.6);
857
- }
858
- blockquote {
859
- border-left-color: #555A61;
860
- }
861
- }
862
- .read-next-item {
863
- background-color: #484D59;
864
- section {
865
- color: #AEB4BD;
866
- }
867
- .filter {
868
- background-color: rgba(0, 0, 0, .6);
869
- }
870
- }
871
- :not(pre) > code[class*="language-"], pre[class*="language-"] {
872
- background-color: $color-dark-secondary;
873
- }
874
- code[class*="language-"], pre[class*="language-"], .token.punctuation,
875
- .token.operator, .token.entity, .token.url, .language-css .token.string,
876
- .style .token.string, .token.variable {
877
- color: #8F97A7;
878
- }
879
- .token.atrule, .token.attr-value, .token.function {
880
- color: #A9A054;
881
- }
882
- .token.selector, .token.attr-name, .token.string, .token.char,
883
- .token.builtin, .token.inserted {
884
- color: #84AC35;
885
- }
886
- .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
887
- color: #D75885;
888
- }
889
- .token.keyword {
890
- color: #61BDCF;
891
- }
892
- }
893
-
894
- .archives-date {
895
- width: 130px;
896
- display: inline-block;
897
- }
898
-
899
- .archives-title {
900
- width: 95%;
901
- display: inline-block;
902
- margin-bottom: 0!important;
903
- margin-top: 0!important;
904
- }
905
-
906
- .markdown-body a {
907
- color: #005b81;
908
- text-decoration: none;
909
- }
910
-
911
- .markdown-body a:hover {
912
- color: #e32e00;
913
- text-decoration: underline;
914
- }
915
-
916
- .markdown-body p {
917
- font-size: 16px;
918
- }