FEATURE Styling the social networks links component

resources/css/app.css

@@ -24,6 +24,7 @@
 @import './components/article-tag.css';
 @import './components/page-header.css';
 @import './components/notyf.css';
+@import './components/social-networks-links.css';
 
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';

resources/css/components/social-networks-links.css

@@ -0,0 +1,27 @@
+
+.social-networks-links {
+  @apply flex gap-2;
+
+  li {
+    @apply list-none;
+  }
+  .social-link {
+    @apply transition-all duration-300 ease-out block;
+
+    transform: scale(1);
+    filter: saturate(1) brightness(1);
+
+    &:hover {
+      transform: scale(1.1);
+      filter: saturate(1.2) brightness(1);
+    }
+    &:after {
+      @apply !content-none;
+    }
+  }
+  .social-icon {
+    @apply w-full h-auto;
+
+    width: 48px;
+  }
+}