jekyll-theme-horizon-flow 0.1.1

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