jekyll-theme-consulting 0.2.12 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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