Fix Footer Positioning

By default the height of the content was pushing the footer off the bottom of the page. This has been fixed now so the footer is visible for pages that do not have much content. See docs.centrapay.com/api/introduction for an example
centrapay · Oct 5, 2023 · 57a3720 · 57a3720
1 parent 0e7e248
commit 57a3720
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/src/components/AppShell.vue b/src/components/AppShell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-full">
+  <div class="flex h-screen w-screen">
     <TransitionRoot
       as="template"
       :show="mainMenuOpen"
@@ -116,7 +116,7 @@
       </div>
     </div>
 
-    <main class="flex flex-col min-h-screen pt-16 md:pl-64 xl:pl-80">
+    <main class="flex flex-col min-h-full w-full pt-16 md:pl-64 xl:pl-80">
       <slot />
     </main>
   </div>

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -75,11 +75,9 @@ const navigation = Navigation.create({ nav: sideNavConfig, content });
   <body>
     <header>
     </header>
-    <div class="flex flex-col min-h-screen">
+    <div class="flex flex-col h-screen w-screen">
       <AppShell client:load path={Astro.url.pathname} baseUrl={Astro.url.origin} navigation={navigation}>
-        <main>
-          <slot />
-        </main>
+        <slot />
         <button
           id="freshdesk"
           type="button"

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -0,0 +1,9 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout>
+  <div class="desktop-gutters px-4 sm:px-8 my-32">
+    404
+  </div>
+</BaseLayout>
diff --git a/src/pages/api/[...slug].astro b/src/pages/api/[...slug].astro
@@ -34,7 +34,7 @@ const { title, description } = entry.data;
         </Prose>
       </article>
     </div>
-    <div class="hidden xl:sticky border-none xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:py-16 xl:pr-6 overflow-y-auto">
+    <div class="hidden xl:sticky border-none xl:top-[4.5rem] xl:block xl:h-[calc(100vh-10rem)] xl:flex-none xl:py-16 xl:pr-6 overflow-y-auto">
       <TocNav client:load headings={headings} />
     </div>
   </div>

diff --git a/src/pages/guides/[...slug].astro b/src/pages/guides/[...slug].astro
@@ -45,7 +45,7 @@ const { title, description } = entry.data;
         </Prose>
       </article>
     </div>
-    <div class="hidden xl:sticky border-none xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:py-16 xl:pr-6 overflow-y-auto">
+    <div class="hidden xl:sticky border-none xl:top-[4.5rem] xl:block xl:h-[calc(100vh-10rem)] xl:flex-none xl:py-16 xl:pr-6 overflow-y-auto">
       <TocNav client:load headings={headings} />
     </div>
   </div>