Fixed some responsive layout issues

This commit is contained in:
Alexis
2025-06-09 22:43:01 +02:00
parent af13d934fa
commit 6292e92311
2 changed files with 10 additions and 8 deletions

View File

@@ -7,17 +7,17 @@ const { tag = "h1" } = Astro.props;
--- ---
{tag === 'h1' && {tag === 'h1' &&
<h1 class="font-heading text-5xl font-bold"> <h1 class="font-heading text-4xl md:text-5xl font-bold">
<slot name="default" /> <slot name="default" />
</h1> </h1>
} }
{tag === 'h2' && {tag === 'h2' &&
<h2 class="font-heading text-3xl font-bold"> <h2 class="font-heading text-xl md:text-3xl font-bold">
<slot name="default" /> <slot name="default" />
</h2> </h2>
} }
{tag === 'h3' && {tag === 'h3' &&
<h3 class="font-heading text-xl font-bold"> <h3 class="font-heading md:text-xl font-bold">
<slot name="default" /> <slot name="default" />
</h3> </h3>
} }

View File

@@ -7,13 +7,13 @@ import BgParticles from "./BgParticles.astro";
<section id="hero" class="relative h-screen overflow-clip max-w-full"> <section id="hero" class="relative h-screen overflow-clip max-w-full">
<div class="h-full container grid place-items-center auto-rows-auto"> <div class="h-full container grid place-items-center auto-rows-auto">
<div class="max-w-2xl text-center"> <div class="px-4 max-w-2xl text-center">
<Heading tag="h1"> <Heading tag="h1">
Hello, I'm Alexis ! 👋 Hello, I'm Alexis&nbsp;!&nbsp;👋
</Heading> </Heading>
<div class="mt-4"> <div class="mt-4">
<p class="text-xl"> <p class="md:text-xl">
I'm a front-end engineer from France and all-around web enthusiast. I'm a front-end engineer from France and all-around web enthusiast.
</p> </p>
</div> </div>
@@ -21,8 +21,8 @@ import BgParticles from "./BgParticles.astro";
<hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" /> <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" />
<div> <div>
<p class="text-xl"> <p class="md:text-xl">
Let's build something cool together :) Let's build something cool together&nbsp;:)
</p> </p>
</div> </div>
@@ -50,6 +50,8 @@ import BgParticles from "./BgParticles.astro";
</div> </div>
</div> </div>
<p class="absolute px-4 bottom-8 left-1/2 -translate-x-1/2 opacity-50 text-xs md:text-sm text-center">@2025&nbsp;·&nbsp;Website is currently a WIP&nbsp;;&nbsp;some things may change&nbsp;!</p>
<div <div
id="grid-bg-wrapper" id="grid-bg-wrapper"
class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none" class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"