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 +4 -4
- data/README.md +17 -1
- data/_includes/footer.html +5 -1
- data/_includes/header.html +0 -1
- data/_includes/theme-toggle.html +68 -0
- data/_layouts/default.html +0 -1
- data/_sass/dash/_base.scss +15 -5
- data/_sass/dash/_colors.scss +26 -20
- data/_sass/dash/_icons.scss +1 -0
- data/_sass/dash/_layout.scss +86 -22
- data/_sass/dash/_mixins.scss +18 -0
- data/_sass/dash/_themes.scss +24 -0
- data/_sass/dash/dn-toggle.scss +184 -0
- data/_sass/dash.scss +3 -1
- metadata +7 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4be59164c0e38ade84359bc8fa1d8344db6dffb153ed143afefdef515a83443c
|
|
4
|
+
data.tar.gz: '0043099644efd633246f7d850baddf63b46060ddb8d43e780b49b5af0647d343'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
|
data/_includes/footer.html
CHANGED
|
@@ -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
|
|
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
|
+
|
data/_includes/header.html
CHANGED
|
@@ -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>
|
data/_layouts/default.html
CHANGED
data/_sass/dash/_base.scss
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
155
|
+
@include themed() {
|
|
156
|
+
background-color: $color-background-dark;
|
|
157
|
+
color: $color-foreground;
|
|
158
|
+
}
|
|
149
159
|
}
|
|
150
160
|
|
|
151
161
|
code {
|
data/_sass/dash/_colors.scss
CHANGED
|
@@ -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; }
|
data/_sass/dash/_icons.scss
CHANGED
data/_sass/dash/_layout.scss
CHANGED
|
@@ -41,7 +41,9 @@
|
|
|
41
41
|
&,
|
|
42
42
|
&:visited,
|
|
43
43
|
&:hover {
|
|
44
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
204
|
+
@include themed() {
|
|
205
|
+
color: t('quote-primary');
|
|
206
|
+
}
|
|
187
207
|
}
|
|
188
208
|
|
|
189
209
|
li {
|
|
190
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
280
|
+
@include themed() {
|
|
281
|
+
color: lighten(t('background-color'), 5%);
|
|
282
|
+
}
|
|
253
283
|
|
|
254
284
|
& > a {
|
|
255
|
-
|
|
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
|
-
|
|
315
|
+
@include themed() {
|
|
316
|
+
background-color: t('background-color');
|
|
317
|
+
}
|
|
284
318
|
&:hover {
|
|
285
319
|
color: lighten($color-green, 20%);
|
|
286
|
-
|
|
320
|
+
@include themed() {
|
|
321
|
+
background-color: lighten(t('background-color'), 5%);
|
|
322
|
+
}
|
|
287
323
|
}
|
|
288
324
|
}
|
|
289
325
|
|
|
290
326
|
& > span {
|
|
291
|
-
|
|
292
|
-
|
|
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
|
-
|
|
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
|
+
}
|
data/_sass/dash/_mixins.scss
CHANGED
|
@@ -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.
|
|
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-
|
|
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
|
-
|
|
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.
|