jekyll-theme-profile 1.10.0 → 1.10.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -337
- data/_config.yml +31 -50
- data/_includes/collection-menu.html +57 -33
- data/_includes/custom-colors.html +99 -0
- data/_includes/head.html +2 -14
- data/_includes/header-appbar.html +6 -15
- data/_includes/header-sidebar.html +4 -13
- data/_includes/header-stacked.html +2 -15
- data/_includes/header-topbar.html +3 -0
- data/_includes/link-card.html +10 -23
- data/_includes/links.html +4 -4
- data/_includes/masthead.html +1 -1
- data/_includes/nav-overlay.html +44 -29
- data/_includes/paginator_nav.html +28 -0
- data/_includes/post-timeline-card.html +28 -9
- data/_includes/post-timeline.html +24 -12
- data/_includes/posts.html +1 -1
- data/_includes/repositories.html +1 -1
- data/_includes/thumbnail.html +19 -0
- data/_layouts/category_index.html +0 -2
- data/_layouts/category_layout.html +23 -46
- data/_layouts/default.html +1 -4
- data/_layouts/docs.html +10 -16
- data/_layouts/home.html +0 -1
- data/_layouts/landing.html +3 -5
- data/_layouts/linktree.html +5 -3
- data/_layouts/page.html +14 -1
- data/_layouts/paginate.html +1 -27
- data/_layouts/paginate_timeline.html +7 -31
- data/_layouts/post.html +11 -12
- data/_layouts/profile.html +25 -13
- data/_layouts/repositories.html +0 -1
- data/_layouts/tag_index.html +0 -2
- data/_layouts/tags.html +1 -4
- data/_sass/_main.scss +11 -50
- data/assets/css/theme.scss +0 -77
- data/assets/img/social-preview.png +0 -0
- metadata +25 -21
@@ -0,0 +1,99 @@
|
|
1
|
+
{%- assign bg_image = page.background.image | default: site.background.image %}
|
2
|
+
{%- assign dark_overlay = page.background.dark.overlay | default: page.background.overlay | default: site.background.dark.overlay | default: site.background.overlay %}
|
3
|
+
{%- assign light_overlay = page.background.light.overlay | default: page.background.overlay | default: site.background.light.overlay | default: site.background.overlay %}
|
4
|
+
{%- assign header_color = page.header.color | default: site.header.color %}
|
5
|
+
{%- assign header_text = page.header.text | default: site.header.text %}
|
6
|
+
{%- assign header_accent = page.header.accent | default: site.header.accent %}
|
7
|
+
{%- assign header_image = page.header.image | default: site.header.image %}
|
8
|
+
{%- assign header_overlay = page.header.overlay | default: site.header.overlay %}
|
9
|
+
<style>
|
10
|
+
{%- if bg_image %}
|
11
|
+
body {
|
12
|
+
position: relative;
|
13
|
+
background-image: url('{{ bg_image | relative_url }}');
|
14
|
+
background-size: cover;
|
15
|
+
background-repeat: no-repeat;
|
16
|
+
background-attachment: fixed;
|
17
|
+
z-index: -10;
|
18
|
+
}
|
19
|
+
{%- endif %}
|
20
|
+
{%- if dark_overlay %}
|
21
|
+
/* Dark mode styles */
|
22
|
+
[data-color-mode='dark'] {
|
23
|
+
--overlay-color: {{ dark_overlay }};
|
24
|
+
}
|
25
|
+
@media(prefers-color-scheme: dark) {
|
26
|
+
[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
|
27
|
+
--overlay-color: {{ dark_overlay }};
|
28
|
+
}
|
29
|
+
}
|
30
|
+
{%- endif %}
|
31
|
+
{%- if light_overlay %}
|
32
|
+
/* Light mode styles */
|
33
|
+
[data-color-mode='light'] {
|
34
|
+
--overlay-color: {{ light_overlay }};
|
35
|
+
}
|
36
|
+
|
37
|
+
@media(prefers-color-scheme: light) {
|
38
|
+
[data-color-mode='auto'][data-light-theme='light'] {
|
39
|
+
--overlay-color: {{ light_overlay }};
|
40
|
+
}
|
41
|
+
}
|
42
|
+
{%- endif %}
|
43
|
+
{%- if header_color %}
|
44
|
+
.Header {
|
45
|
+
--color-header-bg: {{ header_color }};
|
46
|
+
}
|
47
|
+
/* Light mode styles */
|
48
|
+
[data-color-mode='light'] {
|
49
|
+
--color-header-bg: {{ header_color }};
|
50
|
+
}
|
51
|
+
|
52
|
+
@media(prefers-color-scheme: light) {
|
53
|
+
[data-color-mode='auto'][data-light-theme='light'] {
|
54
|
+
--color-header-bg: {{ header_color }};
|
55
|
+
}
|
56
|
+
}
|
57
|
+
/* Dark mode styles */
|
58
|
+
[data-color-mode='dark'] {
|
59
|
+
--color-header-bg: {{ header_color }};
|
60
|
+
}
|
61
|
+
@media(prefers-color-scheme: dark) {
|
62
|
+
[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
|
63
|
+
--color-header-bg: {{ header_color }};
|
64
|
+
}
|
65
|
+
}
|
66
|
+
{%- endif %}
|
67
|
+
{%- if header_text %}
|
68
|
+
.Header {
|
69
|
+
--color-header-logo: {{ header_text }};
|
70
|
+
--color-fg-muted: {{ header_text }};
|
71
|
+
}
|
72
|
+
{%- endif %}
|
73
|
+
{%- if header_accent %}
|
74
|
+
.Header {
|
75
|
+
--color-header-text: {{ header_accent }};
|
76
|
+
--color-accent-fg: {{ header_accent }};
|
77
|
+
}
|
78
|
+
{%- endif %}
|
79
|
+
{%- if header_image %}
|
80
|
+
.Header {
|
81
|
+
position: relative;
|
82
|
+
background-image: url('{{ header_image | relative_url }}');
|
83
|
+
background-size: cover;
|
84
|
+
background-repeat: no-repeat;
|
85
|
+
}
|
86
|
+
{%- endif %}
|
87
|
+
{%- if header_overlay %}
|
88
|
+
.Header::before {
|
89
|
+
content: "";
|
90
|
+
position: absolute;
|
91
|
+
top: 0;
|
92
|
+
right: 0;
|
93
|
+
bottom: 0;
|
94
|
+
left: 0;
|
95
|
+
z-index: -1;
|
96
|
+
background-color: {{ header_overlay }};
|
97
|
+
}
|
98
|
+
{%- endif %}
|
99
|
+
</style>
|
data/_includes/head.html
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
{%- assign bg_image = page.background_image | default: site.background.image | default: null %}
|
2
|
-
|
3
1
|
<head>
|
4
2
|
<meta charset="utf-8">
|
5
3
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
@@ -29,18 +27,8 @@
|
|
29
27
|
<script src="{{ '/assets/js/anchor-links.js' | relative_url }}"></script>
|
30
28
|
<script src="{{ '/assets/js/timeline.js' | relative_url }}"></script>
|
31
29
|
|
32
|
-
{%-
|
33
|
-
|
34
|
-
body {
|
35
|
-
position: relative;
|
36
|
-
background-image: url('{{ bg_image | relative_url }}');
|
37
|
-
background-size: cover;
|
38
|
-
background-repeat: no-repeat;
|
39
|
-
background-attachment: fixed;
|
40
|
-
z-index: -10;
|
41
|
-
}
|
42
|
-
</style>
|
43
|
-
{%- endif %}
|
30
|
+
{%- include custom-colors.html %}
|
31
|
+
|
44
32
|
{%- if page.css_style %}
|
45
33
|
<style>
|
46
34
|
{{ page.css_style }}
|
@@ -1,18 +1,12 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
});
|
6
|
-
$('#collapse-btn').click(function() {
|
7
|
-
$('.Extend').addClass('d-none');
|
8
|
-
})
|
9
|
-
});
|
10
|
-
</script>
|
1
|
+
{%- assign user = site.github.owner %}
|
2
|
+
{%- assign name = site.title | default: user.name | default: user.login %}
|
3
|
+
{%- assign user_img = site.user_image | default: user.avatar_url | default: "/assets/img/user-image.jpg" %}
|
4
|
+
|
11
5
|
<header class="AppHeader position-sticky top-0 z-2 border-bottom topbar">
|
12
6
|
<div class="AppHeader-item d-flex flex-justify-between p-2 flex-items-center">
|
13
7
|
{%- if site.nav %}
|
14
|
-
<div class="d-flex">
|
15
|
-
|
8
|
+
<div class="d-flex d-sm-none">
|
9
|
+
{% include nav-overlay.html %}
|
16
10
|
</div>
|
17
11
|
{%- endif %}
|
18
12
|
<div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
|
@@ -43,9 +37,6 @@
|
|
43
37
|
<div class="AppHeader-item width-full hide-sm">
|
44
38
|
{%- include navbar-underline.html %}
|
45
39
|
</div>
|
46
|
-
<div class="Extend Overlay-header d-none">
|
47
|
-
{%- include nav-overlay.html %}
|
48
|
-
</div>
|
49
40
|
</div>
|
50
41
|
{%- endif %}
|
51
42
|
</header>
|
@@ -1,11 +1,5 @@
|
|
1
1
|
<script>
|
2
2
|
$(document).ready(function () {
|
3
|
-
$('#expansion-btn').click(function () {
|
4
|
-
$('.Extend').toggleClass('d-none');
|
5
|
-
});
|
6
|
-
$('#collapse-btn').click(function () {
|
7
|
-
$('.Extend').addClass('d-none');
|
8
|
-
})
|
9
3
|
$('#toolbar-btn').click(function () {
|
10
4
|
$('.Sidebar').toggleClass('d-lg-block');
|
11
5
|
$('.Toolbar-expand').toggleClass('d-lg-block');
|
@@ -21,14 +15,14 @@
|
|
21
15
|
})
|
22
16
|
});
|
23
17
|
</script>
|
24
|
-
<div class="Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky top-0">
|
25
|
-
<div class="flex-column flex-1 position-sticky top-0"
|
18
|
+
<div class="Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0">
|
19
|
+
<div class="flex-column flex-1 position-sticky top-0">
|
26
20
|
<div class="Toolbar topbar d-flex flex-row py-3 flex-lg-justify-end flex-justify-start">
|
27
21
|
<div class="Toolbar-expand d-flex flex-justify-center d-none">
|
28
22
|
<button id="sidebar-btn" class="btn-octicon mr-2">{% octicon chevron-right height:16 %}</button>
|
29
23
|
</div>
|
30
|
-
<div class="d-flex flex-justify-center">
|
31
|
-
|
24
|
+
<div class="d-flex flex-justify-center d-lg-none">
|
25
|
+
{%- include nav-overlay.html %}
|
32
26
|
</div>
|
33
27
|
<div class="d-flex flex-justify-center">
|
34
28
|
{% include toggle.html %}
|
@@ -59,8 +53,5 @@
|
|
59
53
|
{%- endif %}
|
60
54
|
</div>
|
61
55
|
</div>
|
62
|
-
<div class="Extend d-none">
|
63
|
-
{%- include nav-overlay.html %}
|
64
|
-
</div>
|
65
56
|
</div>
|
66
57
|
</div>
|
@@ -1,13 +1,3 @@
|
|
1
|
-
<script>
|
2
|
-
$(document).ready(function () {
|
3
|
-
$('#expansion-btn').click(function () {
|
4
|
-
$('.Extend').toggleClass('d-none');
|
5
|
-
});
|
6
|
-
$('#collapse-btn').click(function () {
|
7
|
-
$('.Extend').addClass('d-none');
|
8
|
-
})
|
9
|
-
});
|
10
|
-
</script>
|
11
1
|
<div class="Profile text-center mt-3">
|
12
2
|
{%- include masthead.html %}
|
13
3
|
{%- if site.repo_info %}
|
@@ -27,15 +17,12 @@
|
|
27
17
|
{% include nav.html %}
|
28
18
|
</div>
|
29
19
|
<div class="d-flex flex-1 flex-sm-grow-0 flex-justify-start">
|
30
|
-
<div class="d-flex">
|
31
|
-
|
20
|
+
<div class="d-flex d-sm-none">
|
21
|
+
{% include nav-overlay.html%}
|
32
22
|
</div>
|
33
23
|
<div class="d-flex">
|
34
24
|
{% include toggle.html %}
|
35
25
|
</div>
|
36
26
|
</div>
|
37
27
|
</div>
|
38
|
-
<div class="Extend d-none">
|
39
|
-
{% include nav-overlay.html %}
|
40
|
-
</div>
|
41
28
|
{%- endif %}
|
@@ -1,3 +1,6 @@
|
|
1
|
+
{%- assign user = site.github.owner %}
|
2
|
+
{%- assign name = site.title | default: user.name | default: user.login %}
|
3
|
+
{%- assign user_img = site.user_image | default: user.avatar_url | default: "/assets/img/user-image.jpg" %}
|
1
4
|
<script>
|
2
5
|
$(document).ready(function () {
|
3
6
|
$('#expansion-btn').click(function () {
|
data/_includes/link-card.html
CHANGED
@@ -7,45 +7,32 @@ This builds a link card
|
|
7
7
|
- name
|
8
8
|
- url (optional)
|
9
9
|
- thumbnail (optional)
|
10
|
-
-
|
10
|
+
- octicon (optional) The name of the octicon icon to use for image
|
11
11
|
|
12
12
|
{%- endcomment %}
|
13
|
+
|
14
|
+
{%- assign link = include.link %}
|
15
|
+
|
13
16
|
{%- if link.url %}
|
14
17
|
<a href="{{ link.url | relative_url }}"
|
15
|
-
class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2"
|
18
|
+
class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2"
|
19
|
+
{% if link.url contains "http" %}target="_blank" rel="noopener noreferrer"{% endif %}>
|
16
20
|
<div class="avatar-7">
|
17
|
-
{
|
18
|
-
<img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
|
19
|
-
class="rounded-2 box-shadow-none img-cover float-left" alt="{{ link.name }}">
|
20
|
-
{%- endif %}
|
21
|
-
{%- if link.octicon %}
|
22
|
-
{% octicon {{ link.octicon }} height:48 %}
|
23
|
-
{%- endif %}
|
21
|
+
{% include thumbnail.html thumbnail=link.thumbnail octicon = link.octicon %}
|
24
22
|
</div>
|
25
|
-
<div class="p-2">
|
23
|
+
<div class="p-2 flex-1">
|
26
24
|
<p class="f3 text-center mb-0">{{ link.name }}</p>
|
27
|
-
{%- if link.description %}
|
28
|
-
<p class="f5 text-gray text-center mb-0 mt-1">{{ link.description }}</p>
|
29
|
-
{%- endif %}
|
30
25
|
</div>
|
31
|
-
<div class="avatar-7"></div>
|
32
26
|
</a>
|
33
27
|
{%- else %}
|
34
28
|
<div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
|
35
29
|
<div class="d-inline-flex flex-items-center">
|
36
30
|
<div class="avatar-7">
|
37
|
-
{
|
38
|
-
<img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
|
39
|
-
class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
|
40
|
-
{%- endif %}
|
31
|
+
{% include thumbnail.html thumbnail=link.thumbnail octicon = link.octicon %}
|
41
32
|
</div>
|
42
|
-
<div class="flex-
|
33
|
+
<div class="p-2 flex-1">
|
43
34
|
<p class="f3 lh-condensed text-center mt-1">{{ link.name }}</p>
|
44
|
-
{%- if link.description %}
|
45
|
-
<p class="f5 text-gray text-center mt-1">{{ link.description }}</p>
|
46
|
-
{%- endif %}
|
47
35
|
</div>
|
48
|
-
<div class="avatar-7"></div>
|
49
36
|
</div>
|
50
37
|
</div>
|
51
38
|
{%- endif %}
|
data/_includes/links.html
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
{% assign links =
|
2
|
-
<div class="width-full">
|
3
|
-
<div class="d-flex flex-column
|
1
|
+
{% assign links = include.links %}
|
2
|
+
<div class="width-full mb-8">
|
3
|
+
<div class="d-flex flex-column">
|
4
4
|
{%- for link in links %}
|
5
5
|
<div class="mb-2">
|
6
|
-
{%- include link-card.html %}
|
6
|
+
{%- include link-card.html link=link %}
|
7
7
|
</div>
|
8
8
|
{%- endfor %}
|
9
9
|
</div>
|
data/_includes/masthead.html
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{%- assign user = site.github.owner %}
|
2
2
|
{%- assign name = include.title | default: site.title | default: user.name | default: user.login %}
|
3
|
-
{%- assign user_img = site.user_image | default: user.avatar_url %}
|
3
|
+
{%- assign user_img = site.user_image | default: user.avatar_url | default: "/assets/img/user-image.jpg" %}
|
4
4
|
{%- assign user_metadata = site.user_metadata -%}
|
5
5
|
|
6
6
|
<div class="Masthead">
|
data/_includes/nav-overlay.html
CHANGED
@@ -1,38 +1,53 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
{%- assign user = site.github.owner %}
|
2
|
+
{%- assign name = site.title | default: user.name | default: user.login %}
|
3
|
+
{%- assign user_img = site.user_image | default: user.avatar_url | default: "/assets/img/user-image.jpg" %}
|
4
|
+
{%- assign nav_id = include.id | default: "nav-menu" %}
|
5
|
+
<script>
|
6
|
+
$(document).ready(function () {
|
7
|
+
const $menu = $("#{{ nav_id }}");
|
8
|
+
const $closeButton = $(".close-menu");
|
9
|
+
|
10
|
+
if ($menu.length && $closeButton.length) {
|
11
|
+
$closeButton.click(() => $menu.removeAttr("open")); // Properly closes the dropdown
|
12
|
+
}
|
13
|
+
});
|
14
|
+
</script>
|
15
|
+
<details class="details-reset details-overlay" id="{{ nav_id }}">
|
16
|
+
<summary class="AppHeader-button btn btn-invisible" aria-haspopup="true">
|
17
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
18
|
+
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
19
|
+
</svg>
|
20
|
+
</summary>
|
21
|
+
<details-menu class="SelectMenu" role="menu">
|
22
|
+
<div class="SelectMenu-modal">
|
23
|
+
<div class="SelectMenu-header">
|
24
|
+
<div tabindex="-1" class="SelectMenu-title" id="github-logo">
|
6
25
|
<a href="{{ site.baseurl }}/" class="AppHeader-link d-flex flex-items-center no-underline mr-3">
|
7
|
-
<img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
|
26
|
+
<img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
|
27
|
+
src="{{ user_img | relative_url }}">
|
8
28
|
<span class="h4 text-semibold mx-3">{{ name }}</span>
|
9
29
|
</a>
|
10
30
|
</div>
|
31
|
+
<div class="d-flex flex-justify-end">
|
32
|
+
<button class="SelectMenu-closeButton close-menu" type="button">
|
33
|
+
{% octicon x height: 16 %}
|
34
|
+
</button>
|
35
|
+
</div>
|
11
36
|
</div>
|
12
|
-
|
13
|
-
|
14
|
-
{% octicon x height: 16 %}
|
15
|
-
</button>
|
16
|
-
</div>
|
17
|
-
</div>
|
18
|
-
<div class="Overlay-body d-flex flex-column p-2">
|
19
|
-
<ul data-overflow-nav class="ActionListWrap SideNav">
|
37
|
+
|
38
|
+
<div class="SelectMenu-list">
|
20
39
|
{%- for nav_item in site.nav %}
|
21
|
-
<
|
22
|
-
<a href="{{ nav_item.url | relative_url }}" class="ActionListContent ActionListItem-label" >
|
23
|
-
{{ nav_item.name }}
|
24
|
-
</a>
|
25
|
-
</li>
|
40
|
+
<a href="{{ nav_item.url }}" class="SelectMenu-item" role="menuitem"{% if page.url contains nav_item.url %} aria-current="page"{% endif %}>{{ nav_item.name }}</a>
|
26
41
|
{%- endfor %}
|
27
|
-
</ul>
|
28
|
-
</div>
|
29
|
-
<div class="Overlay-footer Overlay-footer--alignEnd d-block pt-0">
|
30
|
-
<div class="ActionList-sectionDivider mt-0 mb-1"></div>
|
31
|
-
{%- if site.social_media %}
|
32
|
-
<div class="ActionList px-0 flex-1">
|
33
|
-
{%- include social.html %}
|
34
42
|
</div>
|
35
|
-
|
43
|
+
<div class="SelectMenu-footer">
|
44
|
+
<div class="ActionList-sectionDivider mt-0 mb-1"></div>
|
45
|
+
{%- if site.social_media %}
|
46
|
+
<div class="ActionList px-0 flex-1 pb-">
|
47
|
+
{%- include social.html %}
|
48
|
+
</div>
|
49
|
+
{%- endif %}
|
50
|
+
</div>
|
36
51
|
</div>
|
37
|
-
</
|
38
|
-
</
|
52
|
+
</details-menu>
|
53
|
+
</details>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
{% assign paginate_path = include.paginate_path | default: site.paginate_path %}
|
2
|
+
{% assign previous_page_path = include.previous_page_path | default: paginator.previous_page_path %}
|
3
|
+
{% assign next_page_path = include.next_page_path | default: paginator.next_page_path %}
|
4
|
+
<div class="paginate-container">
|
5
|
+
{% if paginator.total_pages > 1 %}
|
6
|
+
<div role="navigation" aria-label="Pagination" class="d-flex d-md-inline-block pagination">
|
7
|
+
{%- if paginator.previous_page %}
|
8
|
+
<a class="previous_page" rel="prev" href="{{ previous_page_path | relative_url }}"
|
9
|
+
aria-disabled="false">Previous</a>
|
10
|
+
{% endif %}
|
11
|
+
|
12
|
+
{%- for paginator_nav_page in (1..paginator.total_pages) %}
|
13
|
+
{%- if paginator_nav_page == paginator.page %}
|
14
|
+
<a href="{{ page.url | relative_url }}" aria-label="{{ paginator_nav_page }}" aria-current="page">{{ paginator_nav_page }}</a>
|
15
|
+
{% elsif paginator_nav_page == 1 %}
|
16
|
+
<a href="{{ paginate_path | relative_url | replace: 'page:num', '' }}" aria-label="{{ paginator_nav_page }}">{{ paginator_nav_page }}</a>
|
17
|
+
{% else %}
|
18
|
+
<a href="{{ paginate_path | relative_url | replace: ':num', paginator_nav_page }}" aria-label="{{ paginator_nav_page }}">{{ paginator_nav_page }}</a>
|
19
|
+
{%- endif %}
|
20
|
+
{%- endfor %}
|
21
|
+
|
22
|
+
{%- if paginator.next_page %}
|
23
|
+
<a class="next_page" rel="next" href="{{ next_page_path | relative_url }}"
|
24
|
+
aria-disabled="false">Next</a>
|
25
|
+
{% endif %}
|
26
|
+
</div>
|
27
|
+
{% endif %}
|
28
|
+
</div>
|
@@ -1,9 +1,28 @@
|
|
1
|
+
{%- comment -%}
|
2
|
+
post-timeline-card.html
|
3
|
+
Usage example:
|
4
|
+
{% include post-timeline-card.html post=post %}
|
5
|
+
|
6
|
+
Expects:
|
7
|
+
post (object) with fields:
|
8
|
+
- url
|
9
|
+
- title
|
10
|
+
- author (optional)
|
11
|
+
- date
|
12
|
+
- tags (array, optional)
|
13
|
+
- excerpt (optional)
|
14
|
+
- content (optional)
|
15
|
+
- type (string, optional, for the Octicon, defaults to 'comment')
|
16
|
+
- video (URL string, optional)
|
17
|
+
- image (URL string, optional)
|
18
|
+
{%- endcomment -%}
|
19
|
+
{%- assign post = include.post %}
|
1
20
|
{%- assign icon = post.type | default: "comment" %}
|
2
21
|
<div class="TimelineItem flex-wrap">
|
3
22
|
<div class="col-12 col-md-5 position-relative">
|
4
23
|
<div class="TimelineItem-title mt-5 position-sticky d-flex">
|
5
24
|
<div class="TimelineItem-badge">{% octicon {{icon}} height:16 %}</div>
|
6
|
-
<div class="title">
|
25
|
+
<div class="title mb-5">
|
7
26
|
<div class="h2">
|
8
27
|
<a href="{{ post.url | relative_url }}">
|
9
28
|
{{ post.title }}
|
@@ -14,28 +33,28 @@
|
|
14
33
|
{%- endif %}
|
15
34
|
<div class="text-gray mb-2 ws-normal">{{ post.date | date: "%b %d, %Y"}}</div>
|
16
35
|
{%- for tag in post.tags %}
|
17
|
-
<span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">{{tag}}</span>
|
36
|
+
<span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1 mb-5">{{tag}}</span>
|
18
37
|
{%- endfor %}
|
19
38
|
</div>
|
20
39
|
</div>
|
21
40
|
</div>
|
22
41
|
<div class="col-12 col-md-7">
|
23
|
-
<div class="
|
42
|
+
<div class="pt-md-7 ml-5 border-bottom">
|
24
43
|
{%- if post.video %}
|
25
|
-
<div id="Timeline-video-container" class="image-container">
|
44
|
+
<div id="Timeline-video-container" class="image-container mb-5">
|
26
45
|
<iframe id="Timeline-video" src="{{ post.video }}" frameborder="0" height="inherited"
|
27
46
|
width="inherited"></iframe>
|
28
47
|
</div>
|
29
48
|
{%- elsif post.image %}
|
30
|
-
<div class="image-container">
|
49
|
+
<div class="image-container mb-5">
|
31
50
|
<img class="rounded-2" src="{{ post.image}}" width="800" height="425" alt="{{ post.title }}" />
|
32
51
|
</div>
|
33
52
|
{%- endif %}
|
34
|
-
<div class="summary"> {{ post.excerpt }}</div>
|
35
|
-
{%- if post.content !=
|
36
|
-
<div class="more">
|
53
|
+
{% if post.excerpt != blank %}<div class="summary mb-5"> {{ post.excerpt }}</div>{% endif %}
|
54
|
+
{%- if post.content != post.excerpt %}
|
55
|
+
<div class="more mb-5">
|
37
56
|
<a href="{{ post.url | relative_url }}" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
|
38
|
-
|
57
|
+
Continue
|
39
58
|
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
|
40
59
|
viewBox="0 0 16 16" fill="none">
|
41
60
|
<path fill="currentColor"
|
@@ -1,18 +1,30 @@
|
|
1
|
-
{%-
|
2
|
-
|
3
|
-
|
1
|
+
{%- comment -%}
|
2
|
+
post-timeline.html
|
3
|
+
Usage example:
|
4
|
+
{% include post-timeline.html collection=site.posts limit=5 index='/blog/index.html' %}
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
6
|
+
Expects:
|
7
|
+
collection (array, required) - A list of posts or other objects to display.
|
8
|
+
limit (integer, optional) - Number of posts to display (default: all).
|
9
|
+
index (string, optional) - Index page for the collection.
|
10
|
+
{%- endcomment -%}
|
11
|
+
|
12
|
+
{%- assign timeline_collection = include.collection | sort: "date" | reverse %}
|
13
|
+
{%- assign timeline_post_limit = include.limit | default: -1 %}
|
14
|
+
{%- if timeline_post_limit < 0 %}
|
15
|
+
{%- assign timeline_post_limit = collection.size %}
|
16
|
+
{%- endif %}
|
17
|
+
{% assign timeline_index = include.index %}
|
18
|
+
|
19
|
+
<div class="container-xl mx-auto p-responsive-blog mb-8">
|
20
|
+
{%- for post in timeline_collection | limit: timeline_post_limit %}
|
21
|
+
{%- include post-timeline-card.html post=post %}
|
22
|
+
{%- endfor %}
|
23
|
+
{%- if timeline_collection.size > timeline_post_limit and timeline_index %}
|
24
|
+
<div class="mx-auto p-responsive-blog">
|
13
25
|
<div class="d-flex gutter-spacious">
|
14
26
|
<div class="col-12 col-md-7 offset-md-5">
|
15
|
-
<a href="{{
|
27
|
+
<a href="{{ timeline_index | relative_url }}"
|
16
28
|
class="Link--primary arrow-target-mktg text-semibold btn ml-5">View all {% octicon chevron-right height:16 %}</a>
|
17
29
|
</div>
|
18
30
|
</div>
|
data/_includes/posts.html
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
{%- include post-card.html %}
|
6
6
|
{%- endfor %}
|
7
7
|
</div>
|
8
|
-
{%- if site.
|
8
|
+
{%- if site.paginate %}
|
9
9
|
<div class="col-12 col-md-7 offset-md-5 mb-5">
|
10
10
|
<a href="{{ site.paginate_path | relative_url | replace: 'page:num', '' }}" class="btn ml-5">Read more</a>
|
11
11
|
</div>
|
data/_includes/repositories.html
CHANGED
@@ -0,0 +1,19 @@
|
|
1
|
+
{%- comment %}
|
2
|
+
This creates a thumbnail image. Thumbnail images can either be set to an image or an octicon
|
3
|
+
|
4
|
+
## Inputs
|
5
|
+
|
6
|
+
- thumbnail (optional)
|
7
|
+
- octicon (optional)
|
8
|
+
|
9
|
+
{%- endcomment %}
|
10
|
+
|
11
|
+
{%- assign thumbnail = include.thumbnail %}
|
12
|
+
{%- assign octicon = include.octicon %}
|
13
|
+
|
14
|
+
{%- if include.thumbnail %}
|
15
|
+
<img src="{{ thumbnail | relative_url }}" width="48" height="48"
|
16
|
+
class="rounded-2 box-shadow-none img-cover float-left" alt="{{ name }}">
|
17
|
+
{% elsif octicon %}
|
18
|
+
{% octicon {{ octicon }} height:48 %}
|
19
|
+
{% endif %}
|
@@ -7,8 +7,6 @@ title: Category
|
|
7
7
|
{%- assign category_permalink = page.pagination.permalink | default: site.autopages.categories.permalink | default: category_permalink %}
|
8
8
|
{%- assign per_section = page.per_section | default: page.pagination.per_page | default: 3 %}
|
9
9
|
|
10
|
-
<h1 class="h3-mktg mt-4 mb-6 mb-md-8">{{ page.title }}</h1>
|
11
|
-
|
12
10
|
{% include post-gallery.html
|
13
11
|
collection=categories
|
14
12
|
collection_permalink=category_permalink
|