From 36dde64b611f7bd3112038fd868c2a3c300eeb7a Mon Sep 17 00:00:00 2001
From: Emile Clark-Boman <eclarkboman@gmail.com>
Date: Wed, 4 Feb 2026 01:53:04 +1000
Subject: [PATCH] format socials as list (im still learning...)

---
 www/css/style.css                 | 49 +++++++++++++----
 www/css/themes/maps/rose-pine.css |  1 +
 www/index.html                    | 91 +++++++++++--------------------
 3 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 412e7f9..67aec8a 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -45,21 +45,46 @@ main {
   font-size: 1.5em
 }
 
-socials-list {
+.socials-list {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: 1ch; */
+  /* align-content: centerr; */
+  /* align-items: start; */
+
+  list-style: none;
+  width: 45ch;
+}
+
+.socials-item {
   display: flex;
-  flex-direction: column;
-
-  /* justify-content: start; */
-  align-content: centerr;
-  align-items: start;
-
-  gap: 1ch;
-}
-
-socials-item {
   
+  align-items: start;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--theme-icon-off);
 }
 
-.icon-social {
+.socials-icon {
+  width: 2ch;
   height: 2ch;
+  object-fit: contain;
+  flex: 0 0 40px; /* fixed column */
+}
+
+.socials-name {
+  flex: 1 1 140px;
+  text-align: left;
+  min-width: 0; /* important to allow truncation if needed */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.socials-link {
+  flex: 0 0 auto; /* fixed link column width; adjust as needed */
+  text-align: left;
+  color: var(--theme-link);
+  text-decoration: none;
+  white-space: nowrap;
 }
diff --git a/www/css/themes/maps/rose-pine.css b/www/css/themes/maps/rose-pine.css
index 4beaaea..a9fd520 100644
--- a/www/css/themes/maps/rose-pine.css
+++ b/www/css/themes/maps/rose-pine.css
@@ -21,6 +21,7 @@ Variables:
     --theme-base: var(--palette-rose-pine-base);
     --theme-bg: var(--palette-rose-pine-base);
     --theme-text: var(--palette-rose-pine-text);
+    --theme-link: var(--palette-rose-pine-foam);
 
     --theme-icon: var(--palette-rose-pine-pine);
     --theme-icon-off: var(--palette-rose-pine-foam);
diff --git a/www/index.html b/www/index.html
index 2dd7517..9fcd45d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -19,6 +19,13 @@
     <!-- ShadeMyCanvas (background) -->
     <canvas id="bg-canvas"></canvas>
 
+    <!-- Vibey Background Music -->
+    <audio autoplay>
+      <!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
+      <source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
+      Your browser does not support the audio element.
+    </audio>
+
     <!-- Psuedo-Pseudo-Terminal -->
     <div class="centered-container">
       <div class="ppty centered cryframe" id="boot-ppty">
@@ -64,82 +71,48 @@
     </div>
 
     <main>
-      <audio autoplay>
-        <!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
-        <source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
-        Your browser does not support the audio element.
-      </audio>
-    
       <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">
+        <div class="centered cryframe"> <!-- style="display: flex; flex-direction: row; gap: 20px;"> -->
+          <div style="display: flex; flex-direction: row; align-items: start; justify-items: end;">
 
-          <div>
-            <p>hi!! i'm cry (they/them)</p>
+            <img src="baked/avatar.png" loading="eager" height="150">
 
-            <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">
+            <ul class="socials-list">
+              <li 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">
+                <svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 30.56 512 450.84">
                   <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-name">Bluesky</div>
+                <a class="socials-link" href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry.bsky.social</a>
+              </li>
 
-              <div class="socials-item">
+              <li 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">
+                <svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0.02 57.8 511.92 396.3">
                   <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-name">Discord</div>
+                <a class="socials-link" href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a>
+              </li>
 
 
-              <div class="socials-item">
+              <li 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">
+                <svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
                   <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 class="socials-name">Github</div>
+                <a class="socials-link" href="https://github.com/emilelcb" rel="author">@emilelcb</a>
+              </li>
+            </ul>
           </div>
-          
+
+          <p>hi!! i'm cry (they/them) <3</p>
+
         </div>
       </div>
     </main>