krad 3.5.2 → 3.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/header.html +44 -12
  3. data/_includes/scripts.html +1 -0
  4. data/_sass/hamburgers/_base.scss +69 -0
  5. data/_sass/hamburgers/hamburgers.scss +117 -0
  6. data/_sass/hamburgers/types/_3dx-r.scss +35 -0
  7. data/_sass/hamburgers/types/_3dx.scss +35 -0
  8. data/_sass/hamburgers/types/_3dxy-r.scss +35 -0
  9. data/_sass/hamburgers/types/_3dxy.scss +35 -0
  10. data/_sass/hamburgers/types/_3dy-r.scss +35 -0
  11. data/_sass/hamburgers/types/_3dy.scss +35 -0
  12. data/_sass/hamburgers/types/_arrow-r.scss +16 -0
  13. data/_sass/hamburgers/types/_arrow.scss +16 -0
  14. data/_sass/hamburgers/types/_arrowalt-r.scss +36 -0
  15. data/_sass/hamburgers/types/_arrowalt.scss +36 -0
  16. data/_sass/hamburgers/types/_arrowturn-r.scss +18 -0
  17. data/_sass/hamburgers/types/_arrowturn.scss +18 -0
  18. data/_sass/hamburgers/types/_boring.scss +30 -0
  19. data/_sass/hamburgers/types/_collapse-r.scss +47 -0
  20. data/_sass/hamburgers/types/_collapse.scss +47 -0
  21. data/_sass/hamburgers/types/_elastic-r.scss +41 -0
  22. data/_sass/hamburgers/types/_elastic.scss +41 -0
  23. data/_sass/hamburgers/types/_emphatic-r.scss +53 -0
  24. data/_sass/hamburgers/types/_emphatic.scss +53 -0
  25. data/_sass/hamburgers/types/_minus.scss +34 -0
  26. data/_sass/hamburgers/types/_slider-r.scss +38 -0
  27. data/_sass/hamburgers/types/_slider.scss +38 -0
  28. data/_sass/hamburgers/types/_spin-r.scss +43 -0
  29. data/_sass/hamburgers/types/_spin.scss +43 -0
  30. data/_sass/hamburgers/types/_spring-r.scss +47 -0
  31. data/_sass/hamburgers/types/_spring.scss +44 -0
  32. data/_sass/hamburgers/types/_squeeze.scss +43 -0
  33. data/_sass/hamburgers/types/_stand-r.scss +45 -0
  34. data/_sass/hamburgers/types/_stand.scss +45 -0
  35. data/_sass/hamburgers/types/_vortex-r.scss +48 -0
  36. data/_sass/hamburgers/types/_vortex.scss +48 -0
  37. data/_sass/layouts/_responsive-menu.scss +114 -23
  38. data/_sass/variables/_hamburger.scss +5 -0
  39. data/assets/scripts/responsive-menu.js +14 -25
  40. data/assets/scripts/search.js +1 -1
  41. data/assets/styles/components.scss +2 -0
  42. metadata +36 -2
data/_sass/hamburgers/types/_vortex-r.scss ADDED
@@ -0,0 +1,48 @@
1
+ @if index($hamburger-types, vortex-r) {
2
+ /*
3
+ * Vortex Reverse
4
+ */
5
+ .hamburger--vortex-r {
6
+ .hamburger-inner {
7
+ transition-duration: 0.2s;
8
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
9
+
10
+ &::before,
11
+ &::after {
12
+ transition-duration: 0s;
13
+ transition-delay: 0.1s;
14
+ transition-timing-function: linear;
15
+ }
16
+
17
+ &::before {
18
+ transition-property: top, opacity;
19
+ }
20
+
21
+ &::after {
22
+ transition-property: bottom, transform;
23
+ }
24
+ }
25
+
26
+ &.is-active {
27
+ .hamburger-inner {
28
+ transform: rotate(-765deg);
29
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
30
+
31
+ &::before,
32
+ &::after {
33
+ transition-delay: 0s;
34
+ }
35
+
36
+ &::before {
37
+ top: 0;
38
+ opacity: 0;
39
+ }
40
+
41
+ &::after {
42
+ bottom: 0;
43
+ transform: rotate(-90deg);
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
data/_sass/hamburgers/types/_vortex.scss ADDED
@@ -0,0 +1,48 @@
1
+ @if index($hamburger-types, vortex) {
2
+ /*
3
+ * Vortex
4
+ */
5
+ .hamburger--vortex {
6
+ .hamburger-inner {
7
+ transition-duration: 0.2s;
8
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
9
+
10
+ &::before,
11
+ &::after {
12
+ transition-duration: 0s;
13
+ transition-delay: 0.1s;
14
+ transition-timing-function: linear;
15
+ }
16
+
17
+ &::before {
18
+ transition-property: top, opacity;
19
+ }
20
+
21
+ &::after {
22
+ transition-property: bottom, transform;
23
+ }
24
+ }
25
+
26
+ &.is-active {
27
+ .hamburger-inner {
28
+ transform: rotate(765deg);
29
+ transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
30
+
31
+ &::before,
32
+ &::after {
33
+ transition-delay: 0s;
34
+ }
35
+
36
+ &::before {
37
+ top: 0;
38
+ opacity: 0;
39
+ }
40
+
41
+ &::after {
42
+ bottom: 0;
43
+ transform: rotate(90deg);
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
data/_sass/layouts/_responsive-menu.scss CHANGED
@@ -1,31 +1,122 @@
1
- .navbar {
2
- margin: .25em 0;
1
+ // Desktop Navigation
2
+ #desktopNav {
3
+ .navbar {
4
+ margin: .25em 0;
5
+ }
6
+
7
+ .navigation {
8
+ list-style: none;
9
+ padding: 0;
10
+ margin-bottom: 0.5em;
11
+
12
+ li {
13
+ margin-right: .75rem;
14
+
15
+ a {
16
+ color: $color-gray-smoke;
17
+ font-weight: $font-semi-bold;
18
+
19
+ &:before {
20
+ height: 2px;
21
+ }
22
+
23
+ &:hover {
24
+ color: $color-gray;
25
+ }
26
+ }
27
+ }
28
+
29
+ li:first-child {
30
+ a {
31
+ color: $color-gray;
32
+ }
33
+ }
34
+ }
3
35
  }
4
- .navigation {
5
- list-style: none;
6
- padding: 0;
7
- margin-bottom: 0.5em;
8
- li {
9
- margin-right: .75rem;
10
- a {
11
- color: $color-gray-smoke;
12
- font-weight: $font-semi-bold;
13
- &:before {
14
- height: 2px;
15
- }
16
- &:hover {
17
- color: $color-gray;
18
- }
19
- }
36
+
37
+ // Mobile Navigation
38
+ #mobileNav {
39
+ .rm-wrapper {
40
+ height: 3em;
41
+ overflow: hidden;
42
+ @include transition (height 0.5s);
43
+
44
+ &.open {
45
+ height: 14.5em;
46
+ }
20
47
  }
21
- li:first-child {
22
- a {
23
- color: $color-gray;
24
- }
48
+
49
+ .rm-menu-top {
50
+ position: relative;
51
+
52
+ .rm-menu-brand {
53
+ color: $color-gray;
54
+ font-weight: $font-bold;
55
+ display: inline-block;
56
+ margin: 15px 0;
57
+
58
+ &:before {
59
+ height: 2px;
60
+ }
61
+ }
62
+
63
+ .rm-toggle {
64
+ display: block;
65
+ position: absolute;
66
+ top: 0;
67
+ right: 0;
68
+ }
69
+ }
70
+
71
+ .navbar {
72
+ background: $color-gray-darker;
73
+ }
74
+
75
+ .navigation {
76
+ li {
77
+ border-bottom: 1px solid $color-gray-dark;
78
+
79
+ &:last-child {
80
+ border-bottom: none;
81
+ }
82
+ }
83
+
84
+ a {
85
+ text-align: center;
86
+ z-index: 1;
87
+
88
+ &:before {
89
+ height: 100%;
90
+ width: 0;
91
+ background-color: $color-main;
92
+ z-index: -1;
93
+ -webkit-transform: scaleX(1);
94
+ transform: scaleX(1);
95
+ }
96
+
97
+ &:hover {
98
+ color: $color-white;
99
+ background: none;
100
+
101
+ &:before {
102
+ width: 100%;
103
+ }
104
+ }
105
+ }
25
106
  }
26
107
  }
108
+
109
+ // Responsive Rule
27
110
  @media (min-width: 48em) {
28
- .navigation {
111
+ #desktopNav { display: flex; }
112
+ #mobileNav { display: none; }
113
+
114
+ #desktopNav .navigation {
29
115
  font-size: 0.75rem;
30
116
  }
117
+ }
118
+
119
+ @media (max-width: 47.999em) {
120
+ #desktopNav { display: none; }
121
+ #mobileNav { display: flex; }
31
122
  }
data/_sass/variables/_hamburger.scss ADDED
@@ -0,0 +1,5 @@
1
+ $hamburger-padding-x: 15px;
2
+ $hamburger-padding-y: 15px;
3
+ $hamburger-layer-width: 30px;
4
+ $hamburger-layer-height: 4px;
5
+ $hamburger-layer-spacing: 4px;
data/assets/scripts/responsive-menu.js CHANGED
@@ -1,37 +1,26 @@
1
1
  (function (window, document) {
2
2
  var menu = document.getElementById('rm-nav'),
3
- WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
3
+ WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
4
+ // Look for Hamburger
5
+ var hamburger = document.querySelector(".hamburger");
4
6
 
5
- function toggleHorizontal() {
6
- [].forEach.call(
7
- document.getElementById('rm-nav').querySelectorAll('.rm-can-transform'),
8
- function(el){
9
- el.classList.toggle('pure-menu-horizontal');
10
- }
11
- );
12
- };
13
7
 
14
8
  function toggleMenu() {
15
- // set timeout so that the panel has a chance to roll up
16
- // before the menu switches states
17
- if (menu.classList.contains('open')) {
18
- setTimeout(toggleHorizontal, 500);
19
- }
20
- else {
21
- toggleHorizontal();
22
- }
23
- menu.classList.toggle('open');
24
- document.getElementById('rm-toggle').classList.toggle('x');
25
- };
9
+ menu.classList.toggle('open');
10
+ // Toggle class "is-active"
11
+ hamburger.classList.toggle("is-active");
12
+ }
26
13
 
27
14
  function closeMenu() {
28
- if (menu.classList.contains('open')) {
29
- toggleMenu();
30
- }
15
+ if (menu.classList.contains('open')) {
16
+ toggleMenu();
17
+ }
31
18
  }
32
19
 
33
- document.getElementById('rm-toggle').addEventListener('click', function (e) {
34
- toggleMenu();
20
+ // On click
21
+ hamburger.addEventListener("click", function(e) {
22
+ toggleMenu();
23
+ e.preventDefault();
35
24
  });
36
25
 
37
26
  window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
data/assets/scripts/search.js CHANGED
@@ -410,5 +410,5 @@ SimpleJekyllSearch({
410
410
  searchInput: document.getElementById('search-input'),
411
411
  resultsContainer: document.getElementById('results-container'),
412
412
  json: '/data/search.json',
413
- noResultsText: 'Never heard of it!'
413
+ noResultsText: '❌ Never heard of it!'
414
414
  })
data/assets/styles/components.scss CHANGED
@@ -8,9 +8,11 @@ sitemap:
8
8
  ================================ */
9
9
  @import "variables/colors";
10
10
  @import "variables/fonts";
11
+ @import "variables/hamburger";
11
12
  @import "mixins/css3-mixins";
12
13
  /* Blog
13
14
  ================================ */
15
+ @import "hamburgers/hamburgers";
14
16
  @import "components/sharings";
15
17
  @import "components/syntax";
16
18
  @import "components/img-comparison";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: krad
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.5.2
4
+ version: 3.6.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lê Thanh Tùng
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-04-16 00:00:00.000000000 Z
11
+ date: 2018-05-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -89,6 +89,39 @@ files:
89
89
  - _sass/components/_img-comparison.scss
90
90
  - _sass/components/_sharings.scss
91
91
  - _sass/components/_syntax.scss
92
+ - _sass/hamburgers/_base.scss
93
+ - _sass/hamburgers/hamburgers.scss
94
+ - _sass/hamburgers/types/_3dx-r.scss
95
+ - _sass/hamburgers/types/_3dx.scss
96
+ - _sass/hamburgers/types/_3dxy-r.scss
97
+ - _sass/hamburgers/types/_3dxy.scss
98
+ - _sass/hamburgers/types/_3dy-r.scss
99
+ - _sass/hamburgers/types/_3dy.scss
100
+ - _sass/hamburgers/types/_arrow-r.scss
101
+ - _sass/hamburgers/types/_arrow.scss
102
+ - _sass/hamburgers/types/_arrowalt-r.scss
103
+ - _sass/hamburgers/types/_arrowalt.scss
104
+ - _sass/hamburgers/types/_arrowturn-r.scss
105
+ - _sass/hamburgers/types/_arrowturn.scss
106
+ - _sass/hamburgers/types/_boring.scss
107
+ - _sass/hamburgers/types/_collapse-r.scss
108
+ - _sass/hamburgers/types/_collapse.scss
109
+ - _sass/hamburgers/types/_elastic-r.scss
110
+ - _sass/hamburgers/types/_elastic.scss
111
+ - _sass/hamburgers/types/_emphatic-r.scss
112
+ - _sass/hamburgers/types/_emphatic.scss
113
+ - _sass/hamburgers/types/_minus.scss
114
+ - _sass/hamburgers/types/_slider-r.scss
115
+ - _sass/hamburgers/types/_slider.scss
116
+ - _sass/hamburgers/types/_spin-r.scss
117
+ - _sass/hamburgers/types/_spin.scss
118
+ - _sass/hamburgers/types/_spring-r.scss
119
+ - _sass/hamburgers/types/_spring.scss
120
+ - _sass/hamburgers/types/_squeeze.scss
121
+ - _sass/hamburgers/types/_stand-r.scss
122
+ - _sass/hamburgers/types/_stand.scss
123
+ - _sass/hamburgers/types/_vortex-r.scss
124
+ - _sass/hamburgers/types/_vortex.scss
92
125
  - _sass/layouts/_footer.scss
93
126
  - _sass/layouts/_home.scss
94
127
  - _sass/layouts/_page.scss
@@ -101,6 +134,7 @@ files:
101
134
  - _sass/pure/pure-min.scss
102
135
  - _sass/variables/_colors.scss
103
136
  - _sass/variables/_fonts.scss
137
+ - _sass/variables/_hamburger.scss
104
138
  - _sass/variables/_misc.scss
105
139
  - assets/favicon.ico
106
140
  - assets/images/avatar.png