jekyll-theme-isabelline 0.1.6

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.
data/_sass/_opine.scss ADDED
@@ -0,0 +1,451 @@
1
+ // print media exceptions
2
+ @media print {
3
+ .mode, header nav, footer a.edit {
4
+ display: none;
5
+ }
6
+
7
+ main article aside {
8
+ margin-right: 0 !important;
9
+ }
10
+ }
11
+
12
+ // placeholder for responsive mode indication
13
+ footer nav .mode {
14
+ font-size: 70%;
15
+ text-transform: uppercase;
16
+ color: lighten($footer-color, 50%);
17
+ &:before { content: '~'; }
18
+ }
19
+
20
+ // desktop
21
+ @media all and (min-width: 801px) {
22
+ .mode:before {
23
+ content: 'Desktop' !important;
24
+ }
25
+ }
26
+
27
+ // tablet & mobile
28
+ @media all and (max-width: 800px) {
29
+ body {
30
+ text-align: left !important;
31
+ }
32
+
33
+ main, header, footer {
34
+ width: 90% !important;
35
+ min-width: 300px !important;
36
+ margin: 0;
37
+ }
38
+
39
+ main article blockquote {
40
+ &:before {
41
+ content: '' !important;
42
+ }
43
+ }
44
+
45
+ main ul.index li.year {
46
+ float: none !important;
47
+ text-align: left !important;
48
+ margin: .5em 0 0 0 !important;
49
+ }
50
+
51
+ main article aside {
52
+ margin-right: 0 !important;
53
+ }
54
+
55
+ // for tablet & mobile move year to top of ul of posts
56
+ main {
57
+ h2.year {
58
+ // clear: both;
59
+ float: none !important;
60
+ // width: 4.5em;
61
+ margin: 0 !important;
62
+ text-align: left !important;
63
+ font-size: 1.5em !important;
64
+ color: $main-heading-color !important;
65
+ }
66
+
67
+ ul.index {
68
+ margin-top: 0 !important;
69
+ }
70
+ }
71
+
72
+ .mode:before {
73
+ content: 'Tablet' !important;
74
+ }
75
+ }
76
+
77
+ // mobile
78
+ @media all and (max-width: 500px) {
79
+ body {
80
+ text-align: left !important;
81
+ }
82
+
83
+ main, header, footer {
84
+ // font-size: 200%;
85
+ width: 95% !important;
86
+ min-width: 100px !important;
87
+ margin: 0;
88
+ }
89
+
90
+ .mode:before {
91
+ content: 'Mobile' !important;
92
+ }
93
+
94
+ main article aside {
95
+ margin-right: 0 !important;
96
+ }
97
+
98
+ footer nav p span.copy {
99
+ position: relative;
100
+ margin-left: 0;
101
+ }
102
+
103
+ }
104
+
105
+ ::selection {
106
+ color: $selection-color;
107
+ background-color: $selection-background-color;
108
+ }
109
+
110
+ // size the width for comfortable reading
111
+ main, header, footer {
112
+ width: 70%;
113
+ max-width: 700px;
114
+ margin: 0 auto;
115
+ clear: both;
116
+ }
117
+
118
+ body {
119
+ font-family: $serif;
120
+ font-size: 1.3em;
121
+ color: $body-color;
122
+ background-color: $body-background-color;
123
+ }
124
+
125
+ header {
126
+ nav {
127
+ color: $header-color;
128
+ font-family: $header-serif;
129
+ margin: .5em 0;
130
+ float: right;
131
+
132
+ // site menu shows posts in "global" category
133
+ ul {
134
+ padding: 0;
135
+ margin: 0;
136
+ li {
137
+ color: $header-link-color;
138
+ list-style: none;
139
+ padding-left: .5rem;
140
+ display: inline-block;
141
+
142
+ &:before { content: '\2022'; padding-right: .5rem; }
143
+ &:first-child:before { content: ''; padding-right: 0; }
144
+
145
+ a {
146
+ &, &:hover, &:active, &:visited {
147
+ text-decoration: none;
148
+ color: darken($header-link-color,20%);
149
+ }
150
+ }
151
+ }
152
+ }
153
+ }
154
+ }
155
+
156
+ // div.column {
157
+ // width: 30%;
158
+ // float: left;
159
+ // padding: .5rem;
160
+ // margin: .5rem;
161
+ // border: 1px solid #ccc;
162
+ // }
163
+
164
+ // link styling
165
+ a {
166
+ color: darken($link-color,15%);
167
+ &:hover, &:active, &:visited {
168
+ color: $link-color;
169
+ }
170
+ }
171
+
172
+ // main area of the page
173
+ main {
174
+ p {
175
+ margin: 1em 0;
176
+ line-height: 1.2em;
177
+
178
+ code {
179
+ // TODO: need better styling
180
+ font-size: .9em;
181
+ background-color: white;
182
+ border: solid 1px #ccc;
183
+ border-radius: 3px;
184
+ padding: 0 .2em;
185
+ }
186
+ }
187
+
188
+ // figure is a composition of the image and caption
189
+ figure {
190
+ margin: 1em 0;
191
+ figcaption {
192
+ font-size: .8em;
193
+ text-align: center;
194
+ padding: .5rem;
195
+ }
196
+
197
+ img {
198
+ border-radius: 4px;
199
+ width: 100%;
200
+ }
201
+ }
202
+
203
+ // for slideshows show the first figure, hide rest
204
+ div.slideshow figure {
205
+ display: none;
206
+ &:first-child {
207
+ display: block;
208
+ }
209
+ }
210
+
211
+ // drop caps
212
+ // TODO: this needs work
213
+ @if $drop-caps {
214
+ h1, h2, h3, h4, h5 {
215
+ + p:first-letter {
216
+ color: $main-dropcaps-color;
217
+ float: left;
218
+ font-family: $header-serif;
219
+ font-size: $main-dropcaps-font-size;
220
+ line-height: 60px;
221
+ padding-top: 4px;
222
+ padding-right: 8px;
223
+ padding-left: 3px;
224
+ }
225
+ }
226
+ }
227
+
228
+ h1,h2,h3,h4,h5 {
229
+ margin: 1em 0 .5em 0;
230
+ color: $main-heading-color;
231
+ font-family: $header-serif;
232
+ text-align: left;
233
+ }
234
+
235
+ // h4 should sit right on top of the paragraph
236
+ h4 {
237
+ margin-bottom: 0;
238
+ color: $body-color;
239
+ }
240
+ h4 + p { margin-top: .2em } // .2em to match line height spacing
241
+
242
+ // ul.posts {
243
+ // padding-left: 0;
244
+ // li {
245
+ // list-style: none;
246
+ // padding-left: 0;
247
+ // margin-left: 0;
248
+ // margin-top: .5rem;
249
+ // margin-bottom: .5rem;
250
+ // }
251
+ // }
252
+
253
+ // styling for the main article
254
+ article {
255
+
256
+ // styling for in-article unordered lists
257
+ ul {
258
+ padding-left: 0;
259
+ li {
260
+ list-style: none;
261
+ padding-left: 1em;
262
+ padding-bottom: .2em;
263
+ margin-left: 0;
264
+
265
+ // mdash for unordered list items
266
+ &::before {
267
+ content: "\2014";
268
+ margin-left: -1em;
269
+ margin-right: .2em;
270
+ }
271
+
272
+ // custom checkboxes for task list items
273
+ &.task-list-item {
274
+ padding-left: 1em;
275
+
276
+ &::before {
277
+ content: none;
278
+ }
279
+ & input::before {
280
+ content: "\2610";
281
+ padding-right: .3em;
282
+ }
283
+ & input[checked]::before {
284
+ content: "\2611";
285
+ }
286
+ & input {
287
+ appearance: none;
288
+ -moz-appearance: none;
289
+ -webkit-appearance: none;
290
+ margin-left: -1.2em;
291
+ height: 1em;
292
+ }
293
+ }
294
+
295
+
296
+ }
297
+ }
298
+
299
+ // TODO: probably needs work
300
+ blockquote {
301
+ clear: both;
302
+ margin: .5rem 0;
303
+ padding: 0;
304
+ margin-left: 2em;
305
+ position: relative;
306
+ font-size: 1.2em;
307
+ font-style: italic;
308
+
309
+ color: $main-blockquote-color;
310
+
311
+ &:before {
312
+ content: '\201c';
313
+ position: absolute;
314
+ top: -.15em;
315
+ left: -.7em;
316
+ font-size: 4em;
317
+ color: $main-blockquote-before-color;
318
+ }
319
+
320
+ :first-child { margin-top: 0; }
321
+ :last-child { margin-bottom: 0; }
322
+ }
323
+
324
+ // inset side note
325
+ aside {
326
+ clear: both;
327
+ float: right;
328
+ margin: 0 -20% 0 1rem;
329
+ padding: 0.5em 1rem;
330
+ position: relative;
331
+ font-size: .9em;
332
+ text-align: left;
333
+ width: 40%;
334
+ color: $main-aside-color;
335
+ border-left: 1px solid $main-aside-color;
336
+ }
337
+
338
+ > table {
339
+ width: 100%;
340
+ &, th, td {
341
+ border-collapse: collapse;
342
+ border: 1px solid $main-table-header-bg-color;
343
+ }
344
+ thead {
345
+ th {
346
+ font-weight: bold;
347
+ text-align: center;
348
+ background-color: $main-table-header-bg-color;
349
+ font-family: $sans-serif;
350
+ color: $body-color;
351
+ font-size: 80%;
352
+ }
353
+ }
354
+ th, td { padding: 7px; }
355
+ }
356
+
357
+ dt { font-weight: bold; }
358
+ dd { margin: 0 0 .5em 0; }
359
+
360
+ // styling for the QED brick
361
+ .qed { color: #ccc; }
362
+ }
363
+
364
+ // styling for years in the index timeline of posts
365
+ // TODO: hoist color to _config.sass
366
+ // TODO: shold better scope selector
367
+ h2.year {
368
+ clear: both;
369
+ color: hsl($hue,10,80);
370
+ float: left;
371
+ width: 4.5em;
372
+ margin: -.2em 0 0 -5em;
373
+ padding: 5px 0 0 0;
374
+ font-family: $header-serif;
375
+ font-size: 2em;
376
+ font-weight: normal;
377
+ text-align: right;
378
+ }
379
+
380
+ // styling for index of posts
381
+ ul.index {
382
+ padding-left: 0;
383
+
384
+ li {
385
+ padding: .5em 0 .3em 0;
386
+ list-style-type: none;
387
+ color: $main-index-color;
388
+
389
+ a {
390
+ text-decoration: none;
391
+ &:hover {
392
+ text-decoration: underline;
393
+ }
394
+ }
395
+
396
+ // space posted date off post title
397
+ span.posted {
398
+ font-size: .8em;
399
+ margin-left: 1.2em;
400
+ &:before {
401
+ content: "\2014";
402
+ margin-left: -1em;
403
+ margin-right: .2em;
404
+ }
405
+ }
406
+ }
407
+ }
408
+ }
409
+
410
+ span.badge {
411
+ border-radius: 1em;
412
+ display: inline-block;
413
+ padding: 2px .5em;
414
+ margin-left: 1em;
415
+ font-size: 50%;
416
+ font-weight: bold;
417
+ color: white;
418
+ text-transform: uppercase;
419
+ font-family: $sans-serif;
420
+
421
+ &.draft { background: linear-gradient(hsl(0,90,60), hsl(0,90,40)); }
422
+ &.collection { background: linear-gradient(hsl(210,60,60), hsl(210,60,40)); }
423
+ &.private { background: linear-gradient(hsl(20,10,40), hsl(20,10,20)); }
424
+ &.blog { background: linear-gradient(hsl(280,90,60), hsl(280,90,40)); }
425
+ }
426
+
427
+
428
+
429
+ // site footer
430
+ footer {
431
+ color: $footer-color;
432
+ font-size: 80%;
433
+ margin-top: 2em;
434
+ font-family: $footer-serif;
435
+ &, a, a:active, a:hover, a:visited { color: $footer-link-color }
436
+
437
+ // dont underline links in the footer
438
+ nav a {
439
+ text-decoration: none;
440
+ &:hover {
441
+ text-decoration: underline;
442
+ }
443
+ }
444
+
445
+ // hang copyright symbol
446
+ span.copy {
447
+ position: absolute;
448
+ margin-left: -1.2rem;
449
+ }
450
+
451
+ }
@@ -0,0 +1,45 @@
1
+ // from https://www.w3schools.com/howto/howto_js_snackbar.asp
2
+ #snackbar {
3
+ visibility: hidden;
4
+ min-width: 250px;
5
+ margin-left: -125px; /* Divide value of min-width by 2 */
6
+ background: linear-gradient(hsl($hue,60,30), hsl($hue,60,20));
7
+ // background: linear-gradient(#930, #620);
8
+ // background: linear-gradient(#555, #333);
9
+ color: #fff;
10
+ text-align: center;
11
+ border-radius: 8px;
12
+ padding: 16px;
13
+ position: fixed;
14
+ z-index: 1;
15
+ left: 50%;
16
+ bottom: 30px;
17
+ font-family: $sans-serif;
18
+ }
19
+
20
+ #snackbar.show {
21
+ visibility: visible;
22
+ -moz-animation: fadein 0.5s, fadeout 0.5s 2.5s;
23
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
24
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
25
+ }
26
+
27
+ @-webkit-keyframes fadein {
28
+ from {bottom: 0; opacity: 0;}
29
+ to {bottom: 30px; opacity: 1;}
30
+ }
31
+
32
+ @keyframes fadein {
33
+ from {bottom: 0; opacity: 0;}
34
+ to {bottom: 30px; opacity: 1;}
35
+ }
36
+
37
+ @-webkit-keyframes fadeout {
38
+ from {bottom: 30px; opacity: 1;}
39
+ to {bottom: 0; opacity: 0;}
40
+ }
41
+
42
+ @keyframes fadeout {
43
+ from {bottom: 30px; opacity: 1;}
44
+ to {bottom: 0; opacity: 0;}
45
+ }
@@ -0,0 +1,73 @@
1
+ /***************
2
+ Darkly Pygments Theme
3
+ (c) 2014 Sourcey
4
+ http://sourcey.com
5
+ ***************/
6
+
7
+ .rouge-gutter {
8
+ user-select: none;
9
+ -moz-user-select: none;
10
+ -khtml-user-select: none;
11
+ -webkit-user-select: none;
12
+ -o-user-select: none;
13
+ }
14
+
15
+ .highlight {
16
+ white-space: pre;
17
+ overflow: auto;
18
+ word-wrap: normal; /* horizontal scrolling */
19
+ -moz-border-radius: 6px;
20
+ -webkit-border-radius: 6px;
21
+ border-radius: 6px;
22
+ padding: .5rem .5rem;
23
+ background: #343642;
24
+ color: #C1C2C3;
25
+
26
+ // &::-webkit-scrollbar {
27
+ // background: transparent; /* optional: just make scrollbar invisible */
28
+ // width: 0px; /* remove scrollbar space */
29
+ // height: 0px;
30
+ // }
31
+ /* optional: show position indicator in red */
32
+ // &::-webkit-scrollbar-thumb {
33
+ // //background: #FF0000;
34
+ // }
35
+
36
+
37
+ margin: 2rem 0;
38
+
39
+ tab-size: 2rem;
40
+
41
+ font-size: 1rem;
42
+
43
+ .lineno {
44
+ text-align: right;
45
+ color: #777;
46
+ padding-right: .5rem;
47
+ }
48
+
49
+ pre {
50
+ margin: 0;
51
+ tab-size: 4;
52
+ }
53
+ }
54
+ .highlight .hll { background-color: #ffc; }
55
+ .highlight .gd { color: #2e3436; background-color: #0e1416; }
56
+ .highlight .gr { color: #eeeeec; background-color: #c00; }
57
+ .highlight .gi { color: #babdb6; background-color: #1f2b2d; }
58
+ .highlight .go { color: #2c3032; background-color: #2c3032; }
59
+ .highlight .kt { color: #e3e7df; }
60
+ .highlight .ni { color: #888a85; }
61
+ .highlight .c,.highlight .cm,.highlight .c1,.highlight .cs { color: #8D9684; }
62
+ .highlight .err,.highlight .g,.highlight .l,.highlight .n,.highlight .x,.highlight .p,.highlight .ge,
63
+ .highlight .gp,.highlight .gs,.highlight .gt,.highlight .ld,.highlight .s,.highlight .nc,.highlight .nd,
64
+ .highlight .ne,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py,.highlight .ow,.highlight .w,.highlight .sb,
65
+ .highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,
66
+ .highlight .s1,.highlight .ss,.highlight .bp { color: #C1C2C3; }
67
+ .highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,
68
+ .highlight .nt { color: #729fcf; }
69
+ .highlight .cp,.highlight .gh,.highlight .gu,.highlight .na,.highlight .nf { color: #E9A94B ; }
70
+ .highlight .m,.highlight .nb,.highlight .no,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,
71
+ .highlight .il { color: #8ae234; }
72
+ .highlight .o { color: #989DAA; }
73
+ .highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi { color: #fff; }
data/assets/.DS_Store ADDED
Binary file
@@ -0,0 +1,10 @@
1
+ ---
2
+ ---
3
+
4
+ @import "mixins";
5
+ @import "config";
6
+ @import "config";
7
+ @import "normalize";
8
+ @import "opine";
9
+ @import "snackbar";
10
+ @import "syntax";
@@ -0,0 +1,4 @@
1
+ README
2
+ ======
3
+
4
+ Source: https://favicon.io/favicon-generator/
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
@@ -0,0 +1,28 @@
1
+ // by github.com/rzen
2
+ // attach to code blocks, copy to clipboard on click
3
+ window.addEventListener('load', function () {
4
+ // TODO: move to a js module
5
+ let showSnackbar = text => {
6
+ let sbEl = document.getElementById("snackbar");
7
+
8
+ sbEl.className = 'show';
9
+ sbEl.innerText = text;
10
+ setTimeout(_ => sbEl.className = sbEl.className.replace('show', ''), 3000);
11
+ }
12
+
13
+ let getCodeEl = el => el.querySelector('.rouge-code pre');
14
+
15
+ let makeClipboardCopyFn = el => ev => {
16
+ navigator.clipboard.writeText((getCodeEl(el) || el).innerText)
17
+ .finally(_ => showSnackbar('Copied to clipboard!'));
18
+ }
19
+
20
+ let configCodeBlock = (el) => {
21
+ if (!getCodeEl(el)) return; // skip inline code (TODO: should we?)
22
+ el.title = 'Click to copy';
23
+ el.style.cursor = 'pointer';
24
+ el.addEventListener('click', makeClipboardCopyFn(el));
25
+ }
26
+
27
+ document.querySelectorAll('.highlighter-rouge').forEach(el => configCodeBlock(el));
28
+ });
@@ -0,0 +1,40 @@
1
+ window.addEventListener('load', function () {
2
+ var slideIndex = 1;
3
+ showSlides(slideIndex);
4
+
5
+ // Next/previous controls
6
+ function plusSlides(n) {
7
+ showSlides(slideIndex += n);
8
+ }
9
+
10
+ // Thumbnail image controls
11
+ function currentSlide(n) {
12
+ showSlides(slideIndex = n);
13
+ }
14
+
15
+ function showSlides(n) {
16
+ var i;
17
+ var slides = document.getElementsByClassName("slide");
18
+ var dots = document.getElementsByClassName("dot");
19
+ if (n > slides.length) {slideIndex = 1}
20
+ if (n < 1) {slideIndex = slides.length}
21
+ for (i = 0; i < slides.length; i++) {
22
+ slides[i].style.display = "none";
23
+ }
24
+ // for (i = 0; i < dots.length; i++) {
25
+ // dots[i].className = dots[i].className.replace(" active", "");
26
+ // }
27
+ slides[slideIndex-1].style.display = "block";
28
+ // dots[slideIndex-1].className += " active";
29
+ }
30
+
31
+ var slides = document.getElementsByClassName("slide");
32
+ for (i = 0; i < slides.length; i++) {
33
+ slides[i].style.cursor = 'pointer';
34
+ slides[i].addEventListener('click', function (el) {
35
+ plusSlides(1);
36
+ console.log(el)
37
+ });
38
+ }
39
+
40
+ });
@@ -0,0 +1,19 @@
1
+ // WIP
2
+ Snackbar = {
3
+ snackBar: null,
4
+
5
+ init: function () {
6
+ this.snackBar = document.createElement('div');
7
+ this.snackBar.id = 'snackbar';
8
+ },
9
+
10
+ showSnackbar: function (text) {
11
+ let sbEl = document.getElementById("snackbar");
12
+
13
+ sbEl.className = 'show';
14
+ sbEl.innerText = text;
15
+ setTimeout(_ => sbEl.className = sbEl.className.replace('show', ''), 3000);
16
+ }
17
+ }
18
+
19
+ document.addEventListener('load', Snackbar.init);
data/index.html ADDED
@@ -0,0 +1,10 @@
1
+ ---
2
+ layout: base
3
+ title: Home
4
+ ---
5
+
6
+ {% assign all_entries = site.blog | concat: site.posts | concat: site.links | concat: site.private | sort: "date" %}
7
+
8
+ <main>
9
+ {% include post_index.html posts=all_entries %}
10
+ </main>