From e351cda99f5dbd0cd4c05f060a8a2b3f4e8fd595 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Sat, 18 Apr 2026 15:23:31 +0200
Subject: style: redesign social share widget with terminal-native aesthetic

Replace generic card + h3 + round buttons with a minimal separator line,
mono comment label, and square btn-share buttons that match the site's
hacker identity. Icons scaled to 22px inside 50x50px touch targets.
Hover/focus states use the site's accent glow pattern.
---
 themes/danix-xyz-hacker/assets/css/main.css | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

(limited to 'themes/danix-xyz-hacker/assets/css/main.css')

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 0fac3be..4386b1d 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -296,6 +296,64 @@ html.theme-light {
     height: 50px !important;
   }
 
+  /* Social share widget */
+  .share-widget {
+    padding-top: 0.75rem;
+    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+  }
+
+  .share-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    letter-spacing: 0.08em;
+    margin-bottom: 0.5rem;
+    opacity: 0.7;
+  }
+
+  .btn-share {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    background: color-mix(in srgb, var(--surface) 50%, transparent);
+    color: var(--text-dim);
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+    text-decoration: none;
+  }
+
+  .btn-share svg,
+  .btn-share i,
+  .btn-share [data-feather] {
+    width: 22px !important;
+    height: 22px !important;
+    flex-shrink: 0;
+  }
+
+  .btn-share:hover {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+    box-shadow: 0 0 10px var(--accent-glow);
+  }
+
+  .btn-share:focus-visible {
+    outline: none;
+    color: var(--accent);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
+  }
+
+  .btn-share--copied {
+    color: var(--accent2);
+    border-color: color-mix(in srgb, var(--accent2) 50%, transparent);
+    background: color-mix(in srgb, var(--accent2) 6%, var(--surface));
+  }
+
   /* Badge base style */
   .badge {
     @apply inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200;
-- 
cgit v1.2.3