From a2cde124082eac62fad5535a3a89513f8be1f46e Mon Sep 17 00:00:00 2001
From: haemka <git@haemka.in>
Date: Thu, 13 Aug 2026 16:54:53 +0000
Subject: [PATCH] Refine social link icon spacing/sizing per feedback

Sidebar: double the standard 3rem section gap above the icon row
(6rem), horizontally centered instead of left-aligned.
About-me page: new .social-links--large variant via a
social_links_variant template var - icons at 5rem (was 1.25rem),
centered, 3rem gap from the preceding text (standard section gap,
distinct from the normal 1rem paragraph gap), wider inter-icon gap
to match the larger size.
---
 static/css/site.css                  | 16 +++++++++++++++-
 templates/includes/social_links.html |  2 +-
 templates/page.html                  |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/static/css/site.css b/static/css/site.css
index 95b3c76..bc598de 100644
--- a/static/css/site.css
+++ b/static/css/site.css
@@ -389,9 +389,12 @@ ul.menuitems {
 .social-links {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: 0.75rem;
   list-style: none;
-  margin: 3rem 0 0 0;
+  /* At least double the standard 3rem inter-section gap (e.g. the gap
+     above "Tags:") to set the icon row apart from the sidebar nav. */
+  margin: 6rem 0 0 0;
 }
 
 .social-links li {
@@ -417,6 +420,17 @@ ul.menuitems {
   height: 1.25rem;
 }
 
+/* About-me page variant: bigger icons, distinct gap from the text above. */
+.social-links--large {
+  margin-top: 3rem;
+  gap: 1.5rem;
+}
+
+.social-links--large svg {
+  width: 5rem;
+  height: 5rem;
+}
+
 
 .menuitems {
   list-style: none;
diff --git a/templates/includes/social_links.html b/templates/includes/social_links.html
index b2e038b..abe73c5 100644
--- a/templates/includes/social_links.html
+++ b/templates/includes/social_links.html
@@ -1,5 +1,5 @@
 {% if SOCIAL %}
-<ul class="social-links">
+<ul class="social-links{% if social_links_variant %} social-links--{{ social_links_variant }}{% endif %}">
   {% for name, url, icon in SOCIAL %}
   <li><a href="{{ url }}" rel="me" aria-label="{{ name }}" title="{{ name }}">{% include "icons/" ~ icon ~ ".svg" %}</a></li>
   {% endfor %}
diff --git a/templates/page.html b/templates/page.html
index 66cd2e9..a525e49 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -20,6 +20,7 @@
     {{ page.content }}
 
     {% if page.slug == 'about-me' %}
+    {% set social_links_variant = 'large' %}
     {% include "includes/social_links.html" %}
     {% endif %}