layout: changed content container sizes

EATSTEAK · Jun 8, 2024 · 21849d2 · 21849d2
1 parent b37b346
commit 21849d2
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -9,7 +9,7 @@ export const Container: Component<{ children: any, varient?: ContainerVarient }>
       case "normal":
         return "max-w-5xl"
       default:
-        return "max-w-[96rem]"
+        return "max-w-screen-xl"
     }
   }
   return (

diff --git a/src/components/GrillContainer.tsx b/src/components/GrillContainer.tsx
@@ -10,7 +10,7 @@ export const GrillContainer: Component<{
     <section class={props.parentClassOverride ?? "relative h-72"}>
       <Show when={props.absoluteBackground}>
         <div class="absolute top-0 right-0 w-full h-full">
-          <div class="mx-auto max-w-[96rem] w-full h-full flex justify-end overflow-hidden">
+          <div class="mx-auto max-w-screen-xl w-full h-full flex justify-end overflow-hidden">
             {props.absoluteBackground}
           </div>
         </div>
@@ -19,7 +19,7 @@ export const GrillContainer: Component<{
         <div
           class={
             props.containerClassOverride ??
-            "slide-to-top py-8 px-6 lg:mx-auto h-full w-full max-w-[96rem] flex flex-col items-start justify-end gap-2"
+            "slide-to-top py-8 px-6 lg:mx-auto h-full w-full max-w-screen-xl flex flex-col items-start justify-end gap-2"
           }
         >
           {props.children}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -5,7 +5,7 @@ export const Header = (props: { page: string }) => {
     props.page.startsWith(page) ? "nav-link link-selected" : "nav-link";
   return (
     <header class="flex justify-center content-center px-6 py-6">
-      <div class="grow max-w-[96rem] flex flex-wrap gap-4 lg:gap-16 justify-between lg:justify-start content-center">
+      <div class="grow max-w-screen-xl flex flex-wrap gap-4 lg:gap-16 justify-between lg:justify-start content-center">
         <h2 class="shrink-0 min-w-fit order-1">
           <a href="/">
             <img

diff --git a/src/components/PostItem.tsx b/src/components/PostItem.tsx
@@ -26,7 +26,7 @@ export const PostItem: Component<{ post: CollectionEntry<"blog"> }> = (
         <h4 class="mt-2">
           <span class="nav-link">{props.post.data.title}</span>
         </h4>
-        <div class="date mb-2 text-gray-500">
+        <div class="text-xs date mb-2 text-gray-500">
           <FormattedDate dateTime={props.post.data.pubDate} />
           {props.post.data.updatedDate && (
             <div class="last-updated-on">

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -19,10 +19,13 @@ const page = pathname.slice(1);
     <BaseHead title={title} description={description} image={image} />
   </head>
   <body
-    class="flex flex-col dark:bg-slate-900 dark:text-white transition-colors"
+    class="relative -z-20 flex flex-col bg-slate-50 dark:bg-slate-900 dark:text-white transition-colors"
   >
-    <Header page={page} client:only="solid-js" />
-    <slot />
+    <div class="relative -z-10 bg-white dark:bg-slate-950">
+      <Header page={page} client:only="solid-js" />
+      <slot />
+    </div>
+
     <Footer />
   </body>
 </html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -7,7 +7,7 @@ import Layout from "../layouts/Layout.astro";
 <Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
   <main class="flex flex-col items-stretch justify-start">
     <GrillContainer
-      containerClassOverride="slide-to-top py-8 px-6 lg:mx-auto h-full w-full max-w-[96rem] flex flex-col items-center justify-center gap-2"
+      containerClassOverride="slide-to-top py-8 px-6 lg:mx-auto h-full w-full max-w-screen-xl flex flex-col items-center justify-center gap-2"
     >
       <p
         class="py-2 px-2 m-0 font-head font-bold text-5xl bg-gray-800 text-white