From a844c378005ae381e19f4635c165803e011bf8cd Mon Sep 17 00:00:00 2001
From: zach <zachary.b.harding@gmail.com>
Date: Wed, 25 Feb 2026 20:31:13 -0500
Subject: [PATCH] fix 100% height header and added auth to /pokemon

---
 src/assets/css/main.scss           | 17 ++++++++++-------
 src/components/PokedexHeader.astro |  7 +++----
 src/middleware.ts                  | 15 +++++++++++++--
 src/pages/index.astro              |  2 --
 src/pages/pokemon.astro            |  5 ++++-
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index dfd55c4..4c8e388 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -94,6 +94,7 @@
 }
 
 .pokedex-page {
+  z-index: 99;
   position: relative;
   top: 50px;
   @media (min-width: 768px) {
@@ -426,7 +427,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
 }
@@ -444,7 +445,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
 }
@@ -460,7 +461,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000d 40%, #000, #000d 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));      
 }
@@ -483,7 +484,7 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
     margin: 0 auto; /* Remove default margin */
       --a: 8deg; 
       /* Initial mask to create the shine line */
-      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
+      mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
       transition: .4s; 
   transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));        
 }
@@ -492,9 +493,11 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
 .header-top { 
   /* pin to top - 0 is default */
   bottom: 0;
+  position: fixed;
   /* raise z-index to cover, higher here to allow 
      a range of z-indexes in the scrolling content */
   z-index: 100;
+  max-height: 150px;
   transform:rotate(180deg);
   /* height overflows */
   @media (min-width:768px) {
@@ -661,9 +664,9 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
   height: $hdr-topwell-height;
   width: 100%;
   border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
-@media (min-width:768px) {
-    border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
-}
+  @media (min-width:768px) {
+      border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
+  }
 }
 
 /* NAV */
diff --git a/src/components/PokedexHeader.astro b/src/components/PokedexHeader.astro
index fc907ad..c238845 100644
--- a/src/components/PokedexHeader.astro
+++ b/src/components/PokedexHeader.astro
@@ -1,9 +1,8 @@
 ---
 import '/src/assets/css/main.scss';
-import StickyFilter from './StickyFilter.astro';
 ---
 
-<header class="header-top position-fixed w-100">
+<header class="header-top w-100">
     <div class="header-wrap">
         <div class="header-content">
             <div class="header-logo d-none d-md-block">
@@ -11,10 +10,10 @@ import StickyFilter from './StickyFilter.astro';
             </div>
         </div>
         <div class="header-logo-patch d-none d-md-block"></div>
-        <nav class="nav-main horizontal-nav">
+        <nav class="nav-main horizontal-nav d-none">
         </nav>
         <div class="header-social pt-3">
-            <StickyFilter />
+            <slot />
             <div class="redCircle d-none d-md-block"></div>
             <div class="yellowCircle d-none d-md-block"></div>
             <div class="greenCircle d-none d-md-block"></div>
diff --git a/src/middleware.ts b/src/middleware.ts
index dfab452..84f3350 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,3 +1,14 @@
-import { clerkMiddleware } from "@clerk/astro/server";
+// src/middleware.ts
+import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
+import type { AstroMiddlewareRequest, AstroMiddlewareResponse } from 'astro';
 
-export const onRequest = clerkMiddleware();
+const isProtectedRoute = createRouteMatcher([
+  '/pokemon',
+]);
+
+export const onRequest = clerkMiddleware((auth, context) => {
+  if (!auth().userId && isProtectedRoute(context.request)) {
+    // Redirect unauthenticated users to the sign-in page
+    return auth().redirectToSignIn(); 
+  }
+});
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e56942a..d61a8af 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,8 +2,6 @@
 import Layout from '../layouts/Main.astro';
 import PokedexHeader from '../components/PokedexHeader.astro';
 export const prerender = false;
-
 ---
-
 <Layout>
 <PokedexHeader />
\ No newline at end of file
diff --git a/src/pages/pokemon.astro b/src/pages/pokemon.astro
index 5f2bb29..acbe2f9 100644
--- a/src/pages/pokemon.astro
+++ b/src/pages/pokemon.astro
@@ -2,12 +2,15 @@
 import Layout from '../layouts/Main.astro';
 import CardGrid from "../components/CardGrid.astro";
 import PokedexHeader from '../components/PokedexHeader.astro';
+import StickyFilter from '../components/StickyFilter.astro';
 export const prerender = false;
 
 ---
 
 <Layout>
-<PokedexHeader />
+<PokedexHeader>
+    <StickyFilter />
+</PokedexHeader>
 <div class="container">
     <CardGrid />
     <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">