mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
refactor: move collections & friends back to 4th column
This commit is contained in:
parent
6be363d8a3
commit
acb8dd1425
GPG key ID:
858E8EE696525EED
2 changed files with 98 additions and 196 deletions
64
index.html
64
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,20 +502,17 @@
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid w-full gap-1 mt-4 grid-cols-fluid">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<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="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]">COLLECTIONS & FRIENDS</p>
|
||||
<p class="font-bold text-4xl p-[8px] text-right">COLLECTIONS & FRIENDS</p>
|
||||
</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"
|
||||
<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">
|
||||
|
|
@ -519,24 +522,18 @@
|
|||
</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"
|
||||
<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">Collection with 3000+ Photos
|
||||
and
|
||||
Videos of a red pandas</p>
|
||||
<p class="text-base font-light">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"
|
||||
<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">
|
||||
|
|
@ -547,10 +544,8 @@
|
|||
</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"
|
||||
<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">
|
||||
|
|
@ -563,6 +558,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="./static/script.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue