Adding main box for astro-paper structure

eerison · eerison · commit 6e2ec542df87 · 2025-03-22T13:04:29.000+01:00
It was added a box div wrapping the whole structure, it will be easier
to change the layout when it is needed.

Added layout for structure

astro-paper structure
diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
@@ -6,7 +6,7 @@ import { SITE } from "@/config";
 
 {
   SITE.showBackButton && (
-    <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">
+    <div class="flex items-center justify-start">
       <LinkButton
         id="back-button"
         href="/"
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
 }
 ---
 
-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">
+<nav class="mt-8 mb-1" aria-label="breadcrumb">
   <ul
     class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
   >
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -12,7 +12,7 @@ const { noMarginTop = false } = Astro.props;
 ---
 
 <footer class:list={["w-full", { "mt-auto": !noMarginTop }]}>
-  <Hr noPadding />
+  <Hr />
   <div
     class="flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4"
   >
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -33,11 +33,12 @@ const isActive = (path: string) => {
   </a>
   <div
     id="nav-container"
-    class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
+    class="mx-auto flex flex-col items-center justify-between sm:flex-row"
   >
     <div
       id="top-nav-wrap"
-      class="relative flex w-full items-baseline justify-between bg-background p-4 sm:items-center sm:py-6"
+      class="relative flex w-full items-baseline justify-between bg-background py-4 sm:items-center sm:py-6"
+      class="relative flex w-full items-baseline justify-between bg-background py-4 sm:py-6"
     >
       <a
         href="/"
diff --git a/src/components/Hr.astro b/src/components/Hr.astro
@@ -1,12 +1,9 @@
 ---
 export interface Props {
-  noPadding?: boolean;
   ariaHidden?: boolean;
 }
 
-const { noPadding = false, ariaHidden = true } = Astro.props;
+const { ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
-  <hr class="border-border" aria-hidden={ariaHidden} />
-</div>
+<hr class="border-border" aria-hidden={ariaHidden} />
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
   <Header />
   <Breadcrumb />
   <main id="main-content">
-    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
+    <section id="about" class="prose mb-28 prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -130,15 +130,8 @@ const structuredData = {
     <script is:inline src="/toggle-theme.js"></script>
   </head>
   <body>
-    <slot />
+    <div id="box">
+      <slot />
+    </div>
   </body>
 </html>
-
-<style>
-  html,
-  body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -21,11 +21,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 ---
 
 <Breadcrumb />
-<main
-  data-backUrl={backUrl}
-  id="main-content"
-  class="mx-auto w-full max-w-3xl px-4 pb-4"
->
+<main data-backUrl={backUrl} id="main-content" class="pb-4">
   {
     "titleTransition" in props ? (
       <h1 class="text-2xl font-semibold sm:text-3xl">
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -85,10 +85,7 @@ const nextPost =
   <BackButton />
   <main
     id="main-content"
-    class:list={[
-      "mx-auto w-full max-w-3xl px-4 pb-12",
-      { "mt-8": !SITE.showBackButton },
-    ]}
+    class:list={["pb-12", { "mt-8": !SITE.showBackButton }]}
     data-pagefind-body
   >
     <h1
@@ -101,7 +98,7 @@ const nextPost =
       <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
       <EditPost class="max-sm:hidden" {hideEditPost} {post} />
     </div>
-    <article id="article" class="mx-auto prose mt-8 max-w-3xl">
+    <article id="article" class="prose mt-8">
       <Content />
     </article>
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -9,10 +9,7 @@ import { SITE } from "@/config";
 <Layout title={`404 Not Found | ${SITE.title}`}>
   <Header />
 
-  <main
-    id="main-content"
-    class="mx-auto flex max-w-3xl flex-1 items-center justify-center"
-  >
+  <main id="main-content" class="flex flex-1 items-center justify-center">
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-9xl font-bold text-accent">404</h1>
       <span aria-hidden="true">¯\_(ツ)_/¯</span>
diff --git a/src/pages/archives/index.astro b/src/pages/archives/index.astro
@@ -53,7 +53,7 @@ const months = [
             )
               .sort(([monthA], [monthB]) => Number(monthB) - Number(monthA))
               .map(([month, monthGroup]) => (
-                <div class="flex flex-col sm:flex-row">
+                <div class="posts flex flex-col sm:flex-row">
                   <div class="mt-6 min-w-36 text-lg sm:my-6">
                     <span class="font-bold">{months[Number(month) - 1]}</span>
                     <sup class="text-xs">{monthGroup.length}</sup>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -73,7 +73,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
     {
       featuredPosts.length > 0 && (
         <>
-          <section id="featured" class="pt-12 pb-6">
+          <section id="featured" class="posts pt-12 pb-6">
             <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
             <ul>
               {featuredPosts.map(data => (
@@ -88,7 +88,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
     {
       recentPosts.length > 0 && (
-        <section id="recent-posts" class="pt-12 pb-6">
+        <section id="recent-posts" class="posts pt-12 pb-6">
           <h2 class="text-2xl font-semibold tracking-wide">Recent Posts</h2>
           <ul>
             {recentPosts.map(
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
@@ -21,9 +21,11 @@ const { page } = Astro.props;
 <Layout title={`Posts | ${SITE.title}`}>
   <Header />
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
-    <ul>
-      {page.data.map(data => <Card {...data} />)}
-    </ul>
+    <div class="posts">
+      <ul>
+        {page.data.map(data => <Card {...data} />)}
+      </ul>
+    </div>
   </Main>
 
   <Pagination {page} />
diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/[...page].astro
@@ -39,9 +39,11 @@ const { page, tagName } = Astro.props;
     pageDesc={`All the articles with the tag "${tagName}".`}
   >
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
-    <ul>
-      {page.data.map(data => <Card {...data} />)}
-    </ul>
+    <div class="posts">
+      <ul>
+        {page.data.map(data => <Card {...data} />)}
+      </ul>
+    </div>
   </Main>
 
   <Pagination {page} />
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -35,10 +35,7 @@ html[data-theme="dark"] {
     scrollbar-color: var(--color-muted) transparent;
   }
   html {
-    @apply overflow-y-scroll scroll-smooth;
-  }
-  body {
-    @apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
+    @apply h-full overflow-y-scroll scroll-smooth;
   }
   a,
   button {
@@ -48,9 +45,15 @@ html[data-theme="dark"] {
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
-  section,
-  footer {
-    @apply mx-auto max-w-3xl px-4;
+}
+
+body {
+  @apply grid h-full justify-items-center bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
+  #box {
+    @apply w-full max-w-5xl px-4;
+    .prose {
+      @apply max-w-full;
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { SITE } from "@/config";`
`6`	`6`
`7`	`7`	`{`
`8`	`8`	`SITE.showBackButton && (`
`9`		`- <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">`
	`9`	`+ <div class="flex items-center justify-start">`
`10`	`10`	`<LinkButton`
`11`	`11`	`id="back-button"`
`12`	`12`	`href="/"`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {`
`23`	`23`	`}`
`24`	`24`	`---`
`25`	`25`
`26`		`-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">`
	`26`	`+<nav class="mt-8 mb-1" aria-label="breadcrumb">`
`27`	`27`	`<ul`
`28`	`28`	`class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"`
`29`	`29`	`>`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const { noMarginTop = false } = Astro.props;`
`12`	`12`	`---`
`13`	`13`
`14`	`14`	`<footer class:list={["w-full", { "mt-auto": !noMarginTop }]}>`
`15`		`- <Hr noPadding />`
	`15`	`+ <Hr />`
`16`	`16`	`<div`
`17`	`17`	`class="flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4"`
`18`	`18`	`>`