refactor: move collections & friends back to 4th column

This commit is contained in:
Kentai Radiquum 2024-11-24 21:53:13 +05:00
parent 6be363d8a3
commit acb8dd1425
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 98 additions and 196 deletions

View file

@ -34,7 +34,8 @@
</head> </head>
<body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black"> <body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black">
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink rounded-b-lg" <header
class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink rounded-b-lg"
id="header"> id="header">
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between"> <div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
<a href="#landing"> <a href="#landing">
@ -53,7 +54,8 @@
<div class="absolute w-full h-full bg-bg-pink -z-10 max-w-[50vw] right-0 top-0 max-h-[50vh] hidden md:block"></div> <div class="absolute w-full h-full bg-bg-pink -z-10 max-w-[50vw] right-0 top-0 max-h-[50vh] hidden md:block"></div>
<div class="absolute w-full h-full bg-bg-gray -z-10 left-0 bottom-0 max-h-[50vh] hidden md:block"> <div class="absolute w-full h-full bg-bg-gray -z-10 left-0 bottom-0 max-h-[50vh] hidden md:block">
</div> </div>
<div class="container flex flex-col min-h-screen gap-2 py-8 mx-auto my-4 overflow-hidden rounded-lg sm:mt-0 bg-bg-gray md:bg-transparent md:rounded-none" id="landing"> <div class="container flex flex-col min-h-screen gap-2 py-8 mx-auto my-4 overflow-hidden rounded-lg sm:mt-0 bg-bg-gray md:bg-transparent md:rounded-none"
id="landing">
<div class="flex flex-row flex-wrap items-center justify-center gap-8 md:min-h-[50vh] order-1"> <div class="flex flex-row flex-wrap items-center justify-center gap-8 md:min-h-[50vh] order-1">
<div> <div>
@ -126,9 +128,9 @@
<p class="text-4xl font-bold">Photographer</p> <p class="text-4xl font-bold">Photographer</p>
</div> </div>
<div class="flex justify-center px-8 py-4 bg-yellow-500 bg-opacity-40"> <div class="flex justify-center px-8 py-4 bg-yellow-500 bg-opacity-40">
<p class="text-lg font-light">Im also getting into <a <p class="text-lg font-light">Im also getting into <a class="text-bg-pink hover:underline"
class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank" href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and
referrerpolicy="origin">photography</a> and excited to share my progress.</p> excited to share my progress.</p>
</div> </div>
</div> </div>
</div> </div>
@ -229,7 +231,7 @@
<div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-blue"> <div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-blue">
<p class="text-lg font-light">Feel free to reach out anytime! Ways to contact me via <p class="text-lg font-light">Feel free to reach out anytime! Ways to contact me via
instant messengers are available in <a class="text-bg-pink hover:underline" instant messengers are available in <a class="text-bg-pink hover:underline"
href="#section_links">links</a> section!</p> href="#links">links</a> section!</p>
</div> </div>
</div> </div>
</div> </div>
@ -244,7 +246,8 @@
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-wrap w-full gap-1"> <div class="flex flex-wrap w-full gap-1">
<div class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-square"> <div
class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-square">
<div class="relative flex items-end justify-end w-full h-full overflow-hidden" <div class="relative flex items-end justify-end w-full h-full overflow-hidden"
id="photos-image"> id="photos-image">
<img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]" <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
@ -303,7 +306,8 @@
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-wrap w-full gap-1"> <div class="flex flex-wrap w-full gap-1">
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg"> <div
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
<div class="flex items-end justify-end w-full h-full bg-bg-blue"> <div class="flex items-end justify-end w-full h-full bg-bg-blue">
<p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p> <p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
</div> </div>
@ -367,7 +371,8 @@
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-wrap w-full gap-1"> <div class="flex flex-wrap w-full gap-1">
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg"> <div
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
<div class="flex items-end justify-end w-full h-full bg-black"> <div class="flex items-end justify-end w-full h-full bg-black">
<p class="font-bold text-4xl p-[8px]">PROJECTS</p> <p class="font-bold text-4xl p-[8px]">PROJECTS</p>
</div> </div>
@ -386,10 +391,10 @@
<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" <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://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin"> href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
<div <div
class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden"> class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden -z-20">
<img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]" <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px] -z-10"
alt="" src="./static/assets/TG_Photos.png" /> alt="" src="./static/assets/TG_Photos.png" />
<div class="z-10 flex flex-col justify-end h-full gap-1"> <div class="flex flex-col justify-end h-full gap-1">
<p class="text-2xl font-medium">TG-Photos</p> <p class="text-2xl font-medium">TG-Photos</p>
<p class="text-base font-light">Telegram bot to use telegram as a Google <p class="text-base font-light">Telegram bot to use telegram as a Google
Photo alternative</p> Photo alternative</p>
@ -447,7 +452,8 @@
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-wrap w-full gap-1"> <div class="flex flex-wrap w-full gap-1">
<div class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg"> <div
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
<div class="flex items-end justify-end w-full h-full bg-bg-pink"> <div class="flex items-end justify-end w-full h-full bg-bg-pink">
<p class="font-bold text-4xl p-[8px]">CONTACT</p> <p class="font-bold text-4xl p-[8px]">CONTACT</p>
</div> </div>
@ -496,72 +502,64 @@
</div> </div>
</a> </a>
</div> </div>
</div> <div class="flex flex-wrap w-full gap-1">
</div> <div class="flex flex-col gap-4">
<div
<div class="grid w-full gap-1 mt-4 grid-cols-fluid"> class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
<div class="flex flex-col gap-4"> <div class="flex items-end justify-end w-full h-full bg-orange-400">
<div class="aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg"> <p class="font-bold text-4xl p-[8px] text-right">COLLECTIONS & FRIENDS</p>
<div class="flex items-end justify-end w-full h-full bg-orange-400"> </div>
<p class="font-bold text-4xl p-[8px]">COLLECTIONS & FRIENDS</p> </div>
</div> </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/red_panda_stickers" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Red Pandas Stickers</p>
<p class="text-base font-light">Telegram channel with red panda
sticker packs</p>
</div>
</div>
</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://wahs.wah.su" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Red Panda Images</p>
<p class="text-base font-light">3000+ Photos and Videos of a red pandas</p>
</div>
</div>
</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/blepstash" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">blep stash</p>
<p class="text-base font-light">VK Group of a photographer.
City and
Trains photography</p>
</div>
</div>
</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://github.com/itc1205" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">itc1205</p>
<p class="text-base font-light">Github profile of another furry
programmer</p>
</div>
</div>
</a>
</div> </div>
</div> </div>
<div class="flex flex-col gap-4">
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Red Pandas Stickers</p>
<p class="text-base font-light">Telegram channel with red panda
sticker packs</p>
</div>
</div>
</a>
</div>
<div class="flex flex-col gap-4">
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">Red Panda Images</p>
<p class="text-base font-light">Collection with 3000+ Photos
and
Videos of a red pandas</p>
</div>
</div>
</a>
</div>
<div class="flex flex-col gap-4">
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">blep stash</p>
<p class="text-base font-light">VK Group of a photographer.
City and
Trains photography</p>
</div>
</div>
</a>
</div>
<div class="flex flex-col gap-4">
<a class="hover:border-bg-blue [flex-grow:1] aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
<div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
<div class="flex flex-col gap-1">
<p class="text-2xl font-medium">itc1205</p>
<p class="text-base font-light">Github profile of another furry
programmer</p>
</div>
</div>
</a>
</div>
</div> </div>
</div> </div>
<script src="./static/script.js"></script> <script src="./static/script.js"></script>
</body> </body>

View file

@ -682,16 +682,6 @@ video {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.-mt-4 { .-mt-4 {
margin-top: -1rem; margin-top: -1rem;
} }
@ -712,18 +702,6 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.-mt-\[128px\] {
margin-top: -128px;
}
.-mt-\[64px\] {
margin-top: -64px;
}
.-mt-\[60px\] {
margin-top: -60px;
}
.block { .block {
display: block; display: block;
} }
@ -853,10 +831,6 @@ video {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} }
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-row { .flex-row {
flex-direction: row; flex-direction: row;
} }
@ -930,18 +904,14 @@ video {
border-radius: 1.5rem; border-radius: 1.5rem;
} }
.rounded { .rounded-lg {
border-radius: 0.25rem; border-radius: 0.5rem;
} }
.rounded-md { .rounded-md {
border-radius: 0.375rem; border-radius: 0.375rem;
} }
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-b-lg { .rounded-b-lg {
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
@ -1045,18 +1015,14 @@ video {
padding: 1rem; padding: 1rem;
} }
.p-\[16px\] { .p-8 {
padding: 16px; padding: 2rem;
} }
.p-\[8px\] { .p-\[8px\] {
padding: 8px; padding: 8px;
} }
.p-8 {
padding: 2rem;
}
.px-2 { .px-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@ -1067,6 +1033,11 @@ video {
padding-right: 1rem; padding-right: 1rem;
} }
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-2 { .py-2 {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@ -1077,11 +1048,6 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-8 { .py-8 {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
@ -1091,6 +1057,10 @@ video {
text-align: center; text-align: center;
} }
.text-right {
text-align: right;
}
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
@ -1111,13 +1081,13 @@ video {
line-height: 1.5rem; line-height: 1.5rem;
} }
.text-xl { .text-lg {
font-size: 1.25rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.text-lg { .text-xl {
font-size: 1.125rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
@ -1203,10 +1173,6 @@ video {
flex-grow: 1; flex-grow: 1;
} }
.\[grid-column\:span_2\] {
grid-column: span 2;
}
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
@ -1297,34 +1263,14 @@ body {
top: -6rem; top: -6rem;
} }
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:-mt-\[64px\] {
margin-top: -64px;
}
.sm\:-mt-\[68px\] {
margin-top: -68px;
}
.sm\:-mt-\[96px\] {
margin-top: -96px;
}
.sm\:-mt-\[90px\] {
margin-top: -90px;
}
.sm\:-mt-\[88px\] {
margin-top: -88px;
}
.sm\:-mt-\[86px\] { .sm\:-mt-\[86px\] {
margin-top: -86px; margin-top: -86px;
} }
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:block { .sm\:block {
display: block; display: block;
} }
@ -1333,14 +1279,6 @@ body {
display: none; display: none;
} }
.sm\:h-\[120px\] {
height: 120px;
}
.sm\:min-h-\[196px\] {
min-height: 196px;
}
.sm\:w-\[200px\] { .sm\:w-\[200px\] {
width: 200px; width: 200px;
} }
@ -1390,19 +1328,10 @@ body {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.sm\:pt-0 {
padding-top: 0px;
}
.sm\:text-right { .sm\:text-right {
text-align: right; text-align: right;
} }
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-4xl { .sm\:text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;
@ -1413,11 +1342,6 @@ body {
line-height: 1; line-height: 1;
} }
.sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:text-xl { .sm\:text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -1461,10 +1385,6 @@ body {
width: auto; width: auto;
} }
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:gap-4 { .md\:gap-4 {
gap: 1rem; gap: 1rem;
} }
@ -1473,28 +1393,20 @@ body {
border-radius: 0px; border-radius: 0px;
} }
.md\:rounded-3xl {
border-radius: 1.5rem;
}
.md\:bg-transparent { .md\:bg-transparent {
background-color: transparent; background-color: transparent;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.lg\:mt-28 {
margin-top: 7rem;
}
.lg\:-mt-\[64px\] {
margin-top: -64px;
}
.lg\:-mt-\[60px\] { .lg\:-mt-\[60px\] {
margin-top: -60px; margin-top: -60px;
} }
.lg\:mt-28 {
margin-top: 7rem;
}
.lg\:w-\[64px\] { .lg\:w-\[64px\] {
width: 64px; width: 64px;
} }
@ -1503,14 +1415,6 @@ body {
scroll-margin-top: 1rem; scroll-margin-top: 1rem;
} }
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:text-4xl { .lg\:text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;