mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 15:54:34 +00:00
feat: responsive about and links sections
This commit is contained in:
parent
7ba444cb21
commit
6c0f477436
GPG key ID:
858E8EE696525EED
3 changed files with 49 additions and 108 deletions
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
<div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_about">
|
||||
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
|
||||
<div class="flex flex-wrap gap-8 w-fit">
|
||||
<div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
|
||||
<p class="font-bold text-4xl p-[8px]">Tech enthusiast</p>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-[416px]">
|
||||
<div class="flex flex-col w-[416px] xl:-mt-[248px] 2xl:-mt-0">
|
||||
<div class="relative w-[416px] h-[120px] flex justify-center items-center bg-orange-600">
|
||||
<p class="font-bold text-4xl p-[8px]">Red Pandas admirer</p>
|
||||
</div>
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
</div>
|
||||
<div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_links">
|
||||
<h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1>
|
||||
<div class="flex flex-wrap gap-8 w-fit">
|
||||
<div class="flex flex-wrap justify-center gap-8 mx-auto 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 overflow-hidden" id="photos-image">
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Contact and Friends links Links -->
|
||||
<div class="flex flex-col w-[416px] gap-4">
|
||||
<div class="flex flex-col w-[416px] gap-8 xl:gap-4 xl:-mt-[196px] 2xl:-mt-0">
|
||||
<!-- Contact Links -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-pink">
|
||||
|
|
|
|||
|
|
@ -572,21 +572,21 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (min-width: 1800px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1760px) {
|
||||
.container {
|
||||
max-width: 1760px;
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -793,10 +793,6 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[1200px\] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.max-w-\[45\%\] {
|
||||
max-width: 45%;
|
||||
}
|
||||
|
|
@ -818,10 +814,6 @@ video {
|
|||
scroll-margin-top: 3rem;
|
||||
}
|
||||
|
||||
.scroll-mt-20 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -950,71 +942,25 @@ video {
|
|||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-green-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(234 88 12 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-70 {
|
||||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
||||
.bg-opacity-20 {
|
||||
--tw-bg-opacity: 0.2;
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-opacity-5 {
|
||||
--tw-bg-opacity: 0.05;
|
||||
}
|
||||
|
||||
.bg-opacity-80 {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
|
@ -1051,11 +997,6 @@ video {
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
|
@ -1084,18 +1025,6 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.pt-24 {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1215,10 +1144,6 @@ video {
|
|||
filter: darken(10%);
|
||||
}
|
||||
|
||||
.\[filter\:lighen\(10\%\)\] {
|
||||
filter: lighen(10%);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
|
||||
|
|
@ -1305,6 +1230,35 @@ body {
|
|||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.xl\:-mt-\[196px\] {
|
||||
margin-top: -196px;
|
||||
}
|
||||
|
||||
.xl\:-mt-\[248px\] {
|
||||
margin-top: -248px;
|
||||
}
|
||||
|
||||
.xl\:gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.xl\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.xl\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:w-\[372px\] {
|
||||
width: 372px;
|
||||
|
|
@ -1330,24 +1284,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
@media (min-width: 1800px) {
|
||||
.\32xl\:-mt-0 {
|
||||
margin-top: -0px;
|
||||
}
|
||||
|
||||
.xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.xl\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1760px) {
|
||||
.\32xl\:w-\[512px\] {
|
||||
width: 512px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ module.exports = {
|
|||
// 'sm': '640px',
|
||||
// 'md': '768px',
|
||||
// 'lg': '1024px',
|
||||
// 'xl': '1280px',
|
||||
'2xl': '1760px',
|
||||
'xl': '1000px',
|
||||
'2xl': '1800px',
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue