mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
refactor: update container size
This commit is contained in:
parent
5b510c784e
commit
3aadccd58e
GPG key ID:
858E8EE696525EED
3 changed files with 153 additions and 341 deletions
14
index.html
14
index.html
|
|
@ -24,8 +24,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-screen" id="section_landing">
|
||||
<div class="container mx-auto text-white h-full max-h-[60vh] relative">
|
||||
<div class="container h-screen" id="section_landing">
|
||||
<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="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]" />
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</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="flex items-center justify-between gap-2 px-4">
|
||||
<img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</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>
|
||||
<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
|
||||
|
|
@ -81,9 +81,9 @@
|
|||
<p>Feel free to reach out anytime! I will be happy to chat.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-8 mt-16 text-white scroll-mt-24" id="section_links">
|
||||
<h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1>
|
||||
<div class="flex items-start justify-center gap-8">
|
||||
<div class="container py-16 text-white scroll-mt-12" id="section_links">
|
||||
<h1 class="mb-12 text-6xl font-bold text-center">LINKS</h1>
|
||||
<div class="flex flex-wrap gap-8 w-fit">
|
||||
<!-- Photo Links -->
|
||||
<div class="flex flex-col w-[416px] gap-4">
|
||||
<div class="relative w-[416px] h-[376px] flex justify-end items-end">
|
||||
|
|
|
|||
|
|
@ -556,6 +556,8 @@ video {
|
|||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
|
@ -582,9 +584,9 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
@media (min-width: 1760px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
max-width: 1760px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -604,6 +606,10 @@ video {
|
|||
inset: 0px;
|
||||
}
|
||||
|
||||
.bottom-\[50\%\] {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
|
@ -612,28 +618,12 @@ video {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.bottom-\[50\%\] {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.right-\[25\%\] {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.right-\[20\%\] {
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.right-\[15\%\] {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.bottom-\[35\%\] {
|
||||
bottom: 35%;
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
|
|
@ -654,24 +644,9 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
|
|
@ -694,36 +669,32 @@ video {
|
|||
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 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.aspect-\[342\/288\] {
|
||||
aspect-ratio: 342/288;
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.aspect-\[1\/1\] {
|
||||
aspect-ratio: 1/1;
|
||||
.h-14 {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.aspect-\[167\/53\] {
|
||||
aspect-ratio: 167/53;
|
||||
.h-20 {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.h-\[100px\] {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-\[180px\] {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.h-\[376px\] {
|
||||
height: 376px;
|
||||
}
|
||||
|
||||
.h-\[37px\] {
|
||||
|
|
@ -734,6 +705,10 @@ video {
|
|||
height: 75px;
|
||||
}
|
||||
|
||||
.h-\[81px\] {
|
||||
height: 81px;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -742,114 +717,6 @@ video {
|
|||
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-height: 40vh;
|
||||
}
|
||||
|
|
@ -862,6 +729,30 @@ video {
|
|||
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\] {
|
||||
width: 256px;
|
||||
}
|
||||
|
|
@ -878,109 +769,21 @@ video {
|
|||
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\] {
|
||||
width: 416px;
|
||||
}
|
||||
|
||||
.w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-\[173px\] {
|
||||
width: 173px;
|
||||
}
|
||||
|
||||
.w-\[163px\] {
|
||||
width: 163px;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[1200px\] {
|
||||
|
|
@ -999,24 +802,28 @@ video {
|
|||
max-width: 54.75%;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.scroll-mt-32 {
|
||||
scroll-margin-top: 8rem;
|
||||
}
|
||||
|
||||
.scroll-mt-20 {
|
||||
scroll-margin-top: 5rem;
|
||||
.scroll-mt-24 {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.scroll-mt-40 {
|
||||
scroll-margin-top: 10rem;
|
||||
}
|
||||
|
||||
.scroll-mt-24 {
|
||||
scroll-margin-top: 6rem;
|
||||
.scroll-mt-16 {
|
||||
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 {
|
||||
|
|
@ -1027,10 +834,6 @@ video {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -1108,6 +911,16 @@ video {
|
|||
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 {
|
||||
--tw-bg-opacity: 1;
|
||||
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));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#0E1621\] {
|
||||
.bg-white {
|
||||
--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));
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
|
|
@ -1153,24 +956,21 @@ video {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.p-\[8px\] {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
|
|
@ -1198,9 +998,19 @@ video {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
|
|
@ -1211,6 +1021,14 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-8 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-16 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1239,41 +1057,25 @@ video {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
.text-\[14px\] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-\[40px\] {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.text-\[20px\] {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text-\[10px\] {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.text-\[16px\] {
|
||||
font-size: 16px;
|
||||
.text-\[18px\] {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-\[24px\] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-\[14px\] {
|
||||
font-size: 14px;
|
||||
.text-\[40px\] {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.text-\[12px\] {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-\[18px\] {
|
||||
font-size: 18px;
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
|
|
@ -1301,16 +1103,16 @@ video {
|
|||
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 {
|
||||
--tw-text-opacity: 1;
|
||||
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,0);
|
||||
}
|
||||
|
|
@ -1453,7 +1255,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
@media (min-width: 1760px) {
|
||||
.\32xl\:w-\[512px\] {
|
||||
width: 512px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,16 @@ module.exports = {
|
|||
'bg-black': '#1E1E1E',
|
||||
'bg-gray': '#484848'
|
||||
},
|
||||
screens: {
|
||||
// 'sm': '640px',
|
||||
// 'md': '768px',
|
||||
// 'lg': '1024px',
|
||||
// 'xl': '1280px',
|
||||
'2xl': '1760px',
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue