oinam-jekyll 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|