responsive for tablets and hd screens

This commit is contained in:
Kentai Radiquum 2024-09-16 12:24:22 +05:00
parent 2c9fb22de2
commit 1a4ebe4fe1
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 15 additions and 3 deletions

View file

@ -36,8 +36,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex text-white h-full max-h-[40vh]"> <div class="flex flex-wrap text-white h-full max-h-[40vh]">
<div class="max-w-[53.75%] bg-bg-gray py-4 w-full h-full"> <div class="xl:max-w-[53.75%] bg-bg-gray py-4 w-full h-full">
<div class="flex items-center justify-between gap-2 px-4"> <div class="flex items-center justify-between gap-2 px-4">
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" /> <img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
<p class="text-3xl text-bg-pink">yaml</p> <p class="text-3xl text-bg-pink">yaml</p>
@ -56,7 +56,7 @@
href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p> href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p>
</div> </div>
</div> </div>
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] flex-col 2xl:flex-row"> <div class="flex items-end justify-end w-full xl:max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] xl:flex-col 2xl:flex-row">
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
href="#section_about">ABOUT ME</a> href="#section_about">ABOUT ME</a>
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"

View file

@ -1247,6 +1247,18 @@ body {
max-height: 40vh; max-height: 40vh;
} }
.xl\:max-w-\[53\.75\%\] {
max-width: 53.75%;
}
.xl\:max-w-\[45\%\] {
max-width: 45%;
}
.xl\:flex-col {
flex-direction: column;
}
.xl\:gap-4 { .xl\:gap-4 {
gap: 1rem; gap: 1rem;
} }