From b0bed78d054b69f9df84e49c9e9ffdb1bb8e8231 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sun, 9 Jun 2024 18:15:47 +0800
Subject: [PATCH] added shadows to icons

---
 src/pages/socials.astro | 124 ++++++++++++++++++++++++++++++----------
 1 file changed, 94 insertions(+), 30 deletions(-)

diff --git a/src/pages/socials.astro b/src/pages/socials.astro
index 787709c..9618b75 100644
--- a/src/pages/socials.astro
+++ b/src/pages/socials.astro
@@ -40,6 +40,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</div>
+			<!-- Website -->
 			<a href="https://rython.dev/" target="_blank">
 				<div class="social-card">
 					<div
@@ -64,21 +65,26 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="website-icon" class="icon-box">
 							<svg
+								fill="#fff"
+								width="48px"
+								height="48px"
+								viewBox="0 0 32 32"
+								version="1.1"
 								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="size-12"
-							>
-								<path
+								><g id="SVGRepo_bgCarrier" stroke-width="0"
+								></g><g
+									id="SVGRepo_tracerCarrier"
 									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
-								></path>
-							</svg>
+									stroke-linejoin="round"></g><g
+									id="SVGRepo_iconCarrier"
+								>
+									<path
+										d="M32.032 16c0-8.501-6.677-15.472-15.072-15.969-0.173-0.019-0.346-0.032-0.523-0.032-0.052 0-0.104 0.005-0.156 0.007-0.093-0.002-0.186-0.007-0.281-0.007-8.84 0-16.032 7.178-16.032 16.001s7.192 16.001 16.032 16.001c0.094 0 0.188-0.006 0.281-0.008 0.052 0.002 0.104 0.008 0.156 0.008 0.176 0 0.349-0.012 0.523-0.032 8.395-0.497 15.072-7.468 15.072-15.969zM29.049 21.151c-0.551-0.16-1.935-0.507-4.377-0.794 0.202-1.381 0.313-2.84 0.313-4.357 0-1.196-0.069-2.354-0.197-3.469 3.094-0.37 4.45-0.835 4.54-0.867l-0.372-1.050c0.695 1.659 1.080 3.478 1.080 5.386 0 1.818-0.352 3.555-0.987 5.151zM8.921 16c0-1.119 0.074-2.212 0.21-3.263 1.621 0.127 3.561 0.222 5.839 0.243v6.939c-2.219 0.021-4.114 0.111-5.709 0.234-0.22-1.319-0.34-2.715-0.34-4.154zM16.967 2.132c2.452 0.711 4.552 4.115 5.492 8.628-1.512 0.12-3.332 0.209-5.492 0.229v-8.857zM14.971 2.156v8.832c-2.136-0.021-3.965-0.109-5.502-0.226 0.96-4.457 3.076-7.836 5.502-8.606zM14.971 21.913l0 7.929c-2.263-0.718-4.256-3.705-5.293-7.719 1.492-0.11 3.253-0.189 5.292-0.21zM16.967 29.868l-0-7.955c2.061 0.020 3.814 0.102 5.288 0.217-1.019 4.067-3 7.076-5.288 7.738zM16.967 19.92l0-6.939c2.291-0.021 4.218-0.118 5.818-0.25 0.131 1.053 0.203 2.147 0.203 3.268 0 1.442-0.116 2.84-0.329 4.16-1.575-0.128-3.462-0.219-5.692-0.24zM28.588 9.81c-0.302 0.094-1.564 0.453-4.094 0.751-0.564-2.998-1.584-5.561-2.91-7.412 3.048 1.325 5.535 3.697 7.005 6.661zM11.213 2.831c-1.632 1.873-2.963 4.568-3.691 7.754-2.265-0.245-3.623-0.534-4.166-0.665 1.585-3.27 4.407-5.836 7.856-7.088zM2.614 11.787c0.385 0.104 1.841 0.467 4.549 0.766-0.155 1.107-0.24 2.26-0.24 3.447 0 1.509 0.136 2.96 0.383 4.334-2.325 0.251-3.755 0.552-4.396 0.706-0.607-1.566-0.944-3.264-0.944-5.041 0-1.467 0.228-2.883 0.649-4.213zM3.784 22.886c0.727-0.154 2.029-0.39 3.956-0.591 0.759 2.803 1.993 5.175 3.473 6.874-3.16-1.148-5.79-3.398-7.429-6.282v0zM21.583 28.849c1.195-1.665 2.14-3.907 2.728-6.525 1.982 0.227 3.226 0.494 3.853 0.652-1.5 2.596-3.808 4.669-6.581 5.873z"
+									></path>
+								</g></svg
+							>
 						</div>
 						<div>
 							<h2 class="font-bold text-xl">Website</h2>
@@ -87,6 +93,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- Twitch -->
 			<a href="https://twitch.tv/RythonDev/" target="_blank">
 				<div class="social-card">
 					<div
@@ -111,7 +118,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="twitch-icon" class="icon-box">
 							<svg
 								width="48"
 								height="48"
@@ -142,6 +149,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- YouTube -->
 			<a href="https://youtube.com/@RythonDev/" target="_blank">
 				<div class="social-card">
 					<div
@@ -166,7 +174,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="youtube-icon" class="icon-box">
 							<svg
 								width="48"
 								height="48"
@@ -191,7 +199,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
-
+			<!-- Instagram -->
 			<a href="https://instagram.com/@RythonDev" target="_blank">
 				<div class="social-card">
 					<div
@@ -216,7 +224,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="instagram-icon" class="icon-box">
 							<svg
 								width="48"
 								height="48"
@@ -271,6 +279,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- Twitter -->
 			<a href="https://github.com/liyunze-coding" target="_blank">
 				<div class="social-card">
 					<div
@@ -295,7 +304,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="github-icon" class="icon-box">
 							<svg
 								version="1.1"
 								xmlns="http://www.w3.org/2000/svg"
@@ -317,6 +326,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- Codepen -->
 			<a href="https://codepen.io/RythonDev" target="_blank">
 				<div class="social-card">
 					<div
@@ -341,7 +351,10 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div
+							id="codepen-icon"
+							class="icon-box w-12 h-12 rounded-full"
+						>
 							<svg
 								version="1.1"
 								id="Capa_1"
@@ -349,11 +362,11 @@ import Layout from "../layouts/Layout.astro";
 								xmlns:xlink="http://www.w3.org/1999/xlink"
 								x="0px"
 								y="0px"
-								width="40px"
-								height="40px"
+								width="32px"
+								height="32px"
 								viewBox="0 0 31.665 31.665"
 								fill="#fff"
-								style="enable-background:new 0 0 31.665 31.665;"
+								style="0 0 31.665 31.665;"
 								xml:space="preserve"
 							>
 								<g>
@@ -378,6 +391,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- Location -->
 			<div class="social-card col-span-2">
 				<div
 					class="social-card-content flex flex-col justify-center items-start gap-5"
@@ -440,6 +454,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</div>
+			<!-- Ko-fi -->
 			<a href="https://ko-fi.com/rython" target="_blank">
 				<div class="social-card">
 					<div
@@ -465,7 +480,8 @@ import Layout from "../layouts/Layout.astro";
 							</svg>
 						</div>
 						<div
-							class="w-12 h-12 aspect-square rounded-full bg-[#00BCF2] flex justify-center items-center"
+							id="kofi-icon"
+							class="icon-box w-12 h-12 aspect-square rounded-full bg-[#00BCF2] flex justify-center items-center"
 						>
 							<img
 								src="/images/socials/kofi_s_logo_nolabel.webp"
@@ -481,6 +497,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
+			<!-- Discord -->
 			<a href="https://rython.dev/discord" target="_blank">
 				<div class="social-card">
 					<div
@@ -505,7 +522,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="discord-icon" class="icon-box">
 							<svg
 								width="48px"
 								height="48px"
@@ -537,7 +554,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
-
+			<!-- Twitter -->
 			<a href="https://twitter.com/@RythonDev" target="_blank">
 				<div class="social-card">
 					<div
@@ -562,7 +579,7 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="twitter-icon" class="icon-box">
 							<svg
 								width="48px"
 								height="48px"
@@ -592,7 +609,7 @@ import Layout from "../layouts/Layout.astro";
 					</div>
 				</div>
 			</a>
-
+			<!-- Threads -->
 			<a href="https://www.threads.net/@rythondev" target="_blank">
 				<div class="social-card">
 					<div
@@ -617,13 +634,13 @@ import Layout from "../layouts/Layout.astro";
 									fill="#fff"></path>
 							</svg>
 						</div>
-						<div>
+						<div id="threads-icon" class="icon-box w-12 h-12">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								aria-label="Threads"
 								viewBox="0 0 192 192"
-								width="40px"
-								height="40px"
+								width="32px"
+								height="32px"
 								fill="#fff"
 								><path
 									class="x19hqcy"
@@ -653,7 +670,6 @@ import Layout from "../layouts/Layout.astro";
 </Layout>
 
 <style>
-	@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
 	:root {
 		--bg-color: rgb(20, 20, 20);
 		--card-color: rgb(23, 23, 23);
@@ -730,6 +746,54 @@ import Layout from "../layouts/Layout.astro";
 		padding: 1.75rem;
 		z-index: 3;
 	}
+
+	.icon-box {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.icon-box::before {
+		content: "";
+		z-index: 2;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		border-radius: 999px;
+		--box-shadow-values: 0px 0px 20px 2px;
+	}
+
+	#website-icon::before,
+	#github-icon::before,
+	#codepen-icon::before,
+	#threads-icon::before {
+		box-shadow: var(--box-shadow-values) #888;
+	}
+
+	#twitch-icon::before {
+		box-shadow: var(--box-shadow-values) #8c44f7;
+	}
+
+	#youtube-icon::before {
+		box-shadow: var(--box-shadow-values) #ff0000;
+	}
+
+	#instagram-icon::before {
+		box-shadow: var(--box-shadow-values) #f56040;
+	}
+
+	#kofi-icon::before {
+		box-shadow: var(--box-shadow-values) #00bcf2;
+	}
+
+	#discord-icon::before {
+		box-shadow: var(--box-shadow-values) #5865f2;
+	}
+
+	#twitter-icon::before {
+		box-shadow: var(--box-shadow-values) #2daae1;
+	}
 </style>
 <script is:inline>
 	const MY_TIMEZONE = "Asia/Kuala_Lumpur";