jekyll-theme-profile 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef3c28397bfe7d16a383f40725903daf4c80d615c796d92912b913ed072cf80d
-  data.tar.gz: 9540fd8e91c9d5c8650f66ce02fd8d52e72c691d50778662c33d89cf1e2b2931
+  metadata.gz: d743c9cb83bb0c247244d2f75dfb4a85eae2b34f81998828e0718f3cadb7b06a
+  data.tar.gz: 9709f33198d7d273fc6a554c04b6bf95410e11d8346cff636eb10bb3db866fd5
 SHA512:
-  metadata.gz: 691f10895f2fa78022374e06d1f025ac53bf2518c16227ae4b40d67fb8e8167239a05a31791fd685766f112e11252635cea32354a3af9ae084a4e236ef084197
-  data.tar.gz: 2eec4d50cb3740b3b6ee4c08f4c987c8ca165dce646d658d7ee8a8df42589f45dae15bd3cd26a7e0a91d1a927a14c9c7d0dda97dfdafce2c5a95916128bba7e3
+  metadata.gz: 724a70a53664b30e7746d1b61f11048c6d3c7d6e648d85d0a48daaf3f950af35bc0033641267f7a066a4b2bf3463b3de2752e881d4a2119de422dd7f052503a9
+  data.tar.gz: 921b39cfc1b73b4a1f3f91181e8a228875d9ee01ef2d846f992a2d7008f3a63cea1e6f4f22a99f3f81bbb240f7066a269a3ab74253d43d3f2f89054cee4e55ea

data/README.md

@@ -1,17 +1,17 @@
 ---
-layout: default
+layout: post
 permalink: /
+image: screenshot.png
+description: A customizable jekyll theme built off of the github primer css
+toc: true
 ---
+# jekyll-theme-profile
+
 ![jekyll-theme-profile](screenshot.png)
 
-# jekyll-theme-profile
-{:.no_toc}
 
 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!
 
-1. TOC
-{:toc}
-
 ## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -55,11 +55,11 @@ user_image: /media/user-image.jpg
 #     overlay: rgba(0, 0, 0, 0.5)
 
 # repo_info: true # Show the information for the source of this project
-# metadata: false # Show the metadata associated with the user
+# user_metadata: true # Show the metadata associated with the user
+# profile_link: true # Show a link to the github profile for the user
 
 ####################
 # Social media
-# social_image: /screenshot.png # The social media thumbnail image to use in post links.
 # icon_color: "#959da5" # The color of the social media icons on the site
 # social_media: # Your social media accounts
   # behance: your_username
@@ -90,6 +90,8 @@ user_image: /media/user-image.jpg
 # nav:
 #   - name: Topbar
 #     url: /test/home/topbar.html
+#   - name: Appbar
+#     url: /test/home/appbar.html
 #   - name: Sidebar
 #     url: /test/home/sidebar.html
 #   - name: Stacked
@@ -101,6 +103,8 @@ user_image: /media/user-image.jpg
 #   - name: Example page with topbar
 #     url: /test/page/topbar
 #     thumbnail: /media/icon-topbar.png
+#   - name: Example page with appbar
+#     url: /test/page/appbar
 #   - name: Example page with sidebar
 #     url: /test/page/sidebar
 #     thumbnail: /media/icon-sidebar.png
@@ -250,6 +254,10 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
 
 ![Topbar image](/media/topbar-preview.png)
 
+#### [Appbar](/test/home/appbar.md)
+
+![Appbar image](/media/appbar-preview.png)
+
 #### Background
 
 You can even change the background by adding the following to your `_config.yml` file.
@@ -288,10 +296,6 @@ header:
   accent: "#ffffff"
 ```
 
-#### Custom styles
-
-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.
-
 ### Nav
 
 In the `nav` section, you can add navigation links that will show up on every page of your website.
@@ -357,11 +361,25 @@ repositories:
 You can set the social media image for your site with the setting
 
 ```yaml
-social_image: /screenshot.jpg
+image: /screenshot.jpg
 ```
 
 This works on both yaml frontmatter for a page and in the `_config.yml` file.  Page settings will override site settings.
 
+Set the default for posts through the default settings in the `_config.yml` file.
+
+```yaml
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts"
+    values:
+      layout: "post"
+      permalink: /blog/:year/:month/:day/:title.html
+      image: /assets/img/default.png # The default image used for social and posts.
+      toc: true
+```
+
 #### Adding your socials
 
 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
 ---
 ```
 
+## Custom styles
+
+### Site style
+
+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.
+
+### Page style
+
+You can add css to any page through the `css_style` variable in front matter.
+
+```yaml
+---
+css_style: |
+    .Link-btn {
+        background: rgba(0.1, 0.1, 0.1, 0.4);
+        color: #FFFF;
+    }
+    h1 {
+        color: #FFFF;
+    }
+---
+
+```
+
 ## Contributing
 
 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

@@ -1,3 +1,5 @@
+title: Jekyll Theme Profile
+description: Github Profile built with jekyll-theme-profile
 repository: athackst/jekyll-theme-profile
 # The style of the website
 style: topbar # One of "stacked", "sidebar", "topbar"
@@ -19,11 +21,11 @@ user_image: /media/user-image.jpg
 #   accent: "#ffffff"
 
 repo_info: true # Show the information for the source of this project
-metadata: false # Show the metadata associated with the user
+user_metadata: true # Show the metadata associated with the user
+profile_link: true # Show a link to the github profile for the user
 
 ####################
 # Social media
-social_image: /screenshot.png # The social media thumbnail image to use in post links.
 # icon_color: "#959da5" # The color of the social media icons on the site
 # social_media: # Your social media accounts
 #   behance: your_username
@@ -54,6 +56,8 @@ social_image: /screenshot.png # The social media thumbnail image to use in post
 nav:
   - name: Topbar
     url: /test/home/topbar.html
+  - name: Appbar
+    url: /test/home/appbar.html
   - name: Sidebar
     url: /test/home/sidebar.html
   - name: Stacked
@@ -64,16 +68,25 @@ nav:
 links:
   - name: Example page with topbar
     url: /test/page/topbar
-    thumbnail: /media/icon-topbar.png
+    thumbnail: /media/topbar-icon.png
+  - name: Example page with appbar
+    url: /test/page/appbar
+    thumbnail: /media/appbar-icon.png
   - name: Example page with sidebar
     url: /test/page/sidebar
-    thumbnail: /media/icon-sidebar.png
+    thumbnail: /media/sidebar-icon.png
   - name: Example page with header stacked
     url: /test/page/stacked
-    thumbnail: /media/icon-stacked.png
+    thumbnail: /media/stacked-icon.png
   - name: Example page with a custom background
     url: /test/page/background
     thumbnail: /media/icon-bg.png
+  - name: Example Linktree page
+    url: /test/linktree
+    thumbnail: /media/links.png
+  - name: Example Profile page
+    url: /test/profile
+    thumbnail: /media/user-image.jpg
 
 ###################
 # Repositories to show on home page
@@ -92,10 +105,8 @@ repositories:
 ####################
 # Blog
 posts_limit: 3 # The number of posts to show in home
-
 paginate: 6 # The number of posts to show per page of pagination of blog posts
 paginate_path: "/assets/blog/page:num"
-
 markdown: kramdown
 highlighter: rouge
 # kramdown:
@@ -116,6 +127,7 @@ plugins:
   - jekyll-octicons
   - jekyll-paginate
   - jekyll-seo-tag
+  - jekyll-toc
   - jemoji
 
 defaults:
@@ -124,8 +136,9 @@ defaults:
       type: "posts"
     values:
       layout: "post"
-      breadcrumbs: true
       permalink: /blog/:year/:month/:day/:title.html
+      image: /assets/img/default.png # The default image used for social and posts.
+      toc: true
 
 exclude:
   - "Gemfile"

data/_includes/breadcrumbs.html

@@ -1,4 +1,4 @@
-<div class="d-flex flex-items-center">
+<div class="Breadcrumb d-flex flex-items-center">
     <nav aria-label="Breadcrumb" class="f5">
         <ol class="breadcrumb">
             {%- assign crumbs = page.url | split: '/' %}

data/_includes/footer.html

@@ -1,3 +1,14 @@
 <footer>
-  
+   <div class="footer py-3 color-bg-subtle border-top">
+        <div class="container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center">
+            {%- if site.social_media %}
+            <div class="flex-1">
+                {%- include social.html %}
+            </div>
+            {%- endif %}
+            <div class="flex-0 mx-auto px-4">
+                <div>Made with <a href="https://www.althack.dev/jekyll-theme-profile/">jekyll theme profile</a></div>
+            </div>
+        </div>
+   </div>
 </footer>

data/_includes/head.html

@@ -0,0 +1,51 @@
+{%- assign bg_image = page.background_image | default: site.background.image | default: null %}
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- HTML Meta Tags -->
+  <title>{{ page_title }}</title>
+
+  {% seo %}
+
+  <link href="{{ '/assets/css/theme.css' | relative_url }}" rel="stylesheet" type="text/css">
+  <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
+  <link rel="icon" type="image/x-icon" href="{{ '/assets/img/favicon.ico' | relative_url}}">
+
+
+  {%- if site.analytics.provider == 'google' %}
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.property }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', '{{ site.analytics.property }}');
+  </script>
+  {%- endif %}
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/anchor-links.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/timeline.js' | relative_url }}"></script>
+
+  {%- if bg_image %}
+  <style>
+    body {
+      position: relative;
+      background-image: url('{{ bg_image | relative_url }}');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+      z-index: -10;
+    }
+  </style>
+  {%- endif %}
+  {%- if page.css_style %}
+  <style>
+    {{ page.css_style }}
+  </style>
+  {%- endif %}
+</head>

data/_includes/header-appbar.html

@@ -0,0 +1,49 @@
+<script>
+    $(document).ready(function () {
+        $('#expansion-btn').click(function () {
+            $('.Extend').toggleClass('d-none');
+        });
+        $('#collapse-btn').click(function() {
+            $('.Extend').addClass('d-none');
+        })
+    });
+</script>
+<header class="AppHeader position-sticky top-0 z-2 border-bottom topbar">
+    <div class="AppHeader-item d-flex flex-justify-between p-2 flex-items-center">
+        <div class="d-flex">
+            <button id="expansion-btn" class="AppHeader-button d-sm-none" type="button">{% octicon three-bars height:16 %}</button>
+        </div>
+        <div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
+            <a href="{{ site.baseurl }}/" class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                {% octicon mark-github height:32 %}
+                <span class="h4 text-semibold mx-3">{{ name }}</span>
+            </a>
+        </div>
+        <div class="AppHeader-item d-flex flex-items-center">
+            {% include toggle.html %}
+            {%- if site.repo_info %}
+            <div class="AppHeader-item hide-sm">
+                {% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
+            </div>
+            {% endif %}
+            {%- if site.profile_link %}
+            <div class="AppHeader-item mr-0">
+                <a href="https://github.com/{{ user.login }}" class="AppHeader-link d-flex flex-items-center">
+                    <img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
+                src="{{ user_img | relative_url }}">
+                </a>
+            </div>
+            {%- endif %}
+        </div>
+    </div>
+    {%- if site.nav %}
+    <div class="d-flex flex-items-center mt-2">
+        <div class="AppHeader-item width-full hide-sm">
+            {%- include navbar-underline.html %}
+        </div>
+        <div class="Extend Overlay-header d-none">
+            {%- include nav-overlay.html %}
+        </div>
+    </div>
+    {%- endif %}
+</header>

data/_includes/header-sidebar.html

@@ -0,0 +1,66 @@
+<script>
+    $(document).ready(function () {
+        $('#expansion-btn').click(function () {
+            $('.Extend').toggleClass('d-none');
+        });
+        $('#collapse-btn').click(function () {
+            $('.Extend').addClass('d-none');
+        })
+        $('#toolbar-btn').click(function () {
+            $('.Sidebar').toggleClass('d-lg-block');
+            $('.Toolbar-expand').toggleClass('d-lg-block');
+            $('.Toolbar-collapse').toggleClass('d-lg-block');
+            $('.Toolbar').toggleClass('flex-lg-column');
+        })
+        $('#sidebar-btn').click(function () {
+            $('.Sidebar').toggleClass('d-lg-block');
+            $('.Toolbar-expand').toggleClass('d-lg-block');
+            $('.Toolbar-collapse').toggleClass('d-lg-block');
+            $('.Toolbar').toggleClass('flex-lg-column');
+
+        })
+    });
+</script>
+<div class="Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky top-0">
+    <div class="flex-column flex-1 position-sticky top-0" >
+        <div class="Toolbar topbar d-flex flex-row py-3 flex-lg-justify-end flex-justify-start">
+            <div class="Toolbar-expand d-flex flex-justify-center d-none">
+                <button id="sidebar-btn" class="btn-octicon mr-2">{% octicon chevron-right height:16 %}</button>
+            </div>
+            <div class="d-flex flex-justify-center">
+                <button id="expansion-btn" class="btn-octicon mr-2 d-lg-none">{% octicon three-bars height:16 %}</button>
+            </div>
+            <div class="d-flex flex-justify-center">
+                {% include toggle.html %}
+            </div>
+            <div class="Toolbar-collapse d-flex flex-justify-center d-none d-lg-block">
+                <button id="toolbar-btn" class="btn-octicon mr-2">{% octicon chevron-left height:16 %}</button>
+            </div>
+        </div>
+        <div class="Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide">
+            <div class="text-center">
+                <div class="px-5 py-2">
+                    {%- include masthead.html %}
+                </div>
+                {%- if site.repo_info %}
+                <div class="py-2">
+                    {% include mini-repo-info-card.html class="Header-link no-underline" %}
+                </div>
+                {%- endif %}
+                {%- if site.nav %}
+                <div class="d-flex flex-column">
+                    {%- include nav.html %}
+                </div>
+                {%- endif %}
+                {%- if site.social_media %}
+                <div class="py-2 px-2">
+                    {%- include social.html %}
+                </div>
+                {%- endif %}
+            </div>
+        </div>
+        <div class="Extend d-none">
+            {%- include nav-overlay.html %}
+        </div>
+    </div>
+</div>

data/_includes/header-stacked.html

@@ -0,0 +1,41 @@
+<script>
+    $(document).ready(function () {
+        $('#expansion-btn').click(function () {
+            $('.Extend').toggleClass('d-none');
+        });
+        $('#collapse-btn').click(function () {
+            $('.Extend').addClass('d-none');
+        })
+    });
+</script>
+<div class="Profile text-center">
+    {%- include masthead.html %}
+    {%- if site.repo_info %}
+    <div class="py-2">
+        {% include mini-repo-info-card.html class="AppHeader-link no-underline" %}
+    </div>
+    {%- endif %}
+    {%- if site.social_media %}
+    <div class="py-2 px-2">
+        {%- include social.html %}
+    </div>
+    {%- endif %}
+</div>
+{%- if site.nav %}
+<div class="Header d-flex z-2 position-sticky top-0 topbar">
+    <div class="Header-item flex-row flex-justify-center flex-1 hide-sm">
+        {% include nav.html %}
+    </div>
+    <div class="d-flex flex-1 flex-sm-grow-0 flex-justify-start">
+        <div class="d-flex">
+            <button id="expansion-btn" class="btn-octicon mr-2 d-sm-none">{% octicon three-bars height:16 %}</button>
+        </div>
+        <div class="d-flex">
+            {% include toggle.html %}
+        </div>
+    </div>
+</div>
+<div class="Extend d-none">
+    {% include nav-overlay.html %}
+</div>
+{%- endif %}

data/_includes/header-topbar.html

@@ -0,0 +1,43 @@
+<script>
+    $(document).ready(function () {
+        $('#expansion-btn').click(function () {
+            $('.Extend').toggleClass('hide-sm');
+        });
+    });
+</script>
+<div class="Header position-sticky top-0 topbar">
+    <div class="flex-1">
+        <div class="d-flex">
+            <div class="Header-item">
+                <button id="expansion-btn" class="btn-octicon mr-2 d-sm-none">{% octicon three-bars height:16 %}</button>
+                <a href="{{ site.baseurl }}/" class="Header-link f4 d-flex flex-items-center">
+                    {% octicon mark-github height:32 %}
+                </a>
+            </div>
+            <a href="{{ site.baseurl }}/" class="Header-item Header-link Header-item--full">{{ name }}</a>
+            <div class="Header-item">
+            {% include toggle.html %}
+            </div>
+            {%- if site.repo_info %}
+            <div class="Header-item hide-sm">
+                {% include mini-repo-info-card.html class="Header-link" %}
+            </div>
+            {%- endif %}
+            {%- if site.profile_link %}
+            <div class="Header-item mr-0">
+                <a href="https://github.com/{{ user.login }}" class="Header-link d-flex flex-items-center">
+                    <img class="avatar img-cover circle" height="32" width="32" alt="{{ name }}"
+                        src="{{ user_img | relative_url }}">
+                </a>
+            </div>
+            {%- endif %}
+        </div>
+        {%- if site.nav %}
+        <div class="d-flex">
+            <div class="Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm">
+                {%- include nav.html %}
+            </div>
+        </div>
+        {%- endif %}
+    </div>
+</div>

data/_includes/link-card.html

@@ -1,24 +1,34 @@
+{%- comment %}
+This builds a link card
+
+## Inputs
+
+- link
+    - name
+    - url (optional)
+    - thumbnail (optional)
+    - description (optional)
+
+{%- endcomment %}
 {%- if link.url %}
 <a href="{{ link.url | relative_url }}"
-  class="github-component position-relative hover-grow no-underline d-flex flex-column text-center border border-gray-light rounded-1 p-1">
-  <div class="d-inline-flex flex-items-center">
+  class="Link Link-btn d-flex flex-justify-between flex-items-center hover-grow no-underline border rounded-3 p-2">
     <div class="avatar-7">
       {%- if link.thumbnail %}
       <img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
-        class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
+        class="rounded-2 box-shadow-none img-contain float-left pl-1" alt="{{ link.name }}">
       {%- endif %}
     </div>
-    <div class="flex-auto p-2">
-      <p class="f3 lh-condensed text-center link-gray-dark mb-0">{{ link.name }}</p>
+    <div class="p-2">
+      <p class="f3 text-center mb-0">{{ link.name }}</p>
       {%- if link.description %}
       <p class="f5 text-gray text-center mb-0 mt-1">{{ link.description }}</p>
       {%- endif %}
     </div>
     <div class="avatar-7"></div>
-  </div>
 </a>
 {%- else %}
-<div class="github-component position-relative height-full d-flex flex-column text-center p-1">
+<div class="Link-text github-component position-relative height-full d-flex flex-column text-center p-1">
   <div class="d-inline-flex flex-items-center">
     <div class="avatar-7">
       {%- if link.thumbnail %}

data/_includes/links.html

@@ -1,7 +1,9 @@
-<div class="d-flex flex-wrap gutter-condensed mb-4">
-  {%- for link in site.links %}
-    <div class="col-12 mb-3">
+<div class="container-md width-full">
+  <div class="d-flex flex-column mb-4">
+    {%- for link in site.links %}
+    <div class="mb-2">
       {%- include link-card.html %}
     </div>
-  {%- endfor %}
+    {%- endfor %}
+  </div>
 </div>

data/_includes/masthead.html

@@ -1,45 +1,16 @@
 {%- assign user = site.github.owner %}
-
 {%- assign name = site.title | default: user.name | default: user.login %}
 {%- assign user_img = site.user_image | default: user.avatar_url %}
-
-{%- assign metadata_styles = 'd-flex flex-items-center flex-justify-center mb-3' %}
+{%- assign user_metadata = page.user_metadata | default: layout.user_metadata | default: site.user_metadata %}
 <div class="Masthead">
-  <a href="{{ site.baseurl }}/">
-    <div class="img-masthead">
-      <img src="{{ user_img | relative_url }}" alt="{{ name }}"
-        class="avatar avatar-user rounded-circle border color-border-default">
-    </div>
-  </a>
-  <h1 class="mb-2 lh-condensed overflow-wrap-word">{{ name }}</h1>
-  <p class="mb-3 f4">
-    {{ user.bio }}
-  </p>
-
-  {%- if include.metadata %}
-  <div class="f4">
-    {%- if user.name %}
-    <div class="{{ metadata_styles }}">
-      {% octicon mark-github height:20 class:"mr-2 v-align-middle" aria-label:GitHub %}
-      <a href="https://github.com/{{ user.login }}">
-        @{{ user.login }}
+    <div class="CircleBadge img-masthead rounded-circle border">
+      <a href="{{ site.baseurl }}/">
+        <img src="{{ user_img | relative_url }}" alt="{{ name }}" class="cover-image">
       </a>
     </div>
-    {%- endif %}
-    {%- if user.email %}
-    <div class="{{ metadata_styles }}">
-      {% octicon mail height:20 class:"mr-2 v-align-middle" aria-label:email %}
-      <a href="mailto:{{ user.email }}">
-        {{ user.email }}
-      </a>
-    </div>
-    {%- endif %}
-    {%- if user.location %}
-    <div class="{{ metadata_styles }}">
-      {% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %}
-      {{ user.location }}
-    </div>
-    {%- endif %}
-  </div>
+
+  <h1 class="text-center my-3 lh-condensed overflow-wrap-word">{{ name }}</h1>
+  {%- if user_metadata %}
+  {% include user-metadata.html %}
   {%- endif %}
 </div>

data/_includes/mini-repo-info-card.html

@@ -1,6 +1,6 @@
 {% assign repo = site.github.public_repositories | where: "full_name", site.repository | first %}
 <div class="Repo-info">
-    <a href="{{ site.github.repository_url }}" class="{{ include.class }} tooltipped tooltipped-se" aria-label="Go to repository">
+    <a href="{{ site.github.repository_url }}" class="{{ include.class }} tooltipped tooltipped-s" aria-label="Go to repository">
         <div class="d-flex flex-row flex-justify-center Header-item">
 
             <div class="mr-2">{% octicon git-branch height: 32 %}</div>