Added social media icons to the footer. Still ugly. I hate CSS!

components/03_Organisms/footer/_footer.scss

@@ -1,6 +1,6 @@
 // Define easily accessible color-defalts for the footer.
-$primary-link-color: $-beige;
+$-primary-link-color: $-beige;
-$primary-line-color: $-almost-white;
+$-primary-line-color: $-almost-white;
 
 .LP-Footer {
     margin: auto;
@@ -22,9 +22,10 @@ $primary-line-color: $-almost-white;
     }
 
     &__generic-anchor {
-        color: $primary-link-color;
+        color: $-primary-link-color;
+
         &:hover {
-            color: $primary-line-color
+            color: $-primary-line-color
         }
     }
 
@@ -67,7 +68,7 @@ $primary-line-color: $-almost-white;
         z-index: 1;
         top: 50%;
         left: 10px;
-        border-top: 1px solid $primary-line-color;
+        border-top: 1px solid $-primary-line-color;
         width: calc(100% - 20px)
     }
 
@@ -78,6 +79,68 @@ $primary-line-color: $-almost-white;
         padding: 0 20px;
     }
 
+    // Include social media icons.
+    .LP-Footer__Social-Mastodon {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/mastodon.svg');
+        }
+    }
+
+    .LP-Footer__Social-Twitter {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/twitter.svg');
+        }
+    }
+
+    .LP-Footer__Social-Facebook {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/facebook.svg');
+        }
+    }
+
+    .LP-Footer__Social-Youtube {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/youtube.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vimeo {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vimeo.svg');
+        }
+    }
+
+    .LP-Footer__Social-Instagram {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/instagram.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vkontakte {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vkontakte.svg');
+        }
+    }
+
+    .LP-Footer__Social-Wordpress {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/wordpress.svg');
+        }
+    }
+
+    // !! WIP and broken Wurstwasser !!
+    // Social media icons style.
+    .LP-Footer__Icon {
+        background-size: 40px 40px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-clip: content-box;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+        filter: invert(1); // Bullshit, have to properly style the svg.
+    }
+
     // Big letters of "EXPLORE WITH US"
     &__social-explore {
         display: flex;
@@ -103,7 +166,7 @@ $primary-line-color: $-almost-white;
     &__bottom-section {
         width: 100%;
         padding: 10px;
-        border-top: 1px solid $primary-line-color;
+        border-top: 1px solid $-primary-line-color;
         margin-top: 10px
     }
 

components/03_Organisms/footer/footer.hbs

@@ -23,18 +23,41 @@
             <li id='user-registration'><a href='/shop/user-registration?URL=' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">NEW USERS</a></li>
             <li id='order-tracking'><a href='/shop/order-status' itemprop="significantLink" class="LP-Footer__generic-anchor LP-Footer__list-anchor">ORDER STATUS</a></li>
     </ul>
+
+    <!-- Explore with us / social media bar -->
     <section class="LP-Footer__social-section LP-Footer__flex">
             <span class="LP-Footer__social-overlap LP-Footer__social-explore">
                 EXPLORE <span class="LP-Footer__social-small">with</span> US
             </span>
             <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
-                <a href="https://twitter.com/urbanexploration" class="LP-Footer__generic-anchor" target="_blank" title="Twitter" itemprop="significantLink"><i class="fa fa-twitter"></i></a>
+                <a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__generic-anchor"
-                <a href="https://www.facebook.com/urbanexploration" class="LP-Footer__generic-anchor" target="_blank" title="Facebook" itemprop="significantLink"><i class="fa fa-facebook"></i></a>
+                    target="_blank" title="Mastodon" itemprop="significantLink">
-                <a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__generic-anchor" target="_blank" title="Youtube" itemprop="significantLink"><i class="fa fa-youtube"></i></a>
+                        <span class="LP-Footer__Icon"></span>
-                <a href="http://instagram.com/urbanexploration" class="LP-Footer__generic-anchor" target="_blank" title="Instagram" itemprop="significantLink"><i class="fa fa-instagram"></i></a>
+                    </a>
+            <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
+                <a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__generic-anchor"
+                    target="_blank" title="Twitter" itemprop="significantLink">
+                        <span class="LP-Footer__Icon"></span>
+                    </a>
+            <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
+                <a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__generic-anchor"
+                    target="_blank" title="Youtube" itemprop="significantLink">
+                        <span class="LP-Footer__Icon"></span>
+                    </a>
+            <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
+                <a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__generic-anchor"
+                    target="_blank" title="Wordpress" itemprop="significantLink">
+                        <span class="LP-Footer__Icon"></span>
+                    </a>
+            <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
+                <a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__generic-anchor"
+                    target="_blank" title="Instagram" itemprop="significantLink">
+                        <span class="LP-Footer__Icon"></span>
+                    </a>
             </span>
     </section>
 
+    <!-- Bottom section with last line of text and links. -->
     <section class="LP-Footer__bottom-section LP-Footer__flex">
         <div class="LP-Footer__bottom-wrapper">   
             Proudly made by reverend and Commander1024</span>

public/main.css

@@ -1289,6 +1289,31 @@ body {
     z-index: 2;
     background: #565656;
     padding: 0 20px; }
+  .LP-Footer .LP-Footer__Social-Mastodon .LP-Footer__Icon {
+    background-image: url("icons/social/mastodon.svg"); }
+  .LP-Footer .LP-Footer__Social-Twitter .LP-Footer__Icon {
+    background-image: url("icons/social/twitter.svg"); }
+  .LP-Footer .LP-Footer__Social-Facebook .LP-Footer__Icon {
+    background-image: url("icons/social/facebook.svg"); }
+  .LP-Footer .LP-Footer__Social-Youtube .LP-Footer__Icon {
+    background-image: url("icons/social/youtube.svg"); }
+  .LP-Footer .LP-Footer__Social-Vimeo .LP-Footer__Icon {
+    background-image: url("icons/social/vimeo.svg"); }
+  .LP-Footer .LP-Footer__Social-Instagram .LP-Footer__Icon {
+    background-image: url("icons/social/instagram.svg"); }
+  .LP-Footer .LP-Footer__Social-Vkontakte .LP-Footer__Icon {
+    background-image: url("icons/social/vkontakte.svg"); }
+  .LP-Footer .LP-Footer__Social-Wordpress .LP-Footer__Icon {
+    background-image: url("icons/social/wordpress.svg"); }
+  .LP-Footer .LP-Footer__Icon {
+    background-size: 40px 40px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-clip: content-box;
+    position: absolute;
+    height: 50px;
+    width: 50px;
+    filter: invert(1); }
   .LP-Footer__social-explore {
     display: flex;
     align-items: center;