cosy-jekyll-theme 1.0.5 → 1.0.6

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.
data/_sass/_page.scss CHANGED
@@ -20,14 +20,64 @@ body {
20
20
  display: block;
21
21
  }
22
22
 
23
- .hentry-dark {
24
- background-color: $header-color;
25
- }
26
-
27
23
  .entry-content {
28
24
  @include font-size(16);
25
+ position: relative;
29
26
  word-wrap: break-word;
30
- // Dotted line underlines for links
27
+ .page-info {
28
+ color: rgba(85, 85, 85, 0.8);
29
+ @include font-size(14);
30
+ font-weight: normal;
31
+ margin: -5px 2px 0;
32
+ position: relative;
33
+ time {
34
+ margin: 0 20px;
35
+ }
36
+ .qr-text {
37
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA9ElEQVRYR9VXWw7DIAwbN+Yo3HjTJqUfqSI/FNaWvwpIjeOYMOac75cw1lrjuzz2xXeEUOMNdcM2APkkmRR0YgSsincwcBsAOSXVyVRGgoEc78TAYwBk1SOm2hnYBqCyhJxzVgMonl0F7QBYM6ycL2uAjWc7IdIADYBdyDqjGu93sTij0oAaqzQiVNeVdaNqyfPXA6jEhHKunrRaf2gA5bTrh6fLSBWNygxab1cB8gFWpLYRdaXkPgB2tWSIKfs2ZDUgA3BbMreM23rCvwNwU5B9wWZgGwDUw7EvICS+mLerwM15+TBh7wS2J2T7CdsJXQ1k5j7FF35r3ynsoAAAAABJRU5ErkJggg==) no-repeat;
38
+ background-size: 16px 16px;
39
+ width: 16px;
40
+ height: 16px;
41
+ display: none;
42
+ position: relative;
43
+ &::before {
44
+ content: '';
45
+ position: absolute;
46
+ top: -20px;
47
+ right: -20px;
48
+ bottom: -20px;
49
+ left: -20px;
50
+ }
51
+ &:hover {
52
+ .qr-code {
53
+ width: 128px;
54
+ opacity: 1;
55
+ @include transform(none)
56
+ }
57
+ }
58
+ }
59
+ .qr-code {
60
+ position: absolute;
61
+ opacity: 0;
62
+ @include transition(0.3s all ease-in-out);
63
+ @include transform(scale(0) perspective(60px) rotateX(50deg));
64
+ width: 0;
65
+ left:-4px;
66
+ top:-4px;
67
+ z-index: 10;
68
+ >img{
69
+ box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.5);
70
+ padding: 4px;
71
+ background-color: #fff;
72
+ }
73
+ }
74
+ @media #{$medium}{
75
+ @include font-size(16);
76
+ .qr-text {
77
+ display: inline-block;
78
+ }
79
+ }
80
+ }
31
81
  p > a,
32
82
  li > a {
33
83
  border-bottom: 1px dotted lighten($link-color, 50);
@@ -38,7 +88,6 @@ body {
38
88
  }
39
89
 
40
90
  ///sections
41
-
42
91
  .content-header-title {
43
92
  text-align: center;
44
93
  margin: 30px 0 0;
@@ -103,11 +152,6 @@ body {
103
152
  a {
104
153
  color: lighten($base-color, 60);
105
154
  }
106
- .vcard {
107
- &:before {
108
- content: "BYB";
109
- }
110
- }
111
155
  .tag {
112
156
  display: inline-block;
113
157
  margin: 4px;
@@ -126,29 +170,18 @@ body {
126
170
  background-color: lighten($base-color, 40);
127
171
  }
128
172
  }
129
- .entry-reading-time {
130
- float: right;
131
- }
132
- }
133
-
134
- header .entry-meta {
135
- display: none; // hide header meta on small screens
136
- @media #{$medium} {
137
- display: block;
138
- }
139
173
  }
140
174
 
141
175
  #post,
142
176
  #page {
143
177
  .entry-content {
144
- margin: 20px 2px 20px 2px;
178
+ margin: 80px 2px 20px 2px;
145
179
  padding: 10px 15px;
146
180
  background-color: $white;
147
181
  box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
148
182
  @include rounded(3px);
149
183
  @media #{$medium} {
150
- margin-left: 10px;
151
- margin-right: 10px;
184
+ margin: 30px 10px;
152
185
  padding: 20px 30px;
153
186
  }
154
187
  @media #{$large} {
@@ -194,7 +227,13 @@ header .entry-meta {
194
227
  }
195
228
 
196
229
  .tag-list {
197
- line-height: 1.5;
230
+ line-height: 1.6;
231
+ .tag-time {
232
+ display: none;
233
+ @media #{$medium} {
234
+ display: inline-block;
235
+ }
236
+ }
198
237
  }
199
238
 
200
239
  // Go to the exact location of bookmarks in tags, categories
@@ -212,7 +251,7 @@ header .entry-meta {
212
251
 
213
252
  // Post Pagination Module
214
253
  .pagination {
215
- margin: 20px 10px;
254
+ margin: 36px 10px 0;
216
255
  text-align: center;
217
256
  ul {
218
257
  display: inline;
@@ -230,6 +269,7 @@ header .entry-meta {
230
269
 
231
270
  // Read More Module
232
271
  .read-more {
272
+ display: block;
233
273
  position: relative;
234
274
  margin: 40px 2px 20px 2px;
235
275
  padding: 40px 15px 25px;
@@ -237,13 +277,13 @@ header .entry-meta {
237
277
  box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
238
278
  @include rounded(3px);
239
279
  @media #{$medium} {
240
- margin: 50px 10px 20px 10px;
280
+ margin: 40px 10px 30px 10px;
241
281
  padding: 50px 40px 25px;
242
282
  }
243
283
  @media #{$large} {
244
284
  max-width: 800px;
245
285
  padding: 50px 80px;
246
- margin: 60px auto;
286
+ margin: 50px auto 30px;
247
287
  }
248
288
  text-align: center;
249
289
  @include clearfix;
@@ -255,14 +295,14 @@ header .entry-meta {
255
295
  left: 0;
256
296
  right: 0;
257
297
  height: 35px;
258
- a {
298
+ .read-more-btn {
259
299
  @extend .btn;
260
300
  }
261
301
  }
262
302
 
263
303
  .read-more-content {
264
304
  @include font-size(16);
265
- // Dotted line underlines for links
305
+ margin-bottom: 0;
266
306
  p {
267
307
  text-align: left;
268
308
  }
@@ -275,7 +315,10 @@ header .entry-meta {
275
315
  }
276
316
  h3 {
277
317
  margin: 0;
278
- @include font-rem(28);
318
+ @include font-rem(20);
319
+ @media #{$medium} {
320
+ @include font-rem(28);
321
+ }
279
322
  a {
280
323
  color: $text-color;
281
324
  }
@@ -297,45 +340,18 @@ header .entry-meta {
297
340
  padding-left: 5px;
298
341
  }
299
342
 
300
- .read-more-list {
301
- border-top: solid 2px lighten($base-color, 80);
302
- }
303
-
304
- .list-item {
305
- width: 100%;
306
- text-align: left;
307
- h4 {
308
- @include font-rem(18);
309
- margin-bottom: 0;
310
- }
311
- span {
312
- display: block;
313
- @include font-rem(14);
314
- color: lighten($base-color, 50);
315
- }
316
- @media #{$medium} {
317
- width: 49%;
318
- float: left;
319
- &:nth-child(2) {
320
- text-align: right;
321
- }
322
- }
323
- }
324
-
325
343
  // Post Index
326
344
  // --------------------------------------------------
327
345
  #post-index {
328
346
  #main {
329
- margin: 20px 2px 20px 2px;
347
+ margin: 80px 2px 20px 2px;
348
+ overflow: hidden;
330
349
  @media #{$medium} {
331
- margin-left: 20px;
332
- margin-right: 20px;
350
+ margin: 20px;
333
351
  }
334
352
  @media #{$large} {
335
353
  max-width: 800px;
336
- margin-top: 50px;
337
- margin-left: auto;
338
- margin-right: auto;
354
+ margin: 30px auto 0;
339
355
  }
340
356
  }
341
357
  article {
@@ -355,22 +371,13 @@ header .entry-meta {
355
371
  }
356
372
 
357
373
  .entry-image-index {
358
- margin-top: -25px;
359
- margin-left: -15px;
360
- margin-right: -15px;
361
- margin-bottom: 10px;
374
+ margin: -25px -15px 10px -15px;
362
375
  position: relative;
363
376
  @media #{$medium} {
364
- margin-top: -30px;
365
- margin-left: -30px;
366
- margin-right: -30px;
367
- margin-bottom: 15px;
377
+ margin: -30px -30px 15px -30px;
368
378
  }
369
379
  @media #{$large} {
370
- margin-top: -50px;
371
- margin-left: -80px;
372
- margin-right: -80px;
373
- margin-bottom: 20px;
380
+ margin: -50px -80px 20px -80px;
374
381
  }
375
382
  img {
376
383
  @include border-radius(3px, 0, 0, 3px); // round image corners
@@ -381,14 +388,19 @@ header .entry-meta {
381
388
  // --------------------------------------------------
382
389
  .footer-wrapper {
383
390
  @include clearfix;
384
- margin: 0 auto 20px auto;
391
+ margin: 14px auto 30px auto;
385
392
  text-align: center;
386
393
  color: lighten($text-color, 20);
394
+ @include font-rem(14);
395
+ @media #{$medium} {
396
+ margin: 8px auto 35px auto;
397
+ }
387
398
  a {
388
399
  color: lighten($text-color, 20);
389
400
  }
390
401
  }
391
402
 
403
+
392
404
  // Browser Upgrade
393
405
  // --------------------------------------------------
394
406
  .upgrade {
@@ -418,8 +430,8 @@ header .entry-meta {
418
430
  @include font-rem(14);
419
431
  background-color: $white;
420
432
  color: $text-color;
421
- border-width: 2px !important;
422
- border-style: solid !important;
433
+ border-width: 2px ;
434
+ border-style: solid ;
423
435
  border-color: lighten($primary, 50);
424
436
  @include rounded(3px);
425
437
  }
@@ -429,62 +441,23 @@ header .entry-meta {
429
441
  }
430
442
 
431
443
  // Header
432
- // --------------------------------------------------
433
444
  .entry-header {
434
- width: 100%;
435
- overflow: hidden;
436
445
  position: relative;
437
- width: 100%;
438
446
  overflow: hidden;
439
- height: 60px;
440
- @media #{$medium} {
441
- background-color: $header-color;
442
- min-height: 260px;
443
- }
444
- }
445
-
446
- .header-title {
447
- margin-top: 0;
448
447
  width: 100%;
449
- overflow: hidden;
450
- line-height: 1;
448
+ height: 260px;
449
+ background: $header-color;
451
450
  display: none;
452
- @media #{$medium} {
453
- @include flexbox();
454
- @include align-items(center);
455
- @include justify-content(center);
456
- @include flex-direction(column);
457
- min-height: 200px;
451
+ svg {
458
452
  margin-top: 60px;
459
453
  }
460
- h2 {
461
- color: $white;
454
+ canvas {
455
+ position: absolute;
456
+ left: 0;
457
+ top: 0;
462
458
  }
463
- h1 {
464
- font-weight: 700;
465
- margin-bottom: 20px;
466
- @include font-rem(32);
467
- color: $white;
468
- text-shadow: 1px 1px 4px rgba($base-color, 0.6);
469
- display: block;
470
- a {
471
- color: $white;
472
- }
473
- @media #{$medium} {
474
- @include font-rem(26);
475
- }
476
- @media #{$large} {
477
- @include font-rem(36);
478
- }
479
- }
480
- h1.post-title {
459
+ @media #{$medium} {
481
460
  display: block;
482
- @media #{$medium}{
483
- display: none;
484
- }
485
- }
486
- p {
487
- color: $white;
488
461
  }
489
462
  }
490
463
 
@@ -493,13 +466,14 @@ header .entry-meta {
493
466
  top: 0;
494
467
  left: 0;
495
468
  width: 100%;
496
- height: $menu-height;
497
469
  z-index: 20;
470
+ overflow: hidden;
471
+ background-color: $menu-top;
472
+ height: $menu-height;
473
+ box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
498
474
  @media #{$medium} {
499
475
  position: fixed;
500
- &.header-menu-top{
501
- box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
502
- }
476
+ @include transition(0.3s height ease-out);
503
477
  }
504
478
  ul {
505
479
  margin: 0 auto;
@@ -512,28 +486,10 @@ header .entry-meta {
512
486
  }
513
487
  }
514
488
 
515
- .header-menu-top {
516
- background-color: $menu-top;
517
- box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
518
- }
519
-
520
489
  .header-menu-overflow {
521
- background-color: $menu-overflow;
522
- z-index: 100;
523
- box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
524
- display: none;
525
- }
526
-
527
- .header-menu-overflow ul li a {
528
- color: $white;
529
- }
530
-
531
- .header-menu-top .sub-item {
532
- background-color: $menu-top;
533
- }
534
-
535
- .header-menu-overflow .sub-item {
536
- background-color: $menu-overflow;
490
+ @media #{$medium} {
491
+ height: 0;
492
+ }
537
493
  }
538
494
 
539
495
  .header-item,
@@ -541,16 +497,21 @@ header .entry-meta {
541
497
  float: right;
542
498
  padding-left: 20px;
543
499
  padding-right: 20px;
544
- border-top-color: transparent;
545
- border-top-style: solid;
546
- border-top-width: 5px;
547
- box-sizing: border-box;
548
-
549
500
  a {
550
501
  vertical-align: middle;
551
502
  display: table-cell;
552
- height: $menu-height - 2;
553
- font-size: 12px;
503
+ height: $menu-height;
504
+ @include font-rem(16);
505
+ box-sizing: border-box;
506
+ font-weight: 600;
507
+ &:visited {
508
+ color: $text-color;
509
+ }
510
+ }
511
+ &.active, &:hover {
512
+ a {
513
+ color: $header-active;
514
+ }
554
515
  }
555
516
  }
556
517
 
@@ -581,93 +542,90 @@ header .entry-meta {
581
542
  font-size: 1.5rem;
582
543
  padding-left: 5px;
583
544
  vertical-align: middle;
584
- height: $menu-height - 2;
545
+ height: $menu-height;
585
546
  @media #{$medium}{
586
547
  display: table-cell;
587
548
  }
588
549
  }
589
550
  }
590
551
 
591
- .header-item.active,
592
- .header-item:hover {
593
- border-top-color: $header-margin;
594
- }
595
-
596
- .header-item:hover .header-submenu {
552
+ .header-href {
597
553
  display: block;
598
- position: absolute;
599
554
  }
600
555
 
601
- .header-submenu {
602
- display: none;
603
- border-top: 2px solid $header-margin;
604
- width: 200px;
605
- z-index: 100;
606
- list-style-type: none;
607
- transform: translateX(-25%);
556
+ .index-content-time {
557
+ margin-left: -6px;
608
558
  }
609
559
 
610
- .sub-item {
560
+ .video-container {
611
561
  position: relative;
612
- padding-left: 10px;
613
- width: 100%;
614
- border-bottom: 1px solid gray;
615
- border-left: 1px solid;
616
- height: 50px;
617
- text-decoration: none;
618
- }
619
-
620
- .sub-item a {
621
- vertical-align: middle;
622
- display: table-cell;
623
- height: 50px;
624
- }
625
-
626
- .sub-item:hover {
627
- border-bottom-color: $header-margin;
628
- border-left-color: $header-margin;
562
+ padding-bottom: 75%;
563
+ padding-top: 30px;
564
+ height: 0;
565
+ overflow: hidden;
566
+ iframe,
567
+ object,
568
+ embed,
569
+ video {
570
+ position: absolute;
571
+ top: 0;
572
+ left: 0;
573
+ width: 100%;
574
+ height: 100%;
575
+ }
629
576
  }
630
577
 
631
- .button-twitter {
632
- color: $white;
633
- position: fixed;
634
- margin-top: $menu-height / 2 - 20;
635
- margin-right: 10px;
636
- top: 0;
637
- right: 0;
638
- z-index: 10000000000;
639
- @media #{$large}{
640
- top: auto;
641
- bottom: 0;
578
+ .coffee{
579
+ width: 100%;
580
+ @include flexbox();
581
+ @include flex-direction(column);
582
+ @include align-items(center);
583
+ margin:20px 0 15px;
584
+ @media #{$medium} {
585
+ margin: 40px 0 -20px;
642
586
  }
643
-
644
- span {
645
- display: none;
646
- @media #{$medium}{
647
- display: inline;
587
+ .buy-me-coffee{
588
+ @extend .btn;
589
+ margin: 0 auto;
590
+ position: relative;
591
+ height: 36px;
592
+ width: 174px;
593
+ padding-left: 38px;
594
+ font-size: 16px;
595
+ line-height: 18px;
596
+ text-align: center;
597
+ @include text-overflow(clip);
598
+ cursor: pointer;
599
+ @include user-select(none);
600
+ &:hover{
601
+ background-color: #222;
602
+ color: #fff;
648
603
  }
649
- }
650
- }
651
-
652
- footer {
653
- font-size: 13px;
654
- }
655
-
656
- .entry-content{
657
- position: relative;
658
- .page-info{
659
- color: rgba(85,85,85,0.8);
660
- font-size: 14px;
661
- font-weight: normal;
662
- margin: -15px 2px 0;
663
- time{
664
- margin-left: 20px;
604
+ &.active{
605
+ background-color: #fff;
606
+ color: #222;
665
607
  }
666
- @media #{$medium}{
667
- font-size: 16px;
608
+ &::after{
609
+ content: "";
610
+ position: absolute;
611
+ top: 12px;
612
+ left: 10px;
613
+ width: 20px;
614
+ height: 13px;
615
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjE4MS45ODgybW0iICAgaGVpZ2h0PSIxMTUuOTU2MjltbSIgICB2aWV3Qm94PSIwIDAgNjQ0Ljg0MDEgNDEwLjg2ODc1IiAgIGlkPSJzdmc0MjM4IiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJjdXBsb2dvLnN2ZyI+ICA8ZGVmcyAgICAgaWQ9ImRlZnM0MjQwIiAvPiAgPHNvZGlwb2RpOm5hbWVkdmlldyAgICAgaWQ9ImJhc2UiICAgICBwYWdlY29sb3I9IiNmZmZmZmYiICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIgICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOnpvb209IjAuMzUiICAgICBpbmtzY2FwZTpjeD0iNzgwLjI3NzE4IiAgICAgaW5rc2NhcGU6Y3k9Ii0yMTQuNTY1NjEiICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBmaXQtbWFyZ2luLXRvcD0iMCIgICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIgICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4MCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjY5OSIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjEiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjQzIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGcgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgICAgIGlkPSJsYXllcjEiICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzcuNTc5OTY0LC0xMzUuNDk5MjcpIj4gICAgPGcgICAgICAgaWQ9Imc0MCIgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xNDIxNTI4LDAsMCwtMS4xNDIxNTI4LDI2NS45MzM5OCw0NjAuNzMwOTUpIj4gICAgICA8ZyAgICAgICAgIGlkPSJnNDE4NCI+ICAgICAgICA8cGF0aCAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgICAgIGlkPSJwYXRoMzgiICAgICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAgICAgICAgICAgZD0ibSAwLDAgYyAtMTkuOTQ2LC0yLjQ5MiAtMzYuMTUxLC0wLjYyMiAtMzYuMTUxLC0wLjYyMiBsIDAsMTIyLjEzMiAzOC4wMiwwIGMgMCwwIDQyLjM4NSwtMTEuODM5IDQyLjM4NSwtNTYuNzA0IEMgNDQuMjU0LDIzLjY4IDIzLjA2Myw3LjQ3OCAwLDAgTSAxMDUuMDYzLDg1LjczOSBDIDg4LjQzNSwxNzMuNTYgMC42MjQsMTg0LjQ3MyAwLjYyNCwxODQuNDczIGwgLTM5My4zMzMsMCBjIC0xMi45OSwwIC0xNC41ODgsLTE3LjE0OCAtMTQuNTg4LC0xNy4xNDggMCwwIC0xLjc1MiwtMTU3LjQzIC0wLjQ4MSwtMjU0LjExMiAzLjUyNCwtNTIuMDkzIDU1LjU5NywtNTcuNDM1IDU1LjU5NywtNTcuNDM1IDAsMCAxNzcuNzAxLDAuNTIgMjU3LjIsMS4wMzkgNTIuNDEsOS4xODEgNTcuNjc0LDU1LjE1NSA1Ny4xNTUsODAuMyA5My41MjcsLTUuMTk2IDE1OS41MTUsNjAuOCAxNDIuODg5LDE0OC42MjIiICAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NDQyNDUsMCwwLDEuMDk0NDI0NSwyNDYuODU1MzYsODIuODYxNDQ2KSIgLz4gICAgICAgIDxwYXRoICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICAgICAgaWQ9InBhdGg0MiIgICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZjVmNWY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiICAgICAgICAgICBkPSJtIDAsMCBjIDQuNDQ1LC0yLjIzOCA3LjI4NSwwLjU0MyA3LjI4NSwwLjU0MyAwLDAgNjUuMDQ1LDU5LjM2NyA5NC4zNDgsOTMuNTU3IDI2LjA2MywzMC41ODYgMjcuNzYyLDgyLjEyOSAtMTYuOTk3LDEwMS4zODggLTQ0Ljc1OCwxOS4yNTggLTgxLjU4NCwtMjIuNjU3IC04MS41ODQsLTIyLjY1NyAtMzEuOTM1LDM1LjEyMyAtODAuMjY4LDMzLjM0NSAtMTAyLjYyMyw5LjU3NSAtMjIuMzU0LC0yMy43NyAtMTQuNTQ4LC02NC41NjggMi4xMjksLTg3LjI3NCAxNS42NTUsLTIxLjMxNCA4NC40NjUsLTgyLjY0NCA5NC44OTQsLTkzLjAxNiAwLDAgMC43NiwtMC43OTUgMi41NDgsLTIuMTE2IiAvPiAgICAgIDwvZz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
616
+ background-size: 20px 13px;
617
+ }
618
+ }
619
+ .my-pay-img{
620
+ width: 360px;
621
+ display: block;
622
+ overflow: hidden;
623
+ height: 0;
624
+ @include transition(0.5s all ease-in-out);
625
+ @include transform(scale(0) perspective(360px) rotateX(60deg));
626
+ &.active{
627
+ height: 489px;
628
+ @include transform(none);
668
629
  }
669
630
  }
670
- }
671
- .header-href{
672
- display: block;
673
631
  }
data/_sass/_rouge.scss CHANGED
@@ -8,8 +8,9 @@
8
8
  pre {
9
9
  position: relative;
10
10
  margin: 0;
11
- padding: 1em;
12
- }
11
+ padding: 0.7em;
12
+ @include font-rem(14);
13
+ }
13
14
  .lineno { padding-right: 24px; color: #8f908a;}
14
15
  .hll { background-color: #49483e }
15
16
  .c { color: #75715e } /* Comment */
@@ -70,4 +71,4 @@
70
71
  .vg { color: #f8f8f2 } /* Name.Variable.Global */
71
72
  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
72
73
  .il { color: #ae81ff } /* Literal.Number.Integer.Long */
73
- }
74
+ }
@@ -11,7 +11,8 @@ h1, h2, h3, h4, h5, h6 {
11
11
  font-family: $heading-font;
12
12
  }
13
13
  h1 {
14
- @include font-rem(28);
14
+ @include font-rem(24);
15
+ margin: 12px 0;
15
16
  @media #{$medium} {
16
17
  @include font-rem(32);
17
18
  }
@@ -19,22 +20,22 @@ h1 {
19
20
 
20
21
  // Links
21
22
  // --------------------------------------------------
22
- a {
23
+ a {
23
24
  text-decoration: none;
24
- color: $link-color;
25
- &:visited {
26
- color: lighten($link-color, 20);
25
+ color: $link-color;
26
+ &:visited {
27
+ color: lighten($link-color, 20);
27
28
  }
28
- &:hover {
29
- color: darken($link-color, 20);
29
+ &:hover {
30
+ color: darken($link-color, 20);
30
31
  }
31
- &:focus {
32
- outline: thin dotted;
32
+ &:focus {
33
+ outline: thin dotted;
33
34
  color: darken($link-color, 20);
34
35
  }
35
- &:hover,
36
- &:active {
37
- outline: 0;
36
+ &:hover,
37
+ &:active {
38
+ outline: 0;
38
39
  }
39
40
  }
40
41
 
@@ -97,7 +98,7 @@ tt, code, kbd, samp, pre {
97
98
  font-family: $code-font;
98
99
  }
99
100
  p,
100
- li {
101
+ li {
101
102
  code {
102
103
  @include font-rem(12);
103
104
  line-height: 1.5;
@@ -19,8 +19,7 @@ body {
19
19
  // --------------------------------------------------
20
20
  $base-color: rgba(#222, 0.8);
21
21
  $header-color: #000;
22
- $sub-item-color: rgba(#000, 0.1);
23
- $header-margin: #000;
22
+ $header-active: #000;
24
23
  $menu-top: white;
25
24
  $menu-height: 60px;
26
25
  $menu-overflow: #000;