jekyll-dash 1.2.0 → 1.3.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b0cbb8f95447cb008b67a92dc42cbeba16770db4fd174ab5ae110a83bdabe592
4
- data.tar.gz: a2ab90915fc842164c7a1694deb1b22c76bb3fe5b001f95b6ad3ff72ae8e3a1a
3
+ metadata.gz: 4be59164c0e38ade84359bc8fa1d8344db6dffb153ed143afefdef515a83443c
4
+ data.tar.gz: '0043099644efd633246f7d850baddf63b46060ddb8d43e780b49b5af0647d343'
5
5
  SHA512:
6
- metadata.gz: 84fb4abd58e1640ffd18e36a62c5901d082e855ceb6284205ab68934390c9c58b55561c47fb234f57a90838f59f4a01b35c72e4f71efc802eca686a1c0c977a6
7
- data.tar.gz: 7a3dcd1f051f14243b66596816dfffe35f49af55a3f727ad028def5d5cafb32c5d4ce24ca684d7cfe5f1adbfe87abb6b071462fa430dc5fecc20f808afa5afd2
6
+ metadata.gz: 3ef0a6042fa71660c330d00602d226cd7d38ad68d32149fd7292ddf0028fd74e102f408afd5d71fecac64807791b7235b191ebfe4a822959ef97cad1cbd55d03
7
+ data.tar.gz: 0d0e3f59d5c27fd3bd400f5ec9de5032cf7f740182bc5ecfb94af257a17c7a7a7b5f1780cc2bdfcc579004d7f3dea25b1a41b8b1a1a03d17c7ddc0c5e65dc89e
data/README.md CHANGED
@@ -89,7 +89,23 @@ gem "jekyll-tagging"
89
89
  ```Gemfile
90
90
  gem "liquid-md5"
91
91
  ```
92
- **
92
+ ## FAQ
93
+
94
+ > I have configured posts but no posts are showing?
95
+
96
+ **Solution:** You most probably forgot to configure [jekyll-paginate](https://jekyllrb.com/docs/pagination/) in your _config.yml! Make sure you have the correct configuration as described above!
97
+
98
+ > I have added the correct configuration for `jekyll-paginate` but it is now complaining about a missing `index.html` file. What do I do?
99
+
100
+ **Solution** pagination only works with HTML files! Markdown is not supported there. Simply rename your `index.md` into `index.html` - that should do the trick!
101
+
102
+ > I have configured Disqus via _config.yml but Disqus fails to load on the page?
103
+
104
+ **Solution:** Make sure you configure the correct `url` within your `_config.yml`. Also make sure that your domain is trusted by Disqus. This can be configured within Disqus by adding a trusted domain.
105
+
106
+ > I am using this theme but I don't see any tags?
107
+
108
+ **Solution**: as described above you have to add the tagging plugin. Additionally, tags do not work natively by Github Pages. You have to build your site on an external CI and push the `_site` artifacts to a hosting repository.
93
109
 
94
110
  ## Contributing
95
111
 
@@ -1,5 +1,9 @@
1
1
  <footer class="site-footer">
2
2
  <div class="wrapper">
3
- <div class="credits"><a href="https://github.com/bitbrain/jekyll-dash">dash</a> theme for Jekyll by <a href="https://github.com/bitbrain">bitbrain</a> made with <i class="fas fa-heart"></i></div>
3
+ <div class="credits"><a href="https://github.com/bitbrain/jekyll-dash">dash</a> theme for Jekyll by <a href="https://github.com/bitbrain">bitbrain</a> made with <i class="fas fa-heart"></i>
4
+ {%- include theme-toggle.html -%}
5
+ </div>
4
6
  </div>
5
7
  </footer>
8
+
9
+
@@ -3,7 +3,6 @@
3
3
  <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}<b class="command_prompt"></b><b class="blinking_cursor">_</b></a>
4
4
  <span class="social_links">
5
5
  {% for link in site.dash.social_links %}<a class="color-{{ link.color }}-hover" href="{{ link.url }}"><i class="fab fa-{{ link.icon }}"></i></a>{% endfor %}
6
-
7
6
  </span>
8
7
  </div>
9
8
  </div>
@@ -0,0 +1,68 @@
1
+ <div class="toggleWrapper">
2
+ <input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()" checked />
3
+ <label for="theme-toggle" class="toggle">
4
+ <span class="toggle__handler">
5
+ <span class="crater crater--1"></span>
6
+ <span class="crater crater--2"></span>
7
+ <span class="crater crater--3"></span>
8
+ </span>
9
+ <span class="star star--1"></span>
10
+ <span class="star star--2"></span>
11
+ <span class="star star--3"></span>
12
+ <span class="star star--4"></span>
13
+ <span class="star star--5"></span>
14
+ <span class="star star--6"></span>
15
+ </label>
16
+ </div>
17
+ <script type="text/javascript">
18
+ const theme = localStorage.getItem('theme');
19
+ if (theme === "dark") {
20
+ document.documentElement.setAttribute('data-theme', 'dark');
21
+ }
22
+ const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
23
+
24
+ if (theme === "dark") {
25
+ document.getElementById('theme-toggle').checked = true;
26
+ document.documentElement.setAttribute('data-theme', 'dark');
27
+ document.documentElement.classList.add('theme--dark');
28
+ document.documentElement.classList.remove('theme--light');
29
+ document.getElementById("theme-toggle").className = 'light';
30
+ } else if (theme === "light") {
31
+ document.getElementById('theme-toggle').checked = false;
32
+ document.documentElement.setAttribute('data-theme', 'light');
33
+ document.documentElement.classList.add('theme--light');
34
+ document.documentElement.classList.remove('theme--dark');
35
+ document.getElementById("theme-toggle").className = 'dark';
36
+ } else if (userPrefers === "dark") {
37
+ document.getElementById('theme-toggle').checked = false;
38
+ document.documentElement.setAttribute('data-theme', 'dark');
39
+ document.documentElement.classList.add('theme--dark');
40
+ document.documentElement.classList.remove('theme--light');
41
+ window.localStorage.setItem('theme', 'dark');
42
+ document.getElementById("theme-toggle").className = 'light';
43
+ } else {
44
+ document.getElementById('theme-toggle').checked = true;
45
+ document.documentElement.setAttribute('data-theme', 'light');
46
+ document.documentElement.classList.add('theme--light');
47
+ document.documentElement.classList.remove('theme--dark');
48
+ window.localStorage.setItem('theme', 'light');
49
+ document.getElementById("theme-toggle").className = 'dark';
50
+ }
51
+
52
+ function modeSwitcher() {
53
+ let currentMode = document.documentElement.getAttribute('data-theme');
54
+ if (currentMode === "dark") {
55
+ document.documentElement.setAttribute('data-theme', 'light');
56
+ document.documentElement.classList.add('theme--light');
57
+ document.documentElement.classList.remove('theme--dark');
58
+ window.localStorage.setItem('theme', 'light');
59
+ document.getElementById("theme-toggle").className = 'dark';
60
+ } else {
61
+ document.documentElement.setAttribute('data-theme', 'dark');
62
+ document.documentElement.classList.add('theme--dark');
63
+ document.documentElement.classList.remove('theme--light');
64
+ window.localStorage.setItem('theme', 'dark');
65
+ document.getElementById("theme-toggle").className = 'light';
66
+ }
67
+ }
68
+ </script>
@@ -14,7 +14,6 @@
14
14
  </main>
15
15
 
16
16
  {%- include footer.html -%}
17
-
18
17
  <script>
19
18
  window.FontAwesomeConfig = {
20
19
  searchPseudoElements: true
@@ -1,7 +1,5 @@
1
1
  body {
2
2
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
3
- color: $color-foreground;
4
- background-color: $color-background-darker;
5
3
  -webkit-text-size-adjust: 100%;
6
4
  -webkit-font-feature-settings: "kern" 1;
7
5
  -moz-font-feature-settings: "kern" 1;
@@ -11,6 +9,11 @@ body {
11
9
  display: flex;
12
10
  min-height: 100vh;
13
11
  flex-direction: column;
12
+
13
+ @include themed() {
14
+ background-color: t('background-color-alt');
15
+ color: t('foreground-color');
16
+ }
14
17
  }
15
18
 
16
19
  body, html {
@@ -108,7 +111,9 @@ a {
108
111
  text-decoration: none;
109
112
 
110
113
  &:hover {
111
- color: $color-foreground;
114
+ @include themed() {
115
+ color: t('foreground-color');
116
+ }
112
117
  text-decoration: underline;
113
118
  }
114
119
 
@@ -126,7 +131,9 @@ a {
126
131
  * Blockquotes
127
132
  */
128
133
  blockquote {
129
- color: $color-background-dark;
134
+ @include themed() {
135
+ color: t('background-color');
136
+ }
130
137
  @include relative-font-size(1.125);
131
138
  letter-spacing: -1px;
132
139
  font-style: italic;
@@ -145,7 +152,10 @@ pre,
145
152
  code {
146
153
  @include relative-font-size(0.9375);
147
154
  border-radius: 0.3em;
148
- background-color: $color-background-dark;
155
+ @include themed() {
156
+ background-color: $color-background-dark;
157
+ color: $color-foreground;
158
+ }
149
159
  }
150
160
 
151
161
  code {
@@ -2,6 +2,12 @@ $color-background-dark: #1E2227;
2
2
  $color-background-darker: #15171A;
3
3
  $color-foreground: #DAE4ED;
4
4
  $color-foreground-dark: lighten($color-background-dark, 30%);
5
+
6
+ $color-background-light: #DAE4ED;
7
+ $color-background-lighter: lighten($color-background-light, 7%);
8
+ $color-foreground-dark: #1E2227;
9
+ $color-foreground-darker: #15171A;
10
+
5
11
  $color-pink: #F24784;
6
12
  $color-red: #FC4957;
7
13
  $color-orange: #EA9D53;
@@ -13,24 +19,24 @@ $color-blue: #637AFE;
13
19
  $color-indigo: #6775C4;
14
20
  $color-purple: #8E59D7;
15
21
 
16
- .color-pink { color: $color-pink; }
17
- .color-red { color: $color-red; }
18
- .color-orange { color: $color-orange; }
19
- .color-yellow { color: $color-yellow; }
20
- .color-teal { color: $color-teal; }
21
- .color-green { color: $color-green; }
22
- .color-cyan { color: $color-cyan; }
23
- .color-blue { color: $color-blue; }
24
- .color-indigo { color: $color-indigo; }
25
- .color-purple { color: $color-purple; }
22
+ .color-pink { color: $color-pink !important; }
23
+ .color-red { color: $color-red !important; }
24
+ .color-orange { color: $color-orange !important; }
25
+ .color-yellow { color: $color-yellow !important; }
26
+ .color-teal { color: $color-teal !important; }
27
+ .color-green { color: $color-green !important; }
28
+ .color-cyan { color: $color-cyan !important; }
29
+ .color-blue { color: $color-blue !important; }
30
+ .color-indigo { color: $color-indigo !important; }
31
+ .color-purple { color: $color-purple !important; }
26
32
 
27
- .color-pink-hover:hover { color: $color-pink; }
28
- .color-red-hover:hover { color: $color-red; }
29
- .color-orange-hover:hover { color: $color-orange; }
30
- .color-yellow-hover:hover { color: $color-yellow; }
31
- .color-teal-hover:hover { color: $color-teal; }
32
- .color-green-hover:hover { color: $color-green; }
33
- .color-cyan-hover:hover { color: $color-cyan; }
34
- .color-blue-hover:hover { color: $color-blue; }
35
- .color-indigo-hover:hover { color: $color-indigo; }
36
- .color-purple-hover:hover { color: $color-purple; }
33
+ .color-pink-hover:hover { color: $color-pink !important; }
34
+ .color-red-hover:hover { color: $color-red !important; }
35
+ .color-orange-hover:hover { color: $color-orange !important; }
36
+ .color-yellow-hover:hover { color: $color-yellow !important; }
37
+ .color-teal-hover:hover { color: $color-teal !important; }
38
+ .color-green-hover:hover { color: $color-green !important; }
39
+ .color-cyan-hover:hover { color: $color-cyan !important; }
40
+ .color-blue-hover:hover { color: $color-blue !important; }
41
+ .color-indigo-hover:hover { color: $color-indigo !important; }
42
+ .color-purple-hover:hover { color: $color-purple !important; }
@@ -6,3 +6,4 @@ $icon-check: "\f00c";
6
6
  $icon-minus: "\f068";
7
7
  $icon-flask: "\f0c3";
8
8
  $icon-tag: "\f02b";
9
+ $icon-lightbulb: "\f02b";
@@ -41,7 +41,9 @@
41
41
  &,
42
42
  &:visited,
43
43
  &:hover {
44
- color: $color-foreground;
44
+ @include themed() {
45
+ color: t('foreground-color');
46
+ }
45
47
  text-decoration: none;
46
48
  }
47
49
  }
@@ -79,14 +81,18 @@
79
81
 
80
82
 
81
83
  .post-title {
82
- color: $color-foreground;
84
+ @include themed() {
85
+ color: t('foreground-color');
86
+ }
83
87
  text-align: left;
84
88
  }
85
89
 
86
90
  .post-description {
87
91
  margin-top: 1em;
88
92
  font-size: $base-font-size * 1.15;
89
- color: $color-foreground;
93
+ @include themed() {
94
+ color: t('foreground-color');
95
+ }
90
96
  white-space: nowrap;
91
97
  overflow: hidden;
92
98
  width: 100%;
@@ -115,14 +121,18 @@
115
121
  margin-bottom: 2em;
116
122
  .post-date {
117
123
  margin-top: 1em;
118
- color: $color-foreground-dark;
124
+ @include themed() {
125
+ color: t('foreground-color-alt');
126
+ }
119
127
  font-size: 12px;
120
128
  margin-top: 1em;
121
129
  margin-left: 0.5em;
122
130
  }
123
131
 
124
132
  strong {
125
- color: white;
133
+ @include themed() {
134
+ color: t('foreground-color-contrast');
135
+ }
126
136
  }
127
137
 
128
138
  img {
@@ -139,12 +149,16 @@
139
149
  ul > li {
140
150
  text-align: left;
141
151
  margin-bottom: 0.6em;
142
- color: lighten($color-green, 25%);
152
+ @include themed() {
153
+ color: t('list-primary');
154
+ }
143
155
  list-style: none;
144
156
  margin-left: 0;
145
157
 
146
158
  svg {
147
- color: $color-green;
159
+ @include themed() {
160
+ color: t('list-secondary');
161
+ }
148
162
  margin-right: 0.65em;
149
163
  margin-bottom: -1px;
150
164
  }
@@ -167,7 +181,9 @@
167
181
  margin-bottom: 1em;
168
182
  margin-left: 0.5em;
169
183
  font-style: italic;
170
- color: lighten($color-yellow, 20%);
184
+ @include themed() {
185
+ color: t('quote-primary');
186
+ }
171
187
 
172
188
  &:before {
173
189
  content: $icon-quote-right;
@@ -175,7 +191,9 @@
175
191
  }
176
192
 
177
193
  & > svg.svg-inline--fa {
178
- color: lighten($color-yellow, 20%);
194
+ @include themed() {
195
+ color: t('quote-primary');
196
+ }
179
197
  float: left;
180
198
  width: 3em;
181
199
  height: 3em;
@@ -183,11 +201,15 @@
183
201
  }
184
202
 
185
203
  & > ul > li > svg {
186
- color: lighten($color-yellow, 20%);
204
+ @include themed() {
205
+ color: t('quote-primary');
206
+ }
187
207
  }
188
208
 
189
209
  li {
190
- color: $color-yellow;
210
+ @include themed() {
211
+ color: t('quote-secondary');
212
+ }
191
213
  &:before {
192
214
  content: $icon-minus;
193
215
  }
@@ -207,7 +229,9 @@
207
229
  }
208
230
 
209
231
  & > .post-meta {
210
- color: $color-foreground-dark;
232
+ @include themed() {
233
+ color: t('foreground-color-alt');
234
+ }
211
235
  font-size: $small-font-size;
212
236
  }
213
237
  }
@@ -223,13 +247,17 @@
223
247
 
224
248
  .tag, .tag-cloud > a {
225
249
  color: $color-green;
226
- background-color: $color-background-dark;
250
+ @include themed() {
251
+ background-color: t('background-color');
252
+ }
227
253
  padding: 0.3em 0.6em;
228
254
  border-radius: 0.3em;
229
255
  &:hover {
230
256
  text-decoration: none;
231
- color: lighten($color-green, 20%);
232
- background-color: lighten($color-background-dark, 5%);
257
+ color: lighten($color-green, 20%) !important;
258
+ @include themed() {
259
+ background-color: lighten(t('background-color'), 5%);
260
+ }
233
261
  }
234
262
 
235
263
  & > svg {
@@ -249,10 +277,14 @@
249
277
 
250
278
  .credits {
251
279
  font-size: 10px;
252
- color: lighten($color-background-dark, 5%);
280
+ @include themed() {
281
+ color: lighten(t('background-color'), 5%);
282
+ }
253
283
 
254
284
  & > a {
255
- color: lighten($color-background-dark, 10%);
285
+ @include themed() {
286
+ color: lighten(t('background-color'), 10%);
287
+ }
256
288
  text-decoration: underline;
257
289
  }
258
290
  }
@@ -280,16 +312,22 @@
280
312
 
281
313
  & > a {
282
314
  color: $color-green;
283
- background-color: $color-background-dark;
315
+ @include themed() {
316
+ background-color: t('background-color');
317
+ }
284
318
  &:hover {
285
319
  color: lighten($color-green, 20%);
286
- background-color: lighten($color-background-dark, 5%);
320
+ @include themed() {
321
+ background-color: lighten(t('background-color'), 5%);
322
+ }
287
323
  }
288
324
  }
289
325
 
290
326
  & > span {
291
- color: darken($color-foreground, 20%);
292
- background-color: darken($color-background-dark, 3%);
327
+ @include themed() {
328
+ color: darken(t('foreground-color'), 20%);
329
+ background-color: darken(t('background-color'), 3%);
330
+ }
293
331
  }
294
332
  }
295
333
 
@@ -298,7 +336,9 @@
298
336
  text-align: right;
299
337
  display: inline-block;
300
338
  & > a {
301
- color: darken($color-foreground, 10%);
339
+ @include themed() {
340
+ color: darken(t('foreground-color'), 10%);
341
+ }
302
342
  display: inline-block;
303
343
  padding-left: 0.3em;
304
344
  font-size: $post-link-font-size * 1.35;
@@ -339,3 +379,27 @@ ul.related-posts {
339
379
  }
340
380
  }
341
381
  }
382
+
383
+ #theme-toggle {
384
+ background-color: transparent;
385
+ border: none;
386
+ float: right;
387
+ display: inline-block;
388
+ &.dark {
389
+ &:before {
390
+ content: $icon-flask;
391
+ @include font-awesome-icon;
392
+ }
393
+ @include themed() {
394
+ color: t('foreground-color');
395
+ }
396
+ }
397
+
398
+ &.light {
399
+ &:before {
400
+ content: $icon-flask;
401
+ @include font-awesome-icon;
402
+ }
403
+ color: $color-yellow;
404
+ }
405
+ }
@@ -9,3 +9,21 @@
9
9
  display: none;
10
10
  -webkit-font-smoothing: antialiased;
11
11
  }
12
+
13
+ @mixin themed() {
14
+ @each $theme, $map in $themes {
15
+ .theme--#{$theme} & {
16
+ $theme-map: () !global;
17
+ @each $key, $submap in $map {
18
+ $value: map-get(map-get($themes, $theme), '#{$key}');
19
+ $theme-map: map-merge($theme-map, ($key: $value)) !global;
20
+ }
21
+ @content;
22
+ $theme-map: null !global;
23
+ }
24
+ }
25
+ }
26
+
27
+ @function t($key) {
28
+ @return map-get($theme-map, $key);
29
+ }
@@ -0,0 +1,24 @@
1
+ $themes: (
2
+ dark: (
3
+ background-color: $color-background-dark,
4
+ background-color-alt: $color-background-darker,
5
+ foreground-color: $color-foreground,
6
+ foreground-color-alt: $color-foreground-dark,
7
+ foreground-color-contrast: white,
8
+ quote-primary: lighten($color-yellow, 20%),
9
+ quote-secondary: $color-yellow,
10
+ list-primary: lighten($color-green, 25%),
11
+ list-secondary: $color-green
12
+ ),
13
+ light: (
14
+ background-color: $color-background-lighter,
15
+ background-color-alt: $color-background-light,
16
+ foreground-color: $color-foreground-dark,
17
+ foreground-color-alt: $color-foreground-darker,
18
+ foreground-color-contrast: black,
19
+ quote-primary: $color-yellow,
20
+ quote-secondary: darken($color-yellow, 10%),
21
+ list-primary: $color-green,
22
+ list-secondary: lighten($color-green, 20%)
23
+ ),
24
+ );
@@ -0,0 +1,184 @@
1
+ .toggleWrapper {
2
+ display: inline-block;
3
+ float: right;
4
+ position:relative;
5
+
6
+ input {
7
+ display: none !important;
8
+ }
9
+ }
10
+
11
+ .toggle {
12
+ cursor: pointer;
13
+ display: inline-block;
14
+ position: relative;
15
+ width:49px;
16
+ height: 28px;
17
+ background-color: #4FC1E4;
18
+ border-radius: 45px - 6;
19
+ transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
20
+ }
21
+
22
+ .toggle__handler {
23
+ display: inline-block;
24
+ position: relative;
25
+ z-index: 1;
26
+ top: 3px;
27
+ left: 3px;
28
+ width: 25px - 3;
29
+ height: 25px - 3;
30
+ background-color: #FFCF96;
31
+ border-radius: 25px;
32
+ box-shadow: 0 2px 6px rgba(0,0,0,.3);
33
+ transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
34
+ transform: rotate(-45deg);
35
+
36
+ .crater {
37
+ position: absolute;
38
+ background-color: #E8CDA5;
39
+ opacity: 0;
40
+ transition: opacity 200ms ease-in-out;
41
+ border-radius: 100%;
42
+ }
43
+
44
+ .crater--1 {
45
+ top: 9px;
46
+ left: 5px;
47
+ width: 2px;
48
+ height: 2px;
49
+ }
50
+
51
+ .crater--2 {
52
+ top: 14px;
53
+ left: 11px;
54
+ width: 3px;
55
+ height: 3px;
56
+ }
57
+
58
+ .crater--3 {
59
+ top: 5px;
60
+ left: 12px;
61
+ width: 4px;
62
+ height: 4px;
63
+ }
64
+ }
65
+
66
+ .star {
67
+ position: absolute;
68
+ background-color: #ffffff;
69
+ transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
70
+ border-radius: 50%;
71
+ }
72
+
73
+ .star--1 {
74
+ top: 5px;
75
+ left: 17px;
76
+ z-index: 0;
77
+ width: 15px;
78
+ height: 2px;
79
+ }
80
+
81
+ .star--2 {
82
+ top: 9px;
83
+ left: 14px;
84
+ z-index: 1;
85
+ width: 15px;
86
+ height: 2px;
87
+ }
88
+
89
+ .star--3 {
90
+ top: 14px;
91
+ left: 20px;
92
+ z-index: 0;
93
+ width: 15px;
94
+ height: 2px;
95
+ }
96
+
97
+ .star--4,
98
+ .star--5,
99
+ .star--6 {
100
+ opacity: 0;
101
+ transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
102
+ }
103
+
104
+ .star--4 {
105
+ top: 8px;
106
+ left: 6px;
107
+ z-index: 0;
108
+ width: 2px;
109
+ height: 2px;
110
+ transform: translate3d(3px,0,0);
111
+ }
112
+
113
+ .star--5 {
114
+ top: 16px;
115
+ left: 8px;
116
+ z-index: 0;
117
+ width: 3px;
118
+ height: 3px;
119
+ transform: translate3d(3px,0,0);
120
+ }
121
+
122
+ .star--6 {
123
+ top: 18px;
124
+ left: 14px;
125
+ z-index: 0;
126
+ width: 2px;
127
+ height: 2px;
128
+ transform: translate3d(3px,0,0);
129
+ }
130
+
131
+ input:checked {
132
+ + .toggle {
133
+ background-color: #637AFE;
134
+
135
+ &:before {
136
+ color: #637AFE;
137
+ }
138
+
139
+ &:after {
140
+ color: #ffffff;
141
+ }
142
+
143
+ .toggle__handler {
144
+ background-color: #FFE5B5;
145
+ transform: translate3d(20px, 0, 0) rotate(0);
146
+
147
+ .crater { opacity: 1; }
148
+ }
149
+
150
+ .star--1 {
151
+ width: 2px;
152
+ height: 2px;
153
+ }
154
+
155
+ .star--2 {
156
+ width: 4px;
157
+ height: 4px;
158
+ transform: translate3d(-5px, 0, 0);
159
+ }
160
+
161
+ .star--3 {
162
+ width: 2px;
163
+ height: 2px;
164
+ transform: translate3d(-7px, 0, 0);
165
+ }
166
+
167
+ .star--4,
168
+ .star--5,
169
+ .star--6 {
170
+ opacity: 1;
171
+ transform: translate3d(0,0,0);
172
+ }
173
+ .star--4 {
174
+ transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
175
+ }
176
+ .star--5 {
177
+ transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
178
+ }
179
+ .star--6 {
180
+ transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
181
+ }
182
+ }
183
+ }
184
+
data/_sass/dash.scss CHANGED
@@ -36,10 +36,12 @@ $spacing-unit: 30px !default;
36
36
  @import
37
37
  "dash/fonts",
38
38
  "dash/icons",
39
- "dash/mixins",
40
39
  "dash/colors",
40
+ "dash/themes",
41
+ "dash/mixins",
41
42
  "dash/animations",
42
43
  "dash/base",
43
44
  "dash/layout",
45
+ "dash/dn-toggle",
44
46
  "dash/syntax-highlighting"
45
47
  ;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-dash
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.2.0
4
+ version: 1.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Miguel Gonzalez Sanchez
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-05-24 00:00:00.000000000 Z
11
+ date: 2019-08-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -110,6 +110,7 @@ files:
110
110
  - _includes/header.html
111
111
  - _includes/pagination.html
112
112
  - _includes/tagcloud.html
113
+ - _includes/theme-toggle.html
113
114
  - _layouts/default.html
114
115
  - _layouts/home.html
115
116
  - _layouts/page.html
@@ -124,6 +125,8 @@ files:
124
125
  - _sass/dash/_layout.scss
125
126
  - _sass/dash/_mixins.scss
126
127
  - _sass/dash/_syntax-highlighting.scss
128
+ - _sass/dash/_themes.scss
129
+ - _sass/dash/dn-toggle.scss
127
130
  - assets/css/style.scss
128
131
  - assets/favicon.png
129
132
  - assets/fonts/RobotoMono-Medium.eot
@@ -153,7 +156,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
153
156
  - !ruby/object:Gem::Version
154
157
  version: '0'
155
158
  requirements: []
156
- rubygems_version: 3.0.3
159
+ rubyforge_project:
160
+ rubygems_version: 2.7.7
157
161
  signing_key:
158
162
  specification_version: 4
159
163
  summary: A dark UI theme for Jekyll, inspired by Dash UI for Atom.