refactor: update container size

This commit is contained in:
Kentai Radiquum 2024-09-15 22:31:40 +05:00
parent 5b510c784e
commit 3aadccd58e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 153 additions and 341 deletions

View file

@ -24,8 +24,8 @@
</div> </div>
</div> </div>
</header> </header>
<div class="h-screen" id="section_landing"> <div class="container h-screen" id="section_landing">
<div class="container mx-auto text-white h-full max-h-[60vh] relative"> <div class="text-white h-full max-h-[60vh] relative">
<div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div> <div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div>
<div class="flex items-center justify-center gap-12 px-8 py-8"> <div class="flex items-center justify-center gap-12 px-8 py-8">
<img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" /> <img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container flex mx-auto text-white h-full max-h-[40vh]"> <div class="flex text-white h-full max-h-[40vh]">
<div class="max-w-[54.75%] bg-bg-gray py-4 w-full h-full"> <div class="max-w-[54.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]" />
@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container mx-auto text-white scroll-mt-40" id="section_about"> <div class="container py-10 text-white scroll-mt-10" id="section_about">
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1> <h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
<div class="flex flex-col gap-8 text-2xl font-light max-w-[1200px] mx-auto justify-center"> <div class="flex flex-col gap-8 text-2xl font-light max-w-[1200px] mx-auto justify-center">
<p>Hi! I'm Kentai Radiquum 🐾, a tech enthusiast with a passion for software development. I love <p>Hi! I'm Kentai Radiquum 🐾, a tech enthusiast with a passion for software development. I love
@ -81,9 +81,9 @@
<p>Feel free to reach out anytime! I will be happy to chat.</p> <p>Feel free to reach out anytime! I will be happy to chat.</p>
</div> </div>
</div> </div>
<div class="flex flex-col items-center justify-center p-8 mt-16 text-white scroll-mt-24" id="section_links"> <div class="container py-16 text-white scroll-mt-12" id="section_links">
<h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1> <h1 class="mb-12 text-6xl font-bold text-center">LINKS</h1>
<div class="flex items-start justify-center gap-8"> <div class="flex flex-wrap gap-8 w-fit">
<!-- Photo Links --> <!-- Photo Links -->
<div class="flex flex-col w-[416px] gap-4"> <div class="flex flex-col w-[416px] gap-4">
<div class="relative w-[416px] h-[376px] flex justify-end items-end"> <div class="relative w-[416px] h-[376px] flex justify-end items-end">

View file

@ -556,6 +556,8 @@ video {
.container { .container {
width: 100%; width: 100%;
margin-right: auto;
margin-left: auto;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@ -582,9 +584,9 @@ video {
} }
} }
@media (min-width: 1536px) { @media (min-width: 1760px) {
.container { .container {
max-width: 1536px; max-width: 1760px;
} }
} }
@ -604,6 +606,10 @@ video {
inset: 0px; inset: 0px;
} }
.bottom-\[50\%\] {
bottom: 50%;
}
.left-0 { .left-0 {
left: 0px; left: 0px;
} }
@ -612,28 +618,12 @@ video {
right: 0px; right: 0px;
} }
.top-0 {
top: 0px;
}
.bottom-\[50\%\] {
bottom: 50%;
}
.right-\[25\%\] {
right: 25%;
}
.right-\[20\%\] {
right: 20%;
}
.right-\[15\%\] { .right-\[15\%\] {
right: 15%; right: 15%;
} }
.bottom-\[35\%\] { .top-0 {
bottom: 35%; top: 0px;
} }
.-z-10 { .-z-10 {
@ -654,24 +644,9 @@ video {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.mx-4 { .my-8 {
margin-left: 1rem; margin-top: 2rem;
margin-right: 1rem; margin-bottom: 2rem;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
} }
.mb-12 { .mb-12 {
@ -694,36 +669,32 @@ video {
margin-top: 4rem; margin-top: 4rem;
} }
.mt-20 {
margin-top: 5rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.mt-24 {
margin-top: 6rem;
}
.flex { .flex {
display: flex; display: flex;
} }
.aspect-\[342\/288\] { .h-10 {
aspect-ratio: 342/288; height: 2.5rem;
} }
.aspect-\[1\/1\] { .h-14 {
aspect-ratio: 1/1; height: 3.5rem;
} }
.aspect-\[167\/53\] { .h-20 {
aspect-ratio: 167/53; height: 5rem;
}
.h-\[100px\] {
height: 100px;
}
.h-\[180px\] {
height: 180px;
}
.h-\[376px\] {
height: 376px;
} }
.h-\[37px\] { .h-\[37px\] {
@ -734,6 +705,10 @@ video {
height: 75px; height: 75px;
} }
.h-\[81px\] {
height: 81px;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -742,114 +717,6 @@ video {
height: 100vh; height: 100vh;
} }
.h-\[288px\] {
height: 288px;
}
.h-\[139px\] {
height: 139px;
}
.h-\[142px\] {
height: 142px;
}
.h-\[146px\] {
height: 146px;
}
.h-\[150px\] {
height: 150px;
}
.h-\[296px\] {
height: 296px;
}
.h-\[304px\] {
height: 304px;
}
.h-24 {
height: 6rem;
}
.h-20 {
height: 5rem;
}
.h-16 {
height: 4rem;
}
.h-14 {
height: 3.5rem;
}
.h-\[180px\] {
height: 180px;
}
.h-\[416px\] {
height: 416px;
}
.h-\[376px\] {
height: 376px;
}
.h-\[115px\] {
height: 115px;
}
.h-\[125px\] {
height: 125px;
}
.h-\[100px\] {
height: 100px;
}
.h-\[55px\] {
height: 55px;
}
.h-\[67px\] {
height: 67px;
}
.h-\[70px\] {
height: 70px;
}
.h-\[80px\] {
height: 80px;
}
.h-\[70\] {
height: 70;
}
.h-\[90px\] {
height: 90px;
}
.h-10 {
height: 2.5rem;
}
.h-8 {
height: 2rem;
}
.h-\[81px\] {
height: 81px;
}
.h-\[82px\] {
height: 82px;
}
.max-h-\[40vh\] { .max-h-\[40vh\] {
max-height: 40vh; max-height: 40vh;
} }
@ -862,6 +729,30 @@ video {
max-height: 60vh; max-height: 60vh;
} }
.w-10 {
width: 2.5rem;
}
.w-14 {
width: 3.5rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.w-\[173px\] {
width: 173px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[256px\] { .w-\[256px\] {
width: 256px; width: 256px;
} }
@ -878,109 +769,21 @@ video {
width: 320px; width: 320px;
} }
.w-\[64px\] {
width: 64px;
}
.w-full {
width: 100%;
}
.w-\[342px\] {
width: 342px;
}
.w-\[167px\] {
width: 167px;
}
.w-\[170px\] {
width: 170px;
}
.w-\[350px\] {
width: 350px;
}
.w-\[356px\] {
width: 356px;
}
.w-24 {
width: 6rem;
}
.w-20 {
width: 5rem;
}
.w-\[180px\] {
width: 180px;
}
.w-\[190px\] {
width: 190px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[210px\] {
width: 210px;
}
.w-\[220px\] {
width: 220px;
}
.w-\[2000px\] {
width: 2000px;
}
.w-16 {
width: 4rem;
}
.w-14 {
width: 3.5rem;
}
.w-\[386px\] {
width: 386px;
}
.w-\[390px\] {
width: 390px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[416px\] { .w-\[416px\] {
width: 416px; width: 416px;
} }
.w-\[64px\] {
width: 64px;
}
.w-fit { .w-fit {
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
} }
.w-\[173px\] { .w-full {
width: 173px; width: 100%;
}
.w-\[163px\] {
width: 163px;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
} }
.max-w-\[1200px\] { .max-w-\[1200px\] {
@ -999,24 +802,28 @@ video {
max-width: 54.75%; max-width: 54.75%;
} }
.flex-1 { .scroll-mt-24 {
flex: 1 1 0%; scroll-margin-top: 6rem;
}
.scroll-mt-32 {
scroll-margin-top: 8rem;
}
.scroll-mt-20 {
scroll-margin-top: 5rem;
} }
.scroll-mt-40 { .scroll-mt-40 {
scroll-margin-top: 10rem; scroll-margin-top: 10rem;
} }
.scroll-mt-24 { .scroll-mt-16 {
scroll-margin-top: 6rem; scroll-margin-top: 4rem;
}
.scroll-mt-12 {
scroll-margin-top: 3rem;
}
.scroll-mt-8 {
scroll-margin-top: 2rem;
}
.scroll-mt-10 {
scroll-margin-top: 2.5rem;
} }
.flex-col { .flex-col {
@ -1027,10 +834,6 @@ video {
flex-wrap: wrap; flex-wrap: wrap;
} }
.items-start {
align-items: flex-start;
}
.items-end { .items-end {
align-items: flex-end; align-items: flex-end;
} }
@ -1108,6 +911,16 @@ video {
border-color: rgb(0 0 0 / var(--tw-border-opacity)); border-color: rgb(0 0 0 / var(--tw-border-opacity));
} }
.bg-\[\#0E1621\] {
--tw-bg-opacity: 1;
background-color: rgb(14 22 33 / var(--tw-bg-opacity));
}
.bg-\[\#F5F5F5\] {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.bg-bg-black { .bg-bg-black {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(30 30 30 / var(--tw-bg-opacity)); background-color: rgb(30 30 30 / var(--tw-bg-opacity));
@ -1128,24 +941,14 @@ video {
background-color: rgb(255 71 139 / var(--tw-bg-opacity)); background-color: rgb(255 71 139 / var(--tw-bg-opacity));
} }
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-black { .bg-black {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity)); background-color: rgb(0 0 0 / var(--tw-bg-opacity));
} }
.bg-\[\#0E1621\] { .bg-white {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(14 22 33 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-\[\#F5F5F5\] {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
} }
.object-cover { .object-cover {
@ -1153,24 +956,21 @@ video {
object-fit: cover; object-fit: cover;
} }
.p-8 {
padding: 2rem;
}
.p-2 { .p-2 {
padding: 0.5rem; padding: 0.5rem;
} }
.p-8 {
padding: 2rem;
}
.p-\[8px\] { .p-\[8px\] {
padding: 8px; padding: 8px;
} }
.p-1 { .px-2 {
padding: 0.25rem; padding-left: 0.5rem;
} padding-right: 0.5rem;
.p-4 {
padding: 1rem;
} }
.px-4 { .px-4 {
@ -1198,9 +998,19 @@ video {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.px-2 { .py-16 {
padding-left: 0.5rem; padding-top: 4rem;
padding-right: 0.5rem; padding-bottom: 4rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
} }
.pb-2 { .pb-2 {
@ -1211,6 +1021,14 @@ video {
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.pb-8 {
padding-bottom: 2rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -1239,41 +1057,25 @@ video {
line-height: 1; line-height: 1;
} }
.text-xl { .text-\[14px\] {
font-size: 1.25rem; font-size: 14px;
line-height: 1.75rem;
} }
.text-\[40px\] { .text-\[18px\] {
font-size: 40px; font-size: 18px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[16px\] {
font-size: 16px;
} }
.text-\[24px\] { .text-\[24px\] {
font-size: 24px; font-size: 24px;
} }
.text-\[14px\] { .text-\[40px\] {
font-size: 14px; font-size: 40px;
} }
.text-\[12px\] { .text-xl {
font-size: 12px; font-size: 1.25rem;
} line-height: 1.75rem;
.text-\[18px\] {
font-size: 18px;
} }
.font-bold { .font-bold {
@ -1301,16 +1103,16 @@ video {
color: rgb(255 71 139 / var(--tw-text-opacity)); color: rgb(255 71 139 / var(--tw-text-opacity));
} }
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-black { .text-black {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity)); color: rgb(0 0 0 / var(--tw-text-opacity));
} }
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-\[var\(--header-opacity\2c 0\)\] { .opacity-\[var\(--header-opacity\2c 0\)\] {
opacity: var(--header-opacity,0); opacity: var(--header-opacity,0);
} }
@ -1453,7 +1255,7 @@ body {
} }
} }
@media (min-width: 1536px) { @media (min-width: 1760px) {
.\32xl\:w-\[512px\] { .\32xl\:w-\[512px\] {
width: 512px; width: 512px;
} }

View file

@ -9,6 +9,16 @@ module.exports = {
'bg-black': '#1E1E1E', 'bg-black': '#1E1E1E',
'bg-gray': '#484848' 'bg-gray': '#484848'
}, },
screens: {
// 'sm': '640px',
// 'md': '768px',
// 'lg': '1024px',
// 'xl': '1280px',
'2xl': '1760px',
},
container: {
center: true,
},
}, },
}, },
plugins: [], plugins: [],