oinam-jekyll 1.0.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 +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +27 -0
- data/_includes/css/settings.css +141 -0
- data/_includes/css/styles-code.css +1 -0
- data/_includes/css/styles-extended.css +248 -0
- data/_includes/css/styles.css +263 -0
- data/_includes/footer.html +12 -0
- data/_includes/header.html +8 -0
- data/_includes/read-time.html +21 -0
- data/_includes/video.html +7 -0
- data/_layouts/default.html +41 -0
- data/_layouts/home.html +22 -0
- data/_layouts/page.html +7 -0
- data/_layouts/post.html +22 -0
- metadata +106 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 46ed83571f378b819db4e504f52439bbc37fe49bbacfb72a53b6847b2b170bf6
|
4
|
+
data.tar.gz: 0b8618826fc03442ca199d8089a1cada345baa41e63722c1115df2dd7faf9a2e
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: e4e852217e60abcf8de0f9788ddaa8f7b58e384525ffdab81f240f8d2e1acf0792e9c6c53cae73467b63adf570c2baf09360447b39c6930cc63761fc287cbcfa
|
7
|
+
data.tar.gz: ea680d068b586fd7ca347b6163938f6d35034bb41e410f519069c5e336b61e575dfdfce39c7f1362a42df2136f406cdcd55f6dcce3cf52f8f01868e3b7202386
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2021-present Brajeshwar Oinam, oinam.com, and the contributors.
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
# Oinam Jekyll
|
2
|
+
|
3
|
+
A simple, clean, and minimal Jekyll Theme.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your Jekyll site's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem "oinam-jekyll"
|
11
|
+
```
|
12
|
+
|
13
|
+
Run
|
14
|
+
|
15
|
+
`bundle`
|
16
|
+
|
17
|
+
## Usage
|
18
|
+
|
19
|
+
Have the following line in your config file:
|
20
|
+
|
21
|
+
```yaml
|
22
|
+
theme: oinam-jekyll
|
23
|
+
```
|
24
|
+
|
25
|
+
## License
|
26
|
+
|
27
|
+
The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
@@ -0,0 +1,141 @@
|
|
1
|
+
/*
|
2
|
+
default color-theme
|
3
|
+
change and play with the colors
|
4
|
+
*/
|
5
|
+
:root {
|
6
|
+
color-scheme: light dark;
|
7
|
+
|
8
|
+
--background-color: #fafafa; /* gray-50 */
|
9
|
+
--background-color-alt: #f4f4f5; /* gray-100 */
|
10
|
+
--background-color-accent: #fde68a; /* amber-200 */
|
11
|
+
--background-color-highlight: #e4e4e4; /* gray-200 */
|
12
|
+
|
13
|
+
--text-color: #3f3f46; /* gray-700 */
|
14
|
+
--text-color-alt: #71717a; /* gray-500 */
|
15
|
+
|
16
|
+
--border-color: #e4e4e7; /* gray-200 */
|
17
|
+
--border-color-highlight: #bfdbfe; /* blue-200 */
|
18
|
+
|
19
|
+
--text-color-link: #1d4ed8;
|
20
|
+
--text-color-link-visited: var(--text-color-link);
|
21
|
+
--text-color-link-hover: #1e3a8a;
|
22
|
+
--text-color-link-active: var(--text-color-link-hover);
|
23
|
+
|
24
|
+
--form-button-text-color: var(--text-color);
|
25
|
+
--form-button-text-color-active: var(--text-color);
|
26
|
+
--form-button-background-color: #3b82f6;
|
27
|
+
--form-button-background-color-disabled: #e4e4e7;
|
28
|
+
--form-button-background-color-active: var(--form-button-background-color);
|
29
|
+
}
|
30
|
+
|
31
|
+
@media (prefers-color-scheme: dark) {
|
32
|
+
:root {
|
33
|
+
--background-color: #3f3f46; /* gray-700 */
|
34
|
+
--background-color-alt: #52525b; /* gray-600 */
|
35
|
+
--background-color-accent: #bfdbfe; /* blue-200 */
|
36
|
+
--background-color-highlight: #27272a; /* gray-800 */
|
37
|
+
|
38
|
+
--text-color: #f4f4f5; /* gray-100 */
|
39
|
+
--text-color-alt: #71717a; /* gray-500 */
|
40
|
+
|
41
|
+
--border-color: #52525b; /* gray-600 */
|
42
|
+
--border-color-highlight: #fde68a; /* amber-200 */
|
43
|
+
|
44
|
+
--text-color-link: #bfdbfe;
|
45
|
+
--text-color-link-visited: var(--text-color-link);
|
46
|
+
--text-color-link-hover: #60a5fa;
|
47
|
+
--text-color-link-active: var(--text-color-link-hover);
|
48
|
+
|
49
|
+
--form-button-text-color: var(--text-color);
|
50
|
+
--form-button-text-color-active: var(--text-color);
|
51
|
+
--form-button-background-color: #3b82f6;
|
52
|
+
--form-button-background-color-disabled: #e4e4e7;
|
53
|
+
--form-button-background-color-active: var(--form-button-background-color);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
/* --------------------------------------- */
|
59
|
+
:root {
|
60
|
+
--font-family-sans: system-ui, -apple-system, 'Segoe UI', 'Roboto', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
61
|
+
--font-family-serif: Georgia, 'Times New Roman', serif;
|
62
|
+
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
63
|
+
--font-cursive: cursive;
|
64
|
+
|
65
|
+
/* an ideal reading width - 48rem - 768px based off 16px:1rem */
|
66
|
+
/* 42 is an interesting number. ;-) */
|
67
|
+
/* remember to set this to media-queries too if you are not handling it separately */
|
68
|
+
--body-width: 42rem;
|
69
|
+
|
70
|
+
/* default: minor third scale progression */
|
71
|
+
--typescale-body: 1.2;
|
72
|
+
|
73
|
+
/* headings: major third scale progression */
|
74
|
+
--typescale-heading: 1.25;
|
75
|
+
|
76
|
+
/* spacings */
|
77
|
+
--spacing-heading: 1rem;
|
78
|
+
|
79
|
+
|
80
|
+
/* default: minor third scale progression */
|
81
|
+
--space-ratio: 1.2;
|
82
|
+
|
83
|
+
--space-base: 1;
|
84
|
+
--space-base-px: 16px;
|
85
|
+
--space-base-em: 1em;
|
86
|
+
--space-base-rem: 1rem;
|
87
|
+
|
88
|
+
--spacescale0: 1;
|
89
|
+
--spacescale1: var(--space-ratio); /* 1.2 */
|
90
|
+
--spacescale2: calc(var(--space-ratio) * var(--spacescale1)); /* 1.44 */
|
91
|
+
--spacescale3: calc(var(--space-ratio) * var(--spacescale2)); /* 1.728 */
|
92
|
+
--spacescale4: calc(var(--space-ratio) * var(--spacescale3)); /* 2.074 */
|
93
|
+
--spacescale5: calc(var(--space-ratio) * var(--spacescale4)); /* 2.488 */
|
94
|
+
--spacescale6: calc(var(--space-ratio) * var(--spacescale5)); /* 2.986 */
|
95
|
+
--spacescale7: calc(var(--space-ratio) * var(--spacescale6)); /* 3.583 */
|
96
|
+
|
97
|
+
/* space - try to use these */
|
98
|
+
--space-base: var(--space-base-rem);
|
99
|
+
--space-half: calc(var(--space-base-rem) / 2);
|
100
|
+
--space-quarter: calc(var(--space-base-rem) / 4);
|
101
|
+
--space-double: calc(var(--space-base-rem) * 2);
|
102
|
+
|
103
|
+
|
104
|
+
/* typography */
|
105
|
+
--font-family: var(--font-family-serif);
|
106
|
+
--font-family-headings: var(--font-family-serif);
|
107
|
+
|
108
|
+
--font-size: 16px;
|
109
|
+
--font-size-small: 85%;
|
110
|
+
--font-size-smaller: 75%;
|
111
|
+
--font-size-smallest: 65%;
|
112
|
+
|
113
|
+
--line-height: 1.618;
|
114
|
+
--line-height-heading: 1.25;
|
115
|
+
|
116
|
+
--border-width: 1px;
|
117
|
+
--border-width-alt: 3px;
|
118
|
+
|
119
|
+
--border-radius: 0.3rem;
|
120
|
+
--border-radius-high: 0.7rem;
|
121
|
+
--border-radius-round: 100%;
|
122
|
+
|
123
|
+
|
124
|
+
--image-width-max: 1200px; /*there is a limit to how wide an image can be*/
|
125
|
+
|
126
|
+
|
127
|
+
/* color - standard */
|
128
|
+
--color-black: #000000;
|
129
|
+
--color-white: #ffffff;
|
130
|
+
|
131
|
+
--opacity-no: 1;
|
132
|
+
--opacity-low: 0.9;
|
133
|
+
--opacity-lower: 0.75;
|
134
|
+
--opacity-lowest: 0.6;
|
135
|
+
}
|
136
|
+
|
137
|
+
@media (prefers-color-scheme: dark) {
|
138
|
+
img, video {
|
139
|
+
opacity: var(--opacity-low);
|
140
|
+
}
|
141
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
.highlight .hll{background-color:#ffc}.highlight{background:#f0f3f3}.highlight .c{color:#09f;font-style:italic}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069;font-weight:bold}.highlight .o{color:#555}.highlight .ch{color:#09f;font-style:italic}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .cpf{color:#09f;font-style:italic}.highlight .c1{color:#09f;font-style:italic}.highlight .cs{color:#09f;font-weight:bold;font-style:italic}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#030;font-weight:bold}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:#030;font-weight:bold}.highlight .gt{color:#9c6}.highlight .kc{color:#069;font-weight:bold}.highlight .kd{color:#069;font-weight:bold}.highlight .kn{color:#069;font-weight:bold}.highlight .kp{color:#069}.highlight .kr{color:#069;font-weight:bold}.highlight .kt{color:#078;font-weight:bold}.highlight .m{color:#f60}.highlight .s{color:#c30}.highlight .na{color:#309}.highlight .nb{color:#366}.highlight .nc{color:#0a8;font-weight:bold}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999;font-weight:bold}.highlight .ne{color:#c00;font-weight:bold}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf;font-weight:bold}.highlight .nt{color:#309;font-weight:bold}.highlight .nv{color:#033}.highlight .ow{color:#000;font-weight:bold}.highlight .w{color:#bbb}.highlight .mb{color:#f60}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sa{color:#c30}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .dl{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30;font-weight:bold}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .fm{color:#c0f}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .vm{color:#033}.highlight .il{color:#f60}
|
@@ -0,0 +1,248 @@
|
|
1
|
+
/*
|
2
|
+
jekyll supports sass out of the box.
|
3
|
+
Use only when plain CSS do not suffice.
|
4
|
+
*/
|
5
|
+
$breakpoint-small: 420px;
|
6
|
+
$breakpoint-medium: 640px;
|
7
|
+
$breakpoint-large: 800px;
|
8
|
+
$breakpoint-extralarge: 1200px;
|
9
|
+
|
10
|
+
header,
|
11
|
+
footer {
|
12
|
+
padding: var(--space-base) 0;
|
13
|
+
font-family: var(--font-family-sans);
|
14
|
+
}
|
15
|
+
|
16
|
+
/* title/logo */
|
17
|
+
header h1 {
|
18
|
+
font-family: var(--font-family-sans);
|
19
|
+
font-size: calc(var(--font-size) * calc(1.618 * var(--typescale-heading));
|
20
|
+
font-weight: 700;
|
21
|
+
}
|
22
|
+
|
23
|
+
header h1 a, header h1 a:visited {
|
24
|
+
color: var(--text-color);
|
25
|
+
text-decoration: none;
|
26
|
+
}
|
27
|
+
|
28
|
+
header h1 a:hover, header h1 a:active {
|
29
|
+
color: var(--text-color-link);
|
30
|
+
text-decoration: none;
|
31
|
+
}
|
32
|
+
|
33
|
+
footer {
|
34
|
+
font-size: var(--font-size-smaller);
|
35
|
+
}
|
36
|
+
|
37
|
+
/* nav links (header/footer) */
|
38
|
+
nav a {
|
39
|
+
padding: var(--space-quarter) 0;
|
40
|
+
margin: var(--space-quarter);
|
41
|
+
|
42
|
+
font-size: var(--font-size-smaller);
|
43
|
+
text-transform: uppercase;
|
44
|
+
text-decoration: none;
|
45
|
+
}
|
46
|
+
|
47
|
+
nav a:hover, nav a:active {
|
48
|
+
text-decoration: none;
|
49
|
+
border-bottom: 2px solid var(--text-color-link-hover);
|
50
|
+
}
|
51
|
+
|
52
|
+
/* larger screens */
|
53
|
+
@media (min-width: $breakpoint-large) {
|
54
|
+
blockquote,
|
55
|
+
.content-extend {
|
56
|
+
margin-left: calc(-1 * var(--space-double));
|
57
|
+
margin-right: calc(-1 * var(--space-double));
|
58
|
+
}
|
59
|
+
|
60
|
+
figure {
|
61
|
+
margin-left: calc(50% - 50vw);
|
62
|
+
margin-right: calc(50% - 50vw);
|
63
|
+
|
64
|
+
width: 100vw;
|
65
|
+
max-width: var(--image-width-max);
|
66
|
+
transform: translateX(calc(50vw - 50%));
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
/* images --------------------------------------- */
|
71
|
+
img.small-right,
|
72
|
+
img.small-left {
|
73
|
+
max-width: 60%;
|
74
|
+
margin: 0 var(--space-base);
|
75
|
+
padding: 0;
|
76
|
+
}
|
77
|
+
|
78
|
+
img.small-right { float: right; margin-right: 0; }
|
79
|
+
img.small-left { float: left; margin-left: 0; }
|
80
|
+
|
81
|
+
img.large-center {
|
82
|
+
position: relative;
|
83
|
+
|
84
|
+
left: 50%;
|
85
|
+
right: 50%;
|
86
|
+
margin-left: -50vw;
|
87
|
+
margin-right: -50vw;
|
88
|
+
|
89
|
+
width: 100vw;
|
90
|
+
height: auto;
|
91
|
+
max-width: var(--image-width-max);
|
92
|
+
|
93
|
+
transform: translateX(calc(50vw - 50%));
|
94
|
+
}
|
95
|
+
|
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
|
+
|
105
|
+
main img {
|
106
|
+
position: relative;
|
107
|
+
|
108
|
+
left: 50%;
|
109
|
+
right: 50%;
|
110
|
+
margin-left: -50vw;
|
111
|
+
margin-right: -50vw;
|
112
|
+
|
113
|
+
width: 100vw;
|
114
|
+
height: auto;
|
115
|
+
max-width: var(--image-width-max);
|
116
|
+
|
117
|
+
transform: translateX(calc(50vw - 50%));
|
118
|
+
}
|
119
|
+
|
120
|
+
/* reset images inside figure */
|
121
|
+
figure img {
|
122
|
+
left: 0;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
/* articles lists --------------------------------------- */
|
127
|
+
.blog-articles__list {
|
128
|
+
margin: var(--space-base) 0;
|
129
|
+
padding: 0;
|
130
|
+
|
131
|
+
background: var(--background-color);
|
132
|
+
border: 1px solid var(--border-color);
|
133
|
+
border-radius: var(--border-radius);
|
134
|
+
}
|
135
|
+
|
136
|
+
.blog-articles__list li {
|
137
|
+
list-style: none;
|
138
|
+
padding: calc(1.5 * var(--space-quarter)) var(--space-double);
|
139
|
+
border-bottom: 1px solid var(--border-color);
|
140
|
+
}
|
141
|
+
|
142
|
+
.blog-articles__list li:last-child {
|
143
|
+
border: 0 none;
|
144
|
+
}
|
145
|
+
|
146
|
+
.blog-articles__list li:nth-child(even) {
|
147
|
+
background: var(--background-color-alt);
|
148
|
+
}
|
149
|
+
|
150
|
+
.blog-articles__list time {
|
151
|
+
margin: 0;
|
152
|
+
padding: 0 var(--space-quarter);
|
153
|
+
|
154
|
+
font-family: var(--font-family-monospace);
|
155
|
+
font-size: var(--font-size-smallest);
|
156
|
+
color: var(--text-color-alt);
|
157
|
+
}
|
158
|
+
|
159
|
+
/* posts/articles --------------------------------------- */
|
160
|
+
|
161
|
+
.post-meta,
|
162
|
+
.post-nav {
|
163
|
+
display: flex;
|
164
|
+
justify-content: space-between;
|
165
|
+
|
166
|
+
margin: 0;
|
167
|
+
padding: var(--space-half) var(--space-base);
|
168
|
+
|
169
|
+
background: var(--background-color-alt);
|
170
|
+
border-radius: var(--border-radius);
|
171
|
+
|
172
|
+
font-family: var(--font-family-sans);
|
173
|
+
font-size: var(--font-size-smallest);
|
174
|
+
text-transform: uppercase;
|
175
|
+
|
176
|
+
opacity: var(--opacity-low);
|
177
|
+
}
|
178
|
+
|
179
|
+
.post-nav a {
|
180
|
+
padding: var(--space-half);
|
181
|
+
text-decoration: none;
|
182
|
+
}
|
183
|
+
|
184
|
+
/* powered by Google Programmable Search, https://programmablesearchengine.google.com/ */
|
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 */
|
195
|
+
.video-wrap {
|
196
|
+
position: relative;
|
197
|
+
margin-top: var(--space-base);
|
198
|
+
margin-bottom: var(--space-base);
|
199
|
+
padding-bottom: 56.25%; /* 16:9 */
|
200
|
+
padding-top: 0;
|
201
|
+
max-width: 100%;
|
202
|
+
height: 0;
|
203
|
+
overflow: hidden;
|
204
|
+
border-radius: var(--border-radius);
|
205
|
+
}
|
206
|
+
|
207
|
+
.video-wrap iframe,
|
208
|
+
.video-wrap object,
|
209
|
+
.video-wrap embed {
|
210
|
+
position: absolute;
|
211
|
+
top: 0;
|
212
|
+
left: 0;
|
213
|
+
width: 100%;
|
214
|
+
height: 100%;
|
215
|
+
}
|
216
|
+
|
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
|
+
border-radius: var(--border-radius);
|
227
|
+
}
|
228
|
+
|
229
|
+
|
230
|
+
|
231
|
+
/* UTILITIES --------------------------------------- */
|
232
|
+
|
233
|
+
/* clamp content to one line */
|
234
|
+
.one-liner {
|
235
|
+
overflow: hidden;
|
236
|
+
display: -webkit-box;
|
237
|
+
-webkit-line-clamp: 1;
|
238
|
+
-webkit-box-orient: vertical;
|
239
|
+
}
|
240
|
+
|
241
|
+
/* debug: attach a "?" class to debug with a blinking box */
|
242
|
+
.\? {
|
243
|
+
animation: \?wobble 0.5s ease-in-out alternate infinite;
|
244
|
+
}
|
245
|
+
@keyframes \?wobble {
|
246
|
+
0% { box-shadow: inset 1px 1px gold, inset -1px -1px gold; }
|
247
|
+
100% { box-shadow: inset 5px 5px red, inset -5px -5px red; }
|
248
|
+
}
|
@@ -0,0 +1,263 @@
|
|
1
|
+
*,
|
2
|
+
::before,
|
3
|
+
::after {
|
4
|
+
box-sizing: border-box;
|
5
|
+
}
|
6
|
+
|
7
|
+
html {
|
8
|
+
margin: 0;
|
9
|
+
padding: 0;
|
10
|
+
}
|
11
|
+
|
12
|
+
body {
|
13
|
+
color: var(--text-color);
|
14
|
+
background: var(--background-color);
|
15
|
+
|
16
|
+
font-family: var(--font-family);
|
17
|
+
font-size: calc(var(--font-size) * var(--typescale-body));
|
18
|
+
line-height: var(--line-height);
|
19
|
+
|
20
|
+
display: flex;
|
21
|
+
min-height: 100vh;
|
22
|
+
flex-direction: column;
|
23
|
+
flex: 1;
|
24
|
+
|
25
|
+
margin: 0 auto;
|
26
|
+
padding: 0 var(--space-half);
|
27
|
+
max-width: var(--body-width);
|
28
|
+
|
29
|
+
overflow-x: hidden;
|
30
|
+
word-break: break-word;
|
31
|
+
overflow-wrap: break-word;
|
32
|
+
}
|
33
|
+
|
34
|
+
h1, h2, h3, h4, h5, h6 {
|
35
|
+
font-family: var(--font-family-headings);
|
36
|
+
line-height: var(--line-height-heading);
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
h1 {
|
41
|
+
font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
|
42
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
43
|
+
}
|
44
|
+
|
45
|
+
h2 {
|
46
|
+
font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
|
47
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
48
|
+
}
|
49
|
+
|
50
|
+
h3 {
|
51
|
+
font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading));
|
52
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
53
|
+
}
|
54
|
+
|
55
|
+
h4 {
|
56
|
+
font-size: calc(var(--font-size) * var(--typescale-heading));
|
57
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
58
|
+
}
|
59
|
+
|
60
|
+
h5 {
|
61
|
+
font-size: var(--font-size);
|
62
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
63
|
+
}
|
64
|
+
|
65
|
+
h6 {
|
66
|
+
font-size: calc(var(--font-size) / var(--typescale-heading));
|
67
|
+
margin-top: calc(var(--line-height) * var(--spacing-heading));
|
68
|
+
}
|
69
|
+
|
70
|
+
small {
|
71
|
+
font-size: var(--font-size-small);
|
72
|
+
}
|
73
|
+
|
74
|
+
|
75
|
+
a,
|
76
|
+
a:visited {
|
77
|
+
color: var(--text-color-link);
|
78
|
+
text-decoration: none;
|
79
|
+
}
|
80
|
+
|
81
|
+
a:hover,
|
82
|
+
a:active {
|
83
|
+
color: var(--text-color-link-hover);
|
84
|
+
text-decoration: underline;
|
85
|
+
}
|
86
|
+
|
87
|
+
blockquote {
|
88
|
+
margin: var(--space-double) var(--space-base);
|
89
|
+
padding: var(--space-half) var(--space-base) var(--space-half) var(--space-double);
|
90
|
+
overflow: auto;
|
91
|
+
opacity: var(--opacity-low);
|
92
|
+
|
93
|
+
background: var(--background-color-alt);
|
94
|
+
border-radius: var(--border-radius);
|
95
|
+
border-left: var(--border-width-alt) solid var(--border-color-highlight);
|
96
|
+
}
|
97
|
+
|
98
|
+
cite {
|
99
|
+
font-size: var(--font-size-smaller);
|
100
|
+
font-style: normal;
|
101
|
+
}
|
102
|
+
|
103
|
+
code,
|
104
|
+
pre,
|
105
|
+
pre span,
|
106
|
+
kbd,
|
107
|
+
samp {
|
108
|
+
font-family: var(--font-family-monospace);
|
109
|
+
font-size: var(--font-size-small);
|
110
|
+
color: var(--text-color-alt);
|
111
|
+
white-space: pre-line;
|
112
|
+
|
113
|
+
/* repair edges of wrapped inline elements */
|
114
|
+
-webkit-box-decoration-break: clone;
|
115
|
+
box-decoration-break: clone;
|
116
|
+
}
|
117
|
+
|
118
|
+
kbd {
|
119
|
+
color: var(--text-color-alt);
|
120
|
+
border: var(--border-width) solid var(--text-color-alt);
|
121
|
+
border-bottom: var(--border-width-alt) solid var(--text-color-alt);
|
122
|
+
border-radius: var(--border-radius-high);
|
123
|
+
padding: calc(0.5 * var(--space-quarter)) var(--space-half);
|
124
|
+
}
|
125
|
+
|
126
|
+
pre {
|
127
|
+
margin: var(--space-base) 0;
|
128
|
+
padding: var(--space-base) var(--space-double);
|
129
|
+
max-width: 100%;
|
130
|
+
overflow: auto;
|
131
|
+
overflow-x: auto;
|
132
|
+
|
133
|
+
background: var(--background-color-alt);
|
134
|
+
border-radius: var(--border-radius);
|
135
|
+
border-left: var(--border-width-alt) solid var(--border-color-highlight);
|
136
|
+
}
|
137
|
+
|
138
|
+
pre code {
|
139
|
+
background: none;
|
140
|
+
margin: 0;
|
141
|
+
padding: 0;
|
142
|
+
}
|
143
|
+
|
144
|
+
code {
|
145
|
+
padding: var(--space-quarter) var(--space-half);
|
146
|
+
background: var(--background-color-alt);
|
147
|
+
border-radius: var(--border-radius);
|
148
|
+
}
|
149
|
+
|
150
|
+
abbr {
|
151
|
+
cursor: help;
|
152
|
+
}
|
153
|
+
|
154
|
+
details {
|
155
|
+
padding: var(--space-half) var(--space-base);
|
156
|
+
background: var(--background-color-accent);
|
157
|
+
border: 1px solid var(--border-color);
|
158
|
+
border-radius: var(--border-radius);
|
159
|
+
margin-bottom: var(--space-base);
|
160
|
+
}
|
161
|
+
|
162
|
+
summary {
|
163
|
+
cursor: pointer;
|
164
|
+
font-weight: bold;
|
165
|
+
}
|
166
|
+
|
167
|
+
details[open] {
|
168
|
+
padding-bottom: var(--space-half);
|
169
|
+
}
|
170
|
+
|
171
|
+
details[open] summary {
|
172
|
+
margin-bottom: var(--space-half);
|
173
|
+
}
|
174
|
+
|
175
|
+
details[open]>*:last-child {
|
176
|
+
margin-bottom: 0;
|
177
|
+
}
|
178
|
+
|
179
|
+
|
180
|
+
hr {
|
181
|
+
display: block;
|
182
|
+
position: relative;
|
183
|
+
width: 100%;
|
184
|
+
height: 1px;
|
185
|
+
|
186
|
+
margin: var(--space-base) auto;
|
187
|
+
background-size: contain;
|
188
|
+
background: var(--border-color);
|
189
|
+
border: 0 none;
|
190
|
+
}
|
191
|
+
|
192
|
+
mark {
|
193
|
+
padding: calc(0.5 * var(--space-quarter)) var(--space-quarter);
|
194
|
+
border-radius: var(--border-radius);
|
195
|
+
background: var(--background-color-accent);
|
196
|
+
|
197
|
+
/* repair edges of wrapped inline elements */
|
198
|
+
-webkit-box-decoration-break: clone;
|
199
|
+
box-decoration-break: clone;
|
200
|
+
}
|
201
|
+
|
202
|
+
img {
|
203
|
+
max-width: 100%;
|
204
|
+
height: auto;
|
205
|
+
border-radius: var(--border-radius);
|
206
|
+
}
|
207
|
+
|
208
|
+
main img,
|
209
|
+
main video {
|
210
|
+
max-width: 100%;
|
211
|
+
height: auto;
|
212
|
+
border-radius: var(--border-radius);
|
213
|
+
}
|
214
|
+
|
215
|
+
figure {
|
216
|
+
padding: 0;
|
217
|
+
margin: var(--space-base) 0;
|
218
|
+
|
219
|
+
background: var(--background-color-alt);
|
220
|
+
border-radius: var(--border-radius);
|
221
|
+
border-bottom: 1px solid var(--border-color);
|
222
|
+
|
223
|
+
text-align: center;
|
224
|
+
}
|
225
|
+
|
226
|
+
figure img {
|
227
|
+
display: block;
|
228
|
+
width: 100%;
|
229
|
+
height: auto;
|
230
|
+
}
|
231
|
+
|
232
|
+
figcaption {
|
233
|
+
opacity: var(--opacity-low);
|
234
|
+
margin: 0;
|
235
|
+
padding: var(--space-half);
|
236
|
+
|
237
|
+
font-family: var(--font-family-sans);
|
238
|
+
font-size: var(--font-size-smaller);
|
239
|
+
}
|
240
|
+
|
241
|
+
audio {
|
242
|
+
width: 100%;
|
243
|
+
margin: var(--space-base) 0;
|
244
|
+
}
|
245
|
+
|
246
|
+
table {
|
247
|
+
border-collapse: collapse;
|
248
|
+
width: 100%;
|
249
|
+
}
|
250
|
+
|
251
|
+
td,
|
252
|
+
th {
|
253
|
+
text-align: left;
|
254
|
+
}
|
255
|
+
|
256
|
+
th {
|
257
|
+
font-weight: bold;
|
258
|
+
}
|
259
|
+
|
260
|
+
table caption {
|
261
|
+
font-weight: bold;
|
262
|
+
margin-bottom: var(--space-half);
|
263
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
{%- if post.layout != post -%}
|
2
|
+
{%- assign words = post.content | strip_html | number_of_words -%}
|
3
|
+
{%- if words < 180 -%}
|
4
|
+
less than 1-min read
|
5
|
+
{%- elsif words < 360 -%}
|
6
|
+
1-min read
|
7
|
+
{%- else -%}
|
8
|
+
{{ words | divided_by:180 }}-min read
|
9
|
+
{%- endif -%}
|
10
|
+
{%- endif -%}
|
11
|
+
|
12
|
+
{%- if post.layout == post -%}
|
13
|
+
{%- assign words = content | number_of_words -%}
|
14
|
+
{%- if words < 180 -%}
|
15
|
+
less than 1-min read
|
16
|
+
{%- elsif words < 360 -%}
|
17
|
+
1-min read
|
18
|
+
{%- else -%}
|
19
|
+
{{ words | divided_by:180 }}-min read
|
20
|
+
{%- endif -%}
|
21
|
+
{%- endif -%}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{% comment %}
|
2
|
+
<!--
|
3
|
+
USAGE
|
4
|
+
{% include video.html videoURL="https://www.youtube.com/embed/QKEFhH63vg4" %}
|
5
|
+
-->
|
6
|
+
{% endcomment %}
|
7
|
+
<div class="video-wrap"><iframe src="{{ include.videoURL }}" width="800" height="450" title="YouTube Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
|
5
|
+
<meta charset="utf-8">
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7
|
+
|
8
|
+
<title>
|
9
|
+
{%- if title -%}{{ title }}
|
10
|
+
{%- elsif page.title -%}{{ page.title }}
|
11
|
+
{%- else -%}{{ site.title }}
|
12
|
+
{%- endif -%}
|
13
|
+
</title>
|
14
|
+
|
15
|
+
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
16
|
+
<meta name="robots" content="index,follow">
|
17
|
+
|
18
|
+
<style type="text/css">
|
19
|
+
{%- capture include_to_scssify -%}
|
20
|
+
{% include css/settings.css %}
|
21
|
+
{% include css/styles.css %}
|
22
|
+
{% include css/styles-extended.css %}
|
23
|
+
{% if page.type == posts %}
|
24
|
+
{% include css/styles-code.css %}
|
25
|
+
{% endif %}
|
26
|
+
{%- endcapture -%}
|
27
|
+
{{- include_to_scssify | scssify | strip_newlines -}}
|
28
|
+
</style>
|
29
|
+
<link rel="stylesheet" media="print" href="/print.css">
|
30
|
+
|
31
|
+
</head>
|
32
|
+
<body>
|
33
|
+
|
34
|
+
<main>
|
35
|
+
{% include header.html %}
|
36
|
+
{{ content }}
|
37
|
+
{% include footer.html %}
|
38
|
+
</main>
|
39
|
+
|
40
|
+
</body>
|
41
|
+
</html>
|
data/_layouts/home.html
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
{{ content }}
|
6
|
+
|
7
|
+
|
8
|
+
{%- for post in site.posts -%}
|
9
|
+
{%- assign currentdate = post.date | date: "%Y" -%}
|
10
|
+
|
11
|
+
{%- if currentdate != date -%}
|
12
|
+
{%- unless forloop.first -%}</ul>{% endunless %}
|
13
|
+
<h2 id="year-{{post.date | date: "%Y"}}">{{ currentdate }}</h2>
|
14
|
+
<ul class="blog-articles__list">
|
15
|
+
{% assign date = currentdate %}
|
16
|
+
{%- endif -%}
|
17
|
+
<li class="one-liner">
|
18
|
+
<time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%b %d' }}</time>
|
19
|
+
<a href="{{ post.url }}">{{ post.title }}</a>
|
20
|
+
</li>
|
21
|
+
{%- if forloop.last -%}</ul>{% endif %}
|
22
|
+
{% endfor %}
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<div class="post-meta">
|
6
|
+
<time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%Y %b %-d %a' }}</time>
|
7
|
+
<span>{%- include read-time.html -%}</span>
|
8
|
+
</div>
|
9
|
+
|
10
|
+
<article>
|
11
|
+
<h1>{{ page.title }}</h1>
|
12
|
+
{{ content }}
|
13
|
+
</article>
|
14
|
+
|
15
|
+
<div class="post-nav">
|
16
|
+
{%- if page.previous.url -%}
|
17
|
+
<a href="{{ page.previous.url | prepend: site.baseurl }}" class="post-nav__prev" title="{{ page.previous.title }}">← Prev</a>
|
18
|
+
{%- endif -%}
|
19
|
+
{%- if page.next.url -%}
|
20
|
+
<a href="{{ page.next.url | prepend: site.baseurl }}" class="post-nav__next" title="{{ page.next.title }}">Next →</a>
|
21
|
+
{%- endif -%}
|
22
|
+
</div>
|
metadata
ADDED
@@ -0,0 +1,106 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: oinam-jekyll
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Oinam
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2021-08-21 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: jekyll
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.5'
|
20
|
+
- - "<"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '5.0'
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.5'
|
30
|
+
- - "<"
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '5.0'
|
33
|
+
- !ruby/object:Gem::Dependency
|
34
|
+
name: jekyll-feed
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
36
|
+
requirements:
|
37
|
+
- - "~>"
|
38
|
+
- !ruby/object:Gem::Version
|
39
|
+
version: '0.9'
|
40
|
+
type: :runtime
|
41
|
+
prerelease: false
|
42
|
+
version_requirements: !ruby/object:Gem::Requirement
|
43
|
+
requirements:
|
44
|
+
- - "~>"
|
45
|
+
- !ruby/object:Gem::Version
|
46
|
+
version: '0.9'
|
47
|
+
- !ruby/object:Gem::Dependency
|
48
|
+
name: bundler
|
49
|
+
requirement: !ruby/object:Gem::Requirement
|
50
|
+
requirements:
|
51
|
+
- - ">="
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: '0'
|
54
|
+
type: :development
|
55
|
+
prerelease: false
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
57
|
+
requirements:
|
58
|
+
- - ">="
|
59
|
+
- !ruby/object:Gem::Version
|
60
|
+
version: '0'
|
61
|
+
description:
|
62
|
+
email:
|
63
|
+
- hi@oinam.com
|
64
|
+
executables: []
|
65
|
+
extensions: []
|
66
|
+
extra_rdoc_files: []
|
67
|
+
files:
|
68
|
+
- LICENSE.txt
|
69
|
+
- README.md
|
70
|
+
- _includes/css/settings.css
|
71
|
+
- _includes/css/styles-code.css
|
72
|
+
- _includes/css/styles-extended.css
|
73
|
+
- _includes/css/styles.css
|
74
|
+
- _includes/footer.html
|
75
|
+
- _includes/header.html
|
76
|
+
- _includes/read-time.html
|
77
|
+
- _includes/video.html
|
78
|
+
- _layouts/default.html
|
79
|
+
- _layouts/home.html
|
80
|
+
- _layouts/page.html
|
81
|
+
- _layouts/post.html
|
82
|
+
homepage: https://github.com/oinam/oinam-jekyll
|
83
|
+
licenses:
|
84
|
+
- MIT
|
85
|
+
metadata:
|
86
|
+
plugin_type: theme
|
87
|
+
post_install_message:
|
88
|
+
rdoc_options: []
|
89
|
+
require_paths:
|
90
|
+
- lib
|
91
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
92
|
+
requirements:
|
93
|
+
- - ">="
|
94
|
+
- !ruby/object:Gem::Version
|
95
|
+
version: '0'
|
96
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
97
|
+
requirements:
|
98
|
+
- - ">="
|
99
|
+
- !ruby/object:Gem::Version
|
100
|
+
version: '0'
|
101
|
+
requirements: []
|
102
|
+
rubygems_version: 3.2.25
|
103
|
+
signing_key:
|
104
|
+
specification_version: 4
|
105
|
+
summary: A simple, clean, and minimal Jekyll Theme.
|
106
|
+
test_files: []
|