From 4f29c8a97dfb3af19bf78f67171076699551fdaa Mon Sep 17 00:00:00 2001 From: haemka Date: Thu, 13 Aug 2026 16:44:14 +0000 Subject: [PATCH] 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. --- static/css/site.css | 31 ++++++++++++++++++++++++++++ templates/base.html | 1 + templates/icons/bluesky.svg | 1 + templates/icons/github.svg | 1 + templates/icons/linkedin.svg | 1 + templates/icons/mastodon.svg | 1 + templates/icons/matrix.svg | 1 + templates/icons/orcid.svg | 1 + templates/includes/social_links.html | 7 +++++++ templates/page.html | 4 ++++ 10 files changed, 49 insertions(+) create mode 100644 templates/icons/bluesky.svg create mode 100644 templates/icons/github.svg create mode 100644 templates/icons/linkedin.svg create mode 100644 templates/icons/mastodon.svg create mode 100644 templates/icons/matrix.svg create mode 100644 templates/icons/orcid.svg create mode 100644 templates/includes/social_links.html diff --git a/static/css/site.css b/static/css/site.css index 5de9564..95b3c76 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -386,6 +386,37 @@ ul.menuitems { content: "Translations: "; } +.social-links { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style: none; + margin: 3rem 0 0 0; +} + +.social-links li { + margin: 0; +} + +.social-links a { + display: flex; + align-items: center; + justify-content: center; + color: var(--main-link-color); + opacity: 0.85; + transition: opacity 0.15s ease; +} + +.social-links a:hover, +.social-links a:focus-visible { + opacity: 1; +} + +.social-links svg { + width: 1.25rem; + height: 1.25rem; +} + .menuitems { list-style: none; diff --git a/templates/base.html b/templates/base.html index da0e4e5..ca90cee 100644 --- a/templates/base.html +++ b/templates/base.html @@ -113,6 +113,7 @@ {% endif %} {% endif %} + {% include "includes/social_links.html" %}
{% block content %} diff --git a/templates/icons/bluesky.svg b/templates/icons/bluesky.svg new file mode 100644 index 0000000..d4fdb82 --- /dev/null +++ b/templates/icons/bluesky.svg @@ -0,0 +1 @@ + diff --git a/templates/icons/github.svg b/templates/icons/github.svg new file mode 100644 index 0000000..273285f --- /dev/null +++ b/templates/icons/github.svg @@ -0,0 +1 @@ + diff --git a/templates/icons/linkedin.svg b/templates/icons/linkedin.svg new file mode 100644 index 0000000..647d3b0 --- /dev/null +++ b/templates/icons/linkedin.svg @@ -0,0 +1 @@ + diff --git a/templates/icons/mastodon.svg b/templates/icons/mastodon.svg new file mode 100644 index 0000000..e94a97f --- /dev/null +++ b/templates/icons/mastodon.svg @@ -0,0 +1 @@ + diff --git a/templates/icons/matrix.svg b/templates/icons/matrix.svg new file mode 100644 index 0000000..cab917e --- /dev/null +++ b/templates/icons/matrix.svg @@ -0,0 +1 @@ + diff --git a/templates/icons/orcid.svg b/templates/icons/orcid.svg new file mode 100644 index 0000000..a791b19 --- /dev/null +++ b/templates/icons/orcid.svg @@ -0,0 +1 @@ + diff --git a/templates/includes/social_links.html b/templates/includes/social_links.html new file mode 100644 index 0000000..b2e038b --- /dev/null +++ b/templates/includes/social_links.html @@ -0,0 +1,7 @@ +{% if SOCIAL %} + +{% endif %} diff --git a/templates/page.html b/templates/page.html index 7150d42..66cd2e9 100644 --- a/templates/page.html +++ b/templates/page.html @@ -19,6 +19,10 @@ {{ page.content }} + {% if page.slug == 'about-me' %} + {% include "includes/social_links.html" %} + {% endif %} + {% if page.modified %}

Last updated: {{ page.locale_modified }}