Added social icons

Author: Felix Hennig

src/css/footer.css

@@ -10,21 +10,54 @@ footer.footer {
   margin: 0.5rem 0;
 }
 
-.footer a {
-  color: var(--footer-link-font-color);
+.c-and-socials {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
 }
 
 @media screen and (max-width: 720px) {
   .c-and-socials {
-    display: flex;
     flex-direction: column;
-    align-items: center;
   }
 }
 
 @media screen and (min-width: 720px) {
   .c-and-socials {
-    display: flex;
-    justify-content: space-between;
+    flex-direction: row;
   }
 }
+
+.footer-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.social-icons-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.social-icon {
+  background-color: var(--footer-font-color);
+  color: var(--body-font-color);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  aspect-ratio: 1;
+  height: 36px;
+  cursor: pointer;
+  transition: all .3s;
+}
+
+.social-icon:hover {
+  background-color: var(--color-brand-primary);
+  color: var(--footer-font-color);
+  text-decoration: none;
+
+}

src/css/site.css

@@ -17,3 +17,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "landing.css";
+@import "vendor/fontawesome.css";

src/partials/footer-content.hbs

@@ -1,12 +1,23 @@
 <footer class="footer">
   <div class="container">
-    <div>
+    <div class="footer-container">
       <div class="c-and-socials">
         <div>© 2022 Stackable.</div>
-        <div>social links go here</div>
+        <div class="social-icons-container">
+          <a class="social-icon" href="https://www.xing.com/pages/stackable" target="_blank">
+            <i class="fab fa-xing"></i>
+          </a>
+          <a class="social-icon" href="https://www.linkedin.com/company/stackabletech/" target="_blank">
+            <i class="fab fa-linkedin"></i>
+          </a>
+          <a class="social-icon" href="https://github.com/stackabletech" target="_blank">
+            <i class="fab fa-github"></i>
+          </a>
+          <a class="social-icon" href="https://twitter.com/stackabletech" target="_blank">
+            <i class="fab fa-twitter"></i>
+          </a>
+        </div>
       </div>
-
-      </p>
       <!-- copyright notice -->
       <p>
         Apache, Apache Kafka®, Kafka, and the Kafka logo, Apache Druid, Druid, and the Druid logo,