jekyll-theme-consulting 0.2.12 → 0.3.1

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.
@@ -12,23 +12,6 @@
12
12
  position: relative;
13
13
  margin-left: 4em;
14
14
 
15
- &:before {
16
- @include vendor('transform', 'scaleX(-1)');
17
- color: _palette(fg);
18
- content: '\f002';
19
- cursor: default;
20
- display: block;
21
- font-size: 1.5em;
22
- height: _size(element-height) / 1.375;
23
- line-height: _size(element-height) / 1.375;
24
- opacity: 0.325;
25
- position: absolute;
26
- right: 0;
27
- text-align: center;
28
- top: 0;
29
- width: _size(element-height) / 1.375;
30
- }
31
-
32
15
  input[type="text"] {
33
16
  padding-right: _size(element-height);
34
17
  }
@@ -60,27 +43,29 @@
60
43
  }
61
44
 
62
45
  > .inner {
63
- @include padding($pad, $pad, (0, 0, $pad, 0));
64
46
  -webkit-overflow-scrolling: touch;
65
47
  overflow-x: hidden;
66
48
  overflow-y: auto;
67
49
  position: absolute;
68
50
  left: 0;
69
51
  top: 0;
52
+ padding: $pad 0 $pad 0;
70
53
  width: _size(sidebar-width-alt);
71
54
  height: 100%;
55
+ display: flex;
56
+ flex-direction: column;
57
+ justify-content: space-between;
72
58
 
73
59
  > * {
74
- border-bottom: solid 2px _palette(border);
75
- margin: 0 0 (_size(element-margin) * 1.75) 0;
76
- padding: 0 0 (_size(element-margin) * 1.75) 0;
60
+ border-bottom: 0;
61
+ margin: 0;
62
+ padding: 0 $pad 0 $pad;
77
63
 
78
64
  > :last-child {
79
65
  margin-bottom: 0;
80
66
  }
81
67
 
82
68
  &:last-child {
83
- border-bottom: 0;
84
69
  margin-bottom: 0;
85
70
  padding-bottom: 0;
86
71
  }
@@ -88,17 +73,10 @@
88
73
 
89
74
  > .alt {
90
75
  background-color: darken(_palette(bg-alt), 2);
91
- border-bottom: 0;
76
+ border-bottom: solid 2px _palette(border);
92
77
  margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
93
78
  padding: $pad;
94
- width: calc(100% + #{$pad * 2});
95
- }
96
-
97
- &:after {
98
- content: '';
99
- display: block;
100
- height: 4em;
101
- width: 100%;
79
+ width: calc(100% + $pad);
102
80
  }
103
81
  }
104
82
 
@@ -106,31 +84,66 @@
106
84
  @include icon(false, solid);
107
85
  @include vendor('transition', 'left 0.5s ease');
108
86
  -webkit-tap-highlight-color: rgba(255,255,255,0);
87
+ position: fixed;
88
+ left: 0;
109
89
  border: 0;
110
90
  display: block;
91
+ width: 6em;
111
92
  height: 6.25em;
112
- left: 0;
113
- line-height: 6.25em;
114
93
  outline: 0;
115
94
  overflow: hidden;
116
- position: fixed;
95
+ line-height: 6.25em;
117
96
  text-align: center;
118
97
  text-indent: 6em;
119
- top: 0;
120
- width: 6em;
121
98
  z-index: _misc(z-index-base);
122
99
 
100
+ &#sidebar-toggle-button {
101
+ top:0;
102
+ }
103
+
104
+ &#sidebar-search-button {
105
+ top:6.25em;
106
+ }
107
+
108
+ &#sidebar-logo-button {
109
+ top:12.5em;
110
+ }
111
+
123
112
  &:before {
113
+ position: absolute;
114
+ left: 0;
115
+ top: 0;
116
+ width: inherit;
117
+ height: inherit;
124
118
  margin-left: (-0.875em / 2);
125
- content: '\f0c9';
126
119
  font-size: 1.5rem;
127
- height: inherit;
128
- left: 0;
129
120
  line-height: inherit;
121
+ text-indent: 0;
122
+ }
123
+
124
+ &#sidebar-toggle-button:before {
125
+ content: '\f0c9';
126
+ }
127
+
128
+ &#sidebar-search-button:before {
129
+ content: '\f002';
130
+ }
131
+
132
+ &#sidebar-logo-button:before {
133
+ display: none;
134
+ content: '';
135
+ }
136
+
137
+ &#sidebar-logo-button svg {
130
138
  position: absolute;
139
+ top: 20%;
140
+ left: 4%;
141
+ width: 60%;
142
+ height: 60%;
143
+ font-size: 1.5rem;
144
+ line-height: inherit;
131
145
  text-indent: 0;
132
- top: 0;
133
- width: inherit;
146
+ fill: _palette(accent);
134
147
  }
135
148
  }
136
149
 
@@ -142,30 +155,72 @@
142
155
  body.is-preload & {
143
156
  display: none;
144
157
  }
158
+ }
145
159
 
146
- @include breakpoint('<=small') {
147
- .toggle {
148
- text-indent: 7.25em;
149
- width: 7.25em;
150
-
151
- &:before {
152
- color: _palette(fg);
153
- margin-left: (-0.125em / 2);
154
- margin-top: (-0.5em / 2);
155
- font-size: 1.1rem;
156
- z-index: 1;
157
- }
160
+ /* Inverted */
158
161
 
159
- &:after {
160
- background: transparentize(lighten(_palette(fg), 35), 0.25);
161
- border-radius: _size(border-radius);
162
- content: '';
163
- height: 3.5em;
164
- left: 1em;
165
- position: absolute;
166
- top: 1em;
167
- width: 5em;
168
- }
162
+ .inverted #search {
163
+ form {
164
+ &:before {
165
+ color: _palette(fg);
166
+ }
167
+
168
+ input[type="text"] {
169
+ color: _palette(fg);
170
+ }
171
+ }
172
+ }
173
+
174
+ #sidebar.inverted {
175
+ background-color: _palette(bg-inverted);
176
+
177
+ header.major > :last-child {
178
+ border-bottom: solid 3px _palette(fg-inverted);
179
+ }
180
+
181
+ a.toggle {
182
+ color: _palette(accent-inverted);
183
+
184
+ &:hover {
185
+ color: _palette(accent-cp);
186
+ }
187
+
188
+ &#sidebar-logo-button svg {
189
+ fill: _palette(accent-inverted);
190
+ }
191
+
192
+ &#sidebar-logo-button:hover svg {
193
+ fill: _palette(accent-cp);
194
+ }
195
+ }
196
+
197
+ > .inner {
198
+
199
+ > * {
200
+ border-bottom: 0;
201
+ }
202
+
203
+ > .alt {
204
+ background-color: darken(_palette(bg-inverted), 2);
205
+ border-bottom: solid 2px _palette(border-inverted);
206
+ }
207
+ }
208
+ }
209
+
210
+ #sidebar.inverted.inactive {
211
+ a.toggle {
212
+ color: _palette(accent);
213
+
214
+ &:hover {
215
+ color: _palette(accent);
216
+ }
217
+
218
+ &#sidebar-logo-button svg {
219
+ fill: _palette(accent);
220
+ }
221
+
222
+ &#sidebar-logo-button:hover svg {
223
+ fill: _palette(accent);
169
224
  }
170
225
  }
171
226
  }
@@ -35,11 +35,20 @@
35
35
  $palette: (
36
36
  bg: #ffffff,
37
37
  bg-alt: #f5f6f7,
38
+ bg-inverted: #6666ff,
39
+ bg-alt-inverted: #223344,
38
40
  fg: #7f888f,
39
41
  fg-bold: #3d4449,
40
42
  fg-light: #9fa3a6,
43
+ fg-inverted: #ffffff,
44
+ fg-bold-inverted: #ffffff,
45
+ fg-light-inverted: #ffffff,
41
46
  border: rgba(210,215,217,0.75),
42
47
  border-bg: transparentize(#e6ebed, 0.75),
43
- accent: #6a6af5,
44
- accent-inverted: #ffd455,
48
+ border-inverted: #ffffff,
49
+ border-bg-inverted: #ffffff,
50
+ accent: #6666ff,
51
+ accent-cp: #ffdd44,
52
+ accent-inverted: #ffffff,
53
+ accent-cp-inverted: #6666ff,
45
54
  );
data/assets/js/main.js CHANGED
@@ -83,8 +83,19 @@
83
83
  .appendTo($head);
84
84
 
85
85
  // Toggle.
86
- $('<a href="#sidebar" class="toggle">Toggle</a>')
87
- .appendTo($sidebar)
86
+ $('#sidebar-toggle-button')
87
+ .on('click', function(event) {
88
+
89
+ // Prevent default.
90
+ event.preventDefault();
91
+ event.stopPropagation();
92
+
93
+ // Toggle.
94
+ $sidebar.toggleClass('inactive');
95
+
96
+ });
97
+
98
+ $('#sidebar-search-button')
88
99
  .on('click', function(event) {
89
100
 
90
101
  // Prevent default.
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-consulting
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.12
4
+ version: 0.3.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Mougeolle
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-08-14 00:00:00.000000000 Z
11
+ date: 2019-08-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -69,10 +69,13 @@ files:
69
69
  - _includes/head.html
70
70
  - _includes/header.html
71
71
  - _includes/language.html
72
+ - _includes/logo.html
72
73
  - _includes/navigation.html
73
74
  - _includes/scripts.html
74
75
  - _includes/sidebar.html
76
+ - _includes/social.html
75
77
  - _includes/thread.html
78
+ - _includes/toggle.html
76
79
  - _layouts/default.html
77
80
  - _layouts/home.html
78
81
  - _layouts/landing.html