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.

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 0fac3bef2cf51e4b5a86312c3a4b2580f9880e17..4386b1de8a39df5ddca37cbc1cdb90c025372821 100644 (file)
--- 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 7a38ef478cbff9280469b22d95e02add0bb2ff45..2768fc14b0e32f093f23f67679f6ea804fcc79b8 100644 (file)
--- 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;
 }

diff --git a/themes/danix-xyz-hacker/layouts/partials/social-share.html b/themes/danix-xyz-hacker/layouts/partials/social-share.html
index d7b6562aff194532ea184752e3a668e60f3b7969..f631f3040b75923f01284447ce2ce39c581f73c2 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/social-share.html
+++ b/themes/danix-xyz-hacker/layouts/partials/social-share.html
@@ -3,25 +3,25 @@
 {{ $url := $page.Permalink | urlquery }}
 {{ $title := $page.Title | urlquery }}
 
-{{ $gridClass := "grid-cols-2 gap-2 justify-items-center" }}
+{{ $gridClass := "grid-cols-2 gap-1" }}
 {{ if eq $mode "inline" }}
-  {{ $gridClass = "grid-cols-5 gap-2 justify-items-center" }}
+  {{ $gridClass = "flex flex-wrap justify-center gap-1" }}
 {{ end }}
 
-<div class="p-4 border border-border/30 rounded mb-6">
-  <h3 class="text-lg font-semibold text-accent mb-3">{{ i18n "share" }}</h3>
+<div class="share-widget mb-6">
+  <p class="share-label">// {{ i18n "share" }}</p>
   <nav aria-label="{{ i18n "share" }}">
-    <div class="grid {{ $gridClass }}">
+    <div class="{{ $gridClass }}">
 
       <!-- Copy link -->
       <div x-data="{ copied: false }">
         <button
           @click="navigator.clipboard.writeText('{{ $page.Permalink }}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
           :aria-label="copied ? '{{ i18n "linkCopied" }}' : '{{ i18n "copyLink" }}'"
-          class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+          :class="copied ? 'btn-share btn-share--copied' : 'btn-share'"
         >
-          <i x-show="!copied" data-feather="copy" class="w-[50px] h-[50px]" aria-hidden="true"></i>
-          <i x-show="copied" data-feather="check" class="w-[50px] h-[50px] text-accent2" aria-hidden="true"></i>
+          <i x-show="!copied" data-feather="copy" aria-hidden="true"></i>
+          <i x-show="copied" data-feather="check" aria-hidden="true"></i>
         </button>
       </div>
 
@@ -29,9 +29,9 @@
       <a
         href="mailto:?subject={{ $title }}&body={{ $title }}%0A%0A{{ $page.Permalink | urlquery }}"
         aria-label="{{ i18n "shareViaEmail" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <i data-feather="mail" class="w-[50px] h-[50px]" aria-hidden="true"></i>
+        <i data-feather="mail" aria-hidden="true"></i>
       </a>
 
       <!-- Facebook -->
@@ -39,9 +39,9 @@
         href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "facebook" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
           <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
         </svg>
       </a>
@@ -51,9 +51,9 @@
         href="https://twitter.com/intent/tweet?url={{ $url }}&text={{ $title }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "twitter" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
         </svg>
       </a>
@@ -63,9 +63,9 @@
         href="https://www.reddit.com/submit?url={{ $url }}&title={{ $title }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "reddit" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
         </svg>
       </a>
@@ -75,9 +75,9 @@
         href="https://pinterest.com/pin/create/button/?url={{ $url }}&description={{ $title }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "pinterest" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
         </svg>
       </a>
@@ -87,9 +87,9 @@
         href="https://api.whatsapp.com/send?text={{ $title }}%20{{ $page.Permalink | urlquery }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "whatsapp" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
         </svg>
       </a>
@@ -99,9 +99,9 @@
         href="https://t.me/share/url?url={{ $url }}&text={{ $title }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "telegram" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
         </svg>
       </a>
@@ -111,9 +111,9 @@
         href="https://signal.me/#p/{{ $page.Permalink | urlquery }}"
         target="_blank" rel="noopener noreferrer"
         aria-label="{{ i18n "signal" }}"
-        class="btn-icon hover:text-accent hover:bg-surface transition-colors focus-visible:ring-2 focus-visible:ring-accent"
+        class="btn-share"
       >
-        <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false">
           <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.157 5.32a6.68 6.68 0 0 1 6.143 4.032l.734-.267.55 1.513-.717.261a6.71 6.71 0 0 1 .133 1.327 6.68 6.68 0 0 1-.176 1.51l.69.252-.55 1.513-.707-.258A6.68 6.68 0 0 1 12 18.68a6.68 6.68 0 0 1-6.294-4.455l-.66.24-.55-1.513.677-.247A6.71 6.71 0 0 1 5 12.187a6.71 6.71 0 0 1 .16-1.438l-.698-.254.55-1.513.725.264A6.68 6.68 0 0 1 12.157 5.32zM12 7.2a4.8 4.8 0 1 0 0 9.6A4.8 4.8 0 0 0 12 7.2z"/>
         </svg>
       </a>