Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-08 09:14:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make bigger text for links subtext

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-15 15:10:26 +05:00
parent 916733218b
commit e9b5dc4dc4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 100 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
index.html
View file

@ -81,89 +81,110 @@
<p>Feel free to reach out anytime! I will be happy to chat.</p> <p>Feel free to reach out anytime! I will be happy to chat.</p>
</div> </div>
</div> </div>
<div class="container h-screen mx-auto text-white scroll-mt-40" id="section_links"> <div class="flex flex-col items-center justify-center p-8 text-white scroll-mt-24" id="section_links">
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1> <h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1>
<div class="flex gap-8 mx-8"> <div class="flex items-start justify-center gap-8">
<div class="flex flex-col gap-4"> <!-- Photo Links -->
<div class="relative w-[356px] h-[304px] flex justify-end items-end"> <div class="flex flex-col w-[416px] gap-4">
<img class="absolute inset-0 w-[356px] h-[304px] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/> <div class="relative w-[416px] aspect-[342/288] flex justify-end items-end">
<img class="absolute inset-0 w-[416px] aspect-[342/288] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/>
<p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p> <p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4">
<a href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin"> <a href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" /> <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="font-medium text-[24px] leading-[1]">pixey.org</p> <p class="font-medium text-[24px] leading-[1]">pixey.org</p>
<p class="font-light text-[12px] leading-[1]">See the photos like in instagram</p> <p class="font-light text-[14px] leading-[1]">See the photos like in instagram</p>
</div> </div>
</div> </div>
</a> </a>
<a href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin"> <a href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" /> <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="font-medium text-[24px] leading-[1]">instafops.net</p> <p class="font-medium text-[24px] leading-[1]">instafops.net</p>
<p class="font-light text-[12px] leading-[1]">Photos that more furry related</p> <p class="font-light text-[14px] leading-[1]">Photos that more furry related</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<a href="https://wah.su/photos" target="_blank" referrerpolicy="origin"> <a href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[356px] h-[150px] p-2 flex justify-around items-center"> <div class="bg-white text-black w-[416px] h-[180px] p-2 flex justify-around items-center">
<img class="w-20 h-20" alt="" src="./static/assets/immich.png" /> <img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="font-medium text-[24px] leading-[1]">wah.su/photos</p> <p class="font-medium text-[24px] leading-[1]">wah.su/photos</p>
<p class="font-light text-[12px] leading-[1]">View gallery like in google photos</p> <p class="font-light text-[14px] leading-[1]">View gallery like in google photos</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="flex flex-col gap-4"> <!-- Social Media Links -->
<div class="relative w-[356px] h-[150px] flex justify-end items-end bg-bg-blue"> <div class="flex flex-col w-[416px] gap-4">
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-blue">
<p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p> <p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p>
</div> </div>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<a href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin"> <a href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--mastodon-icon.svg" /> <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--mastodon-icon.svg" />
<div class="flex flex-col justify-end gap-1"> <div class="flex flex-col justify-end gap-1">
<p class="font-medium text-[24px] leading-[1]">Mastodon</p> <p class="font-medium text-[24px] leading-[1]">Mastodon</p>
<p class="font-light text-[12px] leading-[1]">@radiquum@furry.engineer</p> <p class="font-light text-[14px] leading-[1]">@radiquum@furry.engineer</p>
</div> </div>
</div> </div>
</a> </a>
<a href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin"> <a href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" /> <img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="font-medium text-[24px] leading-[1]">Bluesky</p> <p class="font-medium text-[24px] leading-[1]">Bluesky</p>
<p class="font-light text-[12px] leading-[1]">@radiquum.wah.su</p> <p class="font-light text-[14px] leading-[1]">@radiquum.wah.su</p>
</div> </div>
</div> </div>
</a> </a>
</div>
<div class="flex flex-wrap gap-4">
<a href="https://x.com/radiquum" target="_blank" referrerpolicy="origin"> <a href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" /> <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" />
<div class="flex flex-col justify-end gap-1"> <div class="flex flex-col justify-end gap-1">
<p class="font-medium text-[24px] leading-[1]">Twitter</p> <p class="font-medium text-[24px] leading-[1]">Twitter</p>
<p class="font-light text-[12px] leading-[1]">@radiquum</p> <p class="font-light text-[14px] leading-[1]">@radiquum</p>
</div> </div>
</div> </div>
</a> </a>
<a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin"> <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
<div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around"> <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
<img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" /> <img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="font-medium text-[24px] leading-[1]">VKontakte</p> <p class="font-medium text-[24px] leading-[1]">VKontakte</p>
<p class="font-light text-[12px] leading-[1]">radiquum</p> <p class="font-light text-[14px] leading-[1]">radiquum</p>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<!-- Projects Links -->
<div class="flex flex-col w-[416px] gap-4">
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
<p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
</div>
</div>
<!-- Contact and Friends links Links -->
<div class="flex flex-col w-[416px] gap-8">
<!-- Contact Links -->
<div class="flex flex-col gap-4">
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
<p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
</div>
</div>
<!-- Friends Links -->
<div class="flex flex-col gap-4">
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
<p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<script src="./static/script.js"></script> <script src="./static/script.js"></script>

55
static/tailwind.css
View file

@ -644,6 +644,11 @@ video {
margin-right: 2rem; margin-right: 2rem;
} }
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mb-12 { .mb-12 {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
@ -672,10 +677,18 @@ video {
margin-top: 8rem; margin-top: 8rem;
} }
.mt-14 {
margin-top: 3.5rem;
}
.flex { .flex {
display: flex; display: flex;
} }
.aspect-\[342\/288\] {
aspect-ratio: 342/288;
}
.h-\[37px\] { .h-\[37px\] {
height: 37px; height: 37px;
} }
@ -736,6 +749,14 @@ video {
height: 3.5rem; height: 3.5rem;
} }
.h-\[180px\] {
height: 180px;
}
.h-\[416px\] {
height: 416px;
}
.max-h-\[40vh\] { .max-h-\[40vh\] {
max-height: 40vh; max-height: 40vh;
} }
@ -832,6 +853,27 @@ video {
width: 3.5rem; width: 3.5rem;
} }
.w-\[386px\] {
width: 386px;
}
.w-\[390px\] {
width: 390px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[416px\] {
width: 416px;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.max-w-\[1200px\] { .max-w-\[1200px\] {
max-width: 1200px; max-width: 1200px;
} }
@ -864,6 +906,10 @@ video {
scroll-margin-top: 10rem; scroll-margin-top: 10rem;
} }
.scroll-mt-24 {
scroll-margin-top: 6rem;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -974,6 +1020,11 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.object-cover { .object-cover {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
@ -995,6 +1046,10 @@ video {
padding: 0.25rem; padding: 0.25rem;
} }
.p-4 {
padding: 1rem;
}
.px-4 { .px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;