From: Danilo M. Date: Sat, 18 Apr 2026 13:23:31 +0000 (+0200) Subject: style: redesign social share widget with terminal-native aesthetic X-Git-Tag: release_22042026-1342~106 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=e351cda99f5dbd0cd4c05f060a8a2b3f4e8fd595;p=danix.xyz-2.git 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 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; } diff --git a/themes/danix-xyz-hacker/layouts/partials/social-share.html b/themes/danix-xyz-hacker/layouts/partials/social-share.html index d7b6562..f631f30 100644 --- 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 }} -
-

{{ i18n "share" }}

+