refactor: edit card margins

This commit is contained in:
Kentai Radiquum 2024-09-23 14:01:52 +05:00
parent 0bf069e257
commit 091633d2f5
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 7 additions and 3 deletions

View file

@ -89,7 +89,7 @@
</div> </div>
<div class="container min-h-screen px-2 py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_about"> <div class="container min-h-screen px-2 py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_about">
<h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1> <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
<div class="flex flex-wrap gap-8 mx-auto sm:justify-center w-fit"> <div class="flex flex-wrap gap-4 mx-auto sm:justify-center w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]"> <div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray"> <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p> <p class="font-bold text-3xl sm:text-4xl p-[8px]">Tech enthusiast</p>
@ -98,7 +98,7 @@
<p class="text-xl font-light sm:text-2xl">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p> <p class="text-xl font-light sm:text-2xl">I'm a tech enthusiast with a passion for software development. I love diving into code and exploring new software, though hardware fascinates me too.</p>
</div> </div>
</div> </div>
<div class="flex flex-col gap-8 w-fit"> <div class="flex flex-col gap-4 w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]"> <div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray"> <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Self-Hosting stuff</p> <p class="font-bold text-3xl sm:text-4xl p-[8px]">Self-Hosting stuff</p>
@ -124,7 +124,7 @@
<p class="text-xl font-light sm:text-2xl">One of my biggest loves is red pandas—I cant get enough of them! Ive been collecting red panda stickers and sharing them on the <a class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, Ive curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p> <p class="text-xl font-light sm:text-2xl">One of my biggest loves is red pandas—I cant get enough of them! Ive been collecting red panda stickers and sharing them on the <a class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus, Ive curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and videos.</p>
</div> </div>
</div> </div>
<div class="flex flex-col gap-8 w-fit"> <div class="flex flex-col gap-4 w-fit">
<div class="flex flex-col w-[344px] sm:w-[416px]"> <div class="flex flex-col w-[344px] sm:w-[416px]">
<div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-pink"> <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-pink">
<p class="font-bold text-3xl sm:text-4xl p-[8px]">Music</p> <p class="font-bold text-3xl sm:text-4xl p-[8px]">Music</p>

View file

@ -1521,6 +1521,10 @@ body {
.md\:w-auto { .md\:w-auto {
width: auto; width: auto;
} }
.md\:gap-8 {
gap: 2rem;
}
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {