beautiful-jekyll-theme 5.0.0 → 6.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +1 -1
- data/README.md +46 -31
- data/_includes/cloudflare_analytics.html +8 -0
- data/_includes/commentbox.html +7 -0
- data/_includes/comments.html +2 -0
- data/_includes/footer.html +6 -1
- data/_includes/giscus-comment.html +16 -0
- data/_includes/google_analytics.html +12 -0
- data/_includes/head.html +8 -5
- data/_includes/header.html +6 -6
- data/_includes/nav.html +19 -3
- data/_includes/search.html +39 -0
- data/_includes/social-networks-links.html +80 -4
- data/_includes/social-share.html +9 -1
- data/_layouts/base.html +1 -1
- data/_layouts/home.html +74 -66
- data/_layouts/post.html +2 -2
- data/assets/css/beautifuljekyll.css +167 -45
- data/assets/img/install-steps.gif +0 -0
- data/assets/js/beautifuljekyll.js +42 -14
- data/assets/js/staticman.js +39 -28
- data/feed.xml +2 -2
- data/staticman.yml +1 -1
- data/tags.html +1 -1
- metadata +27 -9
data/_layouts/home.html
CHANGED
|
@@ -6,88 +6,96 @@ layout: page
|
|
|
6
6
|
|
|
7
7
|
{% assign posts = paginator.posts | default: site.posts %}
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
|
|
10
|
+
<ul class="posts-list list-unstyled" role="list">
|
|
10
11
|
{% for post in posts %}
|
|
11
|
-
<
|
|
12
|
+
<li class="post-preview">
|
|
13
|
+
<article>
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
{%- capture thumbnail -%}
|
|
16
|
+
{% if post.thumbnail-img %}
|
|
17
|
+
{{ post.thumbnail-img }}
|
|
18
|
+
{% elsif post.cover-img %}
|
|
19
|
+
{% if post.cover-img.first %}
|
|
20
|
+
{{ post.cover-img[0].first.first }}
|
|
21
|
+
{% else %}
|
|
22
|
+
{{ post.cover-img }}
|
|
23
|
+
{% endif %}
|
|
19
24
|
{% else %}
|
|
20
|
-
{{ post.cover-img }}
|
|
21
25
|
{% endif %}
|
|
22
|
-
{%
|
|
26
|
+
{% endcapture %}
|
|
27
|
+
{% assign thumbnail=thumbnail | strip %}
|
|
28
|
+
|
|
29
|
+
{% if site.feed_show_excerpt == false %}
|
|
30
|
+
{% if thumbnail != "" %}
|
|
31
|
+
<div class="post-image post-image-normal">
|
|
32
|
+
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
|
|
33
|
+
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
|
|
34
|
+
</a>
|
|
35
|
+
</div>
|
|
36
|
+
{% endif %}
|
|
23
37
|
{% endif %}
|
|
24
|
-
{% endcapture %}
|
|
25
|
-
{% assign thumbnail=thumbnail | strip %}
|
|
26
38
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
39
|
+
<a href="{{ post.url | absolute_url }}">
|
|
40
|
+
<h2 class="post-title">{{ post.title | strip_html }}</h2>
|
|
41
|
+
|
|
42
|
+
{% if post.subtitle %}
|
|
43
|
+
<h3 class="post-subtitle">
|
|
44
|
+
{{ post.subtitle | strip_html }}
|
|
45
|
+
</h3>
|
|
46
|
+
{% endif %}
|
|
32
47
|
</a>
|
|
33
|
-
</div>
|
|
34
|
-
{% endif %}
|
|
35
|
-
{% endif %}
|
|
36
48
|
|
|
37
|
-
|
|
38
|
-
|
|
49
|
+
<p class="post-meta">
|
|
50
|
+
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
|
|
51
|
+
Posted on {{ post.date | date: date_format }}
|
|
52
|
+
</p>
|
|
39
53
|
|
|
40
|
-
{% if
|
|
41
|
-
|
|
42
|
-
{{ post.
|
|
43
|
-
|
|
54
|
+
{% if thumbnail != "" %}
|
|
55
|
+
<div class="post-image post-image-small">
|
|
56
|
+
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
|
|
57
|
+
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
|
|
58
|
+
</a>
|
|
59
|
+
</div>
|
|
44
60
|
{% endif %}
|
|
45
|
-
</a>
|
|
46
|
-
|
|
47
|
-
<p class="post-meta">
|
|
48
|
-
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
|
|
49
|
-
Posted on {{ post.date | date: date_format }}
|
|
50
|
-
</p>
|
|
51
61
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
62
|
+
{% unless site.feed_show_excerpt == false %}
|
|
63
|
+
{% if thumbnail != "" %}
|
|
64
|
+
<div class="post-image post-image-short">
|
|
65
|
+
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
|
|
66
|
+
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
|
|
67
|
+
</a>
|
|
68
|
+
</div>
|
|
69
|
+
{% endif %}
|
|
59
70
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
71
|
+
<div class="post-entry">
|
|
72
|
+
{% assign excerpt_length = site.excerpt_length | default: 50 %}
|
|
73
|
+
{{ post.excerpt | strip_html | truncatewords: excerpt_length }}
|
|
74
|
+
{% assign excerpt_word_count = post.excerpt | number_of_words %}
|
|
75
|
+
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
|
|
76
|
+
<a href="{{ post.url | absolute_url }}" class="post-read-more">[Read More]</a>
|
|
77
|
+
{% endif %}
|
|
78
|
+
</div>
|
|
79
|
+
{% endunless %}
|
|
68
80
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
81
|
+
{% if site.feed_show_tags != false and post.tags.size > 0 %}
|
|
82
|
+
<div class="blog-tags">
|
|
83
|
+
<span>Tags:</span>
|
|
84
|
+
<!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
|
|
85
|
+
<ul class="d-inline list-inline" role="list">
|
|
86
|
+
{% for tag in post.tags %}
|
|
87
|
+
<li class="list-inline-item">
|
|
88
|
+
<a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
|
|
89
|
+
</li>
|
|
90
|
+
{% endfor %}
|
|
91
|
+
</ul>
|
|
92
|
+
</div>
|
|
75
93
|
{% endif %}
|
|
76
|
-
</div>
|
|
77
|
-
{% endunless %}
|
|
78
94
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<span>Tags:</span>
|
|
82
|
-
{% for tag in post.tags %}
|
|
83
|
-
<a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
|
|
84
|
-
{% endfor %}
|
|
85
|
-
</div>
|
|
86
|
-
{% endif %}
|
|
87
|
-
|
|
88
|
-
</article>
|
|
95
|
+
</article>
|
|
96
|
+
</li>
|
|
89
97
|
{% endfor %}
|
|
90
|
-
</
|
|
98
|
+
</ul>
|
|
91
99
|
|
|
92
100
|
{% if paginator.total_pages > 1 %}
|
|
93
101
|
<ul class="pagination main-pager">
|
data/_layouts/post.html
CHANGED
|
@@ -67,12 +67,12 @@ layout: base
|
|
|
67
67
|
<ul class="pagination blog-pager">
|
|
68
68
|
{% if page.previous.url %}
|
|
69
69
|
<li class="page-item previous">
|
|
70
|
-
<a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">← Previous Post</a>
|
|
70
|
+
<a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title | strip_html | xml_escape}}">← Previous Post</a>
|
|
71
71
|
</li>
|
|
72
72
|
{% endif %}
|
|
73
73
|
{% if page.next.url %}
|
|
74
74
|
<li class="page-item next">
|
|
75
|
-
<a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post →</a>
|
|
75
|
+
<a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title | strip_html | xml_escape}}">Next Post →</a>
|
|
76
76
|
</li>
|
|
77
77
|
{% endif %}
|
|
78
78
|
</ul>
|
|
@@ -20,6 +20,7 @@ body {
|
|
|
20
20
|
background-image: url({{ site.page-img | relative_url }});
|
|
21
21
|
background-attachment: fixed;
|
|
22
22
|
{% endif %}
|
|
23
|
+
overflow-wrap: break-word;
|
|
23
24
|
}
|
|
24
25
|
p {
|
|
25
26
|
line-height: 1.5;
|
|
@@ -75,35 +76,26 @@ hr.small {
|
|
|
75
76
|
margin: -3.125rem 0 0;
|
|
76
77
|
}
|
|
77
78
|
|
|
78
|
-
.main-content {
|
|
79
|
-
padding-top: 5rem;
|
|
80
|
-
}
|
|
81
|
-
@media (min-width: 768px) {
|
|
82
|
-
.main-content {
|
|
83
|
-
padding-top: 8.125rem;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
79
|
.hideme {
|
|
88
80
|
display: none;
|
|
89
81
|
}
|
|
90
82
|
|
|
91
83
|
::-moz-selection {
|
|
92
|
-
color:
|
|
84
|
+
color: #fff;
|
|
93
85
|
text-shadow: none;
|
|
94
86
|
background-color: {{ site.hover-col | default: "#0085A1" }};
|
|
95
87
|
}
|
|
96
88
|
::selection {
|
|
97
|
-
color:
|
|
89
|
+
color: #fff;
|
|
98
90
|
text-shadow: none;
|
|
99
91
|
background-color: {{ site.hover-col | default: "#0085A1" }};
|
|
100
92
|
}
|
|
101
93
|
img::selection {
|
|
102
|
-
color:
|
|
94
|
+
color: #fff;
|
|
103
95
|
background: transparent;
|
|
104
96
|
}
|
|
105
97
|
img::-moz-selection {
|
|
106
|
-
color:
|
|
98
|
+
color: #fff;
|
|
107
99
|
background: transparent;
|
|
108
100
|
}
|
|
109
101
|
|
|
@@ -138,9 +130,9 @@ img {
|
|
|
138
130
|
background-image: url({{ site.navbar-img | relative_url }});
|
|
139
131
|
background-attachment: fixed;
|
|
140
132
|
{% endif %}
|
|
141
|
-
-webkit-transition:
|
|
142
|
-
-moz-transition:
|
|
143
|
-
transition:
|
|
133
|
+
-webkit-transition: padding .5s ease-in-out;
|
|
134
|
+
-moz-transition: padding .5s ease-in-out;
|
|
135
|
+
transition: padding .5s ease-in-out;
|
|
144
136
|
}
|
|
145
137
|
|
|
146
138
|
.navbar-custom,
|
|
@@ -182,15 +174,6 @@ img {
|
|
|
182
174
|
height: 2.5rem;
|
|
183
175
|
}
|
|
184
176
|
|
|
185
|
-
.navbar-custom .navbar-brand:hover,
|
|
186
|
-
.navbar-custom .navbar-brand:focus ,
|
|
187
|
-
.navbar-custom .navbar-nav .nav-link:hover,
|
|
188
|
-
.navbar-custom .navbar-nav .nav-link:focus,
|
|
189
|
-
.navbar-custom .navbar-nav .dropdown-item:hover,
|
|
190
|
-
.navbar-custom .navbar-nav .dropdown-item:focus {
|
|
191
|
-
color: {{ site.hover-col | default: "#0085A1" }};
|
|
192
|
-
}
|
|
193
|
-
|
|
194
177
|
.navbar-custom .navbar-nav .nav-item {
|
|
195
178
|
text-transform: uppercase;
|
|
196
179
|
font-size: 0.8125rem;
|
|
@@ -228,7 +211,7 @@ img {
|
|
|
228
211
|
border-width: 0.4em;
|
|
229
212
|
}
|
|
230
213
|
|
|
231
|
-
@media (min-width:
|
|
214
|
+
@media (min-width: 1200px) {
|
|
232
215
|
.navbar-custom {
|
|
233
216
|
padding-top: 1.25rem;
|
|
234
217
|
padding-bottom: 1.25rem;
|
|
@@ -243,17 +226,17 @@ img {
|
|
|
243
226
|
height: 3.125rem;
|
|
244
227
|
}
|
|
245
228
|
|
|
246
|
-
.navbar-expand-
|
|
229
|
+
.navbar-expand-xl .navbar-nav .nav-link {
|
|
247
230
|
padding-left: 0.9375rem;
|
|
248
231
|
padding-right: 0.9375rem;
|
|
249
232
|
}
|
|
250
233
|
|
|
251
|
-
.navbar-expand-
|
|
234
|
+
.navbar-expand-xl .navbar-nav .nav-item:not(.dropdown):last-child .nav-link {
|
|
252
235
|
padding-right: 0;
|
|
253
236
|
}
|
|
254
237
|
}
|
|
255
238
|
|
|
256
|
-
@media (min-width:
|
|
239
|
+
@media (min-width: 1200px) {
|
|
257
240
|
.navbar-custom .nav-item.dropdown:hover {
|
|
258
241
|
background: rgba(0, 0, 0, 0.1);
|
|
259
242
|
}
|
|
@@ -264,24 +247,31 @@ img {
|
|
|
264
247
|
}
|
|
265
248
|
|
|
266
249
|
.navbar-custom .nav-item.dropdown .dropdown-menu {
|
|
267
|
-
min-width: 0;
|
|
268
250
|
margin-top: 0;
|
|
269
251
|
font-size: 1em;
|
|
270
252
|
border: 0;
|
|
271
253
|
padding: 0;
|
|
254
|
+
{% if site.navbar-var-length %}
|
|
255
|
+
min-width: 100%;
|
|
256
|
+
{% else %}
|
|
257
|
+
min-width: 0;
|
|
272
258
|
width: 100%;
|
|
273
259
|
word-break: break-word;
|
|
260
|
+
{% endif %}
|
|
274
261
|
}
|
|
262
|
+
|
|
275
263
|
.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
|
|
276
|
-
white-space: normal;
|
|
277
264
|
padding: 0.625rem;
|
|
278
265
|
background-color: {{ site.navbar-col | default: "#EAEAEA" }};
|
|
279
266
|
text-decoration: none !important;
|
|
280
|
-
border-width: 0 1px 1px 1px;
|
|
281
267
|
font-weight: normal;
|
|
268
|
+
color: {{ site.navbar-text-col | default: "#404040" }};
|
|
269
|
+
{% unless site.navbar-var-length %}
|
|
270
|
+
white-space: normal;
|
|
271
|
+
{% endunless %}
|
|
282
272
|
}
|
|
283
273
|
|
|
284
|
-
@media (min-width:
|
|
274
|
+
@media (min-width: 1200px) {
|
|
285
275
|
.navbar-custom .nav-item.dropdown .dropdown-menu {
|
|
286
276
|
text-align: center;
|
|
287
277
|
}
|
|
@@ -291,9 +281,13 @@ img {
|
|
|
291
281
|
border: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
|
|
292
282
|
border-width: 0 1px 1px;
|
|
293
283
|
}
|
|
284
|
+
|
|
285
|
+
.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item:first-child {
|
|
286
|
+
border-top-width: 1px;
|
|
287
|
+
}
|
|
294
288
|
}
|
|
295
289
|
|
|
296
|
-
@media (max-width:
|
|
290
|
+
@media (max-width: 1199px) {
|
|
297
291
|
.navbar-custom .navbar-collapse {
|
|
298
292
|
border-top: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
|
|
299
293
|
margin: 0 -1rem;
|
|
@@ -315,12 +309,20 @@ img {
|
|
|
315
309
|
padding-left: 2rem;
|
|
316
310
|
}
|
|
317
311
|
}
|
|
312
|
+
.navbar-custom .navbar-brand:hover,
|
|
313
|
+
.navbar-custom .navbar-brand:focus ,
|
|
314
|
+
.navbar-custom .navbar-nav .nav-link:hover,
|
|
315
|
+
.navbar-custom .navbar-nav .nav-link:focus,
|
|
316
|
+
.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover,
|
|
317
|
+
.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:focus {
|
|
318
|
+
color: {{ site.hover-col | default: "#0085A1" }};
|
|
319
|
+
}
|
|
318
320
|
|
|
319
321
|
.navbar-custom .avatar-container {
|
|
320
322
|
position: absolute;
|
|
321
323
|
left: 50%;
|
|
322
324
|
width: 3.125rem;
|
|
323
|
-
|
|
325
|
+
bottom: -1.5rem;
|
|
324
326
|
transition: opacity 0.5s ease-in-out;
|
|
325
327
|
-webkit-transition: opacity 0.5s ease-in-out;
|
|
326
328
|
-moz-transition: opacity 0.5s ease-in-out;
|
|
@@ -355,9 +357,10 @@ img {
|
|
|
355
357
|
display: none;
|
|
356
358
|
}
|
|
357
359
|
|
|
358
|
-
@media (min-width:
|
|
360
|
+
@media (min-width: 1200px) {
|
|
359
361
|
.navbar-custom.top-nav-regular .avatar-container {
|
|
360
362
|
width: 6.25rem;
|
|
363
|
+
bottom: -1.9375rem;
|
|
361
364
|
}
|
|
362
365
|
|
|
363
366
|
.navbar-custom.top-nav-regular .avatar-container .avatar-img-border {
|
|
@@ -396,6 +399,11 @@ footer a {
|
|
|
396
399
|
color: {{ site.footer-link-col | default: "#404040" }};
|
|
397
400
|
}
|
|
398
401
|
|
|
402
|
+
footer a:hover,
|
|
403
|
+
footer a:focus {
|
|
404
|
+
color: {{ site.footer-hover-col | default: "#0085A1" }};
|
|
405
|
+
}
|
|
406
|
+
|
|
399
407
|
footer .list-inline {
|
|
400
408
|
margin: 0;
|
|
401
409
|
padding: 0;
|
|
@@ -434,6 +442,10 @@ footer .footer-custom-content {
|
|
|
434
442
|
|
|
435
443
|
/* --- Post preview (feed) --- */
|
|
436
444
|
|
|
445
|
+
.posts-list {
|
|
446
|
+
margin: 0;
|
|
447
|
+
}
|
|
448
|
+
|
|
437
449
|
.post-preview {
|
|
438
450
|
padding: 1.25rem 0;
|
|
439
451
|
border-bottom: 1px solid #eee;
|
|
@@ -501,14 +513,14 @@ footer .footer-custom-content {
|
|
|
501
513
|
width: 12rem;
|
|
502
514
|
}
|
|
503
515
|
.post-preview .post-image {
|
|
504
|
-
filter: grayscale(
|
|
516
|
+
filter: grayscale(40%);
|
|
505
517
|
}
|
|
506
518
|
.post-preview .post-image:hover {
|
|
507
519
|
filter: grayscale(0%);
|
|
508
520
|
}
|
|
509
521
|
.post-preview .post-image img {
|
|
510
|
-
height: 100%;
|
|
511
|
-
width: 100%;
|
|
522
|
+
max-height: 100%;
|
|
523
|
+
max-width: 100%;
|
|
512
524
|
}
|
|
513
525
|
.post-preview .post-image-short {
|
|
514
526
|
margin-top: -2.1875rem;
|
|
@@ -529,8 +541,8 @@ footer .footer-custom-content {
|
|
|
529
541
|
display: none;
|
|
530
542
|
}
|
|
531
543
|
.post-preview .post-image-small img {
|
|
532
|
-
width: 6.25rem;
|
|
533
|
-
height: 6.25rem;
|
|
544
|
+
max-width: 6.25rem;
|
|
545
|
+
max-height: 6.25rem;
|
|
534
546
|
}
|
|
535
547
|
@media (max-width: 500px) {
|
|
536
548
|
.post-preview .post-image {
|
|
@@ -556,7 +568,7 @@ footer .footer-custom-content {
|
|
|
556
568
|
.blog-tags {
|
|
557
569
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
558
570
|
font-size: 0.9375rem;
|
|
559
|
-
margin
|
|
571
|
+
margin: 1.875rem 0;
|
|
560
572
|
}
|
|
561
573
|
|
|
562
574
|
.blog-tags span {
|
|
@@ -564,6 +576,10 @@ footer .footer-custom-content {
|
|
|
564
576
|
opacity: 0.8;
|
|
565
577
|
}
|
|
566
578
|
|
|
579
|
+
.blog-tags .list-inline-item {
|
|
580
|
+
margin-right: 0;
|
|
581
|
+
}
|
|
582
|
+
|
|
567
583
|
.blog-tags a {
|
|
568
584
|
color: {{ site.text-col | default: "#404040" }};
|
|
569
585
|
text-decoration: none;
|
|
@@ -701,7 +717,7 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img {
|
|
|
701
717
|
bottom: 0;
|
|
702
718
|
display: none;
|
|
703
719
|
}
|
|
704
|
-
@media (min-width:
|
|
720
|
+
@media (min-width: 1200px) {
|
|
705
721
|
.intro-header {
|
|
706
722
|
margin-top: 8.125rem;
|
|
707
723
|
}
|
|
@@ -883,7 +899,9 @@ pre {
|
|
|
883
899
|
.highlight > pre:not([class~="highlight"]) { /* code block with line number */
|
|
884
900
|
padding: 0;
|
|
885
901
|
}
|
|
886
|
-
.highlight table,
|
|
902
|
+
.highlight table,
|
|
903
|
+
.highlight tr,
|
|
904
|
+
.highlight td { /* to be removed after fixing table styles */
|
|
887
905
|
border: none;
|
|
888
906
|
background: none;
|
|
889
907
|
padding: 0;
|
|
@@ -924,7 +942,10 @@ pre {
|
|
|
924
942
|
}
|
|
925
943
|
|
|
926
944
|
/* --- Notification boxes --- */
|
|
927
|
-
.box-note,
|
|
945
|
+
.box-note,
|
|
946
|
+
.box-warning,
|
|
947
|
+
.box-error,
|
|
948
|
+
.box-success {
|
|
928
949
|
padding: 0.9375rem 0.9375rem 0.9375rem 0.625rem;
|
|
929
950
|
margin: 1.25rem 1.25rem 1.25rem 0.3125rem;
|
|
930
951
|
border: 1px solid #eee;
|
|
@@ -996,3 +1017,104 @@ pre {
|
|
|
996
1017
|
display: block;
|
|
997
1018
|
margin: 0 auto;
|
|
998
1019
|
}
|
|
1020
|
+
|
|
1021
|
+
/* Search bar */
|
|
1022
|
+
#beautifuljekyll-search-overlay {
|
|
1023
|
+
display: none;
|
|
1024
|
+
z-index: 999999;
|
|
1025
|
+
position: fixed;
|
|
1026
|
+
background: rgba(0,0,0,0.9);
|
|
1027
|
+
left: 0;
|
|
1028
|
+
right: 0;
|
|
1029
|
+
top: 0;
|
|
1030
|
+
bottom: 0;
|
|
1031
|
+
text-align: center;
|
|
1032
|
+
padding: 1rem;
|
|
1033
|
+
}
|
|
1034
|
+
#nav-search-exit {
|
|
1035
|
+
position: absolute;
|
|
1036
|
+
top: 1.5rem;
|
|
1037
|
+
cursor: pointer;
|
|
1038
|
+
right: 25%;
|
|
1039
|
+
margin-right: 2rem;
|
|
1040
|
+
color: #555;
|
|
1041
|
+
font-size: 2rem;
|
|
1042
|
+
line-height: 2rem;
|
|
1043
|
+
font-weight: bold;
|
|
1044
|
+
}
|
|
1045
|
+
#nav-search-exit:hover {
|
|
1046
|
+
color: #000;
|
|
1047
|
+
}
|
|
1048
|
+
#nav-search-input {
|
|
1049
|
+
text-align: center;
|
|
1050
|
+
background: #e7edee;
|
|
1051
|
+
margin: auto;
|
|
1052
|
+
display: block;
|
|
1053
|
+
font-size: 2rem;
|
|
1054
|
+
width: 50%;
|
|
1055
|
+
transition: width 300ms ease;
|
|
1056
|
+
color: #222;
|
|
1057
|
+
border-radius: 5rem;
|
|
1058
|
+
outline: none;
|
|
1059
|
+
border: none;
|
|
1060
|
+
padding: 0 3rem;
|
|
1061
|
+
}
|
|
1062
|
+
@media (max-width: 1199px) {
|
|
1063
|
+
#nav-search-input {
|
|
1064
|
+
width: 75%;
|
|
1065
|
+
}
|
|
1066
|
+
#nav-search-exit {
|
|
1067
|
+
right: 12.5%;
|
|
1068
|
+
}
|
|
1069
|
+
}
|
|
1070
|
+
@media (max-width: 767px) {
|
|
1071
|
+
#nav-search-input {
|
|
1072
|
+
width: 100%;
|
|
1073
|
+
}
|
|
1074
|
+
#nav-search-exit {
|
|
1075
|
+
right: 0;
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
#nav-search-input:focus {
|
|
1079
|
+
background: #f3f8fe;
|
|
1080
|
+
box-shadow: 0px 0.15rem 1rem #e7f4ff;
|
|
1081
|
+
outline: none;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
#nav-search-input::placeholder {
|
|
1085
|
+
color: #777;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
#search-results-container {
|
|
1089
|
+
list-style: none;
|
|
1090
|
+
padding-left: unset;
|
|
1091
|
+
margin-top: 1.5rem;
|
|
1092
|
+
color: #fff;
|
|
1093
|
+
font-size: 1.5rem;
|
|
1094
|
+
max-height: calc(100vh - 6.5rem);
|
|
1095
|
+
overflow-y: auto;
|
|
1096
|
+
}
|
|
1097
|
+
#search-results-container a {
|
|
1098
|
+
color: #fff;
|
|
1099
|
+
text-decoration: none;
|
|
1100
|
+
}
|
|
1101
|
+
#search-results-container a:hover {
|
|
1102
|
+
color: #fff;
|
|
1103
|
+
text-decoration: underline;
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
#nav-search-icon {
|
|
1107
|
+
display: inline-block;
|
|
1108
|
+
}
|
|
1109
|
+
#nav-search-text {
|
|
1110
|
+
display: none;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
@media (max-width: 1199px) {
|
|
1114
|
+
#nav-search-icon {
|
|
1115
|
+
display: none;
|
|
1116
|
+
}
|
|
1117
|
+
#nav-search-text {
|
|
1118
|
+
display: inline-block;
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
Binary file
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
// Dean Attali / Beautiful Jekyll
|
|
1
|
+
// Dean Attali / Beautiful Jekyll 2023
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
let BeautifulJekyllJS = {
|
|
4
4
|
|
|
5
5
|
bigImgEl : null,
|
|
6
6
|
numImgs : null,
|
|
@@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
|
|
|
27
27
|
|
|
28
28
|
// show the big header image
|
|
29
29
|
BeautifulJekyllJS.initImgs();
|
|
30
|
+
|
|
31
|
+
BeautifulJekyllJS.initSearch();
|
|
30
32
|
},
|
|
31
33
|
|
|
32
34
|
initNavbar : function() {
|
|
@@ -39,6 +41,8 @@ var BeautifulJekyllJS = {
|
|
|
39
41
|
) / 1000);
|
|
40
42
|
if (brightness <= 125) {
|
|
41
43
|
$(".navbar").removeClass("navbar-light").addClass("navbar-dark");
|
|
44
|
+
} else {
|
|
45
|
+
$(".navbar").removeClass("navbar-dark").addClass("navbar-light");
|
|
42
46
|
}
|
|
43
47
|
},
|
|
44
48
|
|
|
@@ -50,23 +54,23 @@ var BeautifulJekyllJS = {
|
|
|
50
54
|
|
|
51
55
|
// 2fc73a3a967e97599c9763d05e564189
|
|
52
56
|
// set an initial image
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
57
|
+
const imgInfo = BeautifulJekyllJS.getImgInfo();
|
|
58
|
+
const src = imgInfo.src;
|
|
59
|
+
const desc = imgInfo.desc;
|
|
56
60
|
BeautifulJekyllJS.setImg(src, desc);
|
|
57
61
|
|
|
58
62
|
// For better UX, prefetch the next image so that it will already be loaded when we want to show it
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
const getNextImg = function() {
|
|
64
|
+
const imgInfo = BeautifulJekyllJS.getImgInfo();
|
|
65
|
+
const src = imgInfo.src;
|
|
66
|
+
const desc = imgInfo.desc;
|
|
63
67
|
|
|
64
|
-
|
|
68
|
+
const prefetchImg = new Image();
|
|
65
69
|
prefetchImg.src = src;
|
|
66
70
|
// if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
|
|
67
71
|
|
|
68
72
|
setTimeout(function(){
|
|
69
|
-
|
|
73
|
+
const img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
|
|
70
74
|
$(".intro-header.big-img").prepend(img);
|
|
71
75
|
setTimeout(function(){ img.css("opacity", "1"); }, 50);
|
|
72
76
|
|
|
@@ -89,9 +93,9 @@ var BeautifulJekyllJS = {
|
|
|
89
93
|
},
|
|
90
94
|
|
|
91
95
|
getImgInfo : function() {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
96
|
+
const randNum = Math.floor((Math.random() * BeautifulJekyllJS.numImgs) + 1);
|
|
97
|
+
const src = BeautifulJekyllJS.bigImgEl.attr("data-img-src-" + randNum);
|
|
98
|
+
const desc = BeautifulJekyllJS.bigImgEl.attr("data-img-desc-" + randNum);
|
|
95
99
|
|
|
96
100
|
return {
|
|
97
101
|
src : src,
|
|
@@ -106,6 +110,30 @@ var BeautifulJekyllJS = {
|
|
|
106
110
|
} else {
|
|
107
111
|
$(".img-desc").hide();
|
|
108
112
|
}
|
|
113
|
+
},
|
|
114
|
+
|
|
115
|
+
initSearch : function() {
|
|
116
|
+
if (!document.getElementById("beautifuljekyll-search-overlay")) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
$("#nav-search-link").click(function(e) {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
$("#beautifuljekyll-search-overlay").show();
|
|
123
|
+
$("#nav-search-input").focus().select();
|
|
124
|
+
$("body").addClass("overflow-hidden");
|
|
125
|
+
});
|
|
126
|
+
$("#nav-search-exit").click(function(e) {
|
|
127
|
+
e.preventDefault();
|
|
128
|
+
$("#beautifuljekyll-search-overlay").hide();
|
|
129
|
+
$("body").removeClass("overflow-hidden");
|
|
130
|
+
});
|
|
131
|
+
$(document).on('keyup', function(e) {
|
|
132
|
+
if (e.key == "Escape") {
|
|
133
|
+
$("#beautifuljekyll-search-overlay").hide();
|
|
134
|
+
$("body").removeClass("overflow-hidden");
|
|
135
|
+
}
|
|
136
|
+
});
|
|
109
137
|
}
|
|
110
138
|
};
|
|
111
139
|
|