Add social link icons to sidebar and About-me page

Small monochrome icon row (GitHub, LinkedIn, ORCID, Mastodon, Bluesky,
Matrix) rendered from a SOCIAL config tuple via a shared Jinja
partial (templates/includes/social_links.html), included unconditionally
in the sidebar below the tag cloud and again on the About-me page only.
Icons are inline SVGs (templates/icons/*.svg) using fill=currentColor,
so they track the existing accent-color/dark-mode toggle for free via
--main-link-color, no JS needed.
This commit is contained in:
2026-08-13 16:44:14 +00:00
parent e1e962926e
commit c2f4f4ca9f
10 changed files with 49 additions and 0 deletions
+1
View File
@@ -113,6 +113,7 @@
</ul>
{% endif %}
{% endif %}
{% include "includes/social_links.html" %}
</nav><!-- /#menu -->
<main id="content">
{% block content %}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.912 0 3.283 0 4.088c0 .805.444 6.578.734 7.552.96 3.213 4.373 4.303 7.53 3.95-4.579.664-8.639 2.284-3.307 8.598 6.03 6.828 8.269-1.463 9.438-5.594 1.17 4.13 2.65 12.185 9.339 5.594 5.05-5.594 1.32-7.934-3.259-8.598 3.157.353 6.57-.737 7.53-3.95.29-.974.734-6.746.734-7.552 0-.805-.14-2.176-.902-2.523-.66-.3-1.664-.622-4.301 1.24C16.046 4.747 13.087 8.686 12 10.8z"/></svg>

After

Width:  |  Height:  |  Size: 595 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.469-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23a11.5 11.5 0 0 1 3-.405c1.02.005 2.047.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

After

Width:  |  Height:  |  Size: 859 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

After

Width:  |  Height:  |  Size: 645 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.055c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.36V9.647c0-1.014-.427-1.53-1.29-1.53-.95 0-1.425.615-1.425 1.83v2.652h-2.346V9.947c0-1.215-.475-1.83-1.425-1.83-.863 0-1.29.516-1.29 1.53v4.861h-2.36V9.463c0-1.013.258-1.818.775-2.415.532-.598 1.23-.904 2.09-.904.994 0 1.746.383 2.246 1.146l.484.812.484-.812c.5-.763 1.252-1.146 2.246-1.146.86 0 1.558.306 2.09.904.518.597.775 1.402.775 2.415v5.045z"/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.145h-2.349V11.05c0-.286-.01-.559-.033-.812a1.755 1.755 0 0 0-.164-.66.983.983 0 0 0-.383-.44c-.169-.11-.397-.163-.688-.163-.291 0-.53.056-.712.173a1.23 1.23 0 0 0-.424.448 1.821 1.821 0 0 0-.202.634 5.342 5.342 0 0 0-.052.732v4.705h-2.35v-4.66c0-.253-.005-.503-.018-.751a2.055 2.055 0 0 0-.135-.696.988.988 0 0 0-.363-.494c-.169-.125-.416-.187-.74-.187-.093 0-.216.02-.365.06-.15.041-.298.117-.443.229a1.32 1.32 0 0 0-.374.501c-.104.222-.156.51-.156.865v4.133H6.32V7.81zM23.368.55H21.72V0H24v24h-2.28v-.55h1.648z"/></svg>

After

Width:  |  Height:  |  Size: 976 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947 0 .525-.422.947-.947.947-.525 0-.946-.422-.946-.947 0-.516.421-.947.946-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.022-2.484 4.022-3.722 0-2.016-1.284-3.722-4.097-3.722h-2.222z"/></svg>

After

Width:  |  Height:  |  Size: 556 B

+7
View File
@@ -0,0 +1,7 @@
{% if SOCIAL %}
<ul class="social-links">
{% for name, url, icon in SOCIAL %}
<li><a href="{{ url }}" rel="me" aria-label="{{ name }}" title="{{ name }}">{% include "icons/" ~ icon ~ ".svg" %}</a></li>
{% endfor %}
</ul>
{% endif %}
+4
View File
@@ -19,6 +19,10 @@
{{ page.content }}
{% if page.slug == 'about-me' %}
{% include "includes/social_links.html" %}
{% endif %}
{% if page.modified %}
<p>
Last updated: {{ page.locale_modified }}