Updated footer style

src/components/Footer.vue

@@ -1,17 +1,19 @@
 <template>
   <footer class="footer">
-    <div class="footer-container">
-      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
-      <ul class="social-media">
-        <li class="social-link"
+    <div class="footer_container">
+      <div class="container_logo">Kamil<span class="logo_element">Craft</span></div>
+      <ul class="socials">
+        <li class="social_link"
             v-for="link in socialLinks"
             :key="link.title.slug">
           <a class="link"
              :href="link.link"
              :title="link.title"
-             target="_blank">
+             target="_blank"
+             rel="noopener nofollow noreferrer">
             <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
-            <span class="title">{{ link.title }}</span>
+            <span class="social_title">{{ link.title }}</span>
+            <span class="social_shortcut">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>
@@ -27,30 +29,31 @@
   background-color: #323232;
   padding: 35px 0;
 
-  &-container {
+  &_container {
     @extend .container;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
-    .logo {
+    .container_logo {
       padding: 14px 20px 14px 40px;
       font-family: 'Thasadith', sans-serif;
       font-size: 2.5em;
       color: #D4D4D4;
       background-color: #5B5B5B;
 
-      .logo-element {
+      .logo_element {
         color: #A2CF00;
       }
     }
 
-    .social-media {
+    .socials {
       display: flex;
       list-style: none;
 
-      .social-link {
+      .social_link {
         margin-right: 25px;
+        padding-right: 15px;
         font-size: 1.1em;
 
         a {
@@ -60,8 +63,22 @@
             margin-right: 5px;
           }
 
+          .social_shortcut {
+            display: none;
+          }
+
           @include media-tablet {
-            .title {
+            .social_title {
+              display: none;
+            }
+
+            .social_shortcut {
+              display: inline-block;
+            }
+          }
+
+          @include media-mobile {
+            .social_shortcut {
               display: none;
             }
           }
@@ -71,12 +88,9 @@
           margin-right: 0;
         }
       }
+    }
 
-      @include media-mobile {
-        padding-right: 15px;
-      }
-    }
-    @include media-mobile {
+    @include media-tablet {
       padding: 0;
     }
   }
@@ -93,8 +107,8 @@ export default {
   data () {
     return {
       socialLinks: [
-        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
-        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
+        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
+        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
       ]
     }
   }