Add bluesky social media links (#3874)

* Add bluesky social media links

* Linting

Author: tunetheweb

README.md

@@ -40,7 +40,7 @@ We do almost all of our project planning here on GitHub. Browse the open [issues
 
 We also have a [`#web-almanac`](https://join.slack.com/t/httparchive/shared_invite/zt-45sgwmnb-eDEatOhqssqNAKxxOSLAaA) channel on the HTTP Archive Slack where we chat about project updates.
 
-For news and announcements, follow [@HTTPArchive](https://x.com/HTTPArchive) on Twitter.
+For news and announcements, follow [@HTTPArchive](https://x.com/HTTPArchive) on X, or [httparchive.org](https://bsky.app/profile/httparchive.org) on Bluesky.
 
 ## [License](https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/LICENSE)
 

src/static/css/almanac.css

@@ -768,8 +768,8 @@ footer .container {
     'home-logo nav-items nav-items nav-items'
     'hr hr hr hr'
     'copyright copyright ha-logo social-media';
-  grid-template-columns: 280px 1fr 1fr 120px 0 0;
-  grid-template-columns: 17.5rem 1fr 1fr 7.5rem 0 0;
+  grid-template-columns: 280px 1fr 1fr 150px 0 0;
+  grid-template-columns: 17.5rem 1fr 1fr 9.375rem 0 0;
 }
 
 footer .home-logo {
@@ -854,10 +854,14 @@ p.copyright a {
   padding: 0 20px;
 }
 
-.social-media li:first-child a {
+.social-media li a {
   margin-right: 30px;
 }
 
+.social-media li:last-child a {
+  margin-right: 0;
+}
+
 .social-media li {
   display: flex;
 }
@@ -915,7 +919,7 @@ p.copyright a {
       'nav-items nav-items nav-items nav-items'
       'hr-last hr-last hr-last hr-last'
       'copyright copyright ha-logo social-media';
-    grid-template-columns: 3fr 1fr 1fr 120px 0 0;
+    grid-template-columns: 3fr 1fr 1fr 150px 0 0;
     grid-template-rows: 60px auto auto;
   }
 

src/templates/base/base.html

@@ -71,6 +71,7 @@
         "sameAs": [
           "https://httparchive.org",
           "https://x.com/HTTPArchive",
+          "https://bsky.app/profile/httparchive.org",
           "https://github.com/HTTPArchive"
           ]
       },
@@ -451,6 +452,14 @@
                         </svg>
                       </a>
                     </li>
+                    <li>
+                      <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-mobile">
+                        <svg width="20" height="20" role="img">
+                          <title id="bluesky-logo-mobile">Bluesky</title>
+                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
+                        </svg>
+                      </a>
+                    </li>
                     <li>
                       <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-mobile">
                         <svg width="22" height="20" role="img">
@@ -550,6 +559,14 @@
                 </svg>
               </a>
             </li>
+            <li>
+              <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer-mobile">
+                <svg width="20" height="20" role="img">
+                  <title id="bluesky-logo-footer-mobile">Bluesky</title>
+                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
+                </svg>
+              </a>
+            </li>
             <li>
               <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer-mobile">
                 <svg width="22" height="20" role="img">
@@ -583,6 +600,14 @@
               </svg>
             </a>
           </li>
+          <li>
+            <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer">
+              <svg width="20" height="20" role="img">
+                <title id="bluesky-logo-footer">Bluesky</title>
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
+              </svg>
+            </a>
+          </li>
           <li>
             <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer">
               <svg width="22" height="20" role="img">