menu components and social icons

ropdias · Jul 7, 2024 · c96f3cf · c96f3cf
1 parent cd2701b
commit c96f3cf
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 8 deletions.
diff --git a/src/assets/icons/discord-hover.svg b/src/assets/icons/discord-hover.svg
diff --git a/src/assets/icons/ic_baseline-discord.svg → src/assets/icons/discord.svg b/src/assets/icons/ic_baseline-discord.svg → src/assets/icons/discord.svg
diff --git a/src/assets/icons/instagram-hover.svg b/src/assets/icons/instagram-hover.svg
diff --git a/src/assets/icons/mdi_instagram.svg → src/assets/icons/instagram.svg b/src/assets/icons/mdi_instagram.svg → src/assets/icons/instagram.svg
diff --git a/src/assets/icons/tiktok-hover.svg b/src/assets/icons/tiktok-hover.svg
diff --git a/src/assets/icons/ic_baseline-tiktok.svg → src/assets/icons/tiktok.svg b/src/assets/icons/ic_baseline-tiktok.svg → src/assets/icons/tiktok.svg
diff --git a/src/assets/icons/twitter-hover.svg b/src/assets/icons/twitter-hover.svg
diff --git a/src/assets/icons/ri_twitter-x-fill.svg → src/assets/icons/twitter.svg b/src/assets/icons/ri_twitter-x-fill.svg → src/assets/icons/twitter.svg
diff --git a/src/index.html b/src/index.html
@@ -14,14 +14,11 @@
   </head>
   <body>
     <div class="flex gap-1">
-      <a href="#" class="btn btn-sm">Label</a>
-      <span href="#" class="btn btn-md">Label</span>
-      <button href="#" class="btn btn-lg">Label</button>
-    </div>
-    <div class="flex gap-1">
-      <a aria-label="label" href="#" class="btn btn-sm"></a>
-      <span aria-label="label" href="#" class="btn btn-md"></span>
-      <button aria-label="label" href="#" class="btn btn-lg"></button>
+      <a href="#" class="social" aria-label="tiktok"></a>
+      <a href="#" class="social" aria-label="instagram"></a>
+      <a href="#" class="social" aria-label="twitter"></a>
+      <a href="#" class="social" aria-label="discord"></a>
+      <a href="#">Label</a>
     </div>
   </body>
 </html>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -78,6 +78,18 @@ a {
   color: inherit;
 }
 
+a:hover {
+  background: linear-gradient(
+    90deg,
+    var(--brand-color-secondary) 0%,
+    var(--brand-color-primary) 100%
+  );
+
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 ul[role='list'] {
   list-style: none;
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,3 +1,4 @@
 @import url(global.css);
 @import url(utility.css);
 @import url(buttons.css);
+@import url(social.css);
diff --git a/src/styles/social.css b/src/styles/social.css
@@ -0,0 +1,42 @@
+a.social {
+  --bg-img: '';
+  background-image: var(--bg-img);
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+
+  -webkit-background-clip: initial;
+  background-clip: initial;
+
+  &[aria-label='tiktok'] {
+    --bg-img: url(../assets/icons/tiktok.svg);
+
+    &:hover {
+      --bg-img: url(../assets/icons/tiktok-hover.svg);
+    }
+  }
+
+  &[aria-label='instagram'] {
+    --bg-img: url(../assets/icons/instagram.svg);
+
+    &:hover {
+      --bg-img: url(../assets/icons/instagram-hover.svg);
+    }
+  }
+
+  &[aria-label='twitter'] {
+    --bg-img: url(../assets/icons/twitter.svg);
+
+    &:hover {
+      --bg-img: url(../assets/icons/twitter-hover.svg);
+    }
+  }
+
+  &[aria-label='discord'] {
+    --bg-img: url(../assets/icons/discord.svg);
+
+    &:hover {
+      --bg-img: url(../assets/icons/discord-hover.svg);
+    }
+  }
+}