Improve the social sharing buttons (#15177)

* move to partial

* Win the battle before you win the war.

layouts/blog/single.html

@@ -32,36 +32,7 @@
   </div>
   {{ end }} {{ end }}
   <div>{{ .Content }}</div>
-    <p><h4>Share this blog on social!</h4></p>
-    <div>
-      <a
-        href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}"
-        target="_blank"
-      >
-        <img class="social-share-icon"
-          src="/img/social/linkedin.svg"
-          alt="Share to LinkedIn"
-        />
-      </a>
-      <a
-        href="https://twitter.com/intent/tweet?text={{ .Title }}&url={{ .Permalink }}"
-        target="_blank"
-      >
-        <img class="social-share-icon"
-          src="/img/social/twitterx.svg"
-          alt="Share to X"
-        />
-      </a>
-      <a
-        href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
-        target="_blank"
-      >
-        <img class="social-share-icon"
-          src="/img/social/facebook.svg"
-          alt="Share to Facebook"
-        />{{ partial "icon.html" "facebook" }}
-      </a>
-  </div>
+  {{ partial "posts_share_social.html" . }}
   {{ partial "posts_navigation.html" . }}
 </article>
 {{ end }}

layouts/partials/posts_share_social.html

@@ -0,0 +1,17 @@
+<div class="share-social">
+    <div class="heading">
+        Share this post
+    </div>
+
+    <div class="share-buttons">
+        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank">
+            <img class="share-icon" src="/img/social/linkedin.svg" alt="Share to LinkedIn" />
+        </a>
+        <a href="https://twitter.com/intent/tweet?text={{ .Title }}&url={{ .Permalink }}" target="_blank">
+            <img class="share-icon" src="/img/social/twitterx.svg" alt="Share to X" />
+        </a>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank">
+            <img class="share-icon" src="/img/social/facebook.svg" alt="Share to Facebook" />
+        </a>
+    </div>
+</div>

src/sass/base/_base.scss

@@ -310,7 +310,7 @@ strong {
     font-weight: $boldTextWeight;
 }
 
-img:not(.company-logo-img, .social-share-icon) {
+img:not(.company-logo-img) {
     width: 100%;
 }
 

src/sass/misc/_blog.scss

@@ -216,8 +216,35 @@
         }
     }
 
-    .social-share-icon {
-        width: 50px;
+    .share-social {
+        margin: auto;
+        margin-top: 3em;
+        width: 200px;
+
+        .heading {
+            text-align: center;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            font-weight: var(--boldTextWeight);
+        }
+
+        .share-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .share-buttons a {
+            margin-right: 1em;
+        }
+
+        .share-buttons a:last-child {
+            margin-right: 0;
+        }
+
+        .share-icon {
+            width: 3em;
+        }
     }
 
     .next-link {