feat: Bluesky share btn (#55)

* feat: Add bluesky share button. Also modify X share button

Signed-off-by: koooge <koooooge@gmail.com>

* feat: Adjust page layout

Signed-off-by: koooge <koooooge@gmail.com>

---------

Signed-off-by: koooge <koooooge@gmail.com>

Author: koooge

layouts/partials/share.html

@@ -1,10 +1,13 @@
 {{ if .Site.Params.sharebutton }}
+{{ $url := printf "%s" .Permalink | absLangURL }}
 <div id="share-buttons">
   <ul>
     {{ if .Site.Params.sharebutton.x_twitter | default .Site.Params.sharebutton.twitter }}
+    {{ $user := .Site.Author.x_twitter | default .Site.Author.twitter }}
     <li>
-      <a href="https://twitter.com/share" class="twitter-share-button"{{ with .Site.Author.twitter }} data-via="{{ . }}"{{ end }}>Tweet</a>
-      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+      <a href="https://twitter.com/intent/tweet?text={{ .Title }}&url={{ $url }}&via={{ $user }}" target="_blank" aria-label="Share on X">
+        {{ partial "fontawesome.html" "square-x-twitter-brands-solid" }}
+      </a>
     </li>
     {{ end }}
     {{ if .Site.Params.sharebutton.facebook }}
@@ -36,6 +39,15 @@
         <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://assets.tumblr.com/share-button.js";ajs.parentNode.insertBefore(js,ajs);}}(document, "script", "tumblr-js");</script>
     </li>
     {{ end }}
+    {{ if .Site.Params.sharebutton.bluesky }}
+      {{ $text := printf "%s %s" .Title .Permalink }}
+      {{ with .Site.Author.bluesky }}{{ $text = printf "%s by @%s" $text . }}{{ end }}
+      <li>
+        <a href="https://bsky.app/intent/compose?text={{ $text | urlquery }}" target="_blank" aria-label="Share on Bluesky">
+          {{ partial "fontawesome.html" "square-bluesky-brands-solid" }}
+        </a>
+      </li>
+    {{ end }}
   </ul>
 </div>
 {{ end }}

static/css/style.css

@@ -37,7 +37,7 @@ a:hover {
 }
 
 .container {
-  width: 1000px;
+  width: 1200px;
   margin-right: auto;
   margin-left: auto;
   padding-bottom: 50px;
@@ -82,7 +82,7 @@ a:hover {
  * articles
  */
 .article {
-  width: 590px;
+  width: 650px;
   padding: 0 20px 20px;
   clear: left;
   overflow: hidden;
@@ -130,27 +130,18 @@ a:hover {
   font-size: 14px;
 }
 
-.article .content a:hover :not(.heading) {
-  font-size: 14px;
-}
-
 .article .tags a {
   font-size: 10px;
 }
 
-.article .tags a:hover {
-  font-size: 10px;
-}
-
 /**
  * sidebar
  */
 .sidebar {
   width: 310px;
   float: right;
   min-height: 200px;
-  height: 200px;
-  height: auto !important;
+  height: auto;
   overflow: hidden;
 }