henry-jekyll 0.1.0 → 0.2.0

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