oinam-jekyll 1.0.0 → 1.1.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/{LICENSE.txt → LICENSE} +0 -0
- data/README.md +7 -21
- data/_data/nav.yml +8 -0
- data/_includes/appearance.html +22 -0
- data/_includes/css/color-theme-default.css +39 -0
- data/_includes/css/color-theme-nord.css +57 -0
- data/_includes/css/color-theme-vintage.css +25 -0
- data/_includes/css/debug.css +8 -0
- data/_includes/css/forms.css +105 -0
- data/_includes/css/settings.css +46 -64
- data/_includes/css/styles-extended.css +210 -102
- data/_includes/css/styles.css +11 -0
- data/_includes/css/theme-toggle.css +85 -0
- data/_includes/footer-ext.html +1 -0
- data/_includes/footer.html +20 -12
- data/_includes/gallery.html +0 -0
- data/_includes/head-custom.html +2 -0
- data/_includes/header.html +5 -8
- data/_includes/js/appearance.js +32 -0
- data/_includes/js/link-ext.js +11 -0
- data/_includes/nav.html +7 -0
- data/_includes/photos +12 -0
- data/_includes/posts-items.html +8 -0
- data/_includes/scripts.html +3 -0
- data/_includes/styles.html +28 -0
- data/_includes/video +25 -0
- data/_layouts/blog.html +23 -0
- data/_layouts/default.html +13 -17
- data/_layouts/home.html +11 -15
- data/_layouts/page.html +1 -0
- data/_layouts/post.html +11 -7
- metadata +58 -12
- data/_includes/video.html +0 -7
|
@@ -2,45 +2,76 @@
|
|
|
2
2
|
jekyll supports sass out of the box.
|
|
3
3
|
Use only when plain CSS do not suffice.
|
|
4
4
|
*/
|
|
5
|
-
$breakpoint-small:
|
|
6
|
-
$breakpoint-medium:
|
|
7
|
-
$breakpoint-large:
|
|
8
|
-
$breakpoint-extralarge:
|
|
5
|
+
$breakpoint-small: 640px;
|
|
6
|
+
$breakpoint-medium: 800px;
|
|
7
|
+
$breakpoint-large: 1024px;
|
|
8
|
+
$breakpoint-extralarge: 1600px;
|
|
9
9
|
|
|
10
|
-
header,
|
|
11
|
-
footer {
|
|
10
|
+
header.header,
|
|
11
|
+
footer.footer {
|
|
12
12
|
padding: var(--space-base) 0;
|
|
13
13
|
font-family: var(--font-family-sans);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
header.header {
|
|
17
|
+
text-align: center;
|
|
18
|
+
margin-bottom: var(--space-base);
|
|
19
|
+
border-bottom: var(--border-width) solid var(--border-color);
|
|
20
|
+
}
|
|
21
|
+
|
|
16
22
|
/* title/logo */
|
|
17
|
-
header h1 {
|
|
18
|
-
font-
|
|
19
|
-
font-size: calc(var(--font-size) * calc(1.618 * var(--typescale-heading));
|
|
23
|
+
header.header h1 {
|
|
24
|
+
font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
|
|
20
25
|
font-weight: 700;
|
|
26
|
+
margin-bottom: 0;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
header h1 a, header h1 a:visited {
|
|
29
|
+
header.header h1 a, header.header h1 a:visited {
|
|
24
30
|
color: var(--text-color);
|
|
25
31
|
text-decoration: none;
|
|
26
32
|
}
|
|
27
33
|
|
|
28
|
-
header h1 a:hover, header h1 a:active {
|
|
29
|
-
color: var(--text-color-
|
|
34
|
+
header.header h1 a:hover, header.header h1 a:active {
|
|
35
|
+
color: var(--text-color-alt);
|
|
30
36
|
text-decoration: none;
|
|
37
|
+
border-bottom: 2px solid var(--text-color);
|
|
31
38
|
}
|
|
32
39
|
|
|
33
|
-
|
|
34
|
-
|
|
40
|
+
header.header h2 {
|
|
41
|
+
padding: 0;
|
|
42
|
+
margin: var(--space-half) 0;
|
|
43
|
+
|
|
44
|
+
font-size: calc(var(--font-size) * var(--typescale-heading));
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header.header :is(h1, h2, h3, h4, h5, h6) {
|
|
49
|
+
font-family: var(--font-family-sans);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
footer.footer {
|
|
53
|
+
margin-top: var(--space-double);
|
|
54
|
+
border-top: var(--border-width) solid var(--border-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.footer__credit {
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: space-between;
|
|
35
60
|
}
|
|
36
61
|
|
|
37
62
|
/* nav links (header/footer) */
|
|
38
|
-
nav
|
|
39
|
-
|
|
40
|
-
|
|
63
|
+
nav {
|
|
64
|
+
margin: var(--space-base) 0 0;
|
|
65
|
+
padding: 0;
|
|
41
66
|
|
|
67
|
+
font-family: var(--font-family-sans);
|
|
42
68
|
font-size: var(--font-size-smaller);
|
|
43
69
|
text-transform: uppercase;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
nav a {
|
|
73
|
+
padding: 0;
|
|
74
|
+
margin: 0 var(--space-half) 0 0;
|
|
44
75
|
text-decoration: none;
|
|
45
76
|
}
|
|
46
77
|
|
|
@@ -49,15 +80,19 @@ nav a:hover, nav a:active {
|
|
|
49
80
|
border-bottom: 2px solid var(--text-color-link-hover);
|
|
50
81
|
}
|
|
51
82
|
|
|
83
|
+
|
|
52
84
|
/* larger screens */
|
|
53
85
|
@media (min-width: $breakpoint-large) {
|
|
54
86
|
blockquote,
|
|
55
|
-
.content-
|
|
87
|
+
.content-medium {
|
|
56
88
|
margin-left: calc(-1 * var(--space-double));
|
|
57
89
|
margin-right: calc(-1 * var(--space-double));
|
|
58
90
|
}
|
|
59
91
|
|
|
60
|
-
|
|
92
|
+
.content-large,
|
|
93
|
+
figure,
|
|
94
|
+
img.large,
|
|
95
|
+
img.large + em {
|
|
61
96
|
margin-left: calc(50% - 50vw);
|
|
62
97
|
margin-right: calc(50% - 50vw);
|
|
63
98
|
|
|
@@ -65,67 +100,136 @@ nav a:hover, nav a:active {
|
|
|
65
100
|
max-width: var(--image-width-max);
|
|
66
101
|
transform: translateX(calc(50vw - 50%));
|
|
67
102
|
}
|
|
103
|
+
|
|
104
|
+
img.medium,
|
|
105
|
+
img.medium + em {
|
|
106
|
+
margin-left: calc(-1 * var(--space-double));
|
|
107
|
+
width: calc(var(--body-width) + calc(3 * var(--space-base)));
|
|
108
|
+
max-width: 100vw;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
img.small {
|
|
112
|
+
max-width: 50%;
|
|
113
|
+
height: auto;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
img.small.left,
|
|
117
|
+
img.small.right {
|
|
118
|
+
margin-top: var(--space-half);
|
|
119
|
+
margin-bottom: var(--space-base);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
img.small.left { float: left; margin-right: var(--space-base); margin-left: calc(-1 * var(--space-double)); }
|
|
123
|
+
img.small.right { float: right; margin-left: var(--space-half); margin-right: calc(-1 * var(--space-double)); }
|
|
124
|
+
|
|
125
|
+
.gallery {
|
|
126
|
+
column-count: 3;
|
|
127
|
+
padding: var(--space-half);
|
|
128
|
+
}
|
|
68
129
|
}
|
|
69
130
|
|
|
70
|
-
/*
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
131
|
+
/* extra-large screens */
|
|
132
|
+
@media (min-width: $breakpoint-extralarge) {
|
|
133
|
+
.gallery {
|
|
134
|
+
column-count: 4;
|
|
135
|
+
padding: var(--space-half);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.gallery {
|
|
140
|
+
line-height: 0;
|
|
141
|
+
column-gap: var(--space-half);
|
|
76
142
|
}
|
|
77
143
|
|
|
78
|
-
|
|
79
|
-
|
|
144
|
+
.gallery img {
|
|
145
|
+
width: 100% !important;
|
|
146
|
+
height: auto !important;
|
|
147
|
+
margin-bottom: var(--space-half);
|
|
148
|
+
}
|
|
80
149
|
|
|
81
|
-
|
|
82
|
-
|
|
150
|
+
.gallery a:hover img,
|
|
151
|
+
.gallery a:active img {
|
|
152
|
+
opacity: var(--opacity-low);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* images */
|
|
156
|
+
/* need fix for images with hyperlinks */
|
|
157
|
+
img + em,
|
|
158
|
+
a + em.caption {
|
|
159
|
+
/* similar styling to figcaption */
|
|
160
|
+
display: block;
|
|
161
|
+
opacity: var(--opacity-low);
|
|
162
|
+
margin: calc(-1 * var(--space-half)) 0 0;
|
|
163
|
+
padding: var(--space-half);
|
|
83
164
|
|
|
165
|
+
font-family: var(--font-family-sans);
|
|
166
|
+
font-size: var(--font-size-smaller);
|
|
167
|
+
font-style: normal;
|
|
168
|
+
text-align: center;
|
|
169
|
+
|
|
170
|
+
background: var(--background-color-alt);
|
|
171
|
+
border-bottom-left-radius: var(--border-radius);
|
|
172
|
+
border-bottom-right-radius: var(--border-radius);
|
|
173
|
+
border-bottom: 1px solid var(--border-color);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.content-full,
|
|
177
|
+
img.full,
|
|
178
|
+
img.full + em {
|
|
179
|
+
position: relative;
|
|
84
180
|
left: 50%;
|
|
85
181
|
right: 50%;
|
|
182
|
+
|
|
86
183
|
margin-left: -50vw;
|
|
87
184
|
margin-right: -50vw;
|
|
88
|
-
|
|
185
|
+
|
|
89
186
|
width: 100vw;
|
|
90
|
-
|
|
91
|
-
max-width: var(--image-width-max);
|
|
187
|
+
max-width: 100vw;
|
|
92
188
|
|
|
93
|
-
|
|
189
|
+
border-radius: 0;
|
|
94
190
|
}
|
|
95
191
|
|
|
96
|
-
/* for smaller screens, have full-width contents but not round corners */
|
|
97
|
-
@media (max-width: $breakpoint-medium) {
|
|
98
|
-
figure,
|
|
99
|
-
figure img,
|
|
100
|
-
main img,
|
|
101
|
-
img.large-center {
|
|
102
|
-
border-radius: 0;
|
|
103
|
-
}
|
|
104
192
|
|
|
105
|
-
|
|
106
|
-
|
|
193
|
+
/* pages */
|
|
194
|
+
.home_posts {}
|
|
195
|
+
|
|
196
|
+
.home_posts__title {
|
|
197
|
+
margin: var(--space-double) 0 var(--space-base);
|
|
107
198
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
199
|
+
color: var(--text-color-alt);
|
|
200
|
+
font-weight: 400;
|
|
201
|
+
font-size: calc(var(--font-size) * var(--typescale-heading));
|
|
202
|
+
}
|
|
112
203
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
204
|
+
.home_posts__meta {
|
|
205
|
+
padding: 0 var(--space-half);
|
|
206
|
+
font-size: var(--font-size-smaller);
|
|
207
|
+
text-transform: lowercase;
|
|
208
|
+
}
|
|
119
209
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
210
|
+
|
|
211
|
+
/*
|
|
212
|
+
articles/posts/pages lists
|
|
213
|
+
list of items with a heading and lists
|
|
214
|
+
DIV.items-list [h1/h2/h3 > ul/ol > li]
|
|
215
|
+
--------------------------------------- */
|
|
216
|
+
.items-list :is(h1, h2, h3, h4, h5, h6) {
|
|
217
|
+
display: inline-block;
|
|
218
|
+
margin: var(--space-base) var(--space-double) 0;
|
|
219
|
+
padding: var(--space-quarter) var(--space-base);
|
|
220
|
+
|
|
221
|
+
color: var(--text-color-alt);
|
|
222
|
+
background: var(--background-color-alt);
|
|
223
|
+
border: 1px solid var(--border-color);
|
|
224
|
+
border-top-left-radius: var(--border-radius);
|
|
225
|
+
border-top-right-radius: var(--border-radius);
|
|
226
|
+
border-bottom: 0 none;
|
|
227
|
+
|
|
228
|
+
font-size: calc(var(--font-size) * var(--typescale-heading));
|
|
124
229
|
}
|
|
125
230
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
margin: var(--space-base) 0;
|
|
231
|
+
.items-list :is(ul, ol) {
|
|
232
|
+
margin: 0 0 var(--space-base) 0;
|
|
129
233
|
padding: 0;
|
|
130
234
|
|
|
131
235
|
background: var(--background-color);
|
|
@@ -133,24 +237,34 @@ img.large-center {
|
|
|
133
237
|
border-radius: var(--border-radius);
|
|
134
238
|
}
|
|
135
239
|
|
|
136
|
-
|
|
240
|
+
/*.items-list:is(ul, ol) li {}*/
|
|
241
|
+
|
|
242
|
+
.items-list :is(ul, ol) li {
|
|
137
243
|
list-style: none;
|
|
138
244
|
padding: calc(1.5 * var(--space-quarter)) var(--space-double);
|
|
139
245
|
border-bottom: 1px solid var(--border-color);
|
|
140
246
|
}
|
|
141
247
|
|
|
142
|
-
.
|
|
248
|
+
.items-list :is(ul, ol) li:first-child {
|
|
249
|
+
border-top-left-radius: var(--border-radius);
|
|
250
|
+
border-top-right-radius: var(--border-radius);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.items-list :is(ul, ol) li:last-child {
|
|
254
|
+
border-bottom-left-radius: var(--border-radius);
|
|
255
|
+
border-bottom-right-radius: var(--border-radius);
|
|
143
256
|
border: 0 none;
|
|
144
257
|
}
|
|
145
258
|
|
|
146
|
-
.
|
|
259
|
+
.items-list :is(ul, ol) li:nth-child(even) {
|
|
147
260
|
background: var(--background-color-alt);
|
|
148
261
|
}
|
|
149
262
|
|
|
150
|
-
.
|
|
263
|
+
.items-list :is(ul, ol) time {
|
|
151
264
|
margin: 0;
|
|
152
265
|
padding: 0 var(--space-quarter);
|
|
153
266
|
|
|
267
|
+
white-space: nowrap;
|
|
154
268
|
font-family: var(--font-family-monospace);
|
|
155
269
|
font-size: var(--font-size-smallest);
|
|
156
270
|
color: var(--text-color-alt);
|
|
@@ -181,52 +295,43 @@ img.large-center {
|
|
|
181
295
|
text-decoration: none;
|
|
182
296
|
}
|
|
183
297
|
|
|
184
|
-
/*
|
|
185
|
-
.site-search {
|
|
186
|
-
margin: 0 0 var(--space-double);
|
|
187
|
-
padding: var(--space-half);
|
|
188
|
-
|
|
189
|
-
border-radius: var(--border-radius);
|
|
190
|
-
background: var(--color-white);
|
|
191
|
-
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/* responsive video */
|
|
298
|
+
/* responsive video embeds */
|
|
195
299
|
.video-wrap {
|
|
196
300
|
position: relative;
|
|
197
|
-
margin-
|
|
198
|
-
|
|
199
|
-
padding-bottom: 56.25%; /* 16:9 */
|
|
200
|
-
padding-top: 0;
|
|
201
|
-
max-width: 100%;
|
|
301
|
+
margin-bottom: 1em;
|
|
302
|
+
padding-bottom: 56.25%;
|
|
202
303
|
height: 0;
|
|
203
304
|
overflow: hidden;
|
|
305
|
+
max-width: 100%;
|
|
306
|
+
|
|
204
307
|
border-radius: var(--border-radius);
|
|
205
308
|
}
|
|
206
|
-
|
|
207
|
-
.video-wrap iframe,
|
|
208
|
-
.video-wrap object,
|
|
209
|
-
.video-wrap embed {
|
|
309
|
+
.video-wrap :is(iframe, object, embed) {
|
|
210
310
|
position: absolute;
|
|
211
311
|
top: 0;
|
|
212
312
|
left: 0;
|
|
213
313
|
width: 100%;
|
|
214
314
|
height: 100%;
|
|
215
|
-
}
|
|
216
315
|
|
|
217
|
-
/* rogue syntax highlighter - applies to both the DIV and PRE */
|
|
218
|
-
.highlight {
|
|
219
|
-
margin: var(--space-base) 0;
|
|
220
|
-
padding: 0;
|
|
221
|
-
width: 100%;
|
|
222
|
-
transform: translateX(0);
|
|
223
|
-
text-align: left;
|
|
224
|
-
background: none;
|
|
225
|
-
border: 0 none;
|
|
226
316
|
border-radius: var(--border-radius);
|
|
227
317
|
}
|
|
228
318
|
|
|
319
|
+
.content-full .video-wrap,
|
|
320
|
+
.content-full .video-wrap :is(iframe, object, embed) {
|
|
321
|
+
border-radius: 0;
|
|
322
|
+
}
|
|
229
323
|
|
|
324
|
+
/* footnotes are generated by Kramdown powered Markdown */
|
|
325
|
+
.footnotes {
|
|
326
|
+
margin-top: var(--space-double);
|
|
327
|
+
padding: var(--space-base) var(--space-half);
|
|
328
|
+
border-top: var(--border-width) solid var(--border-color);
|
|
329
|
+
font-size: var(--font-size-small);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.footnotes .reversefootnote {
|
|
333
|
+
text-decoration: none;
|
|
334
|
+
}
|
|
230
335
|
|
|
231
336
|
/* UTILITIES --------------------------------------- */
|
|
232
337
|
|
|
@@ -238,11 +343,14 @@ img.large-center {
|
|
|
238
343
|
-webkit-box-orient: vertical;
|
|
239
344
|
}
|
|
240
345
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
346
|
+
.visually-hidden {
|
|
347
|
+
display: block;
|
|
348
|
+
height: 1px;
|
|
349
|
+
width: 1px;
|
|
350
|
+
overflow: hidden;
|
|
351
|
+
clip: rect(1px 1px 1px 1px);
|
|
352
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
353
|
+
clip-path: inset(1px);
|
|
354
|
+
white-space: nowrap;
|
|
355
|
+
position: absolute;
|
|
356
|
+
}
|
data/_includes/css/styles.css
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
html {
|
|
8
8
|
margin: 0;
|
|
9
9
|
padding: 0;
|
|
10
|
+
height: 100%;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
body {
|
|
@@ -25,10 +26,14 @@ body {
|
|
|
25
26
|
margin: 0 auto;
|
|
26
27
|
padding: 0 var(--space-half);
|
|
27
28
|
max-width: var(--body-width);
|
|
29
|
+
height: 100%;
|
|
28
30
|
|
|
29
31
|
overflow-x: hidden;
|
|
30
32
|
word-break: break-word;
|
|
31
33
|
overflow-wrap: break-word;
|
|
34
|
+
|
|
35
|
+
/* transition for color-theme */
|
|
36
|
+
transition: background 500ms ease-in-out, color 200ms ease;
|
|
32
37
|
}
|
|
33
38
|
|
|
34
39
|
h1, h2, h3, h4, h5, h6 {
|
|
@@ -200,6 +205,7 @@ mark {
|
|
|
200
205
|
}
|
|
201
206
|
|
|
202
207
|
img {
|
|
208
|
+
display: inline-block;
|
|
203
209
|
max-width: 100%;
|
|
204
210
|
height: auto;
|
|
205
211
|
border-radius: var(--border-radius);
|
|
@@ -244,6 +250,7 @@ audio {
|
|
|
244
250
|
}
|
|
245
251
|
|
|
246
252
|
table {
|
|
253
|
+
margin: var(--space-base) 0;
|
|
247
254
|
border-collapse: collapse;
|
|
248
255
|
width: 100%;
|
|
249
256
|
}
|
|
@@ -261,3 +268,7 @@ table caption {
|
|
|
261
268
|
font-weight: bold;
|
|
262
269
|
margin-bottom: var(--space-half);
|
|
263
270
|
}
|
|
271
|
+
|
|
272
|
+
footer {
|
|
273
|
+
font-size: var(--font-size-small);
|
|
274
|
+
}
|