From f132b754a543c59079a661883e446ae5b943f678 Mon Sep 17 00:00:00 2001
From: Emile Clark-Boman <eclarkboman@gmail.com>
Date: Wed, 4 Feb 2026 01:23:13 +1000
Subject: [PATCH] add socials

---
 www/css/style.css                 | 21 +++++++++-
 www/css/themes/maps/rose-pine.css |  3 ++
 www/index.html                    | 68 ++++++++++++++++++++++++++++++-
 3 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 0c5a154..412e7f9 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -8,7 +8,7 @@ main {
 }
 
 #bg-canvas {
-  display:block;
+  display: block;
   position: fixed;
   
   inset: 0;
@@ -44,3 +44,22 @@ main {
   font-family: monospace;
   font-size: 1.5em
 }
+
+socials-list {
+  display: flex;
+  flex-direction: column;
+
+  /* justify-content: start; */
+  align-content: centerr;
+  align-items: start;
+
+  gap: 1ch;
+}
+
+socials-item {
+  
+}
+
+.icon-social {
+  height: 2ch;
+}
diff --git a/www/css/themes/maps/rose-pine.css b/www/css/themes/maps/rose-pine.css
index a4497d9..4beaaea 100644
--- a/www/css/themes/maps/rose-pine.css
+++ b/www/css/themes/maps/rose-pine.css
@@ -22,6 +22,9 @@ Variables:
     --theme-bg: var(--palette-rose-pine-base);
     --theme-text: var(--palette-rose-pine-text);
 
+    --theme-icon: var(--palette-rose-pine-pine);
+    --theme-icon-off: var(--palette-rose-pine-foam);
+
     --theme-tty-border: var(--palette-rose-pine-rose);
     --theme-tty-prompt: var(--palette-rose-pine-foam);
     --theme-tty-command: var(--palette-rose-pine-iris);
diff --git a/www/index.html b/www/index.html
index 55f1c87..2dd7517 100644
--- a/www/index.html
+++ b/www/index.html
@@ -73,7 +73,73 @@
       <div class="centered-container">
         <div class="centered cryframe" style="display: flex; flex-direction: row; gap: 20px;">
           <img src="baked/avatar.png" loading="eager" height="150">
-          <p>hi!! i'm cry (they/them)</p>
+
+          <div>
+            <p>hi!! i'm cry (they/them)</p>
+
+            <div class="socials-list">
+              <!-- <div class="socials-item"> -->
+                <!-- REF: https://dashboardicons.com/icons/forgejo -->
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="38.5 0.5 135 211" class="icon-social"> -->
+                  <!-- <style> -->
+                    <!-- .stroke { -->
+                      <!-- fill: none; -->
+                      <!-- stroke: var(--theme-icon); -->
+                      <!-- stroke-width: 15; -->
+                    <!-- } -->
+                    <!-- .stroke-off { -->
+                      <!-- fill: none; -->
+                      <!-- stroke: var(--theme-icon-off); -->
+                      <!-- stroke-width: 15; -->
+                    <!-- } -->
+                  <!-- </style> -->
+                  <!-- <g transform="translate(6 6)"> -->
+                    <!-- <path class="stroke-off" style="stroke-width: 25" d="M58 168V70c0-27.6 22.4-50 50-50h20"/> -->
+                    <!-- <path class="stroke" style="stroke-width: 25" d="M58 168v-30c0-27.6 22.4-50 50-50h20"/> -->
+                    <!-- <circle class="stroke-off" cx="142" cy="20" r="18"/> -->
+                    <!-- <circle class="stroke" cx="142" cy="88" r="18"/> -->
+                    <!-- <circle class="stroke" cx="58" cy="180" r="18"/> -->
+                  <!-- </g> -->
+                <!-- </svg> -->
+              <!-- </div> -->
+
+              <div class="socials-item">
+                <!-- REF: https://dashboardicons.com/icons/bluesky -->
+                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 30.56 512 450.84" class="icon-social">
+                  <path style="fill: var(--theme-icon)" d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9"/>
+                </svg>
+                
+                <span>
+                  Bluesky <a href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry.bsky.social</a>
+                </span>
+              </div>
+
+              <div class="socials-item">
+                <!-- REF: https://dashboardicons.com/icons/discord -->
+                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0.02 57.8 511.92 396.3" class="icon-social">
+                  <path style="fill: var(--theme-icon)" d="M433.7 91a416.5 416.5 0 0 0-105.6-33.2c-4.6 8.2-9.9 19.3-13.5 28.1-39.4-5.9-78.4-5.9-117.1 0-3.7-8.8-9.1-19.9-13.7-28.1-37.1 6.4-72.6 17.7-105.7 33.3-66.8 101-85 199.5-75.9 296.6 44.3 33.1 87.3 53.2 129.6 66.4 10.4-14.4 19.7-29.6 27.7-45.7-15.3-5.8-29.9-13-43.7-21.3 3.7-2.7 7.2-5.6 10.7-8.5 84.2 39.4 175.8 39.4 259 0 3.5 2.9 7.1 5.8 10.7 8.5-13.9 8.3-28.5 15.5-43.8 21.3 8 16 17.3 31.3 27.7 45.7 42.3-13.2 85.3-33.3 129.6-66.4 10.8-112.5-18-210.1-76-296.7M170.9 328c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c.1 28.8-20.2 52.4-46 52.4m170.2 0c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c0 28.8-20.3 52.4-46 52.4"/>
+                </svg>
+
+                <span>
+                  Discord <a href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a>
+                </span>
+              </div>
+
+
+              <div class="socials-item">
+                <!-- REF: https://dashboardicons.com/icons/github -->
+                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512" class="icon-social">
+                  <path style="fill-rule: evenodd; clip-rule: evenodd; fill: var(--theme-icon)" d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"/>
+                </svg>
+                
+                <span>
+                  Github <a href="https://github.com/emilelcb" rel="author">@emilelcb</a>
+                </span>
+              </div>
+            </div>
+            
+          </div>
+          
         </div>
       </div>
     </main>