Update links to social networks

Author: gtca

assets/main.scss

@@ -21,6 +21,7 @@ $twitter-blue: #469be5;
 $discourse-yellow: #f7f0b1;
 $youtube-red: #e03021;
 $zulip-blue: #62a3f0;
+$bluesky-blue: #0a7aff;
 
 $overline: #e0e0e0;
 $linkunderline: #aaaaaa;
@@ -99,6 +100,16 @@ $contentwidthwide: 92%;
     transition: background 200ms ease-out;
     @include button-icon;
 }
+.i-xcom::before {
+    content: "𝕏";
+    font-weight: 900;
+    transition: background 200ms ease-out;
+}
+.i-bluesky::before {
+    background: center / contain no-repeat url("/img/icons/bluesky.svg");
+    transition: all 200ms ease-out;
+    @include button-icon;
+}
 
 .card:hover {
     .i-zulip::before {
@@ -107,6 +118,9 @@ $contentwidthwide: 92%;
     .i-discourse::before {
         background: url("/img/icons/discourse_inv.svg") no-repeat top left;
     }
+    .i-bluesky::before {
+        filter: invert(1);
+    }
 }
 
 // Cover buttons
@@ -126,6 +140,10 @@ $contentwidthwide: 92%;
     border-color: $twitter-blue;
     background-color: $twitter-blue;
 }
+.btn-bluesky:hover {
+    border-color: $bluesky-blue;
+    background-color: $bluesky-blue;
+}
 .btn-youtube:hover {
     border-color: $youtube-red;
     background-color: $youtube-red;
@@ -257,11 +275,27 @@ body {
     color: white;
     background-color: #4557c4;
     background: linear-gradient(135deg, #262fb5, #74c8fa);
-    transition: background 200ms ease-out;
-
-    &:hover {
+    position: relative;
+    z-index: 1;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         background: linear-gradient(135deg, #74c8fa, #d4ac00);
         color: white;
+        opacity: 0;
+        z-index: -1;
+        border-radius: inherit;
+        transform: scale(1.05);
+        transition: opacity 200ms ease-out, transform 100ms ease-out;
+    }
+
+    &:hover::before {
+        opacity: 1;
     }
 }
 
@@ -746,6 +780,10 @@ body {
             color: white;
             background-color: $youtube-red !important;
         }
+        &#bluesky:hover {
+            color: white;
+            background-color: $bluesky-blue !important;
+        }
     }
 }
 

content/join/_index.md

@@ -9,18 +9,24 @@ email_stmt = "You can also reach the steering council at: [steering-council@scve
 	text = "Follow our organisation on GitHub"
 	link = "https://github.com/scverse"
 
-[[resources]]
-	id = "twitter"
-	title = "Twitter"
-	text = "Follow us on Twitter"
-	link = "https://twitter.com/scverse_team"
-
 [[resources]]
 	id = "zulip"
 	title = "Zulip"
 	text = "Chat with us on Zulip"
 	link = "https://scverse.zulipchat.com/"
 
+[[resources]]
+	id = "twitter"
+	title = ""
+	text = "Follow us on X (fka Twitter)"
+	link = "https://x.com/scverse_team"
+
+[[resources]]
+	id = "bluesky"
+	title = "Bluesky"
+	text = "Follow us on Bluesky"
+	link = "https://bsky.app/profile/scverse.bsky.social"
+
 [[resources]]
 	id = "discourse"
 	title = "Discourse"

layouts/join/list.html

@@ -21,7 +21,7 @@ <h1>{{ .Title }}</h1>
                         <a href="{{ $item.link }}" class="stretched-link" target="_blank"></a>
                         <!-- Some of the items can have icons -->
                         {{ if eq $item.id "twitter" }}
-                          <h5 class="card-title bi-twitter">
+                          <h5 class="card-title i-xcom">
                             &nbsp;{{ $item.title }}
                           </h5>
                         {{ else if eq $item.id "github" }}
@@ -40,6 +40,10 @@ <h5 class="card-title i-zulip">
                           <h5 class="card-title i-discourse">
                             &nbsp;{{ $item.title }}
                           </h5>
+                        {{ else if eq $item.id "bluesky" }}
+                          <h5 class="card-title i-bluesky">
+                            &nbsp;{{ $item.title }}
+                          </h5>
                         {{ else }}
                           <h5 class="card-title">
                             {{ $item.title }}

layouts/partials/footer.html

@@ -26,7 +26,8 @@ <h5>Join scverse</h5>
           <li><a href="https://github.com/scverse" target="_blank">GitHub</a></li>
           <li><a href="https://discourse.scverse.org/" target="_blank">Discourse</a></li>
           <li><a href="https://scverse.zulipchat.com/" target="_blank">Zulip</a></li>
-          <li><a href="https://twitter.com/scverse_team" target="_blank">Twitter</a></li>
+          <li><a href="https://x.com/scverse_team" target="_blank">X (Twitter)</a></li>
+          <li><a href="https://bsky.app/profile/scverse.bsky.social" target="_blank">Bluesky</a></li>
           <li><a href="https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA" target="_blank">YouTube</a></li>
         </ul>
       </div>

layouts/partials/main/cover.html

@@ -28,8 +28,11 @@
       <a class="btn btn-light btn-outline-dark btn-zulip" href="http://scverse.zulipchat.com" target="_blank">
         Zulip
       </a>
-      <a class="btn btn-light btn-outline-dark btn-twitter" href="https://twitter.com/scverse_team" target="_blank">
-        Twitter
+      <a class="btn btn-light btn-outline-dark btn-twitter" href="https://x.com/scverse_team" target="_blank">
+        X
+      </a>
+      <a class="btn btn-light btn-outline-dark btn-bluesky" href="https://bsky.app/profile/scverse.bsky.social" target="_blank">
+        Bluesky
       </a>
       <a
         class="btn btn-light btn-outline-dark btn-youtube"