rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added shadows to icons

Browse source
This commit is contained in:
liyunze 2024-06-09 18:15:47 +08:00
parent 4582d822d7
commit b0bed78d05
1 changed files with 94 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/pages/socials.astro
View file

@ -40,6 +40,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</div> </div>
<!-- Website -->
<a href="https://rython.dev/" target="_blank"> <a href="https://rython.dev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -64,21 +65,26 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="website-icon" class="icon-box">
<svg <svg
fill="#fff"
width="48px"
height="48px"
viewBox="0 0 32 32"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" ><g id="SVGRepo_bgCarrier" stroke-width="0"
viewBox="0 0 24 24" ></g><g
stroke-width="1.5" id="SVGRepo_tracerCarrier"
stroke="currentColor" stroke-linecap="round"
class="size-12" stroke-linejoin="round"></g><g
id="SVGRepo_iconCarrier"
> >
<path <path
stroke-linecap="round" 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"
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> ></path>
</svg> </g></svg
>
</div> </div>
<div> <div>
<h2 class="font-bold text-xl">Website</h2> <h2 class="font-bold text-xl">Website</h2>
@ -87,6 +93,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Twitch -->
<a href="https://twitch.tv/RythonDev/" target="_blank"> <a href="https://twitch.tv/RythonDev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -111,7 +118,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="twitch-icon" class="icon-box">
<svg <svg
width="48" width="48"
height="48" height="48"
@ -142,6 +149,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- YouTube -->
<a href="https://youtube.com/@RythonDev/" target="_blank"> <a href="https://youtube.com/@RythonDev/" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -166,7 +174,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="youtube-icon" class="icon-box">
<svg <svg
width="48" width="48"
height="48" height="48"
@ -191,7 +199,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Instagram -->
<a href="https://instagram.com/@RythonDev" target="_blank"> <a href="https://instagram.com/@RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -216,7 +224,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="instagram-icon" class="icon-box">
<svg <svg
width="48" width="48"
height="48" height="48"
@ -271,6 +279,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Twitter -->
<a href="https://github.com/liyunze-coding" target="_blank"> <a href="https://github.com/liyunze-coding" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -295,7 +304,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="github-icon" class="icon-box">
<svg <svg
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -317,6 +326,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Codepen -->
<a href="https://codepen.io/RythonDev" target="_blank"> <a href="https://codepen.io/RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -341,7 +351,10 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div
id="codepen-icon"
class="icon-box w-12 h-12 rounded-full"
>
<svg <svg
version="1.1" version="1.1"
id="Capa_1" id="Capa_1"
@ -349,11 +362,11 @@ import Layout from "../layouts/Layout.astro";
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" x="0px"
y="0px" y="0px"
width="40px" width="32px"
height="40px" height="32px"
viewBox="0 0 31.665 31.665" viewBox="0 0 31.665 31.665"
fill="#fff" fill="#fff"
style="enable-background:new 0 0 31.665 31.665;" style="0 0 31.665 31.665;"
xml:space="preserve" xml:space="preserve"
> >
<g> <g>
@ -378,6 +391,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Location -->
<div class="social-card col-span-2"> <div class="social-card col-span-2">
<div <div
class="social-card-content flex flex-col justify-center items-start gap-5" 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> </div>
</div> </div>
<!-- Ko-fi -->
<a href="https://ko-fi.com/rython" target="_blank"> <a href="https://ko-fi.com/rython" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -465,7 +480,8 @@ import Layout from "../layouts/Layout.astro";
</svg> </svg>
</div> </div>
<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 <img
src="/images/socials/kofi_s_logo_nolabel.webp" src="/images/socials/kofi_s_logo_nolabel.webp"
@ -481,6 +497,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Discord -->
<a href="https://rython.dev/discord" target="_blank"> <a href="https://rython.dev/discord" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -505,7 +522,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="discord-icon" class="icon-box">
<svg <svg
width="48px" width="48px"
height="48px" height="48px"
@ -537,7 +554,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Twitter -->
<a href="https://twitter.com/@RythonDev" target="_blank"> <a href="https://twitter.com/@RythonDev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -562,7 +579,7 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="twitter-icon" class="icon-box">
<svg <svg
width="48px" width="48px"
height="48px" height="48px"
@ -592,7 +609,7 @@ import Layout from "../layouts/Layout.astro";
</div> </div>
</div> </div>
</a> </a>
<!-- Threads -->
<a href="https://www.threads.net/@rythondev" target="_blank"> <a href="https://www.threads.net/@rythondev" target="_blank">
<div class="social-card"> <div class="social-card">
<div <div
@ -617,13 +634,13 @@ import Layout from "../layouts/Layout.astro";
fill="#fff"></path> fill="#fff"></path>
</svg> </svg>
</div> </div>
<div> <div id="threads-icon" class="icon-box w-12 h-12">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-label="Threads" aria-label="Threads"
viewBox="0 0 192 192" viewBox="0 0 192 192"
width="40px" width="32px"
height="40px" height="32px"
fill="#fff" fill="#fff"
><path ><path
class="x19hqcy" class="x19hqcy"
@ -653,7 +670,6 @@ import Layout from "../layouts/Layout.astro";
</Layout> </Layout>
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
:root { :root {
--bg-color: rgb(20, 20, 20); --bg-color: rgb(20, 20, 20);
--card-color: rgb(23, 23, 23); --card-color: rgb(23, 23, 23);
@ -730,6 +746,54 @@ import Layout from "../layouts/Layout.astro";
padding: 1.75rem; padding: 1.75rem;
z-index: 3; 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> </style>
<script is:inline> <script is:inline>
const MY_TIMEZONE = "Asia/Kuala_Lumpur"; const MY_TIMEZONE = "Asia/Kuala_Lumpur";