Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-05 15:54:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: color link background to ~average of icon color

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
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">

BIN
static/assets/fur-affinity.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

4
static/assets/fur-affinity.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M22.427 6.844l-0.344 2.656 3.245 0.958 0.042 2.865 2.974 0.057-0.073 3.005 2.891-0.188c0.005-1.010 0.068-6.724 0.839-9.354zM15.141 24.318c0.073-0.281 0-1.203 0-1.526l-0.063-1.948c-2.698-0.115-5.604 0.427-5.604 2.911 0 0.542 0.229 1.026 0.568 1.401h4.417c0.333-0.188 0.578-0.448 0.682-0.839zM27.188 17.422l0.068-2.995-2.938-0.057-0.047-3.229-3.37-1.151 0.453-3.146h-12.573c-5.094 0-8.781 4.339-8.781 9.089v9.224h5.49c-0.036-0.333-0.047-0.672-0.031-1.005 0.198-4.891 5.599-5.729 9.656-5.609v-1.406c-0.068-1.135-0.99-2.141-3.656-2.141-1.776 0-3.885 0.229-5.25 0.724l0.359-3.182c1.307-0.365 2.776-0.724 5.938-0.724 6.099 0 6.771 2.703 6.724 5.844l-0.031 7.5h3.307v-0.005l0.125 0.005c4.406 0 8.031-3.589 8.484-7.891z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 956 B

90
static/tailwind.css
View file

@ -989,6 +989,96 @@ video {
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.bg-\[\#615141\] {
--tw-bg-opacity: 1;
background-color: rgb(97 81 65 / var(--tw-bg-opacity));
}
.bg-\[\#353231\] {
--tw-bg-opacity: 1;
background-color: rgb(53 50 49 / var(--tw-bg-opacity));
}
.bg-\[\#05539f\] {
--tw-bg-opacity: 1;
background-color: rgb(5 83 159 / var(--tw-bg-opacity));
}
.bg-\[\#2684f0\] {
--tw-bg-opacity: 1;
background-color: rgb(38 132 240 / var(--tw-bg-opacity));
}
.bg-\[\#3b79a7\] {
--tw-bg-opacity: 1;
background-color: rgb(59 121 167 / var(--tw-bg-opacity));
}
.bg-\[\#4786bc\] {
--tw-bg-opacity: 1;
background-color: rgb(71 134 188 / var(--tw-bg-opacity));
}
.bg-\[\#3c72a1\] {
--tw-bg-opacity: 1;
background-color: rgb(60 114 161 / var(--tw-bg-opacity));
}
.bg-\[\#e4b76f\] {
--tw-bg-opacity: 1;
background-color: rgb(228 183 111 / var(--tw-bg-opacity));
}
.bg-\[\#715b38\] {
--tw-bg-opacity: 1;
background-color: rgb(113 91 56 / var(--tw-bg-opacity));
}
.bg-\[\#2174d3\] {
--tw-bg-opacity: 1;
background-color: rgb(33 116 211 / var(--tw-bg-opacity));
}
.bg-\[\#1f6cc5\] {
--tw-bg-opacity: 1;
background-color: rgb(31 108 197 / var(--tw-bg-opacity));
}
.bg-\[\#3e47ab\] {
--tw-bg-opacity: 1;
background-color: rgb(62 71 171 / var(--tw-bg-opacity));
}
.bg-\[\#368bb6\] {
--tw-bg-opacity: 1;
background-color: rgb(54 139 182 / var(--tw-bg-opacity));
}
.bg-\[\#38419b\] {
--tw-bg-opacity: 1;
background-color: rgb(56 65 155 / var(--tw-bg-opacity));
}
.bg-\[\#323a8b\] {
--tw-bg-opacity: 1;
background-color: rgb(50 58 139 / var(--tw-bg-opacity));
}
.bg-\[\#2d347e\] {
--tw-bg-opacity: 1;
background-color: rgb(45 52 126 / var(--tw-bg-opacity));
}
.bg-\[\#3281a8\] {
--tw-bg-opacity: 1;
background-color: rgb(50 129 168 / var(--tw-bg-opacity));
}
.bg-\[\#2f7ca3\] {
--tw-bg-opacity: 1;
background-color: rgb(47 124 163 / var(--tw-bg-opacity));
}
.bg-opacity-40 {
--tw-bg-opacity: 0.4;
}