From acb8dd1425b5d12c03e0923d2c4351ec977dd9f5 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 24 Nov 2024 21:53:13 +0500
Subject: [PATCH] refactor: move collections & friends back to 4th column
---
index.html | 148 ++++++++++++++++++++++----------------------
static/tailwind.css | 146 ++++++++-----------------------------------
2 files changed, 98 insertions(+), 196 deletions(-)
diff --git a/index.html b/index.html
index 0dcb69b..74ad5bd 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,8 @@
</head>
<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">
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
<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-gray -z-10 left-0 bottom-0 max-h-[50vh] hidden md:block">
</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>
@@ -126,9 +128,9 @@
<p class="text-4xl font-bold">Photographer</p>
</div>
<div class="flex justify-center px-8 py-4 bg-yellow-500 bg-opacity-40">
- <p class="text-lg font-light">I’m also getting into <a
- class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank"
- referrerpolicy="origin">photography</a> and excited to share my progress.</p>
+ <p class="text-lg font-light">I’m also getting into <a class="text-bg-pink hover:underline"
+ href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and
+ excited to share my progress.</p>
</div>
</div>
</div>
@@ -229,7 +231,7 @@
<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
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>
@@ -244,7 +246,8 @@
<div class="flex flex-col gap-4">
<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"
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)]"
@@ -303,7 +306,8 @@
<div class="flex flex-col gap-4">
<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">
<p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
</div>
@@ -367,7 +371,8 @@
<div class="flex flex-col gap-4">
<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">
<p class="font-bold text-4xl p-[8px]">PROJECTS</p>
</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"
href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
<div
- class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
- <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]"
+ 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] -z-10"
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-base font-light">Telegram bot to use telegram as a Google
Photo alternative</p>
@@ -447,7 +452,8 @@
<div class="flex flex-col gap-4">
<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">
<p class="font-bold text-4xl p-[8px]">CONTACT</p>
</div>
@@ -496,72 +502,64 @@
</div>
</a>
</div>
- </div>
- </div>
-
- <div class="grid w-full gap-1 mt-4 grid-cols-fluid">
- <div class="flex flex-col gap-4">
- <div class="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-orange-400">
- <p class="font-bold text-4xl p-[8px]">COLLECTIONS & FRIENDS</p>
+ <div class="flex flex-wrap w-full gap-1">
+ <div class="flex flex-col gap-4">
+ <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-orange-400">
+ <p class="font-bold text-4xl p-[8px] text-right">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 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>
<script src="./static/script.js"></script>
</body>
diff --git a/static/tailwind.css b/static/tailwind.css
index d2962e5..d8bc759 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -682,16 +682,6 @@ video {
margin-bottom: 1rem;
}
-.mx-2 {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
-}
-
-.mx-4 {
- margin-left: 1rem;
- margin-right: 1rem;
-}
-
.-mt-4 {
margin-top: -1rem;
}
@@ -712,18 +702,6 @@ video {
margin-top: 1rem;
}
-.-mt-\[128px\] {
- margin-top: -128px;
-}
-
-.-mt-\[64px\] {
- margin-top: -64px;
-}
-
-.-mt-\[60px\] {
- margin-top: -60px;
-}
-
.block {
display: block;
}
@@ -853,10 +831,6 @@ video {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
-.grid-cols-2 {
- grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
.flex-row {
flex-direction: row;
}
@@ -930,18 +904,14 @@ video {
border-radius: 1.5rem;
}
-.rounded {
- border-radius: 0.25rem;
+.rounded-lg {
+ border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
-.rounded-lg {
- border-radius: 0.5rem;
-}
-
.rounded-b-lg {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
@@ -1045,18 +1015,14 @@ video {
padding: 1rem;
}
-.p-\[16px\] {
- padding: 16px;
+.p-8 {
+ padding: 2rem;
}
.p-\[8px\] {
padding: 8px;
}
-.p-8 {
- padding: 2rem;
-}
-
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -1067,6 +1033,11 @@ video {
padding-right: 1rem;
}
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -1077,11 +1048,6 @@ video {
padding-bottom: 1rem;
}
-.px-8 {
- padding-left: 2rem;
- padding-right: 2rem;
-}
-
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -1091,6 +1057,10 @@ video {
text-align: center;
}
+.text-right {
+ text-align: right;
+}
+
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@@ -1111,13 +1081,13 @@ video {
line-height: 1.5rem;
}
-.text-xl {
- font-size: 1.25rem;
+.text-lg {
+ font-size: 1.125rem;
line-height: 1.75rem;
}
-.text-lg {
- font-size: 1.125rem;
+.text-xl {
+ font-size: 1.25rem;
line-height: 1.75rem;
}
@@ -1203,10 +1173,6 @@ video {
flex-grow: 1;
}
-.\[grid-column\:span_2\] {
- grid-column: span 2;
-}
-
@font-face {
font-family: 'Inter';
@@ -1297,34 +1263,14 @@ body {
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\] {
margin-top: -86px;
}
+ .sm\:mt-0 {
+ margin-top: 0px;
+ }
+
.sm\:block {
display: block;
}
@@ -1333,14 +1279,6 @@ body {
display: none;
}
- .sm\:h-\[120px\] {
- height: 120px;
- }
-
- .sm\:min-h-\[196px\] {
- min-height: 196px;
- }
-
.sm\:w-\[200px\] {
width: 200px;
}
@@ -1390,19 +1328,10 @@ body {
padding-bottom: 1rem;
}
- .sm\:pt-0 {
- padding-top: 0px;
- }
-
.sm\:text-right {
text-align: right;
}
- .sm\:text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
- }
-
.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@@ -1413,11 +1342,6 @@ body {
line-height: 1;
}
- .sm\:text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
- }
-
.sm\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
@@ -1461,10 +1385,6 @@ body {
width: auto;
}
- .md\:grid-cols-4 {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
-
.md\:gap-4 {
gap: 1rem;
}
@@ -1473,28 +1393,20 @@ body {
border-radius: 0px;
}
- .md\:rounded-3xl {
- border-radius: 1.5rem;
- }
-
.md\:bg-transparent {
background-color: transparent;
}
}
@media (min-width: 1024px) {
- .lg\:mt-28 {
- margin-top: 7rem;
- }
-
- .lg\:-mt-\[64px\] {
- margin-top: -64px;
- }
-
.lg\:-mt-\[60px\] {
margin-top: -60px;
}
+ .lg\:mt-28 {
+ margin-top: 7rem;
+ }
+
.lg\:w-\[64px\] {
width: 64px;
}
@@ -1503,14 +1415,6 @@ body {
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 {
font-size: 2.25rem;
line-height: 2.5rem;