feat: color link background to ~average of icon color

This commit is contained in:
Kentai Radiquum 2024-11-24 22:07:31 +05:00
parent acb8dd1425
commit 437b863e92
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 103 additions and 17 deletions

View file

@ -273,7 +273,7 @@
</div>
<a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#353231]">
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">pixey.org</p>
@ -283,7 +283,7 @@
</a>
<a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#353231]">
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">instafops.net</p>
@ -293,7 +293,7 @@
</a>
<a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-black bg-white">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#615141]">
<img class="w-16 h-16" alt="" src="./static/assets/immich.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">wah.su/photos</p>
@ -314,7 +314,7 @@
</div>
<a class="hover:border-bg-blue w-full aspect-[2/1] border-transparent border-2 border-solid transition-[border-color] max-h-[182px] overflow-hidden rounded-lg"
href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-black bg-white">
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#3c72a1]">
<img class="object-contain w-16 h-16" alt=""
src="./static/assets/logos--mastodon-icon.svg" />
<div class="flex flex-col gap-1">
@ -325,7 +325,7 @@
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#05539f]">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/Bluesky_Logo.png" />
<div class="flex flex-col gap-1">
@ -336,7 +336,7 @@
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#3b79a7]">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/logos--twitter.svg" />
<div class="flex flex-col justify-end gap-1">
@ -347,7 +347,7 @@
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#1f6cc5]">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">VKontakte</p>
@ -357,9 +357,9 @@
</a>
<a class="hover:border-bg-blue aspect-square w-[170px] xs:[flex-grow:1] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://furaffinity.net/user/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#715b38]">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/fur-affinity.svg" />
src="./static/assets/fur-affinity.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium ">Furaffinity</p>
<p class="text-base font-light ">radiquum</p>
@ -460,7 +460,7 @@
</div>
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2f7ca3]">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/Telegram.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Telegram</p>
@ -470,7 +470,7 @@
</a>
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/matrix-favicon.svg" />
<div class="flex flex-col gap-1">
@ -482,7 +482,7 @@
</a>
<a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#1f6cc5]">
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">VK</p>
@ -492,7 +492,7 @@
</a>
<a class="w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
target="_blank" referrerpolicy="origin">
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white sm:px-4">
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2d347e]">
<img class="object-contain w-16 h-16 mx-auto" alt=""
src="./static/assets/discord-mark-blue.png" />
<div class="flex flex-col gap-1">