jekyll-theme-horizon-flow 0.1.1

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.
Files changed (41) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +675 -0
  4. data/_config.yml +103 -0
  5. data/_includes/404.html +26 -0
  6. data/_includes/footer.html +104 -0
  7. data/_includes/header.html +23 -0
  8. data/_includes/read_time.html +39 -0
  9. data/_includes/toc.html +182 -0
  10. data/_layouts/archive.html +82 -0
  11. data/_layouts/categories.html +85 -0
  12. data/_layouts/default.html +26 -0
  13. data/_layouts/home.html +58 -0
  14. data/_layouts/post.html +73 -0
  15. data/_layouts/search.html +45 -0
  16. data/_layouts/tags.html +77 -0
  17. data/_posts/2021-01-01-markdown-test-page.md +179 -0
  18. data/_posts/2022-01-18-pirates.md +44 -0
  19. data/_posts/2022-06-21-leopards.md +42 -0
  20. data/_posts/2022-12-12-chatgpt-testpost-all-markdown-elements.md +121 -0
  21. data/_posts/2023-06-01-getting-started-with-jekyll.md +49 -0
  22. data/_posts/2023-06-03-customizing-your-jekyll-site.md +25 -0
  23. data/_posts/2023-06-06-welcome-to-jekyll.md +29 -0
  24. data/_posts/2023-07-13-title-for-champions.md +284 -0
  25. data/_sass/default/_base.scss +31 -0
  26. data/_sass/default/_footer.scss +162 -0
  27. data/_sass/default/_header.scss +62 -0
  28. data/_sass/external/_highlighter_rougify_base16dark.scss +84 -0
  29. data/_sass/external/_normalize.scss +349 -0
  30. data/_sass/functions/_mixins.scss +192 -0
  31. data/_sass/functions/_values.scss +21 -0
  32. data/_sass/jekyll-theme-horizon-flow.scss +16 -0
  33. data/_sass/layouts/_archive.scss +89 -0
  34. data/_sass/layouts/_categories.scss +93 -0
  35. data/_sass/layouts/_home.scss +120 -0
  36. data/_sass/layouts/_post.scss +322 -0
  37. data/_sass/layouts/_search.scss +66 -0
  38. data/_sass/layouts/_tags.scss +91 -0
  39. data/assets/search.json +20 -0
  40. data/assets/style.scss +6 -0
  41. metadata +182 -0
@@ -0,0 +1,89 @@
1
+ #archive {
2
+ width: 100%;
3
+ }
4
+
5
+ #archive h1 {
6
+ @include page_title();
7
+ }
8
+
9
+ /* ---------------------------------------------------- */
10
+ /* ---------------------------------------------------- */
11
+ /* Style the archive list */
12
+ /* ---------------------------------------------------- */
13
+ /* ---------------------------------------------------- */
14
+
15
+
16
+ .archive_all_years {
17
+ @include showlinks(2);
18
+ }
19
+
20
+ .archive_all_years1 {
21
+ @include showlinks(1);
22
+ }
23
+
24
+ .archive_all_years2 {
25
+ @include showlinks(2);
26
+ }
27
+
28
+ .archive_all_years3 {
29
+ @include showlinks(3);
30
+ }
31
+
32
+ .archive_all_years4 {
33
+ @include showlinks(4);
34
+ }
35
+
36
+ .archive_all_years5 {
37
+ @include showlinks(5);
38
+ }
39
+
40
+ /* ---------------------------------------------------- */
41
+ /* ---------------------------------------------------- */
42
+ /* Only show posts when archive is selected */
43
+ /* ---------------------------------------------------- */
44
+ /* ---------------------------------------------------- */
45
+
46
+ .archive_year {
47
+ display: none;
48
+
49
+ h2 {
50
+ margin-bottom: 2em;
51
+ }
52
+ }
53
+
54
+ .archive_year:target {
55
+ display: block;
56
+ }
57
+
58
+ /* Hide the anchor from the URL bar */
59
+ #archive :target::before {
60
+ content: "";
61
+ display: block;
62
+ height: 100px;
63
+ margin-top: -100px;
64
+ visibility: hidden;
65
+ }
66
+
67
+
68
+ /* ---------------------------------------------------- */
69
+ /* ---------------------------------------------------- */
70
+ /* results Style */
71
+ /* ---------------------------------------------------- */
72
+ /* ---------------------------------------------------- */
73
+
74
+
75
+ .archive_findresults {
76
+ @include findresults();
77
+ }
78
+
79
+ .archive_date {
80
+ @include findresults_date();
81
+ }
82
+
83
+ .archive_day {
84
+ @include findresults_day();
85
+ }
86
+
87
+ .archive_summary {
88
+ @include findresults_summary();
89
+ }
@@ -0,0 +1,93 @@
1
+ #categories {
2
+ width: 100%;
3
+ }
4
+
5
+ #categories h1 {
6
+ @include page_title();
7
+ }
8
+
9
+ /* ---------------------------------------------------- */
10
+ /* ---------------------------------------------------- */
11
+ /* Style the categorie list */
12
+ /* ---------------------------------------------------- */
13
+ /* ---------------------------------------------------- */
14
+
15
+
16
+ .categories_all {
17
+ @include showlinks(3);
18
+ }
19
+
20
+ .categories_all1 {
21
+ @include showlinks(1);
22
+ }
23
+
24
+ .categories_all2 {
25
+ @include showlinks(2);
26
+ }
27
+
28
+ .categories_all3 {
29
+ @include showlinks(3);
30
+ }
31
+
32
+ .categories_all4 {
33
+ @include showlinks(4);
34
+ }
35
+
36
+ .categories_all5 {
37
+ @include showlinks(5);
38
+ }
39
+
40
+
41
+ /* ---------------------------------------------------- */
42
+ /* ---------------------------------------------------- */
43
+ /* Only show posts when categorie is selected */
44
+ /* ---------------------------------------------------- */
45
+ /* ---------------------------------------------------- */
46
+
47
+ .category_posts {
48
+ display: none;
49
+
50
+ h2 {
51
+ margin-bottom: 2em;
52
+ text-transform: lowercase;
53
+ }
54
+ }
55
+
56
+ .category_posts:target {
57
+ display: block;
58
+ }
59
+
60
+ /* Hide the anchor from the URL bar */
61
+ #categories :target::before {
62
+ content: "";
63
+ display: block;
64
+ height: 100px;
65
+ margin-top: -100px;
66
+ visibility: hidden;
67
+ }
68
+
69
+
70
+ /* ---------------------------------------------------- */
71
+ /* ---------------------------------------------------- */
72
+ /* results Style */
73
+ /* ---------------------------------------------------- */
74
+ /* ---------------------------------------------------- */
75
+
76
+
77
+ .categories_findresult {
78
+ @include findresults();
79
+ }
80
+
81
+ .categories_date {
82
+ @include findresults_date();
83
+ }
84
+
85
+ .categories_day {
86
+ @include findresults_day();
87
+ }
88
+
89
+
90
+ .categories_summary {
91
+ @include findresults_summary();
92
+ }
93
+
@@ -0,0 +1,120 @@
1
+ #home {
2
+ width: 100%;
3
+ }
4
+
5
+ /* ---------------------------------------------------- */
6
+ /* ---------------------------------------------------- */
7
+ /* main - cards layout (each post) */
8
+ /* ---------------------------------------------------- */
9
+ /* ---------------------------------------------------- */
10
+ // Supplements = Date + Tags
11
+
12
+ .single_article {
13
+ &::after {
14
+ content: "";
15
+ display: block;
16
+ border-top: 1px dashed $secondary-color;
17
+ margin-left: -100vw;
18
+ margin-right: -100vw;
19
+ margin-bottom: 4em; //same as .single_article .summary
20
+ width: 200vw; //only working with overflow-x: hidden; in body in _base.scss
21
+ }
22
+
23
+
24
+ h3 {
25
+ //font-family: Inter;
26
+ font-size: 36px;
27
+ font-weight: 700;
28
+ letter-spacing: 2px;
29
+ margin: 0;
30
+ color: $primary-color;
31
+ }
32
+
33
+ a {
34
+ color: #022539;
35
+ text-decoration: none;
36
+
37
+ &:hover {
38
+ @include hover();
39
+ }
40
+
41
+ &:hover h3 {
42
+ @include hover();
43
+ }
44
+ }
45
+
46
+ i {
47
+ color: $primary-color;
48
+ }
49
+
50
+ .summary {
51
+ margin-top: 2em;
52
+ margin-bottom: 4em;
53
+ }
54
+
55
+ .supplements-sep::before {
56
+ content: "\2022";
57
+ padding-left: 0.5em;
58
+ padding-right: 0.5em;
59
+ }
60
+ }
61
+
62
+
63
+ /* ---------------------------------------------------- */
64
+ /* ---------------------------------------------------- */
65
+ /* Pagination (next + previous Buttons on the bottom)
66
+ /* ---------------------------------------------------- */
67
+ /* ---------------------------------------------------- */
68
+ .pagination {
69
+ display: flex;
70
+ justify-content: space-between;
71
+
72
+
73
+ .page_count {
74
+ margin: 0 auto;
75
+ }
76
+
77
+ .spannext {
78
+ padding-right: 15px;
79
+ padding-left: 12px;
80
+ border: 1px solid black;
81
+ padding-top: 0;
82
+ padding-bottom: 5px;
83
+ height: 1em;
84
+ position: relative;
85
+ }
86
+
87
+ .spanprevious {
88
+ padding-right: 12px;
89
+ padding-left: 15px;
90
+ border: 1px solid black;
91
+ padding-top: 0;
92
+ padding-bottom: 5px;
93
+ height: 1em;
94
+ }
95
+
96
+ .next {
97
+ float: right;
98
+ }
99
+
100
+ .previous {
101
+ float: left;
102
+ }
103
+
104
+ .arrow {
105
+ border: solid $primary-color;
106
+ border-width: 0 3px 3px 0;
107
+ display: inline-block;
108
+ padding: 3px;
109
+ }
110
+
111
+ .right {
112
+ transform: rotate(-45deg);
113
+ -webkit-transform: rotate(-45deg);
114
+ }
115
+
116
+ .left {
117
+ transform: rotate(135deg);
118
+ -webkit-transform: rotate(135deg);
119
+ }
120
+ }
@@ -0,0 +1,322 @@
1
+ #post {
2
+ width: 100%;
3
+ font-size: 1.2em;
4
+ }
5
+
6
+
7
+
8
+ /* ---------------------------------------------------- */
9
+ /* ---------------------------------------------------- */
10
+ /* content layout */
11
+ /* ---------------------------------------------------- */
12
+ /* ---------------------------------------------------- */
13
+
14
+ .post_content {
15
+ position: relative;
16
+ margin-bottom: 4em; // for the to the top button
17
+
18
+ // header
19
+
20
+ h1 {
21
+ font-size: 1.5em;
22
+ font-style: italic;
23
+ letter-spacing: 5px;
24
+ border-left: 5px solid $primary-color;
25
+ padding: 0.5em;
26
+ margin-top: 3em;
27
+ background-color: $background-color;
28
+ margin-left: calc(-1em + 5px);; // 14px*2 padding - 5px border
29
+ }
30
+
31
+
32
+ h2 {
33
+ @include default_header(0);
34
+ border-bottom: 1px solid $primary-color;
35
+ font-size: 1.25em;
36
+ margin-top: 2.5em;
37
+ }
38
+
39
+
40
+ h3 {
41
+ @include default_header(0);
42
+ }
43
+
44
+ h4 {
45
+ @include default_header(2em);
46
+ }
47
+
48
+ h5 {
49
+ @include default_header(4em);
50
+ }
51
+
52
+ h6 {
53
+ @include default_header(6em);
54
+ }
55
+
56
+ // to top Button...
57
+ #toTopButton {
58
+ position: fixed;
59
+ bottom: 0;
60
+ left: 0;
61
+ z-index: 1;
62
+ padding: 16px;
63
+
64
+ i {
65
+ color: $accent-color;
66
+ font-size: 1.8em;
67
+ }
68
+ }
69
+
70
+ // blockquotes
71
+
72
+ blockquote {
73
+ background: $background-color;
74
+ border-left: 10px solid #ccc;
75
+ margin: 1.5em 1em;
76
+ padding: 0.5em 10px;
77
+ quotes: "\201C""\201D""\2018""\2019";
78
+ font-style: italic;
79
+ }
80
+
81
+ blockquote::before {
82
+ color: #ccc;
83
+ content: open-quote;
84
+ font-size: 4em;
85
+ line-height: 0.1em;
86
+ margin-right: 0.25em;
87
+ vertical-align: -0.4em;
88
+ }
89
+
90
+ blockquote p {
91
+ display: inline;
92
+ }
93
+
94
+ // Tables
95
+ table {
96
+ border-collapse: collapse;
97
+ width: 100%;
98
+ margin-bottom: 2em;
99
+ }
100
+
101
+ td, th {
102
+ border: 1px solid $primary-color;
103
+ padding: 8px;
104
+ }
105
+
106
+ tr:nth-child(even){background-color: rgba(0, 0, 0, 10%);}
107
+
108
+ tr:hover {background-color: $accent-color;}
109
+
110
+ th {
111
+ padding-top: 12px;
112
+ padding-bottom: 12px;
113
+ background-color: $primary-color;
114
+ color: white;
115
+ text-align: center;
116
+ }
117
+
118
+
119
+ // code blocks default styles (includes "external/_highlighter_rougify_base16dark.scss")
120
+
121
+ .highlight {
122
+ pre {
123
+ padding: 1em;
124
+ color: $background-color;
125
+ overflow: auto;
126
+ }
127
+
128
+ pre * {
129
+ font-family: monospace;
130
+ font-size: 1em;
131
+ }
132
+
133
+ table {
134
+ margin: 0;
135
+ }
136
+ tr:hover {
137
+ background-color: #151515; //depends on external/_highlighter_rougify_base16dark.scss
138
+ }
139
+
140
+ td, th {
141
+ border: 0;
142
+ padding: 0;
143
+ }
144
+ }
145
+
146
+ // Inline Code Block
147
+ code.highlighter-rouge {
148
+ font-style: italic;
149
+ color: $primary-color;
150
+ background-color: $background-color;
151
+ padding: 0 5px;
152
+ }
153
+ }
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+
162
+
163
+
164
+ /* ---------------------------------------------------- */
165
+ /* ---------------------------------------------------- */
166
+ /* TOC */
167
+ /* ---------------------------------------------------- */
168
+ /* ---------------------------------------------------- */
169
+
170
+
171
+ article {
172
+ position: relative;
173
+ }
174
+
175
+ #tocContainer {
176
+ display: none;
177
+ }
178
+
179
+
180
+ /* Style your toggle button */
181
+ #tocMenuButtonLabel {
182
+ cursor: pointer;
183
+ }
184
+
185
+ #tocMenuButton {
186
+ display: none;
187
+ }
188
+
189
+ #tocMenuButtonLabel {
190
+ font-size: 2em;
191
+ color: $accent-color;
192
+ position: fixed;
193
+ bottom: 0;
194
+ right: 0;
195
+ padding: 16px;
196
+ z-index: 1;
197
+ }
198
+
199
+ #tocMenuButton:checked ~ #tocContainer {
200
+ display: block;
201
+ border: 1px solid $primary-color;
202
+ position: fixed;
203
+ top: 1em;
204
+ right: 1em;
205
+ bottom: 1em;
206
+ min-width: 10vw;
207
+ max-width: 30vw;
208
+ background-color: $background-color;
209
+ z-index: 1;
210
+ overflow-x: hidden;
211
+ min-height: 10vh;
212
+ max-height: 80vh;
213
+
214
+ h1 {
215
+ text-shadow: 0px 2px 4px rgba(100,100,100,0.5);
216
+ color: $primary-color;
217
+ font-size: 2em;
218
+ font-weight: bold;
219
+ letter-spacing: 20px;
220
+ text-align: center;
221
+ }
222
+
223
+ ul {
224
+ list-style: none;
225
+ }
226
+
227
+ li a{
228
+ border-bottom: 1px dashed $secondary-color;
229
+ opacity: 0.8;
230
+ width: 80%;
231
+ display: block;
232
+ }
233
+
234
+ a {
235
+ text-decoration: none;
236
+ color: $secondary-color;
237
+ font-size: 1em;
238
+ line-height: 1.5em;
239
+ }
240
+
241
+ a:hover {
242
+ @include hover();
243
+ }
244
+ }
245
+
246
+
247
+ /* ---------------------------------------------------- */
248
+ /* ---------------------------------------------------- */
249
+ /* header layout */
250
+ /* ---------------------------------------------------- */
251
+ /* ---------------------------------------------------- */
252
+
253
+
254
+ .post_header::after {
255
+ content: "";
256
+ display: block;
257
+ border-top: 1px solid $secondary-color;
258
+ margin-left: -100vw;
259
+ margin-right: -100vw;
260
+ margin-bottom: 4em;
261
+ margin-top: 4em;
262
+ width: 200vw; //only working with overflow-x: hidden; in body in _base.scss
263
+ }
264
+
265
+ #post article {
266
+
267
+ .post_header {
268
+ position: relative;
269
+
270
+ a {
271
+ @include links($primary-color);
272
+ text-align: left;
273
+ padding: 0;
274
+ }
275
+
276
+ i {
277
+ color: $primary-color;
278
+ }
279
+
280
+ h1 {
281
+ color: $primary-color;
282
+ font-weight: bold;
283
+ font-family: Inter;
284
+ font-size: 2.5em;
285
+ letter-spacing: 2px;
286
+ margin-bottom: 0;
287
+ }
288
+
289
+ h3 {
290
+ color: $primary-color;
291
+ font-weight: normal;
292
+ margin-top: 0.5em;
293
+ }
294
+
295
+ .supplements {
296
+ color: $primary-color;
297
+ margin-top: 3em;
298
+ }
299
+
300
+ .supplements a {
301
+ /* Set links to display as block-level elements so capitalize works*/
302
+ display: inline-block;
303
+ &:hover {
304
+ @include hover();
305
+ }
306
+ }
307
+
308
+ .supplements a::first-letter {
309
+ text-transform: capitalize;
310
+ }
311
+
312
+ .supplements-sep::before {
313
+ content: "\2022";
314
+ padding-left: 0.5em;
315
+ padding-right: 0.5em;
316
+ }
317
+ }
318
+
319
+ .post_header_content_parting_line {
320
+ margin: 2em 0;
321
+ }
322
+ }
@@ -0,0 +1,66 @@
1
+ #search {
2
+ width: 100%;
3
+
4
+ .input {
5
+ text-align: center;
6
+ }
7
+ }
8
+
9
+ #search h1 {
10
+ @include page_title();
11
+ }
12
+
13
+
14
+ #search-container {
15
+ margin: auto;
16
+ text-align: center;
17
+ }
18
+
19
+ .search-results {
20
+ text-align: left;
21
+ }
22
+
23
+
24
+ /* ---------------------------------------------------- */
25
+ /* ---------------------------------------------------- */
26
+ /* results Style */
27
+ /* ---------------------------------------------------- */
28
+ /* ---------------------------------------------------- */
29
+
30
+
31
+ .search_findresults {
32
+ @include findresults();
33
+ }
34
+
35
+ .search_date {
36
+ @include findresults_date();
37
+ }
38
+
39
+ .search_day {
40
+ @include findresults_day();
41
+ }
42
+
43
+ .search_summary {
44
+ @include findresults_summary();
45
+ }
46
+
47
+
48
+ /* ---------------------------------------------------- */
49
+ /* ---------------------------------------------------- */
50
+ /* search Button */
51
+ /* ---------------------------------------------------- */
52
+ /* ---------------------------------------------------- */
53
+
54
+
55
+ #search-input {
56
+ border: 6px solid $accent-color;
57
+ border-radius: 2em;
58
+ padding: 0.5em 2em;
59
+ background-color: $background-color;
60
+ margin-bottom: 4em;
61
+ box-shadow: 10px 10px $primary-color;
62
+ }
63
+
64
+ #search-input:focus {
65
+ outline: none
66
+ }