Nicholai/nicholai-work-2026
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dev): remove z-index stacking contexts blocking modal

Browse Source 
- remove z-10 from all sections to prevent stacking context issues
- remove z-10 from project card content div
- allows DevEngageModal z-9999 to properly appear above all content
- fixes bug where project cards appeared above fullscreen modal
This commit is contained in:
Nicholai Vogel 2026-01-20 08:58:35 -07:00
parent ad4b0921b1
commit ae1339bdbd
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/dev.astro
View File

@ -18,7 +18,7 @@ const pageTitle = `Dev | ${SITE_TITLE}`;
</div> </div>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative z-10 pb-16 lg:pb-20 overflow-hidden"> <section class="relative pb-16 lg:pb-20 overflow-hidden">
<!-- Floating accent orb --> <!-- Floating accent orb -->
<div class="absolute top-0 right-1/4 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none"></div> <div class="absolute top-0 right-1/4 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none"></div>
@ -60,7 +60,7 @@ const pageTitle = `Dev | ${SITE_TITLE}`;
</div> </div>
</section> </section>
<section class="relative z-10 py-24 container mx-auto px-6 lg:px-12"> <section class="relative py-24 container mx-auto px-6 lg:px-12">
<div class="grid grid-cols-1 gap-24"> <div class="grid grid-cols-1 gap-24">
{allProjects.map((project, index) => ( {allProjects.map((project, index) => (
<article <article
@ -68,7 +68,7 @@ const pageTitle = `Dev | ${SITE_TITLE}`;
data-project-index={index} data-project-index={index}
> >
<div class="relative z-10 w-full lg:w-1/3 p-8 lg:p-12 flex flex-col justify-between bg-[var(--theme-bg-secondary)]/95 backdrop-blur-sm border-b lg:border-b-0 lg:border-r border-[var(--theme-border-primary)] rounded-t-xl lg:rounded-t-none lg:rounded-l-xl"> <div class="relative w-full lg:w-1/3 p-8 lg:p-12 flex flex-col justify-between bg-[var(--theme-bg-secondary)]/95 backdrop-blur-sm border-b lg:border-b-0 lg:border-r border-[var(--theme-border-primary)] rounded-t-xl lg:rounded-t-none lg:rounded-l-xl">
<div> <div>
<div class="flex justify-between items-start mb-6"> <div class="flex justify-between items-start mb-6">
<span class="inline-block px-3 py-1 rounded-full bg-brand-accent/10 text-xs text-brand-accent"> <span class="inline-block px-3 py-1 rounded-full bg-brand-accent/10 text-xs text-brand-accent">
@ -154,7 +154,7 @@ const pageTitle = `Dev | ${SITE_TITLE}`;
</div> </div>
</section> </section>
<section class="relative z-10 py-32 border-t border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)]"> <section class="relative py-32 border-t border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)]">
<div class="container mx-auto px-6 lg:px-12"> <div class="container mx-auto px-6 lg:px-12">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-7"> <div class="lg:col-span-7">