henry-jekyll 0.1.0 → 0.2.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.
@@ -0,0 +1 @@
1
+ // Hook to override any styles
data/_sass/mixins.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin media-query-small-screen() {
2
+ @media only screen and (max-width: $tablet-width) {
3
+ @content;
4
+ }
5
+ }
6
+
7
+ @mixin media-query-laptop() {
8
+ @media only screen and (min-width: $tablet-width + 1px) {
9
+ @content;
10
+ }
11
+ }
12
+
13
+ // Using media queries with like this:
14
+ // @include media-query-mobile() {
15
+ // .wrapper {
16
+ // padding-right: $spacing-unit / 2;
17
+ // padding-left: $spacing-unit / 2;
18
+ // }
19
+ // }
@@ -1,3 +1,28 @@
1
+ @charset "utf-8";
2
+
3
+ //region Variables
4
+
5
+ $font-size-regular: 20px;
6
+
7
+ $font-size-xlarge: $font-size-regular * 2;
8
+ $font-size-large: $font-size-regular * 1.5;
9
+ //regular
10
+ $font-size-medium: $font-size-regular * 0.875;
11
+ $font-size-small: $font-size-regular * 0.75;
12
+
13
+ $base-line-height: 1.4;
14
+
15
+ $spacing-unit: 30px;
16
+ $spacing-micro-unit: 6px;
17
+
18
+ $mobile-width: 375px;
19
+ $tablet-width: 685px;
20
+ $screen-width: 780px;
21
+
22
+ //endregion
23
+
24
+ //region Theme
25
+
1
26
  $font-family-base: "ff-tisa-web-pro", "IBM Plex Serif", Georgia, "Times New Roman", serif;
2
27
  $header-font-family: "ibm-plex-sans", "IBM Plex Sans", sans-serif;
3
28
  $header-2-font-family: "ibm-plex-serif", "IBM Plex Serif", "ff-tisa-web-pro", Georgia, "Times New Roman", serif;
@@ -17,3 +42,5 @@ $color-header-index: lighten($background-color, 10%);
17
42
  $color-header: lighten($background-color, 60%);
18
43
 
19
44
  $color-divider: $color-textunderline;
45
+
46
+ //endregion
@@ -0,0 +1,2 @@
1
+ // Hook to override predefined variables.
2
+
@@ -2,4 +2,4 @@
2
2
  # Only the main Sass file needs front matter (the dashes are enough)
3
3
  ---
4
4
 
5
- @import "main";
5
+ @import "initialize";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: henry-jekyll
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kaushik Gopal
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-02-06 00:00:00.000000000 Z
11
+ date: 2021-02-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -24,6 +24,104 @@ dependencies:
24
24
  - - "~>"
25
25
  - !ruby/object:Gem::Version
26
26
  version: '4.2'
27
+ - !ruby/object:Gem::Dependency
28
+ name: jekyll-feed
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '0.15'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '0.15'
41
+ - !ruby/object:Gem::Dependency
42
+ name: jekyll-paginate
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - "~>"
46
+ - !ruby/object:Gem::Version
47
+ version: '1.1'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - "~>"
53
+ - !ruby/object:Gem::Version
54
+ version: '1.1'
55
+ - !ruby/object:Gem::Dependency
56
+ name: jekyll-redirect-from
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - "~>"
60
+ - !ruby/object:Gem::Version
61
+ version: '0.16'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - "~>"
67
+ - !ruby/object:Gem::Version
68
+ version: '0.16'
69
+ - !ruby/object:Gem::Dependency
70
+ name: jekyll-seo-tag
71
+ requirement: !ruby/object:Gem::Requirement
72
+ requirements:
73
+ - - "~>"
74
+ - !ruby/object:Gem::Version
75
+ version: '2.7'
76
+ type: :runtime
77
+ prerelease: false
78
+ version_requirements: !ruby/object:Gem::Requirement
79
+ requirements:
80
+ - - "~>"
81
+ - !ruby/object:Gem::Version
82
+ version: '2.7'
83
+ - !ruby/object:Gem::Dependency
84
+ name: jekyll-sitemap
85
+ requirement: !ruby/object:Gem::Requirement
86
+ requirements:
87
+ - - "~>"
88
+ - !ruby/object:Gem::Version
89
+ version: '1.4'
90
+ type: :runtime
91
+ prerelease: false
92
+ version_requirements: !ruby/object:Gem::Requirement
93
+ requirements:
94
+ - - "~>"
95
+ - !ruby/object:Gem::Version
96
+ version: '1.4'
97
+ - !ruby/object:Gem::Dependency
98
+ name: bundler
99
+ requirement: !ruby/object:Gem::Requirement
100
+ requirements:
101
+ - - "~>"
102
+ - !ruby/object:Gem::Version
103
+ version: '1.12'
104
+ type: :development
105
+ prerelease: false
106
+ version_requirements: !ruby/object:Gem::Requirement
107
+ requirements:
108
+ - - "~>"
109
+ - !ruby/object:Gem::Version
110
+ version: '1.12'
111
+ - !ruby/object:Gem::Dependency
112
+ name: webrick
113
+ requirement: !ruby/object:Gem::Requirement
114
+ requirements:
115
+ - - "~>"
116
+ - !ruby/object:Gem::Version
117
+ version: '1.7'
118
+ type: :development
119
+ prerelease: false
120
+ version_requirements: !ruby/object:Gem::Requirement
121
+ requirements:
122
+ - - "~>"
123
+ - !ruby/object:Gem::Version
124
+ version: '1.7'
27
125
  description:
28
126
  email:
29
127
  - c@jkl.gg
@@ -44,12 +142,14 @@ files:
44
142
  - _layouts/default.html
45
143
  - _layouts/page.html
46
144
  - _layouts/post.html
47
- - _sass/_base.scss
48
- - _sass/_custom.scss
49
- - _sass/_layout.scss
50
- - _sass/_theme.scss
145
+ - _sass/_initialize.scss
146
+ - _sass/base.scss
147
+ - _sass/code.css
51
148
  - _sass/main.scss
52
- - assets/css/code-colorful.css
149
+ - _sass/main_override.scss
150
+ - _sass/mixins.scss
151
+ - _sass/theme.scss
152
+ - _sass/theme_override.scss
53
153
  - assets/css/style.scss
54
154
  - assets/js/jquery.min.js
55
155
  - assets/js/sidenotes.js
data/_sass/_custom.scss DELETED
@@ -1 +0,0 @@
1
- // custom css styles goes here
data/_sass/_layout.scss DELETED
@@ -1,520 +0,0 @@
1
- .post-index, .post, .site-footer {
2
- display: grid;
3
- grid-template-columns:
4
- 0.2fr
5
- #{"min(65ch, 100%)"}
6
- 1fr;
7
-
8
- @include media-query-small-screen() {min-width: $mobile-width;}
9
-
10
- > * {
11
- grid-column: 2;
12
-
13
- margin-right: $spacing-unit;
14
- margin-left: $spacing-unit;
15
- }
16
- }
17
-
18
- .post .full-bleed {
19
- width: 100vw;
20
-
21
- margin-left: calc(
22
- (100vw - #{"min(65ch, 100vw)"})
23
- * (.2 / 1.2)
24
- * (-1)
25
- - #{$spacing-unit}
26
- );
27
- }
28
-
29
- /* Header
30
- ================================================== */
31
- .site-header {
32
-
33
- // Positioning context for the mobile navigation icon
34
- position: relative;
35
-
36
- #banner {
37
- font-size: 1.6em;
38
- text-align: center;
39
- margin-top : $spacing-unit;
40
- margin-bottom : $spacing-unit/3;
41
-
42
- h1 {
43
- margin-bottom: 0;
44
- font-size: 0.8em;
45
- text-align: left;
46
- }
47
-
48
- .site-title {
49
- font-family: $header-font-family;
50
- font-weight: normal;
51
- color: $color-text2;
52
-
53
- &:hover {
54
- color: $color-link;
55
- }
56
-
57
- }
58
- }
59
- }
60
-
61
- /* Content
62
- ================================================== */
63
-
64
-
65
- /* Post metadata section
66
- ========================= */
67
-
68
-
69
- .post-meta {
70
- margin-top: $spacing-micro-unit;
71
- padding: 2px 4px 0 0;
72
-
73
- margin-top: 0;
74
- padding: 0;
75
- text-transform: none;
76
-
77
- div {
78
- margin: $spacing-micro-unit 0 $spacing-micro-unit 0;
79
- }
80
-
81
- .post-permalink {
82
- border-top: 1px solid $color-text;
83
- width: 20%;
84
- padding-top: 1em;
85
-
86
- a {
87
- color: $color-text2;
88
-
89
- &:hover {
90
- color: $color-link;
91
- }
92
- }
93
- }
94
-
95
- .post-date { color: $color-text; }
96
-
97
- .post-categories {
98
- margin: auto;
99
- margin: 1em 0 1.5em 0;
100
- display: flex;
101
- justify-content: flex-start;
102
- }
103
-
104
- .post-related {
105
-
106
- border: 3px solid $color-textunderline;
107
- padding: 1em;
108
- margin-top: $spacing-unit * 3;
109
-
110
- h4 { font-family: $header-2-font-family; }
111
-
112
- &:hover {
113
- color: $color-text2;
114
- border-color: $color-text2;
115
- }
116
-
117
- a {
118
- color: inherit;
119
- text-decoration: none;
120
- &:hover { color: $color-link; }
121
- }
122
- }
123
-
124
-
125
- .post-category {
126
- border: 2px solid;
127
- margin-right: 1em;
128
- padding: $spacing-micro-unit $spacing-micro-unit*2;
129
- text-align: center;
130
- font-family: $fixed-width-font-family;
131
- font-size: 0.8em;
132
-
133
- &:hover {
134
- color: $color-link;
135
- border-color: $color-link;
136
- }
137
-
138
- a {
139
- text-decoration: none;
140
- color: inherit;
141
- &:hover { color: inherit; }
142
- }
143
- }
144
-
145
-
146
- }
147
-
148
- .post-link {
149
- display: block;
150
- float: left;
151
- font-size: $font-size-regular + 2px;
152
-
153
- @include media-query-small-screen() {
154
- font-size: $font-size-small;
155
- }
156
-
157
- .linklog {
158
- text-decoration: none;
159
- color: $color-link;
160
-
161
- &:hover {
162
- color: $color-text;
163
- }
164
- }
165
- }
166
-
167
-
168
- .draft {
169
- background-color: $color-link;
170
- border-radius: $spacing-unit / 2;
171
- border: 2px solid #000;
172
- color: black;
173
- font-size: $font-size-small * .89;
174
- font-weight: bold;
175
- padding: $spacing-micro-unit;
176
- text-transform: uppercase;
177
- vertical-align: middle;
178
- font-family: $fixed-width-font-family;
179
-
180
- margin-left: $spacing-unit / 4;
181
- }
182
-
183
- /* Landing posts - grouped by year
184
- =============================== */
185
-
186
- h2.post-list-header {
187
- color: $color-header-index;
188
- font-family: $fixed-width-font-family;
189
- font-size: $font-size-regular * 1.25;
190
- font-weight: normal;
191
- }
192
- h2.post-list-header:first-child {
193
- margin-top: $spacing-unit;
194
- }
195
-
196
- h2.post-list-header.post-list-category {
197
-
198
- &:hover {
199
- color: $color-text;
200
- border-color: $color-text;
201
- }
202
- }
203
-
204
- ul.post-list-content {
205
-
206
- float: left;
207
- list-style: none;
208
-
209
- .post-link {
210
- font-family: $header-font-family;
211
-
212
- clear: left;
213
- margin: $spacing-micro-unit 0;
214
-
215
- @include media-query-small-screen() {
216
- margin: ($spacing-micro-unit - 2) 0;
217
- }
218
-
219
- .post-link-date {
220
- display: inline;
221
- color: darken($color-textunderline, 8%);
222
- margin: 0;
223
- clear: left;
224
- white-space: nowrap;
225
-
226
- font-size: $font-size-medium;
227
- @include media-query-small-screen() {
228
- font-size: $font-size-small;
229
- }
230
- }
231
-
232
- a.post-link-url {
233
- color: $color-text2;
234
- text-decoration: none;
235
- padding-right: $spacing-micro-unit;
236
-
237
- &:hover { text-decoration: $color-textunderline underline; }
238
- }
239
- }
240
- }
241
-
242
-
243
- /* Post content section
244
- ========================= */
245
-
246
- .post {
247
- padding-top: $spacing-unit/2;
248
-
249
- @include media-query-small-screen() {
250
- margin: 0 auto;
251
- font-size: $font-size-medium;
252
- }
253
-
254
- .post-header {
255
-
256
- margin-top: $spacing-unit * 4;
257
-
258
- @include media-query-small-screen() {
259
- margin-top: $spacing-unit * 1.5;
260
- float: none;
261
- }
262
-
263
- .post-author {
264
- font-weight: normal;
265
- font-style: italic;
266
- }
267
-
268
- .post-title {
269
- color: $color-text2;
270
- margin: $spacing-unit 0 $spacing-unit/2 0;
271
- font-size: $font-size-xlarge + 10px;
272
- font-weight: bold;
273
- font-family: $header-2-font-family;
274
-
275
-
276
- .article-link {
277
-
278
- color: $color-text2;
279
- text-decoration: none;
280
-
281
- &:hover {
282
- text-decoration: underline;
283
- }
284
- }
285
-
286
- @include media-query-small-screen() {
287
- font-size: $font-size-large + 5px;
288
- margin-top: 0;
289
- }
290
- }
291
-
292
- }
293
- }
294
-
295
- .post-content {
296
- clear: left;
297
- margin: $spacing-unit;
298
- line-height: 1.5;
299
-
300
- font-size: $font-size-regular;
301
-
302
- @include media-query-small-screen() {
303
- font-size: $font-size-medium;
304
- }
305
-
306
- p { margin-bottom: $spacing-unit; }
307
- p + ul { margin-top: -0.5 * $spacing-unit; }
308
-
309
- a {
310
- text-decoration-color: $color-textunderline;
311
- text-underline-offset: $spacing-micro-unit;
312
- &:hover { text-decoration: none; }
313
- }
314
-
315
- hr {
316
- border: 1px solid #d8d8d8;
317
- margin: 1em 0;
318
- width: 100%;
319
- }
320
-
321
- h1 {
322
- font-size: $font-size-xlarge;
323
- @include media-query-small-screen() {
324
- font-size: $font-size-large;
325
- }
326
-
327
- margin: 1.8em 0 0.8em 0em;
328
- }
329
-
330
- > h1:first-child {
331
- margin-top: 1em;
332
- }
333
-
334
- h2 {
335
- font-size: $font-size-large;
336
- font-style: italic;
337
-
338
- @include media-query-small-screen() {
339
- font-size: $font-size-medium + 2px;
340
- }
341
-
342
- margin: 2em 0 0.4em 0em;
343
- }
344
-
345
- h3 {
346
- font-size: 1.0em;
347
- font-style: italic;
348
- font-weight: normal;
349
-
350
- @include media-query-small-screen() {
351
- font-size: $font-size-medium;
352
- }
353
- }
354
- }
355
-
356
-
357
- figure { text-align: left; }
358
- figcaption {
359
- font-size: 0.8em;
360
- font-family: $header-font-family;
361
- text-align: center;
362
- margin-bottom: $spacing-unit;
363
- margin-top: -1 * $spacing-unit / 2;
364
- }
365
-
366
- /**
367
- * Blockquotes
368
- */
369
- blockquote {
370
- border-left: 4px solid $color-textunderline;
371
- padding-left: $spacing-unit / 2;
372
- padding-top: $spacing-unit / 3;
373
- padding-bottom: $spacing-unit / 3;
374
- margin-bottom: $spacing-unit;
375
- font-style: italic;
376
-
377
- code {
378
- font-size: 0.8em
379
- }
380
-
381
- > :last-child {
382
- margin-bottom: 0;
383
- }
384
- }
385
-
386
-
387
- .callout {
388
- border: 2px solid $color-textunderline;
389
- padding: 1em;
390
- margin-bottom: $spacing-unit;
391
- text-align: center;
392
- }
393
-
394
- ul.callout {
395
- margin-left: 0;
396
- padding-left: 30px; // reset
397
- }
398
-
399
- /* sidenote
400
- ================================================== */
401
-
402
- .sidenote {
403
- padding-left: 20px;
404
- margin-bottom: 1.5em;
405
- border-left: 1px solid $color-textunderline;
406
-
407
- color: $color-textunderline;
408
- font-style: italic;
409
- font-size: 0.8em;
410
- }
411
-
412
- .sidenote-hover {
413
- color: #F99B6D;;
414
- border-color: #F99B6D;
415
- }
416
-
417
- /* footnotes
418
- ================================================== */
419
-
420
- .footnotes {
421
- border-bottom: 1px solid $color-textunderline;
422
- border-top: 1px solid $color-textunderline;
423
- padding: 1em 0;
424
- }
425
-
426
- /* Code snippets
427
- ================================================== */
428
- code {
429
- font-family: $fixed-width-font-family;
430
- }
431
-
432
- article.post-content {
433
- pre {
434
- font-size: 0.75em;
435
- padding: 1em;
436
- line-height: 1.4em;
437
- overflow: auto;
438
- }
439
-
440
- ol code, ul code, p>code {
441
- font-size: 0.85em;
442
- }
443
- p>code {
444
- color: $color-code;
445
- }
446
- }
447
-
448
-
449
- .site-footer {
450
-
451
- padding: $spacing-unit 0;
452
-
453
- @include media-query-laptop() {
454
- margin-top: 2em;
455
- }
456
-
457
- .newsletter {
458
-
459
- grid-column: 2;
460
-
461
- display: grid;
462
- grid-gap: $spacing-micro-unit;
463
-
464
- margin-bottom: $spacing-unit * 2;
465
-
466
- @include media-query-small-screen() {
467
- padding: 0 $spacing-micro-unit * 2;
468
- }
469
-
470
- @include media-query-laptop() {
471
- grid-template-columns: 48% 1fr 48%;
472
- }
473
-
474
- input {
475
- text-align: center;
476
- padding: 0.5em;
477
- font-family: $font-family-base;
478
- font-size: 0.8em;
479
- }
480
-
481
- input[type=text] {
482
- border: 1px solid $color-divider;
483
-
484
- @include media-query-laptop() {
485
- grid-column-start: 1;
486
- }
487
- }
488
-
489
- input[type=submit] {
490
- -webkit-appearance: none;
491
- -moz-appearance: none;
492
- appearance: none;
493
- background-color: lightgray;
494
-
495
- @include media-query-laptop() {
496
- grid-column-start: 3;
497
- }
498
- }
499
- }
500
-
501
- .site-nav {
502
- grid-column: 2;
503
- grid-row: 2;
504
-
505
- ul {
506
- display: grid;
507
- row-gap: $spacing-unit / 2;
508
-
509
- grid-template-columns: repeat(auto-fill, minmax((6 * $font-size-regular), 1fr));
510
-
511
- list-style-type: none;
512
- margin-left: 0;
513
- text-align: center;
514
-
515
- .nav-link {
516
- text-decoration: none;
517
- }
518
- }
519
- }
520
- }