From e3b281f8683a3100fa68008b217ef741c0603948 Mon Sep 17 00:00:00 2001
From: Commander1024 <commander@commander1024.de>
Date: Sun, 6 Sep 2020 11:36:35 +0200
Subject: [PATCH] Styled social media icons.

---
 components/03_Organisms/footer/_footer.scss | 27 ++++++++++-----------
 components/03_Organisms/footer/footer.hbs   | 14 ++++-------
 public/main.css                             | 25 ++++++++++---------
 3 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss
index 6ad75ea..a6006fa 100644
--- a/components/03_Organisms/footer/_footer.scss
+++ b/components/03_Organisms/footer/_footer.scss
@@ -72,13 +72,6 @@ $-primary-line-color: $-almost-white;
         width: calc(100% - 20px)
     }
 
-    &__social-overlap {
-        position: relative;
-        z-index: 2;
-        background: $-grey;
-        padding: 0 20px;
-    }
-
     // Include social media icons.
     .LP-Footer__Social-Mastodon {
         .LP-Footer__Icon {
@@ -155,12 +148,16 @@ $-primary-line-color: $-almost-white;
         padding: 0px 20px
     }
 
-    &__social-overlap > a {
-        font-size: 3em
+    &__social-overlap {
+        position: relative;
+        z-index: 2;
+        background: $-grey;
+        padding: 0 10px;
     }
 
-    &__social-overlap > a:not(:first-child) {
-        margin-left: 0.38em
+    &__social-overlap > a {
+        font-size: 3em;
+        padding-right: 50px;
     }
 
     &__bottom-section {
@@ -191,7 +188,8 @@ $-primary-line-color: $-almost-white;
             font-size: 2.5em
         }
         .LP-Footer__social-overlap > a {
-            font-size: 2.24em
+            font-size: 2.24em;
+            height: 50px;
         }
         .LP-Footer__bottom-wrapper {
             font-size: 1.3em
@@ -221,13 +219,14 @@ $-primary-line-color: $-almost-white;
         .LP-Footer__social-overlap {
             display: flex;
             justify-content: center;
+            height: 50px;
         }
         .LP-Footer__social-icons-wrapper {
             width: 100%;
             padding: 0
         }
-        .LP-Footer__social-overlap > a:not(:first-child) {
-            margin-left: 20px;
+        .LP-Footer__social-overlap {
+            margin-left: 0px;
         }
         .LP-Footer__bottom-section {
             padding: 0 5px 10px 5px
diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs
index 89f4bfa..dbd0e89 100644
--- a/components/03_Organisms/footer/footer.hbs
+++ b/components/03_Organisms/footer/footer.hbs
@@ -33,27 +33,23 @@
                 <a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__generic-anchor"
                     target="_blank" title="Mastodon" itemprop="significantLink">
                         <span class="LP-Footer__Icon"></span>
-                    </a>
-            <span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
+                 </a>
                 <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>
                 <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>
                 <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>
                 <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>
+                </a>
             </span>
     </section>
 
diff --git a/public/main.css b/public/main.css
index 769b94a..0d36c14 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1284,11 +1284,6 @@ body {
     left: 10px;
     border-top: 1px solid #f9f9f9;
     width: calc(100% - 20px); }
-  .LP-Footer__social-overlap {
-    position: relative;
-    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 {
@@ -1322,10 +1317,14 @@ body {
   .LP-Footer__social-small {
     font-size: 0.6em;
     padding: 0px 20px; }
+  .LP-Footer__social-overlap {
+    position: relative;
+    z-index: 2;
+    background: #565656;
+    padding: 0 10px; }
   .LP-Footer__social-overlap > a {
-    font-size: 3em; }
-  .LP-Footer__social-overlap > a:not(:first-child) {
-    margin-left: 0.38em; }
+    font-size: 3em;
+    padding-right: 50px; }
   .LP-Footer__bottom-section {
     width: 100%;
     padding: 10px;
@@ -1344,7 +1343,8 @@ body {
     .LP-Footer .LP-Footer__social-connect {
       font-size: 2.5em; }
     .LP-Footer .LP-Footer__social-overlap > a {
-      font-size: 2.24em; }
+      font-size: 2.24em;
+      height: 50px; }
     .LP-Footer .LP-Footer__bottom-wrapper {
       font-size: 1.3em; } }
   @media (max-width: 750px) {
@@ -1363,12 +1363,13 @@ body {
       padding: 0 10px; }
     .LP-Footer .LP-Footer__social-overlap {
       display: flex;
-      justify-content: center; }
+      justify-content: center;
+      height: 50px; }
     .LP-Footer .LP-Footer__social-icons-wrapper {
       width: 100%;
       padding: 0; }
-    .LP-Footer .LP-Footer__social-overlap > a:not(:first-child) {
-      margin-left: 20px; }
+    .LP-Footer .LP-Footer__social-overlap {
+      margin-left: 0px; }
     .LP-Footer .LP-Footer__bottom-section {
       padding: 0 5px 10px 5px; }
     .LP-Footer .LP-Footer__bottom-wrapper {