add social media bar component

lib/assets/stylesheets/application.scss

@@ -49,10 +49,11 @@ Application specific code
 @import "../../components/profile/profile";
 @import "../../components/quote/quote";
 @import "../../components/rating/rating";
-@import "../../components/table/table";
-@import "../../components/testimonial/testimonial";
+@import "../../components/social-media-bar/social-media-bar";
 @import "../../components/status/status";
 @import "../../components/stripe/stripe";
+@import "../../components/table/table";
+@import "../../components/testimonial/testimonial";
 @import "../../components/teaser/teaser";
 @import "../../components/text/text";
 

lib/components/footer/_footer.scss

@@ -32,15 +32,13 @@
   flex-direction: column;
   align-items: flex-start;
 
-  > * + * {
-    margin-top: $spacer-md;
+  .footer__headline,
+  .footer__linkarea {
+    margin-top: $spacer-lg;
   }
 
-  /* stylelint-disable-next-line order/order */
-  @include for-tablet-landscape-up {
-    > * + * {
-      margin-top: $spacer-2xl;
-    }
+  .social-media-bar {
+    margin-top: $spacer-md;
   }
 }
 

lib/components/footer/footer.md

@@ -8,8 +8,36 @@ description: Footer
     <div class="footer__top">
         <div class="footer__top__content">
             <div class="footer__top__content__right">
-                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
-                <div class="footer__linkarea">
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
+                <h2 class="footer__headline">Folge uns auf</h2>
+                <ul class="social-media-bar">
+                    <li class="social-media-bar__item">
+                        <a href="#" class="social-media-bar__link" title="Twitter">
+                            <span class="icon icon--twitter icon--brand-primary"></span>
+                            <span class="sr-only">Twitter</span>
+                        </a>
+                    </li>
+                    <li class="social-media-bar__item">
+                        <a href="#" class="social-media-bar__link" title="Mastodon">
+                            <span class="icon icon--mastodon icon--brand-primary"></span>
+                            <span class="sr-only">Mastodon/span>
+                        </a>
+                    </li>
+                    <li class="social-media-bar__item">
+                        <a href="#" class="social-media-bar__link" title="Linkedin">
+                            <span class="icon icon--linkedin icon--brand-primary"></span>
+                            <span class="sr-only">Linkedin</span>
+                        </a>
+                    </li>
+                    <li class="social-media-bar__item">
+                        <a href="#" class="social-media-bar__link" title="Bsky">
+                            <span class="icon icon--bsky icon--brand-primary"></span>
+                            <span class="sr-only">Bluesky</span>
+                        </a>
+                    </li>
+                </ul>
+                <div class="footer__linkarea m-t-lg">
                     <ul class="footer__links">
                         <li class="footer__link"><a href="#">Trainings</a></li>
                         <li class="footer__link"><a href="#">Trainer:innen</a></li>
@@ -25,11 +53,13 @@ description: Footer
                 </div>
             </div>
             <div class="footer__top__content__left">
-                <h2>Newsletter</h2>
-                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
+                <h2 class="footer__headline">Newsletter</h2>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
                 <form class="form" action="#" method="post" target="_blank">
                     <div class="form__field">
-                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
                         <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
                     </div>
                     <div class="form__field">

lib/components/icons/_icons.scss

@@ -34,3 +34,23 @@
 .icon--idea {
   @include icon-before("icons/light-bulb-shine.svg", $brand-black, 2rem);
 }
+
+.icon--linkedin {
+  @include icon-before("icons/social-linkedin.svg", $brand-black, 1.5rem);
+}
+
+.icon--mastodon {
+  @include icon-before("icons/social-mastodon.svg", $brand-black, 1.5rem);
+}
+
+.icon--youtube {
+  @include icon-before("icons/social-youtube.svg", $brand-black, 1.5rem);
+}
+
+.icon--twitter {
+  @include icon-before("icons/social-x.svg", $brand-black, 1.5rem);
+}
+
+.icon--bsky {
+  @include icon-before("icons/social-bsky.svg", $brand-black, 1.6rem);
+}

lib/components/link/_link.scss

@@ -1,3 +1,15 @@
+.link-unstyled,
+%link-unstyled {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 0;
+
+  &:hover,
+  &:focus {
+    background-color: initial;
+  }
+}
+
 p a,
 a:not([class]) {
   color: $brand-text;

lib/components/profile/_profile.scss

@@ -98,6 +98,10 @@
   grid-template-columns: 1fr;
 }
 
+.img-text__image {
+  max-width: 50%;
+}
+
 .img-text__heading {
   @extend %heading-font-bold;
 

lib/components/social-media-bar/_social-media-bar.scss

@@ -0,0 +1,16 @@
+.social-media-bar {
+  @extend %list-unstyled;
+
+  display: grid;
+  grid-gap: $spacer-sm;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  align-content: center;
+}
+
+.social-media-bar__item {
+  display: inline-block;
+}
+
+.social-media-bar__link {
+  @extend %link-unstyled;
+}

lib/fundamentals/_base.scss

@@ -34,10 +34,6 @@ main {
   flex: 1;
 }
 
-.sr-only {
-  @include visually-hidden();
-}
-
 img,
 video {
   max-width: 100%;

lib/fundamentals/_helpers.scss

@@ -17,6 +17,10 @@
   border: 0;
 }
 
+.sr-only {
+  @include visually-hidden();
+}
+
 /* stylelint-disable declaration-no-important */
 .m-t-sm {
   margin-top: $spacer-sm !important;