updated footer style - tailwind

src/components/FooterComponent.vue

@@ -1,122 +1,47 @@
 <template>
-  <footer class="footer">
+  <footer class="bg-neutral-800 py-8">
-    <div class="footer_container">
+    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
-      <div class="container_logo">
+      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
-        Kamil<span class="logo_element">Craft</span>
+        Kamil<span class="text-lime-500">Craft</span>
       </div>
-      <ul class="socials">
+      <ul class="flex gap-5 pr-3 text-lg">
         <li
           v-for="link in socialLinks"
           :key="link.title.slug"
-          class="social_link"
         >
           <a
-            class="link"
+            class="text-neutral-400 hover:text-neutral-500"
             :href="link.link"
             :title="link.title"
             target="_blank"
             rel="noopener nofollow noreferrer"
           >
-            <font-awesome-icon
+            <FontAwesomeIcon
-              class="icon"
+              class="mr-1"
               :icon="['fab', link.icon]"
             />
-            <span class="social_title">{{ link.title }}</span>
+            <span class="hidden md:inline-block">{{ link.title }}</span>
-            <span class="social_shortcut">{{ link.shortcut }}</span>
+            <span class="md:hidden">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>
     </div>
-    <div class="container" />
   </footer>
 </template>
 
 <script setup>
 const socialLinks = [
-  { 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' }
+    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'
+  }
 ]
 </script>
-
-<style lang="scss" scoped>
-@import "scss/default";
-
-.footer {
-  background-color: #323232;
-  padding: 35px 0;
-
-  &_container {
-    @extend .container;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .container_logo {
-      padding: 14px 20px 14px 40px;
-      font-family: 'Thasadith', sans-serif;
-      font-size: 2.5em;
-      color: #D4D4D4;
-      background-color: #5B5B5B;
-
-      .logo_element {
-        color: #A2CF00;
-      }
-    }
-
-    .socials {
-      display: flex;
-      list-style: none;
-
-      .social_link {
-        margin-right: 25px;
-        padding-right: 15px;
-        font-size: 1.1em;
-
-        a {
-          color: #A3A3A3;
-
-          .icon {
-            margin-right: 5px;
-          }
-
-          .social_shortcut {
-            display: none;
-          }
-
-          @include media-tablet {
-            .social_title {
-              display: none;
-            }
-
-            .social_shortcut {
-              display: inline-block;
-            }
-          }
-
-          @include media-mobile {
-            .social_shortcut {
-              display: none;
-            }
-          }
-        }
-
-        @include media-mobile {
-          padding-right: 0;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    @include media-tablet {
-      padding: 0;
-    }
-  }
-
-  @include media-mobile {
-    padding: 15px 0;
-  }
-}
-</style>

src/components/NavigationHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex relative items-center justify-between md:justify-start max-w-screen-lg mx-auto gap-5"
+    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
     :class="{ 'clicked-menu': isClicked }"
   >
     <RouterLink to="/">
@@ -134,141 +134,3 @@ function linkClicked() {
   }
 }
 </style>
-
-<!--<style lang="scss" scoped>
-//@import "scss/media";
-//
-//.sub-page > .container {
-//  .nav-btn {
-//    color: #8D8D8D;
-//  }
-//
-//  .nav .site-menu .menu-element {
-//    a:not([class|=router-link]) {
-//      color: #8D8D8D;
-//
-//      &:hover {
-//        color: #A2CF00;
-//      }
-//    }
-//  }
-//}
-//.container {
-//  display: flex;
-//  height: 80px;
-//  align-items: center;
-//  justify-content: flex-start;
-//  padding: 0;
-//
-//  div.logo {
-//    padding: 14px 20px 14px 40px;
-//    font-family: 'Thasadith', sans-serif;
-//    font-size: 2.5em;
-//    color: #5C5C5C;
-//    background-color: white;
-//
-//    .logo-element {
-//      color: #A2CF00;
-//    }
-//  }
-//
-//  &-menu-active {
-//    color: #8D8D8D;
-//    animation: container-active-menu 500ms forwards ease-in-out;
-//
-//    div.logo {
-//      animation: logo-active-menu 500ms forwards ease-in-out;
-//    }
-//    .nav {
-//      .nav-btn {
-//        color: #8D8D8D;
-//      }
-//      .site-menu .menu-element a {
-//        color: #8D8D8D;
-//      }
-//    }
-//  }
-//}
-//.nav {
-//  margin-left: 20px;
-//  z-index: 10;
-//  .nav-btn {
-//    display: none;
-//    margin: 10px 25px;
-//    font-size: 2em;
-//    color: white;
-//    background: transparent !important;
-//    border: none;
-//  }
-//  .site-menu {
-//    display: flex;
-//    list-style: none;
-//
-//    .menu-element {
-//      margin-right: 30px;
-//
-//      a {
-//        color: #EBEBEB;
-//
-//        &.router-link-exact-active, &:hover {
-//          color: #A2CF00;
-//        }
-//      }
-//
-//      &:last-child {
-//        margin-right: unset;
-//      }
-//    }
-//  }
-//  @include media-tablet {
-//    margin-left: 0;
-//
-//    .nav-btn {
-//      display: block;
-//    }
-//
-//    .site-menu {
-//      display: none;
-//      width: 100%;
-//      position: absolute;
-//      top: 80px;
-//      left: 0;
-//      background-color: white;
-//      box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
-//
-//      .menu-element {
-//        width: 100%;
-//        padding: 5px 20px;
-//        text-align: right;
-//        font-size: 1.8em;
-//        line-height: 2em;
-//      }
-//    }
-//
-//    .menu-clicked {
-//      display: block;
-//    }
-//  }
-//}
-//@include media-tablet {
-//  .container {
-//    justify-content: space-between;
-//  }
-//}
-//@keyframes container-active-menu {
-//  0% {
-//    background-color: transparent;
-//  }
-//  100% {
-//    background-color: #EFEFEF;
-//  }
-//}
-//@keyframes logo-active-menu {
-//  0% {
-//    background-color: white;
-//  }
-//  100% {
-//    background-color: #F6F6F6;
-//  }
-//}
-</style>-->