Merge pull request #275 from CivicActions/homer-ITSM-1163-bluesky-bh

Add Bluesky social link

src/components/social-icons/_social-icon.scss

@@ -3,10 +3,6 @@
 
   &__item {
     display: inline-block;
-    padding: 0 px-to-rem(12px);
-
-    &:first-child {
-      padding-left: 0;
+    padding: 0.25rem;
+      }
     }
-  }
-}

src/data.js

@@ -1,9 +1,13 @@
-import twitterIcon from './files/icons/twitter-footer-icon-x.svg';
-import twitterIconHover from './files/icons/twitter-footer-icon-x-hover.svg';
+import twitterIcon from './files/icons/twitter-x-footer-icon.svg';
+import twitterIconHover from './files/icons/twitter-x-footer-icon-hover.svg';
 import vimeoIcon from './files/icons/vimeo-black.svg';
 import vimeoIconBlue from './files/icons/vimeo-blue.svg';
 import linkedinIcon from './files/icons/linkedin-footer-icon.svg';
 import linkedinIconBlue from './files/icons/linkedin-footer-icon-blue.svg';
+import blueskyIcon from './files/icons/bluesky-footer-icon.svg';
+import blueskyIconBlue from './files/icons/bluesky-footer-icon-blue.svg';
+
+
 
 export const socialMediaData = [
   {
@@ -13,6 +17,13 @@ export const socialMediaData = [
     icon: vimeoIcon,
     iconHover: vimeoIconBlue
   },
+  {
+    platform: "bluesky",
+    link: "https://bsky.app/profile/civicactions.com",
+    alt: "Follow us on Bluesky",
+    icon: blueskyIcon,
+    iconHover: blueskyIconBlue
+  },
   {
     platform: "twitter",
     link: "https://twitter.com/civicactions?lang=en",

src/sass/components/_footer.scss

@@ -81,24 +81,6 @@
 
   .social-icon {
     display: flex;
-
-    .twitter {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 48px;
-      height: 48px;
-      background: #000;
-      border-radius: 50%;
-      box-sizing: border-box;
-      padding: 0;
-
-      .blue-icon,
-      .black-icon {
-        width: 24px;
-        height: 24px;
-      }
-    }
   }
 
   //=========== Tablet styles ============
@@ -117,16 +99,6 @@
         display: flex;
         justify-content: flex-start;
 
-        .twitter {
-          width: 48px;
-          height: 48px;
-
-          .blue-icon,
-          .black-icon {
-            width: 24px;
-            height: 24px;
-          }
-        }
       }
     }
     .footer__about-text {
@@ -339,17 +311,6 @@
           height: 41px;
         }
 
-        .twitter {
-          width: 40px;
-          height: 40px;
-
-          .blue-icon,
-          .black-icon {
-            width: 20px;
-            height: 20px;
-          }
-        }
-
         a {
           &:hover,
           &:focus,
@@ -363,12 +324,6 @@
             }
           }
 
-          &.twitter:hover,
-          &.twitter:focus,
-          &.twitter:focus-within {
-            background: none;
-            border: solid 1px #000;
-          }
         }
 
       }