jekyll-theme-profile 1.3.1 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +55 -13
- data/_config.yml +21 -8
- data/_includes/breadcrumbs.html +1 -1
- data/_includes/footer.html +12 -1
- data/_includes/head.html +51 -0
- data/_includes/header-appbar.html +49 -0
- data/_includes/header-sidebar.html +66 -0
- data/_includes/header-stacked.html +41 -0
- data/_includes/header-topbar.html +43 -0
- data/_includes/link-card.html +17 -7
- data/_includes/links.html +6 -4
- data/_includes/masthead.html +8 -37
- data/_includes/mini-repo-info-card.html +1 -1
- data/_includes/nav-overlay.html +38 -0
- data/_includes/nav.html +1 -1
- data/_includes/navbar-underline.html +11 -0
- data/_includes/post-card.html +20 -11
- data/_includes/post-feature-card.html +22 -0
- data/_includes/post-timeline-card.html +49 -0
- data/_includes/post-timeline.html +10 -0
- data/_includes/posts.html +4 -1
- data/_includes/social.html +3 -4
- data/_includes/toggle.html +2 -2
- data/_includes/user-metadata.html +30 -0
- data/_layouts/default.html +18 -127
- data/_layouts/home.html +2 -7
- data/_layouts/linktree.html +16 -0
- data/_layouts/page.html +2 -2
- data/_layouts/paginate.html +7 -12
- data/_layouts/post.html +97 -21
- data/_layouts/profile.html +36 -0
- data/_sass/_main.scss +146 -12
- data/assets/css/theme.scss +3 -5
- data/assets/img/default.png +0 -0
- data/assets/js/anchor-links.js +47 -0
- data/assets/js/theme-toggle.js +81 -0
- data/assets/js/timeline.js +29 -0
- metadata +47 -3
- data/_includes/header.html +0 -160
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d743c9cb83bb0c247244d2f75dfb4a85eae2b34f81998828e0718f3cadb7b06a
|
4
|
+
data.tar.gz: 9709f33198d7d273fc6a554c04b6bf95410e11d8346cff636eb10bb3db866fd5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 724a70a53664b30e7746d1b61f11048c6d3c7d6e648d85d0a48daaf3f950af35bc0033641267f7a066a4b2bf3463b3de2752e881d4a2119de422dd7f052503a9
|
7
|
+
data.tar.gz: 921b39cfc1b73b4a1f3f91181e8a228875d9ee01ef2d846f992a2d7008f3a63cea1e6f4f22a99f3f81bbb240f7066a269a3ab74253d43d3f2f89054cee4e55ea
|
data/README.md
CHANGED
@@ -1,17 +1,17 @@
|
|
1
1
|
---
|
2
|
-
layout:
|
2
|
+
layout: post
|
3
3
|
permalink: /
|
4
|
+
image: screenshot.png
|
5
|
+
description: A customizable jekyll theme built off of the github primer css
|
6
|
+
toc: true
|
4
7
|
---
|
8
|
+
# jekyll-theme-profile
|
9
|
+
|
5
10
|
![jekyll-theme-profile](screenshot.png)
|
6
11
|
|
7
|
-
# jekyll-theme-profile
|
8
|
-
{:.no_toc}
|
9
12
|
|
10
13
|
Meet "jekyll-theme-profile" – your ultimate Jekyll theme, based on GitHub's primer style. With both light and dark modes, and three stylish options: sidebar, topbar, and stacked, it's all about personalization. Setting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly. Get ready to rock your online presence with this user-friendly and charming theme, making Jekyll and GitHub Pages a joy to use!
|
11
14
|
|
12
|
-
1. TOC
|
13
|
-
{:toc}
|
14
|
-
|
15
15
|
## Installation
|
16
16
|
|
17
17
|
Add this line to your Jekyll site's `Gemfile`:
|
@@ -55,11 +55,11 @@ user_image: /media/user-image.jpg
|
|
55
55
|
# overlay: rgba(0, 0, 0, 0.5)
|
56
56
|
|
57
57
|
# repo_info: true # Show the information for the source of this project
|
58
|
-
#
|
58
|
+
# user_metadata: true # Show the metadata associated with the user
|
59
|
+
# profile_link: true # Show a link to the github profile for the user
|
59
60
|
|
60
61
|
####################
|
61
62
|
# Social media
|
62
|
-
# social_image: /screenshot.png # The social media thumbnail image to use in post links.
|
63
63
|
# icon_color: "#959da5" # The color of the social media icons on the site
|
64
64
|
# social_media: # Your social media accounts
|
65
65
|
# behance: your_username
|
@@ -90,6 +90,8 @@ user_image: /media/user-image.jpg
|
|
90
90
|
# nav:
|
91
91
|
# - name: Topbar
|
92
92
|
# url: /test/home/topbar.html
|
93
|
+
# - name: Appbar
|
94
|
+
# url: /test/home/appbar.html
|
93
95
|
# - name: Sidebar
|
94
96
|
# url: /test/home/sidebar.html
|
95
97
|
# - name: Stacked
|
@@ -101,6 +103,8 @@ user_image: /media/user-image.jpg
|
|
101
103
|
# - name: Example page with topbar
|
102
104
|
# url: /test/page/topbar
|
103
105
|
# thumbnail: /media/icon-topbar.png
|
106
|
+
# - name: Example page with appbar
|
107
|
+
# url: /test/page/appbar
|
104
108
|
# - name: Example page with sidebar
|
105
109
|
# url: /test/page/sidebar
|
106
110
|
# thumbnail: /media/icon-sidebar.png
|
@@ -250,6 +254,10 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
|
|
250
254
|
|
251
255
|
![Topbar image](/media/topbar-preview.png)
|
252
256
|
|
257
|
+
#### [Appbar](/test/home/appbar.md)
|
258
|
+
|
259
|
+
![Appbar image](/media/appbar-preview.png)
|
260
|
+
|
253
261
|
#### Background
|
254
262
|
|
255
263
|
You can even change the background by adding the following to your `_config.yml` file.
|
@@ -288,10 +296,6 @@ header:
|
|
288
296
|
accent: "#ffffff"
|
289
297
|
```
|
290
298
|
|
291
|
-
#### Custom styles
|
292
|
-
|
293
|
-
You can override any style with styles defined in `/assets/css/style.css` or `/assets/css/style.scss` files. This is to support config based styling which needs jekyll variables.
|
294
|
-
|
295
299
|
### Nav
|
296
300
|
|
297
301
|
In the `nav` section, you can add navigation links that will show up on every page of your website.
|
@@ -357,11 +361,25 @@ repositories:
|
|
357
361
|
You can set the social media image for your site with the setting
|
358
362
|
|
359
363
|
```yaml
|
360
|
-
|
364
|
+
image: /screenshot.jpg
|
361
365
|
```
|
362
366
|
|
363
367
|
This works on both yaml frontmatter for a page and in the `_config.yml` file. Page settings will override site settings.
|
364
368
|
|
369
|
+
Set the default for posts through the default settings in the `_config.yml` file.
|
370
|
+
|
371
|
+
```yaml
|
372
|
+
defaults:
|
373
|
+
- scope:
|
374
|
+
path: "" # an empty string here means all files in the project
|
375
|
+
type: "posts"
|
376
|
+
values:
|
377
|
+
layout: "post"
|
378
|
+
permalink: /blog/:year/:month/:day/:title.html
|
379
|
+
image: /assets/img/default.png # The default image used for social and posts.
|
380
|
+
toc: true
|
381
|
+
```
|
382
|
+
|
365
383
|
#### Adding your socials
|
366
384
|
|
367
385
|
Utilize the `social_media` section to add links to your various social media profiles. For each platform simply provide your username or user ID to have the corresponding icon and link appear on your profile.
|
@@ -428,6 +446,30 @@ title: My Blog
|
|
428
446
|
---
|
429
447
|
```
|
430
448
|
|
449
|
+
## Custom styles
|
450
|
+
|
451
|
+
### Site style
|
452
|
+
|
453
|
+
You can override any style with styles defined in `/assets/css/style.css` or `/assets/css/style.scss` files. This is to support config based styling which needs jekyll variables.
|
454
|
+
|
455
|
+
### Page style
|
456
|
+
|
457
|
+
You can add css to any page through the `css_style` variable in front matter.
|
458
|
+
|
459
|
+
```yaml
|
460
|
+
---
|
461
|
+
css_style: |
|
462
|
+
.Link-btn {
|
463
|
+
background: rgba(0.1, 0.1, 0.1, 0.4);
|
464
|
+
color: #FFFF;
|
465
|
+
}
|
466
|
+
h1 {
|
467
|
+
color: #FFFF;
|
468
|
+
}
|
469
|
+
---
|
470
|
+
|
471
|
+
```
|
472
|
+
|
431
473
|
## Contributing
|
432
474
|
|
433
475
|
Bug reports and pull requests are welcome on GitHub at https://github.com/athackst/jekyll-theme-profile. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
|
data/_config.yml
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
title: Jekyll Theme Profile
|
2
|
+
description: Github Profile built with jekyll-theme-profile
|
1
3
|
repository: athackst/jekyll-theme-profile
|
2
4
|
# The style of the website
|
3
5
|
style: topbar # One of "stacked", "sidebar", "topbar"
|
@@ -19,11 +21,11 @@ user_image: /media/user-image.jpg
|
|
19
21
|
# accent: "#ffffff"
|
20
22
|
|
21
23
|
repo_info: true # Show the information for the source of this project
|
22
|
-
|
24
|
+
user_metadata: true # Show the metadata associated with the user
|
25
|
+
profile_link: true # Show a link to the github profile for the user
|
23
26
|
|
24
27
|
####################
|
25
28
|
# Social media
|
26
|
-
social_image: /screenshot.png # The social media thumbnail image to use in post links.
|
27
29
|
# icon_color: "#959da5" # The color of the social media icons on the site
|
28
30
|
# social_media: # Your social media accounts
|
29
31
|
# behance: your_username
|
@@ -54,6 +56,8 @@ social_image: /screenshot.png # The social media thumbnail image to use in post
|
|
54
56
|
nav:
|
55
57
|
- name: Topbar
|
56
58
|
url: /test/home/topbar.html
|
59
|
+
- name: Appbar
|
60
|
+
url: /test/home/appbar.html
|
57
61
|
- name: Sidebar
|
58
62
|
url: /test/home/sidebar.html
|
59
63
|
- name: Stacked
|
@@ -64,16 +68,25 @@ nav:
|
|
64
68
|
links:
|
65
69
|
- name: Example page with topbar
|
66
70
|
url: /test/page/topbar
|
67
|
-
thumbnail: /media/icon
|
71
|
+
thumbnail: /media/topbar-icon.png
|
72
|
+
- name: Example page with appbar
|
73
|
+
url: /test/page/appbar
|
74
|
+
thumbnail: /media/appbar-icon.png
|
68
75
|
- name: Example page with sidebar
|
69
76
|
url: /test/page/sidebar
|
70
|
-
thumbnail: /media/icon
|
77
|
+
thumbnail: /media/sidebar-icon.png
|
71
78
|
- name: Example page with header stacked
|
72
79
|
url: /test/page/stacked
|
73
|
-
thumbnail: /media/icon
|
80
|
+
thumbnail: /media/stacked-icon.png
|
74
81
|
- name: Example page with a custom background
|
75
82
|
url: /test/page/background
|
76
83
|
thumbnail: /media/icon-bg.png
|
84
|
+
- name: Example Linktree page
|
85
|
+
url: /test/linktree
|
86
|
+
thumbnail: /media/links.png
|
87
|
+
- name: Example Profile page
|
88
|
+
url: /test/profile
|
89
|
+
thumbnail: /media/user-image.jpg
|
77
90
|
|
78
91
|
###################
|
79
92
|
# Repositories to show on home page
|
@@ -92,10 +105,8 @@ repositories:
|
|
92
105
|
####################
|
93
106
|
# Blog
|
94
107
|
posts_limit: 3 # The number of posts to show in home
|
95
|
-
|
96
108
|
paginate: 6 # The number of posts to show per page of pagination of blog posts
|
97
109
|
paginate_path: "/assets/blog/page:num"
|
98
|
-
|
99
110
|
markdown: kramdown
|
100
111
|
highlighter: rouge
|
101
112
|
# kramdown:
|
@@ -116,6 +127,7 @@ plugins:
|
|
116
127
|
- jekyll-octicons
|
117
128
|
- jekyll-paginate
|
118
129
|
- jekyll-seo-tag
|
130
|
+
- jekyll-toc
|
119
131
|
- jemoji
|
120
132
|
|
121
133
|
defaults:
|
@@ -124,8 +136,9 @@ defaults:
|
|
124
136
|
type: "posts"
|
125
137
|
values:
|
126
138
|
layout: "post"
|
127
|
-
breadcrumbs: true
|
128
139
|
permalink: /blog/:year/:month/:day/:title.html
|
140
|
+
image: /assets/img/default.png # The default image used for social and posts.
|
141
|
+
toc: true
|
129
142
|
|
130
143
|
exclude:
|
131
144
|
- "Gemfile"
|
data/_includes/breadcrumbs.html
CHANGED
data/_includes/footer.html
CHANGED
@@ -1,3 +1,14 @@
|
|
1
1
|
<footer>
|
2
|
-
|
2
|
+
<div class="footer py-3 color-bg-subtle border-top">
|
3
|
+
<div class="container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center">
|
4
|
+
{%- if site.social_media %}
|
5
|
+
<div class="flex-1">
|
6
|
+
{%- include social.html %}
|
7
|
+
</div>
|
8
|
+
{%- endif %}
|
9
|
+
<div class="flex-0 mx-auto px-4">
|
10
|
+
<div>Made with <a href="https://www.althack.dev/jekyll-theme-profile/">jekyll theme profile</a></div>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
</div>
|
3
14
|
</footer>
|
data/_includes/head.html
ADDED
@@ -0,0 +1,51 @@
|
|
1
|
+
{%- assign bg_image = page.background_image | default: site.background.image | default: null %}
|
2
|
+
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7
|
+
<!-- HTML Meta Tags -->
|
8
|
+
<title>{{ page_title }}</title>
|
9
|
+
|
10
|
+
{% seo %}
|
11
|
+
|
12
|
+
<link href="{{ '/assets/css/theme.css' | relative_url }}" rel="stylesheet" type="text/css">
|
13
|
+
<link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
|
14
|
+
<link rel="icon" type="image/x-icon" href="{{ '/assets/img/favicon.ico' | relative_url}}">
|
15
|
+
|
16
|
+
|
17
|
+
{%- if site.analytics.provider == 'google' %}
|
18
|
+
<!-- Google tag (gtag.js) -->
|
19
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.property }}"></script>
|
20
|
+
<script>
|
21
|
+
window.dataLayer = window.dataLayer || [];
|
22
|
+
function gtag() { dataLayer.push(arguments); }
|
23
|
+
gtag('js', new Date());
|
24
|
+
|
25
|
+
gtag('config', '{{ site.analytics.property }}');
|
26
|
+
</script>
|
27
|
+
{%- endif %}
|
28
|
+
|
29
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
30
|
+
<script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
|
31
|
+
<script src="{{ '/assets/js/anchor-links.js' | relative_url }}"></script>
|
32
|
+
<script src="{{ '/assets/js/timeline.js' | relative_url }}"></script>
|
33
|
+
|
34
|
+
{%- if bg_image %}
|
35
|
+
<style>
|
36
|
+
body {
|
37
|
+
position: relative;
|
38
|
+
background-image: url('{{ bg_image | relative_url }}');
|
39
|
+
background-size: cover;
|
40
|
+
background-repeat: no-repeat;
|
41
|
+
background-attachment: fixed;
|
42
|
+
z-index: -10;
|
43
|
+
}
|
44
|
+
</style>
|
45
|
+
{%- endif %}
|
46
|
+
{%- if page.css_style %}
|
47
|
+
<style>
|
48
|
+
{{ page.css_style }}
|
49
|
+
</style>
|
50
|
+
{%- endif %}
|
51
|
+
</head>
|
@@ -0,0 +1,49 @@
|
|
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
|
+
<header class="AppHeader position-sticky top-0 z-2 border-bottom topbar">
|
12
|
+
<div class="AppHeader-item d-flex flex-justify-between p-2 flex-items-center">
|
13
|
+
<div class="d-flex">
|
14
|
+
<button id="expansion-btn" class="AppHeader-button d-sm-none" type="button">{% octicon three-bars height:16 %}</button>
|
15
|
+
</div>
|
16
|
+
<div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
|
17
|
+
<a href="{{ site.baseurl }}/" class="AppHeader-link d-flex flex-items-center no-underline mr-3">
|
18
|
+
{% octicon mark-github height:32 %}
|
19
|
+
<span class="h4 text-semibold mx-3">{{ name }}</span>
|
20
|
+
</a>
|
21
|
+
</div>
|
22
|
+
<div class="AppHeader-item d-flex flex-items-center">
|
23
|
+
{% include toggle.html %}
|
24
|
+
{%- if site.repo_info %}
|
25
|
+
<div class="AppHeader-item hide-sm">
|
26
|
+
{% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
|
27
|
+
</div>
|
28
|
+
{% endif %}
|
29
|
+
{%- if site.profile_link %}
|
30
|
+
<div class="AppHeader-item mr-0">
|
31
|
+
<a href="https://github.com/{{ user.login }}" class="AppHeader-link d-flex flex-items-center">
|
32
|
+
<img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
|
33
|
+
src="{{ user_img | relative_url }}">
|
34
|
+
</a>
|
35
|
+
</div>
|
36
|
+
{%- endif %}
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
{%- if site.nav %}
|
40
|
+
<div class="d-flex flex-items-center mt-2">
|
41
|
+
<div class="AppHeader-item width-full hide-sm">
|
42
|
+
{%- include navbar-underline.html %}
|
43
|
+
</div>
|
44
|
+
<div class="Extend Overlay-header d-none">
|
45
|
+
{%- include nav-overlay.html %}
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
{%- endif %}
|
49
|
+
</header>
|
@@ -0,0 +1,66 @@
|
|
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
|
+
$('#toolbar-btn').click(function () {
|
10
|
+
$('.Sidebar').toggleClass('d-lg-block');
|
11
|
+
$('.Toolbar-expand').toggleClass('d-lg-block');
|
12
|
+
$('.Toolbar-collapse').toggleClass('d-lg-block');
|
13
|
+
$('.Toolbar').toggleClass('flex-lg-column');
|
14
|
+
})
|
15
|
+
$('#sidebar-btn').click(function () {
|
16
|
+
$('.Sidebar').toggleClass('d-lg-block');
|
17
|
+
$('.Toolbar-expand').toggleClass('d-lg-block');
|
18
|
+
$('.Toolbar-collapse').toggleClass('d-lg-block');
|
19
|
+
$('.Toolbar').toggleClass('flex-lg-column');
|
20
|
+
|
21
|
+
})
|
22
|
+
});
|
23
|
+
</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" >
|
26
|
+
<div class="Toolbar topbar d-flex flex-row py-3 flex-lg-justify-end flex-justify-start">
|
27
|
+
<div class="Toolbar-expand d-flex flex-justify-center d-none">
|
28
|
+
<button id="sidebar-btn" class="btn-octicon mr-2">{% octicon chevron-right height:16 %}</button>
|
29
|
+
</div>
|
30
|
+
<div class="d-flex flex-justify-center">
|
31
|
+
<button id="expansion-btn" class="btn-octicon mr-2 d-lg-none">{% octicon three-bars height:16 %}</button>
|
32
|
+
</div>
|
33
|
+
<div class="d-flex flex-justify-center">
|
34
|
+
{% include toggle.html %}
|
35
|
+
</div>
|
36
|
+
<div class="Toolbar-collapse d-flex flex-justify-center d-none d-lg-block">
|
37
|
+
<button id="toolbar-btn" class="btn-octicon mr-2">{% octicon chevron-left height:16 %}</button>
|
38
|
+
</div>
|
39
|
+
</div>
|
40
|
+
<div class="Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide">
|
41
|
+
<div class="text-center">
|
42
|
+
<div class="px-5 py-2">
|
43
|
+
{%- include masthead.html %}
|
44
|
+
</div>
|
45
|
+
{%- if site.repo_info %}
|
46
|
+
<div class="py-2">
|
47
|
+
{% include mini-repo-info-card.html class="Header-link no-underline" %}
|
48
|
+
</div>
|
49
|
+
{%- endif %}
|
50
|
+
{%- if site.nav %}
|
51
|
+
<div class="d-flex flex-column">
|
52
|
+
{%- include nav.html %}
|
53
|
+
</div>
|
54
|
+
{%- endif %}
|
55
|
+
{%- if site.social_media %}
|
56
|
+
<div class="py-2 px-2">
|
57
|
+
{%- include social.html %}
|
58
|
+
</div>
|
59
|
+
{%- endif %}
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
<div class="Extend d-none">
|
63
|
+
{%- include nav-overlay.html %}
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
</div>
|
@@ -0,0 +1,41 @@
|
|
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
|
+
<div class="Profile text-center">
|
12
|
+
{%- include masthead.html %}
|
13
|
+
{%- if site.repo_info %}
|
14
|
+
<div class="py-2">
|
15
|
+
{% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
|
16
|
+
</div>
|
17
|
+
{%- endif %}
|
18
|
+
{%- if site.social_media %}
|
19
|
+
<div class="py-2 px-2">
|
20
|
+
{%- include social.html %}
|
21
|
+
</div>
|
22
|
+
{%- endif %}
|
23
|
+
</div>
|
24
|
+
{%- if site.nav %}
|
25
|
+
<div class="Header d-flex z-2 position-sticky top-0 topbar">
|
26
|
+
<div class="Header-item flex-row flex-justify-center flex-1 hide-sm">
|
27
|
+
{% include nav.html %}
|
28
|
+
</div>
|
29
|
+
<div class="d-flex flex-1 flex-sm-grow-0 flex-justify-start">
|
30
|
+
<div class="d-flex">
|
31
|
+
<button id="expansion-btn" class="btn-octicon mr-2 d-sm-none">{% octicon three-bars height:16 %}</button>
|
32
|
+
</div>
|
33
|
+
<div class="d-flex">
|
34
|
+
{% include toggle.html %}
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
</div>
|
38
|
+
<div class="Extend d-none">
|
39
|
+
{% include nav-overlay.html %}
|
40
|
+
</div>
|
41
|
+
{%- endif %}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<script>
|
2
|
+
$(document).ready(function () {
|
3
|
+
$('#expansion-btn').click(function () {
|
4
|
+
$('.Extend').toggleClass('hide-sm');
|
5
|
+
});
|
6
|
+
});
|
7
|
+
</script>
|
8
|
+
<div class="Header position-sticky top-0 topbar">
|
9
|
+
<div class="flex-1">
|
10
|
+
<div class="d-flex">
|
11
|
+
<div class="Header-item">
|
12
|
+
<button id="expansion-btn" class="btn-octicon mr-2 d-sm-none">{% octicon three-bars height:16 %}</button>
|
13
|
+
<a href="{{ site.baseurl }}/" class="Header-link f4 d-flex flex-items-center">
|
14
|
+
{% octicon mark-github height:32 %}
|
15
|
+
</a>
|
16
|
+
</div>
|
17
|
+
<a href="{{ site.baseurl }}/" class="Header-item Header-link Header-item--full">{{ name }}</a>
|
18
|
+
<div class="Header-item">
|
19
|
+
{% include toggle.html %}
|
20
|
+
</div>
|
21
|
+
{%- if site.repo_info %}
|
22
|
+
<div class="Header-item hide-sm">
|
23
|
+
{% include mini-repo-info-card.html class="Header-link" %}
|
24
|
+
</div>
|
25
|
+
{%- endif %}
|
26
|
+
{%- if site.profile_link %}
|
27
|
+
<div class="Header-item mr-0">
|
28
|
+
<a href="https://github.com/{{ user.login }}" class="Header-link d-flex flex-items-center">
|
29
|
+
<img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
|
30
|
+
src="{{ user_img | relative_url }}">
|
31
|
+
</a>
|
32
|
+
</div>
|
33
|
+
{%- endif %}
|
34
|
+
</div>
|
35
|
+
{%- if site.nav %}
|
36
|
+
<div class="d-flex">
|
37
|
+
<div class="Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm">
|
38
|
+
{%- include nav.html %}
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
{%- endif %}
|
42
|
+
</div>
|
43
|
+
</div>
|
data/_includes/link-card.html
CHANGED
@@ -1,24 +1,34 @@
|
|
1
|
+
{%- comment %}
|
2
|
+
This builds a link card
|
3
|
+
|
4
|
+
## Inputs
|
5
|
+
|
6
|
+
- link
|
7
|
+
- name
|
8
|
+
- url (optional)
|
9
|
+
- thumbnail (optional)
|
10
|
+
- description (optional)
|
11
|
+
|
12
|
+
{%- endcomment %}
|
1
13
|
{%- if link.url %}
|
2
14
|
<a href="{{ link.url | relative_url }}"
|
3
|
-
class="
|
4
|
-
<div class="d-inline-flex flex-items-center">
|
15
|
+
class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
|
5
16
|
<div class="avatar-7">
|
6
17
|
{%- if link.thumbnail %}
|
7
18
|
<img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
|
8
|
-
class="rounded-
|
19
|
+
class="rounded-2 box-shadow-none img-contain float-left pl-1" alt="{{ link.name }}">
|
9
20
|
{%- endif %}
|
10
21
|
</div>
|
11
|
-
<div class="
|
12
|
-
<p class="f3
|
22
|
+
<div class="p-2">
|
23
|
+
<p class="f3 text-center mb-0">{{ link.name }}</p>
|
13
24
|
{%- if link.description %}
|
14
25
|
<p class="f5 text-gray text-center mb-0 mt-1">{{ link.description }}</p>
|
15
26
|
{%- endif %}
|
16
27
|
</div>
|
17
28
|
<div class="avatar-7"></div>
|
18
|
-
</div>
|
19
29
|
</a>
|
20
30
|
{%- else %}
|
21
|
-
<div class="github-component position-relative height-full d-flex flex-column text-center p-1">
|
31
|
+
<div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
|
22
32
|
<div class="d-inline-flex flex-items-center">
|
23
33
|
<div class="avatar-7">
|
24
34
|
{%- if link.thumbnail %}
|
data/_includes/links.html
CHANGED
@@ -1,7 +1,9 @@
|
|
1
|
-
<div class="
|
2
|
-
|
3
|
-
|
1
|
+
<div class="container-md width-full">
|
2
|
+
<div class="d-flex flex-column mb-4">
|
3
|
+
{%- for link in site.links %}
|
4
|
+
<div class="mb-2">
|
4
5
|
{%- include link-card.html %}
|
5
6
|
</div>
|
6
|
-
|
7
|
+
{%- endfor %}
|
8
|
+
</div>
|
7
9
|
</div>
|
data/_includes/masthead.html
CHANGED
@@ -1,45 +1,16 @@
|
|
1
1
|
{%- assign user = site.github.owner %}
|
2
|
-
|
3
2
|
{%- assign name = site.title | default: user.name | default: user.login %}
|
4
3
|
{%- assign user_img = site.user_image | default: user.avatar_url %}
|
5
|
-
|
6
|
-
{%- assign metadata_styles = 'd-flex flex-items-center flex-justify-center mb-3' %}
|
4
|
+
{%- assign user_metadata = page.user_metadata | default: layout.user_metadata | default: site.user_metadata %}
|
7
5
|
<div class="Masthead">
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
class="avatar avatar-user rounded-circle border color-border-default">
|
12
|
-
</div>
|
13
|
-
</a>
|
14
|
-
<h1 class="mb-2 lh-condensed overflow-wrap-word">{{ name }}</h1>
|
15
|
-
<p class="mb-3 f4">
|
16
|
-
{{ user.bio }}
|
17
|
-
</p>
|
18
|
-
|
19
|
-
{%- if include.metadata %}
|
20
|
-
<div class="f4">
|
21
|
-
{%- if user.name %}
|
22
|
-
<div class="{{ metadata_styles }}">
|
23
|
-
{% octicon mark-github height:20 class:"mr-2 v-align-middle" aria-label:GitHub %}
|
24
|
-
<a href="https://github.com/{{ user.login }}">
|
25
|
-
@{{ user.login }}
|
6
|
+
<div class="CircleBadge img-masthead rounded-circle border">
|
7
|
+
<a href="{{ site.baseurl }}/">
|
8
|
+
<img src="{{ user_img | relative_url }}" alt="{{ name }}" class="cover-image">
|
26
9
|
</a>
|
27
10
|
</div>
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
<a href="mailto:{{ user.email }}">
|
33
|
-
{{ user.email }}
|
34
|
-
</a>
|
35
|
-
</div>
|
36
|
-
{%- endif %}
|
37
|
-
{%- if user.location %}
|
38
|
-
<div class="{{ metadata_styles }}">
|
39
|
-
{% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %}
|
40
|
-
{{ user.location }}
|
41
|
-
</div>
|
42
|
-
{%- endif %}
|
43
|
-
</div>
|
11
|
+
|
12
|
+
<h1 class="text-center my-3 lh-condensed overflow-wrap-word">{{ name }}</h1>
|
13
|
+
{%- if user_metadata %}
|
14
|
+
{% include user-metadata.html %}
|
44
15
|
{%- endif %}
|
45
16
|
</div>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
{% assign repo = site.github.public_repositories | where: "full_name", site.repository | first %}
|
2
2
|
<div class="Repo-info">
|
3
|
-
<a href="{{ site.github.repository_url }}" class="{{ include.class }} tooltipped tooltipped-
|
3
|
+
<a href="{{ site.github.repository_url }}" class="{{ include.class }} tooltipped tooltipped-s" aria-label="Go to repository">
|
4
4
|
<div class="d-flex flex-row flex-justify-center Header-item">
|
5
5
|
|
6
6
|
<div class="mr-2">{% octicon git-branch height: 32 %}</div>
|