krad 3.5.2 → 3.6.0

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.
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
@@ -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
+ }
@@ -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
+ }
@@ -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
  }
@@ -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;
@@ -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);
@@ -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
  })
@@ -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