From d14aa8aa6b3a0892faa291b9b12005e9bedaab08 Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Sat, 19 Apr 2025 22:45:46 -0500
Subject: [PATCH] fixing layout issues in website

---
 static/css/main.css  |  23 +++++++
 templates/index.html | 150 ++++++++++++++++++++++---------------------
 2 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index c3352a3..5505413 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -41,6 +41,7 @@
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -311,6 +312,15 @@
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
+  .mx-10 {
+    margin-inline: calc(var(--spacing) * 10);
+  }
+  .mx-16 {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+  .mx-24 {
+    margin-inline: calc(var(--spacing) * 24);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -462,6 +472,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-full {
     height: 100%;
   }
@@ -477,6 +490,9 @@
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3\/4 {
+    width: calc(3/4 * 100%);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -510,6 +526,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-auto {
     width: auto;
   }
@@ -866,6 +885,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
diff --git a/templates/index.html b/templates/index.html
index c897932..b76e6d5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,81 +1,83 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="flex items-center flex-col mt-16">
-  <h1 class="text-xl text-bold">
-    {{ config.extra.index.title }}
-  </h1>
-  <img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}">
-  <div class="flex flex-wrap space-x-4 mt-7">
-    {% if config.extra.social.codeberg %}
-      <a href="{{config.extra.social.codeberg}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.github %}
-      <a href="{{config.extra.social.github}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.gitlab %}
-      <a href="{{config.extra.social.gitlab}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 50 50" fill="currentColor" stroke="none">
-          <path d="M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 11.933594 8.027344 L 15.824219 20 L 7.445313 20 Z M 38.066406 8.027344 L 42.558594 20 L 34.175781 20 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 18.578125 22 L 31.421875 22 L 25 41.765625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.twitter %}
-      <a href="{{config.extra.social.twitter}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
-          <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.mastodon %}
-      <a href="{{config.extra.social.mastodon}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="-3 -3 20 20" fill="none" stroke="currentColor">
-          <path d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.linkedin %}
-      <a href="{{config.extra.social.linkedin}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
-          <path d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h18c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M10.954,22h-2.95 v-9.492h2.95V22z M9.449,11.151c-0.951,0-1.72-0.771-1.72-1.72c0-0.949,0.77-1.719,1.72-1.719c0.948,0,1.719,0.771,1.719,1.719 C11.168,10.38,10.397,11.151,9.449,11.151z M22.004,22h-2.948v-4.616c0-1.101-0.02-2.517-1.533-2.517 c-1.535,0-1.771,1.199-1.771,2.437V22h-2.948v-9.492h2.83v1.297h0.04c0.394-0.746,1.356-1.533,2.791-1.533 c2.987,0,3.539,1.966,3.539,4.522V22z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.email %}
-      <a href="mailto:{{config.extra.social.email}}" target="_blank">
-        <svg class="h-12 w-12 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
-        </svg>
-      </a>
-    {% endif %}
+<div class="flex flex-col items-center">
+    <div class="flex flex-col mt-16 w-3/4">
+        <h1 class="text-3xl text-bold">
+            {{ config.extra.index.title }} 🎉
+        </h1>
+        <!-- <img class="rounded-full h-40 w-40" src="{{ config.extra.index.image }}" alt="{{ config.extra.index.image_alt }}"> -->
+        <div class="flex flex-wrap space-x-4 mt-7">
+            {% if config.extra.social.codeberg %}
+            <a href="{{config.extra.social.codeberg}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.github %}
+            <a href="{{config.extra.social.github}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.gitlab %}
+            <a href="{{config.extra.social.gitlab}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 50 50" fill="currentColor" stroke="none">
+                    <path d="M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 11.933594 8.027344 L 15.824219 20 L 7.445313 20 Z M 38.066406 8.027344 L 42.558594 20 L 34.175781 20 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 18.578125 22 L 31.421875 22 L 25 41.765625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.twitter %}
+            <a href="{{config.extra.social.twitter}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
+                    <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.mastodon %}
+            <a href="{{config.extra.social.mastodon}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="-3 -3 20 20" fill="none" stroke="currentColor">
+                    <path d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.linkedin %}
+            <a href="{{config.extra.social.linkedin}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
+                    <path d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h18c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M10.954,22h-2.95 v-9.492h2.95V22z M9.449,11.151c-0.951,0-1.72-0.771-1.72-1.72c0-0.949,0.77-1.719,1.72-1.719c0.948,0,1.719,0.771,1.719,1.719 C11.168,10.38,10.397,11.151,9.449,11.151z M22.004,22h-2.948v-4.616c0-1.101-0.02-2.517-1.533-2.517 c-1.535,0-1.771,1.199-1.771,2.437V22h-2.948v-9.492h2.83v1.297h0.04c0.394-0.746,1.356-1.533,2.791-1.533 c2.987,0,3.539,1.966,3.539,4.522V22z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.email %}
+            <a href="mailto:{{config.extra.social.email}}" target="_blank">
+                <svg class="h-12 w-12 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                </svg>
+            </a>
+            {% endif %}
 
-    {% if config.extra.social.stackoverflow %}
-      <a href="{{config.extra.social.stackoverflow}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
-          <path d="M18.69 17.58 9.12 15.6 8.79 17.58l9.57 1.98zm2.53-4.29L13.74 7.13l-1.21 1.54 7.48 6.27zm-1.54 1.98L10.88 11.2l-.77 1.76L18.91 17.14zM17.37 3.94l-1.54 1.21 5.83 7.81 1.54-1.21zm.99 16.06h-9.79v1.98h9.79zm1.98 3.96H6.59V18.02h-1.98v7.81h17.6V18.02h-1.98z"></path>
-        </svg>
-      </a>
-    {% endif %}
-    {% if config.extra.social.telegram %}
-      <a href="{{config.extra.social.telegram}}" target="_blank">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 22 22" fill="none" stroke="currentColor">
-          <path d="M19.35 10.55A8.8 8.8 90 111.75 10.55 8.8 8.8 90 0119.35 10.55ZM10.8657 8.2466C10.0099 8.603 8.2983 9.34 5.7331 10.4576 5.3173 10.6226 5.0984 10.7854 5.0786 10.9438 5.0456 11.2111 5.3811 11.3167 5.8376 11.4608L6.0301 11.5213C6.4789 11.6676 7.0839 11.8381 7.3974 11.8447 7.6834 11.8513 8.0013 11.7347 8.3522 11.4927 10.7491 9.8746 11.9866 9.0573 12.0636 9.0397 12.1186 9.0265 12.1956 9.0111 12.2462 9.0573 12.2979 9.1024 12.2924 9.1893 12.2869 9.2124 12.2539 9.3543 10.9372 10.5775 10.2563 11.2111 10.044 11.4091 9.8933 11.5488 9.8625 11.5807A8.9694 8.9694 90 019.6557 11.7853C9.2377 12.1879 8.9253 12.4893 9.6722 12.9821 10.0319 13.2197 10.3201 13.4144 10.6072 13.6102 10.9196 13.8236 11.232 14.0359 11.6368 14.3021 11.7391 14.3681 11.8381 14.4396 11.9338 14.5078 12.2979 14.7674 12.6268 15.0006 13.0305 14.9632 13.2659 14.9412 13.509 14.7212 13.6322 14.0612 13.9237 12.5025 14.4968 9.1266 14.6288 7.7351A1.5686 1.5686 90 0014.6145 7.3886.3707.3707 90 0014.4891 7.1499.5786.5786 90 0014.1481 7.0476C13.8181 7.0531 13.3088 7.2302 10.8657 8.2466Z"></path>
-        </svg>
-      </a>
-    {% endif %}
-  </div>
-
-          <!-- Content -->
-        <div class="text-bold mt-2 w-2/3 text-center p-4">
-          {{ section.content | safe }}
+            {% if config.extra.social.stackoverflow %}
+            <a href="{{config.extra.social.stackoverflow}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 30 30" fill="none" stroke="currentColor">
+                    <path d="M18.69 17.58 9.12 15.6 8.79 17.58l9.57 1.98zm2.53-4.29L13.74 7.13l-1.21 1.54 7.48 6.27zm-1.54 1.98L10.88 11.2l-.77 1.76L18.91 17.14zM17.37 3.94l-1.54 1.21 5.83 7.81 1.54-1.21zm.99 16.06h-9.79v1.98h9.79zm1.98 3.96H6.59V18.02h-1.98v7.81h17.6V18.02h-1.98z"></path>
+                </svg>
+            </a>
+            {% endif %}
+            {% if config.extra.social.telegram %}
+            <a href="{{config.extra.social.telegram}}" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-black dark:text-white" viewBox="0 0 22 22" fill="none" stroke="currentColor">
+                    <path d="M19.35 10.55A8.8 8.8 90 111.75 10.55 8.8 8.8 90 0119.35 10.55ZM10.8657 8.2466C10.0099 8.603 8.2983 9.34 5.7331 10.4576 5.3173 10.6226 5.0984 10.7854 5.0786 10.9438 5.0456 11.2111 5.3811 11.3167 5.8376 11.4608L6.0301 11.5213C6.4789 11.6676 7.0839 11.8381 7.3974 11.8447 7.6834 11.8513 8.0013 11.7347 8.3522 11.4927 10.7491 9.8746 11.9866 9.0573 12.0636 9.0397 12.1186 9.0265 12.1956 9.0111 12.2462 9.0573 12.2979 9.1024 12.2924 9.1893 12.2869 9.2124 12.2539 9.3543 10.9372 10.5775 10.2563 11.2111 10.044 11.4091 9.8933 11.5488 9.8625 11.5807A8.9694 8.9694 90 019.6557 11.7853C9.2377 12.1879 8.9253 12.4893 9.6722 12.9821 10.0319 13.2197 10.3201 13.4144 10.6072 13.6102 10.9196 13.8236 11.232 14.0359 11.6368 14.3021 11.7391 14.3681 11.8381 14.4396 11.9338 14.5078 12.2979 14.7674 12.6268 15.0006 13.0305 14.9632 13.2659 14.9412 13.509 14.7212 13.6322 14.0612 13.9237 12.5025 14.4968 9.1266 14.6288 7.7351A1.5686 1.5686 90 0014.6145 7.3886.3707.3707 90 0014.4891 7.1499.5786.5786 90 0014.1481 7.0476C13.8181 7.0531 13.3088 7.2302 10.8657 8.2466Z"></path>
+                </svg>
+            </a>
+            {% endif %}
         </div>
+
+        <!-- Content -->
+        <div class="text-bold mt-2">
+            {{ section.content | safe }}
+        </div>
+    </div>
 </div>
 {% endblock content %}