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.

2 files changed, 107 insertions, 50 deletions

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;
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 7a38ef4..2768fc1 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1272,10 +1272,6 @@ button,
   color: var(--accent);
 }
 
-.text-accent2 {
-  color: var(--accent2);
-}
-
 .text-text {
   color: var(--text);
 }
@@ -1409,32 +1405,65 @@ button,
 
 /* Icon button (for icons without text) */
 
-.btn-icon {
+/* Force Feather icons to match size */
+
+/* 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;
-  border-radius: 9999px;
-  width: auto;
-  height: auto;
-  padding: 0.5rem;
+  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-icon svg,
-  .btn-icon i {
-  width: auto !important;
-  height: auto !important;
+.btn-share svg,
+  .btn-share i,
+  .btn-share [data-feather] {
+  width: 22px !important;
+  height: 22px !important;
+  flex-shrink: 0;
 }
 
-/* Force Feather icons to match size */
+.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-icon [data-feather] {
-  width: 50px !important;
-  height: 50px !important;
+.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-icon [data-feather] svg {
-  width: 50px !important;
-  height: 50px !important;
+.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 */
@@ -1831,10 +1860,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   height: 1.25rem;
 }
 
-.h-\[50px\] {
-  height: 50px;
-}
-
 .h-auto {
   height: auto;
 }
@@ -1867,10 +1892,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   width: 1.25rem;
 }
 
-.w-\[50px\] {
-  width: 50px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -1945,10 +1966,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -1969,10 +1986,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   justify-content: space-between;
 }
 
-.justify-items-center {
-  justify-items: center;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -2311,10 +2324,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   color: var(--accent);
 }
 
-.text-accent2 {
-  color: var(--accent2);
-}
-
 .text-bg {
   color: var(--bg);
 }
@@ -3707,16 +3716,6 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   --tw-ring-color: var(--accent);
 }
 
-.focus-visible\:ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-visible\:ring-accent:focus-visible {
-  --tw-ring-color: var(--accent);
-}
-
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }